Improve the mobile UX (#167)

Chunky PR

Reviewed-on: https://git.leftypol.org/leftypol/leftypol/pulls/167
Co-authored-by: Zankaria <zankaria.auxa@skiff.com>
Co-committed-by: Zankaria <zankaria.auxa@skiff.com>

js/auto-reload.js

@@ -224,7 +224,12 @@ $(document).ready(function(){
 
     var poll = function(manualUpdate) {
         stop_auto_update();
-        $('#update_secs').text(_("Updating..."));
+        let isScreenSmall = window.matchMedia('(max-width: 48em)').matches;
+        if (isScreenSmall) {
+            $('#update_secs').text('...');
+        } else {
+            $('#update_secs').text(_('Updating...'));
+        }
 
         $.ajax({
             cache: !manualUpdate,

js/post-filter.js

@@ -1,5 +1,6 @@
 /* Depends on post-menu.js
  * Usage:
+ * $config['additional_javascript'][] = 'js/jquery.min.js';
  * $config['additional_javascript'][] = 'js/post-menu.js';
  * $config['additional_javascript'][] = 'js/post-filter.js';
  */
@@ -181,13 +182,13 @@ if (active_page === 'thread' || active_page === 'index' || active_page === 'cata
 
 			$(ele).data('hidden', true);
 			if ($ele.hasClass('op')) {
-				$ele.parent().find('.body, .files, .video-container').not($ele.children('.reply').children()).hide();
+				$ele.parent().find('.head, .body, .files, .video-container').not($ele.children('.reply').children()).hide();
 
 				// hide thread replies on index view
 				if (active_page == 'index' || active_page == 'ukko') $ele.parent().find('.omitted, .reply:not(.hidden), post_no, .mentioned, br').hide();
 			} else {
 				// normal posts
-				$ele.children('.body, .files, .video-container').hide();
+				$ele.children('.head, .body, .files, .video-container').hide();
 			}
 		}
 		function show(ele) {
@@ -195,11 +196,11 @@ if (active_page === 'thread' || active_page === 'index' || active_page === 'cata
 
 			$(ele).data('hidden', false);
 			if ($ele.hasClass('op')) {
-				$ele.parent().find('.body, .files, .video-container').show();
+				$ele.parent().find('.head, .body, .files, .video-container').show();
 				if (active_page == 'index') $ele.parent().find('.omitted, .reply:not(.hidden), post_no, .mentioned, br').show();
 			} else {
 				// normal posts
-				$ele.children('.body, .files, .video-container').show();
+				$ele.children('.head, .body, .files, .video-container').show();
 			}
 		}
 
@@ -225,18 +226,19 @@ if (active_page === 'thread' || active_page === 'index' || active_page === 'cata
 				submenu.add_item('filter-remove-trip', _('Tripcode'));
 
 			Menu.onclick(function (e, $buffer) {
-				var ele = e.target.parentElement.parentElement;
+				let ele = e.target.parentElement.parentElement.parentElement;
-				var $ele = $(ele);
+				let $ele = $(ele);
 
-				var threadId = $ele.parent('.thread').attr('id').replace('thread_', '');
+				let threadNode = $ele.parent('.thread');
-				var boardId = $ele.parent().data('board');
+				let threadId = threadNode.attr('id').replace('thread_', '');
-				var postId = $ele.find('.post_no').not('[id]').text();
+				let boardId = $ele.parent().data('board');
+				let postId = $ele.find('.post_no').not('[id]').text();
 				if (pageData.hasUID) {
 					var postUid = $ele.find('.poster_id').text();
 				}
 
-				var postName;
+				let postName;
-				var postTrip = '';
+				let postTrip = '';
 				if (!pageData.forcedAnon) {
 					postName = (typeof $ele.find('.name').contents()[0] == 'undefined') ? '' : nameSpanToString($ele.find('.name')[0]);
 					postTrip = $ele.find('.trip').text();

js/post-hover.js

@@ -13,62 +13,117 @@
  *
  */
 
-$(document).ready(function () {
+/*
-	var dont_fetch_again = [];
+ * Unknown media types always return false, so old browsers (css media 3 or prior to css media) which do support
+ * any-hover or css media queries may return false negatives.
+ * Handle it by checking if the query is explicitly NOT supported.
+ */
+if (!window.matchMedia('(any-hover: none)').matches) {
+	$(document).ready(function () {
+		let isScreenSmall = false
+		/*
+		 * Set up screen size detection.
+		 * If the method is not defined, suppose the screen is always not-small.
+		 */
+		if (window.matchMedia) {
+			let query = window.matchMedia('(max-width: 48em)');
+
+			query.addEventListener('change', (e) => isScreenSmall = e.matches);
+			isScreenSmall = query.matches;
+		}
+
+		let dont_fetch_again = [];
 		init_hover = function() {
-		var $link = $(this);
+			let link = $(this);
 
-		var id;
+			let id;
-		var matches;
+			let matches;
 
-                if ($link.is('[data-thread]')) {
+			if (link.is('[data-thread]')) {
-                        id = $link.attr('data-thread');
+				id = link.attr('data-thread');
-                }
+			} else if (matches = link.text().match(/^>>(?:>\/([^\/]+)\/)?(\d+)$/)) {
-		else if(matches = $link.text().match(/^>>(?:>\/([^\/]+)\/)?(\d+)$/)) {
 				id = matches[2];
-		}
+			} else {
-		else {
 				return;
 			}
 
-		var board = $(this);
+			let board = $(this);
 			while (board.data('board') === undefined) {
 				board = board.parent();
 			}
-		var threadid;
+			let threadid;
-		if ($link.is('[data-thread]')) threadid = 0;
+			if (link.is('[data-thread]')) {
-		else threadid = board.attr('id').replace("thread_", "");
+				threadid = 0;
+			} else {
+				threadid = board.attr('id').replace("thread_", "");
+			}
 
 			board = board.data('board');
 
-		var parentboard = board;
+			let parentboard = board;
 
-		if ($link.is('[data-thread]')) parentboard = $('form[name="post"] input[name="board"]').val();
+			if (link.is('[data-thread]')) {
-		else if (matches[1] !== undefined) board = matches[1];
+				parentboard = $('form[name="post"] input[name="board"]').val();
+			} else if (matches[1] !== undefined) {
+				board = matches[1];
+			}
 
-		var $post = false;
+			let post = false;
-		var hovering = false;
+			let hovering = false;
-		var hovered_at;
+			let hovered_at;
-		$link.hover(function(e) {
+
+			let updatePreviewPosition = function(pageX, pageY, hoverPreview) {
+				let scrollTop = $(window).scrollTop();
+				if (link.is("[data-thread]")) {
+					scrollTop = 0;
+				}
+				let epy = pageY;
+				if (link.is("[data-thread]")) {
+					epy -= $(window).scrollTop();
+				}
+
+				let top = (epy ? epy : hovered_at['y']) - 10;
+
+				if (epy < scrollTop + 15) {
+					top = scrollTop;
+				} else if (epy > scrollTop + $(window).height() - hoverPreview.height() - 15) {
+					top = scrollTop + $(window).height() - hoverPreview.height() - 15;
+				}
+
+				let hovery = pageY ? pageY : hovered_at['y'];
+				if ((hovery - top) > 20){
+					top = hovery;
+				}
+
+				let previewX;
+				if (isScreenSmall) {
+					previewX = 0;
+				} else {
+					previewX = (pageX ? pageX : hovered_at['x']) + 1
+				}
+
+				hoverPreview.css('left', previewX).css('top', top);
+			};
+
+			link.hover(function(e) {
 				hovering = true;
 				hovered_at = {'x': e.pageX, 'y': e.pageY};
 
-			var start_hover = function($link) {
+				let start_hover = function(link) {
-				if($.contains($post[0], $link[0])) {
+					if ($.contains(post[0], link[0])) {
 						// link links to itself or to op; ignore
-				}
+					} else if (post.is(':visible') &&
-				else if ($post.is(':visible') &&
+						post.offset().top >= $(window).scrollTop() &&
-						$post.offset().top >= $(window).scrollTop() &&
+						post.offset().top + post.height() <= $(window).scrollTop() + $(window).height()) {
-						$post.offset().top + $post.height() <= $(window).scrollTop() + $(window).height()) {
+						// Post is in view, highlight it.
-					// post is in view
+						post.addClass('highlighted');
-					$post.addClass('highlighted');
 					} else {
-					var $newPost = $post.clone();
+						// Creates the preview, and displays it,
-					$newPost.find('>.reply, >br').remove();
+						let hoverPreview = post.clone();
-					//$newPost.find('span.mentioned').remove();
+						hoverPreview.find('>.reply, >br').remove();
-					$newPost.find('a.post_anchor').remove();
+						hoverPreview.find('a.post_anchor').remove();
 
-					$newPost
+						hoverPreview
 							.attr('id', 'post-hover-' + id)
 							.attr('data-board', board)
 							.addClass('post-hover')
@@ -76,22 +131,31 @@ $(document).ready(function () {
 							.css('display', 'inline-block')
 							.css('position', 'absolute')
 							.css('font-style', 'normal')
-						.css('z-index', '100')
+							.css('z-index', '100');
-						.css('margin-left', '1em')
-						.addClass('reply').addClass('post')
-						.insertAfter($link.parent())
 
-					$link.trigger('mousemove');
+						if (isScreenSmall) {
+							hoverPreview
+								.css('margin-top', '1em')
+								.css('border-left-style', 'none')
+								.css('border-right-style', 'none');
+						} else {
+							hoverPreview.css('margin-left', '1em');
+						}
+
+						hoverPreview.addClass('reply').addClass('post')
+							.insertAfter(link.parent())
+
+						updatePreviewPosition(e.pageX, e.pageY, hoverPreview);
 					}
 				};
 
-			$post = $('[data-board="' + board + '"] div.post#reply_' + id + ', [data-board="' + board + '"]div#thread_' + id);
+				post = $('[data-board="' + board + '"] div.post#reply_' + id + ', [data-board="' + board + '"]div#thread_' + id);
-			if($post.length > 0) {
+				if (post.length > 0) {
 					start_hover($(this));
 				} else {
-				var url = $link.attr('href').replace(/#.*$/, '');
+					let url = link.attr('href').replace(/#.*$/, '');
 
-				if($.inArray(url, dont_fetch_again) != -1) {
+					if ($.inArray(url, dont_fetch_again) != -1) {
 						return;
 					}
 					dont_fetch_again.push(url);
@@ -104,67 +168,55 @@ $(document).ready(function () {
 
 							if (mythreadid == threadid && parentboard == board) {
 								$(data).find('div.post.reply').each(function() {
-								if($('[data-board="' + board + '"] #' + $(this).attr('id')).length == 0) {
+									if ($('[data-board="' + board + '"] #' + $(this).attr('id')).length === 0) {
 										$('[data-board="' + board + '"]#thread_' + threadid + " .post.reply:first").before($(this).hide().addClass('hidden'));
 									}
 								});
-						}
+							} else if ($('[data-board="' + board + '"]#thread_'+mythreadid).length > 0) {
-						else if ($('[data-board="' + board + '"]#thread_'+mythreadid).length > 0) {
 								$(data).find('div.post.reply').each(function() {
-								if($('[data-board="' + board + '"] #' + $(this).attr('id')).length == 0) {
+									if ($('[data-board="' + board + '"] #' + $(this).attr('id')).length === 0) {
 										$('[data-board="' + board + '"]#thread_' + mythreadid + " .post.reply:first").before($(this).hide().addClass('hidden'));
 									}
 								});
-						}
+							} else {
-						else {
 								$(data).find('div[id^="thread_"]').hide().attr('data-cached', 'yes').prependTo('form[name="postcontrols"]');
 							}
 
-						$post = $('[data-board="' + board + '"] div.post#reply_' + id + ', [data-board="' + board + '"]div#thread_' + id);
+							post = $('[data-board="' + board + '"] div.post#reply_' + id + ', [data-board="' + board + '"]div#thread_' + id);
 
-						if(hovering && $post.length > 0) {
+							if (hovering && post.length > 0) {
-							start_hover($link);
+								start_hover(link);
 							}
 						}
 					});
 				}
 			}, function() {
-			hovering = false;
+				// Remove the preview.
-			if(!$post)
-				return;
 
-			$post.removeClass('highlighted');
+				hovering = false;
-			if($post.hasClass('hidden') || $post.data('cached') == 'yes')
+				if (!post) {
-				$post.css('display', 'none');
+					return;
+				}
+
+				post.removeClass('highlighted');
+				if (post.hasClass('hidden') || post.data('cached') == 'yes') {
+					post.css('display', 'none');
+				}
 				$('.post-hover').remove();
 			}).mousemove(function(e) {
-			if(!$post)
+				// Update the preview position if the mouse moves.
+
+				if (!post) {
 					return;
-			
-			var $hover = $('#post-hover-' + id + '[data-board="' + board + '"]');
-			if($hover.length == 0)
-				return;
-
-			var scrollTop = $(window).scrollTop();
-			if ($link.is("[data-thread]")) scrollTop = 0;
-			var epy = e.pageY;
-			if ($link.is("[data-thread]")) epy -= $(window).scrollTop();			
-
-			var top = (epy ? epy : hovered_at['y']) - 10;
-			
-			if(epy < scrollTop + 15) {
-				top = scrollTop;
-			} else if(epy > scrollTop + $(window).height() - $hover.height() - 15) {
-				top = scrollTop + $(window).height() - $hover.height() - 15;
 				}
 
-			var hovery = e.pageY ? e.pageY : hovered_at['y'];
+				// The actual displayed preview.
-			if ( ( hovery - top) > 20){
+				let hoverPreview = $('#post-hover-' + id + '[data-board="' + board + '"]');
-				top = hovery;
+				if (hoverPreview.length === 0) {
+					return;
 				}
 
-			
+				updatePreviewPosition(e.pageX, e.pageY, hoverPreview);
-			$hover.css('left', (e.pageX ? e.pageX : hovered_at['x']) + 1).css('top', top);
 			});
 		};
 
@@ -174,5 +226,5 @@ $(document).ready(function () {
 		$(document).on('new_post', function(e, post) {
 			$(post).find('div.body a:not([rel="nofollow"])').each(init_hover);
 		});
-});
+	});
-
+}

js/show-backlinks.js

@@ -8,40 +8,42 @@
  *
  * Usage:
  *   $config['additional_javascript'][] = 'js/jquery.min.js';
- *   // $config['additional_javascript'][] = 'js/post-hover'; (optional; must come first)
+ *   // $config['additional_javascript'][] = 'js/post-hover.js'; (optional; must come first)
  *   $config['additional_javascript'][] = 'js/show-backlinks.js';
  *
  */
 
-$(document).ready(function(){
+$(document).ready(function() {
-	var showBackLinks = function() {
+	let showBackLinks = function() {
-		var reply_id = $(this).attr('id').replace(/^reply_/, '');
+		let replyId = $(this).attr('id').replace(/^reply_/, '');
 
 		$(this).find('div.body a:not([rel="nofollow"])').each(function() {
-			var id, post, $mentioned;
+			let id = $(this).text().match(/^>>(\d+)$/);
-		
+			if (id) {
-			if(id = $(this).text().match(/^>>(\d+)$/))
 				id = id[1];
-			else
+			} else {
+				return;
+			}
+
+			let post = $('#reply_' + id);
+			if(post.length == 0)
 				return;
 
-			$post = $('#reply_' + id);
+			let mentioned = post.find('p.intro span.mentioned');
-			if($post.length == 0)
+			if (mentioned.length === 0) {
+				mentioned = $('<span class="mentioned unimportant"></span>').prependTo(post.find('.head'));
+			}
+
+			if (mentioned.find('a.mentioned-' + replyId).length !== 0) {
 				return;
+			}
 
-			$mentioned = $post.find('p.intro span.mentioned');
+			let link = $('<a class="mentioned-' + replyId + '" onclick="highlightReply(\'' + replyId + '\');" href="#'
-			if($mentioned.length == 0)
+				+ replyId + '">&gt;&gt;' + replyId + '</a>');
-				$mentioned = $('<span class="mentioned unimportant"></span>').appendTo($post.find('p.intro'));
+			link.appendTo(mentioned)
-			
-			if ($mentioned.find('a.mentioned-' + reply_id).length != 0)
-				return;
-			
-			var $link = $('<a class="mentioned-' + reply_id + '" onclick="highlightReply(\'' + reply_id + '\');" href="#' + reply_id + '">&gt;&gt;' +
-				reply_id + '</a>');
-			$link.appendTo($mentioned)
 
 			if (window.init_hover) {
-				$link.each(init_hover);
+				link.each(init_hover);
 			}
 		});
 	};
@@ -49,12 +51,10 @@ $(document).ready(function(){
 	$('div.post.reply').each(showBackLinks);
 
 	$(document).on('new_post', function(e, post) {
-		if ($(post).hasClass("reply")) {
+		if ($(post).hasClass('reply')) {
 			showBackLinks.call(post);
-		}
+		} else {
-		else {
 			$(post).find('div.post.reply').each(showBackLinks);
 		}
 	});
 });
-

stylesheets/bunker_like.css

@@ -110,6 +110,11 @@ div.post.reply {
 	background: #282A2E;
 	border: 1px solid #117743;
 	border-radius: 5px;
+
+	@media (max-width: 48em) {
+		border-left-style: none;
+		border-right-style: none;
+	}
 }
 div.post.reply.highlighted {
 	background: rgba(59, 22, 43, 0.4);

stylesheets/burichan.css

@@ -58,6 +58,11 @@ div.post.reply.post-hover {
 	border-width: 1px;
 	border-style: none solid solid none;
 	border-color: #B7C5D9;
+
+	@media (max-width: 48em) {
+		border-left-style: none;
+		border-right-style: none;
+	}
 }
 
 div.post.reply div.body a {

stylesheets/dark.css

@@ -55,8 +55,10 @@ div.post.reply {
 	background: #333333;
 	border: #555555 1px solid;
 
-
+	@media (max-width: 48em) {
-
+		border-left-style: none;
+		border-right-style: none;
+	}
 }
 div.post.reply.highlighted {
 	background: #555;

stylesheets/dark_red.css

@@ -5,7 +5,7 @@
 /*dark.css has been prepended (2021-11-11) instead of @import'd for performance*/
 body {
 	background: #1E1E1E;
-	color: #999999;
+	color: #A7A7A7;
 	font-family: Verdana, sans-serif;
 	font-size: 14px;
 }
@@ -51,6 +51,11 @@ a.post_no:hover {
 div.post.reply {
 	background: #333333;
 	border: #555555 1px solid;
+
+	@media (max-width: 48em) {
+		border-left-style: none;
+		border-right-style: none;
+	}
 }
 div.post.reply.highlighted {
 	background: #555;
@@ -152,7 +157,7 @@ hr {
 }
 div.boardlist {
 	text-align: center;
-	color: #999999;
+	color: #A7A7A7;
 }
 div.ban {
 	background-color: transparent;
@@ -173,7 +178,7 @@ div.boardlist:not(.bottom) {
 }
 .desktop-style div.boardlist:not(.bottom) {
 	text-shadow: black 1px 1px 1px, black -1px -1px 1px, black -1px 1px 1px, black 1px -1px 1px;
- color: #999999;
+	color: #A7A7A7;
 	background-color: #1E1E1E;
 }
 div.report {

stylesheets/favela.css

@@ -67,6 +67,11 @@ div.post.reply.post-hover {
 	border-width: 1px;
 	border-style: none solid solid none;
 	border-color: #B7C5D9;
+
+	@media (max-width: 48em) {
+		border-left-style: none;
+		border-right-style: none;
+	}
 }
 
 div.post.reply div.body a {

stylesheets/nigrachan.css

@@ -73,6 +73,11 @@ div.post.reply.post-hover {
 	border-width: 1px;
 	border-style: none solid solid none;
 	border-color: #101010;
+
+	@media (max-width: 48em) {
+		border-left-style: none;
+		border-right-style: none;
+	}
 }
 
 div.post.reply div.body a {

stylesheets/novo_jungle.css

@@ -90,6 +90,11 @@ div.post.reply.post-hover {
 	border-width: 1px;
 	border-style: none solid solid none;
 	border-color: #B7C5D9;
+
+	@media (max-width: 48em) {
+		border-left-style: none;
+		border-right-style: none;
+	}
 }
 
 div.post.reply div.body a {

stylesheets/sharp.css

@@ -213,6 +213,11 @@ div.post.reply {
 	border-style: none solid solid none;
 	border-color: #DCDCDC;
 	display: inline-block;
+
+	@media (max-width: 48em) {
+		border-left-style: none;
+		border-right-style: none;
+	}
 }
 span.trip {
 	color: #228854;

stylesheets/style.css

@@ -39,7 +39,6 @@ html, body {
 }
 
 div.pages{
-
   margin:0!important;
   padding: 0!important;
 }
@@ -61,8 +60,7 @@ img.banner, img.board_image {
 }
 
 .bar {
-
+  display: table;
-  display: table!important;
   position: fixed;
   width: 100%;
   left: 0px;
@@ -70,10 +68,12 @@ img.banner, img.board_image {
   background-color: #D6DAF0;
   border-color: #B7C5D9;
 }
+
 .bar > :not(script) {
   display: table-cell;
   vertical-align: middle;
 }
+
 .bar.top {
   text-align: center;
   top: 0px;
@@ -81,11 +81,26 @@ img.banner, img.board_image {
 }
 
 .bar.bottom {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
   bottom: 0px;
   border-top: 1px solid #333333;
-  /*background-color: #333333 ;*/
 }
 
+/* Stuff in the bottom bar. */
+@media (max-width: 64em) {
+  .pages-list {
+    display: none;
+  }
+}
+
+@media (max-width: 64em) {
+  #updater {
+    display: block;
+  }
+}
 
 /*homepage banner*/
 div.lain_banner{
@@ -102,9 +117,14 @@ body {
   color: black;
   font-family: arial,helvetica,sans-serif;
   font-size: 10pt;
-  margin: 0 4px;
   padding-left: 4px;
   padding-right: 4px;
+  margin: 0px 4px;
+
+  @media (max-width: 48em) {
+    margin: 0px;
+    padding: 0px;
+  }
 }
 
 main,
@@ -242,10 +262,6 @@ a.post_no {
   color: #ff0000;
 }
 
-.intro label {
-  display: inline;
-}
-
 .intro time,p.intro a.ip-link,p.intro a.capcode {
   direction: ltr;
   unicode-bidi: embed;
@@ -346,7 +362,6 @@ form table tr td div label {
 
 .file {
   float: left;
-  margin-right: 2px;
 }
 
 .file:not(.multifile) .post-image {
@@ -359,11 +374,7 @@ form table tr td div label {
 
 p.fileinfo {
   display: block;
-  margin: 0 0 0 20px;
+  margin: 0.2em 0px;
-}
-
-div.post p.fileinfo {
-  padding-left: 5px;
 }
 
 div.banner {
@@ -403,7 +414,7 @@ img.banner,img.board_image {
 }
 
 div.post .post-image {
-  padding: 5px;
+  padding: 0.2em;
   margin: 0 20px 0 0;
 }
 
@@ -418,24 +429,29 @@ div.post i.fa, div.thread i.fa {
   font-size: 16px;
 }
 
-div.post.op {
-  margin-right: 20px;
-  margin-bottom: 5px;
-}
-
 div.post.op hr {
   border-color: #D9BFB7;
 }
 
-.intro {
-  margin: 0.5em 0;
-  padding: 0;
-  padding-bottom: 0.2em;
-}
-
 input.delete {
   float: left;
-  margin: 1px 6px 0 0;
+  margin: 1px 6px 0px 0px;
+  scale: 1.05;
+}
+
+.intro {
+  padding: 0px;
+  line-height: 1.3em;
+}
+
+.intro span {
+  min-width: 0.3em;
+  display: inline-block;
+}
+
+.post-details {
+  text-wrap: nowrap;
+  float: right;
 }
 
 .intro span.subject {
@@ -448,12 +464,12 @@ input.delete {
   font-weight: bold;
 }
 
-.intro span.capcode,p.intro a.capcode,p.intro a.nametag {
+.post-details span.capcode,p.intro a.capcode,p.intro a.nametag {
   color: #F00000;
   margin-left: 0;
 }
 
-.intro a {
+.post-details a {
   margin-left: 5px;
 }
 
@@ -466,13 +482,35 @@ input.delete {
   color: maroon;
 }
 
-div.post p {
+div.post {
-    display: block;
+  margin: 0.2em 4px;
-    margin: 0;
+  padding: 0.5em 0.3em;
+  display: inline-block;
+  max-width: 94%!important;
+
+  @media (max-width: 48em) {
+    margin: 0.1em 0px;
+    padding: 0.5em 0px;
+    width: 100%;
+    max-width: unset!important;
+  }
+}
+
+div.post > div.head {
+  margin: 0.1em 1em;
+  clear: both;
+  line-height: 1.3em;
+}
+
+div.post > p {
+  margin: 0.1em 0.4em;
 
-    line-height: 1.16em;
   font-size: 13px;
   min-height: 1.16em;
+
+  @media (max-width: 48em) {
+    margin-right: 1.4em;
+  }
 }
 
 div.post div.body {
@@ -481,6 +519,10 @@ div.post div.body {
   padding-bottom: 0.3em;
 }
 
+div.post.op div.body {
+  margin-left: 0.8em;
+}
+
 div.post.reply div.body {
   margin-left: 1.8em;
 }
@@ -498,15 +540,27 @@ div.post div.body {
   white-space: pre-wrap;
 }
 
+div.post.op {
+  padding-top: 0px;
+  vertical-align: top;
+
+  /* Add back in the padding that is provided by body on large screens */
+  @media (max-width: 48em) {
+    padding-left: 4px;
+    padding-right: 4px;
+  }
+}
+
 div.post.reply {
   background: #D6DAF0;
-  margin: 0.2em 4px;
-  padding: 0.5em 0.3em 0.5em 0.6em;
   border-width: 1px;
   border-style: none solid solid none;
   border-color: #B7C5D9;
-  display: inline-block;
+
-  max-width: 94%!important;
+  @media (max-width: 48em) {
+    border-left-style: none;
+    border-right-style: none;
+  }
 }
 
 div.post.reply.has-file.body-not-empty {
@@ -553,19 +607,14 @@ br.clear {
 }
 
 span.controls {
-  float: right;
   margin: 0;
   padding: 0;
-  font-size: 80%;
-}
-
-span.controls.op {
-  float: none;
-  margin-left: 10px;
 }
 
 span.controls a {
   margin: 0;
+  text-wrap: nowrap;
+  display: inline-block;
 }
 
 div#wrap {

stylesheets/szalet.css

@@ -183,6 +183,11 @@ div.post.reply {
         -khtml-border-radius: 10px;
         -moz-border-radius: 10px;
         border-radius: 10px;
+
+        @media (max-width: 48em) {
+                border-left-style: none;
+                border-right-style: none;
+        }
 }
 div.post.reply.highlighted {
 background: #583E28;

stylesheets/terminal2.css

@@ -38,6 +38,11 @@ div.post.reply {
 	background: #000000;
 	border: 1px dashed;
 	border-color:#00FF00;
+
+	@media (max-width: 48em) {
+		border-left-style: none;
+		border-right-style: none;
+	}
 }
 div.post.reply.highlighted {
 	background: transparent;

stylesheets/terminal_common.css

@@ -60,6 +60,11 @@ a.post_no:hover {
 div.post.reply {
 	background: #111111;
 	border: 1px dotted;
+
+	@media (max-width: 48em) {
+		border-left-style: none;
+		border-right-style: none;
+	}
 }
 div.post.reply.highlighted {
 	background: transparent;

stylesheets/terminal_purple.css

@@ -43,6 +43,13 @@ div.post.reply, div.post.reply.highlighted
 	border-color: #8725EC;
 }
 
+@media (max-width: 48em) {
+	div.post.reply {
+		border-left-style: none;
+		border-right-style: none;
+	}
+}
+
 .desktop-style div.boardlist:nth-child(1) {
   border-bottom: #8725EC 1px dashed;
 }

stylesheets/test.css

@@ -97,7 +97,10 @@ div.post.reply {
     border-radius: 10px;
     opacity: 0.85;
 
-
+    @media (max-width: 48em) {
+      border-left-style: none;
+      border-right-style: none;
+    }
 }
 
 img.post-image:hover {

stylesheets/testorange.css

@@ -33,6 +33,13 @@ a:link:hover, a:visited:hover, div.post.reply div.body a:hover {
 	color:#ffff00;
 }
 
+@media (max-width: 48em) {
+	div.post.reply {
+		border-left-style: none;
+		border-right-style: none;
+	}
+}
+
 a.email span.name {
 	color:#ff9100 !important;
 }

stylesheets/tsuki.css

@@ -329,6 +329,11 @@ div.post.reply {
   border-color: #B7C5D9;
   display: inline-block;
   max-width: 94%!important;
+
+  @media (max-width: 48em) {
+    border-left-style: none;
+    border-right-style: none;
+  }
 }
 
 span.trip {
@@ -1358,6 +1363,11 @@ div.post.reply {
 	background: #111;
 	border: #555555 1px solid;
 	box-shadow: 4px 4px #555;
+
+  @media (max-width: 48em) {
+		border-left-style: none;
+		border-right-style: none;
+	}
 }
 div.post.reply.highlighted {
 	background: #555;

stylesheets/volafile.css

@@ -56,6 +56,14 @@ div.topbar, input[type="text"], select, form table tr th, form table tr td input
 	border-color: #486582!important;
 	color: #E0E0E0!important;
 }
+
+@media (max-width: 48em) {
+	div.post.reply {
+		border-left-style: none;
+		border-right-style: none;
+	}
+}
+
 div.post.reply.highlighted{
 	background-color: #486582!important;
 }

stylesheets/wasabi.css

@@ -212,6 +212,11 @@ div.post.reply {
 	border-style: none solid solid none;
 	border-color: lightgreen;
 	display: inline-block;
+
+	@media (max-width: 48em) {
+		border-left-style: none;
+		border-right-style: none;
+	}
 }
 span.trip {
 	color: #228854;

templates/index.html

@@ -119,9 +119,13 @@
 
 	<div id="bottom-hud" class="bar bottom">
 		<div class="pages">
-			{{ btn.prev }} [ {% for page in pages %}
+			{{ btn.prev }}
+			<span class="pages-list">
+			[ {% for page in pages %}
 				<a {% if page.selected %}class="selected"{% endif %}{% if not page.selected %}href="{{ page.link }}"{% endif %}>{{ page.num }}</a>{% if not loop.last %} /{% endif %}
-			{% endfor %} ] {{ btn.next }}
+			{% endfor %} ]
+			</span>
+			{{ btn.next }}
 			{% if config.catalog_link %}
 			 |  <a href="{{ config.root }}{% if mod %}{{ config.file_mod }}?/{% endif %}{{ board.dir }}{{ config.catalog_link }}">{% trans %}Catalog{% endtrans %}</a>
 			{% endif %}

templates/post/post_controls.html

@@ -1,6 +1,6 @@
 {% if mod %}
 
-<span class="controls {% if not post.thread %}op{% endif %}">
+ <span class="controls {% if not post.thread %}op{% endif %}">
 {% if mod|hasPermission(config.mod.warning, board.uri) %}
 	<a title="{% trans %}Warn{% endtrans %}" href="?/{{ board.dir }}warning/{{ post.id }}{% if post.thread %}&amp;thread={{ post.thread }}{% endif %}">{{ config.mod.link_warning }}</a>&nbsp;
 {% endif %}

templates/post/time.html

@@ -1 +1 @@
- <time datetime="{{ post.time|date('%Y-%m-%dT%H:%M:%S') }}{{ timezone() }}">{{ post.time|date(config.post_date) }}</time>
+<time datetime="{{ post.time|date('%Y-%m-%dT%H:%M:%S') }}{{ timezone() }}">{{ post.time|date(config.post_date) }}</time> 

templates/post_reply.html

@@ -1,24 +1,27 @@
 {% filter remove_whitespace %}
 {# tabs and new lines will be ignored #}
 <div class="post reply" id="reply_{{ post.id }}" data-board="{{ board.uri }}">
-<p class="intro">
+	<p class="intro">
+		<label for="delete_{{ post.id }}">
 		{% if not index %}<a id="{{ post.id }}" class="post_anchor"></a>{% endif %}
 			<input type="checkbox" class="delete" name="delete_{{ post.id }}" id="delete_{{ post.id }}" />
-	<label for="delete_{{ post.id }}">
 			{% include 'post/subject.html' %}
 			{% include 'post/name.html' %}
 			{% include 'post/ip.html' %}
 			{% include 'post/flag.html' %}
+		</label>
+		<span></span>
+		{% include 'post/poster_id.html' %}
+		<label class="post-details">
 			{% include 'post/time.html' %}
+			<a class="post_no" id="post_no_{{ post.id }}" title="Link to this post" onclick="highlightReply({{ post.id }})" href="{% if isnoko50 %}{{ post.link('', config.file_page50) }}{% else %}{{ post.link }}{% endif %}">No.</a>
+			<a class="post_no" title="Reply to this post" onclick="citeReply({{ post.id }})" href="{% if isnoko50 %}{{ post.link('q', config.file_page50) }}{% else %}{{ post.link('q') }}{% endif %}">{{ post.id }}</a>
 		</label>
-	{% include 'post/poster_id.html' %}&nbsp;
+	</p>
-	<label style="text-wrap: nowrap;">
+	<div class="head">
-		<a class="post_no" id="post_no_{{ post.id }}" onclick="highlightReply({{ post.id }})" href="{% if isnoko50 %}{{ post.link('', config.file_page50) }}{% else %}{{ post.link }}{% endif %}">No.</a>
-		<a class="post_no" onclick="citeReply({{ post.id }})" href="{% if isnoko50 %}{{ post.link('q', config.file_page50) }}{% else %}{{ post.link('q') }}{% endif %}">{{ post.id }}</a>
-	</label>
-</p>
-	{% include 'post/fileinfo.html' %}
 		{% include 'post/post_controls.html' %}
+		{% include 'post/fileinfo.html' %}
+	</div>
 	<div class="body" {% if post.files|length > 1 %}style="clear:both"{% endif %}>
 		{% endfilter %}{% if index %}{{ post.body|truncate_body(post.link) }}{% else %}{{ post.body }}{% endif %}{% filter remove_whitespace %}
 		{% if post.modifiers['ban message'] %}

templates/post_thread.html

@@ -3,22 +3,24 @@
 
 <div class="thread" id="thread_{{ post.id }}" data-board="{{ board.uri }}">
 {% if not index %}<a id="{{ post.id }}" class="post_anchor"></a>{% endif %}
-
+	<div class="post op" id="op_{{ post.id }}" {%if post.num_files > 1%}style='clear:both'{%endif%}>
-{% include 'post/fileinfo.html' %}
+		<p class="intro">
-<div class="post op" id="op_{{ post.id }}" {%if post.num_files > 1%}style='clear:both'{%endif%}><p class="intro">
-	<input type="checkbox" class="delete" name="delete_{{ post.id }}" id="delete_{{ post.id }}" />
 			<label for="delete_{{ post.id }}">
+				<input type="checkbox" class="delete" name="delete_{{ post.id }}" id="delete_{{ post.id }}" />
 				{% include 'post/subject.html' %}
 				{% include 'post/name.html' %}
 				{% include 'post/ip.html' %}
 				{% include 'post/flag.html' %}
-		{% include 'post/time.html' %}
 			</label>
+			<span></span>
 			{% include 'post/poster_id.html' %}&nbsp;
-	<label style="text-wrap: nowrap;">
+			<label class="post-details">
-		<a class="post_no" id="post_no_{{ post.id }}" onclick="highlightReply({{ post.id }})" href="{% if isnoko50 %}{{ post.link('', '50') }}{% else %}{{ post.link }}{% endif %}">No.</a>
+				{% include 'post/time.html' %}
-		<a class="post_no" onclick="citeReply({{ post.id }})" href="{% if isnoko50 %}{{ post.link('q', '50') }}{% else %}{{ post.link('q') }}{% endif %}">{{ post.id }}</a>
+				<a class="post_no" id="post_no_{{ post.id }}" title="Link to this post" onclick="highlightReply({{ post.id }})" href="{% if isnoko50 %}{{ post.link('', '50') }}{% else %}{{ post.link }}{% endif %}">No.</a>
+				<a class="post_no" title="Reply to this post" onclick="citeReply({{ post.id }})" href="{% if isnoko50 %}{{ post.link('q', '50') }}{% else %}{{ post.link('q') }}{% endif %}">{{ post.id }}</a>
 			</label>
+		</p>
+		<div class="head">
 			{% if post.sticky %}
 				{% if config.font_awesome %}
 					<i class="fa fa-thumb-tack" title="Sticky"></i>
@@ -58,7 +60,8 @@
 				<a href="{{ post.root }}{{ board.dir }}{{ config.dir.res }}{{ link_for(post, true) }}">[{% trans %}Last 1 Post{% plural lastcount %}Last {{ count }} Posts{% endtrans %}]</a>
 			{% endif %}
 			{% include 'post/post_controls.html' %}
-	</p>
+			{% include 'post/fileinfo.html' %}
+		</div>
 		<div class="body">
 			{% endfilter %}{% if index %}{{ post.body|truncate_body(post.link) }}{% else %}{{ post.body }}{% endif %}{% filter remove_whitespace %}
 			{% if post.modifiers['ban message'] %}
@@ -89,9 +92,9 @@
 				{% endif %} {% trans %}omitted. Click reply to view.{% endtrans %}
 			</span>
 		{% endif %}
-{% if not index %}
+	{% if not index %}
-{% endif %}
+	{% endif %}
-</div>{% endfilter %}
+	</div>{% endfilter %}
 {% set iparray = [post.ip] %}
 {% set hr = post.hr %}
 {% for post in post.posts %}