Improved aligning post lists to their containers

data/config.ini

@@ -39,8 +39,8 @@ postsPerPage=20
 logsPerPage=250
 tagsPerPage=100
 tagsRelated=15
-thumbnailWidth=150
+thumbnailWidth=175
-thumbnailHeight=150
+thumbnailHeight=175
 thumbnailStyle=outside
 endlessScrollingDefault=1
 showPostTagTitlesDefault=0

public_html/media/css/comment-list.css

@@ -1,3 +1,8 @@
+.post .thumb {
+	width: 150px;
+	height: 150px;
+}
+
 .comment-group .post-wrapper {
 	float: left;
 }

public_html/media/css/post-small.css

@@ -17,10 +17,13 @@
 .post-type-3gp:after,
 .post-type-flv:after {
 	position: absolute;
-	right: 1px; /* border */
+	/* border */
-	top: 1px; /* border */
+	right: 1px;
-	width: 150px;
+	top: 1px;
-	height: 150px;
+	bottom: 1px;
+	left: 1px;
+	background-size: contain;
+	background-repeat: no-repeat;
 	content: ' ';
 	pointer-events: none;
 }
@@ -33,13 +36,13 @@
 .post-type-flv {
 	border-color: red;
 }
-.post-type-swf:after { background: url('../img/thumb-overlay-swf.png'); }
+.post-type-swf:after { background-image: url('../img/thumb-overlay-swf.png'); }
-.post-type-youtube:after { background: url('../img/thumb-overlay-yt.png'); }
+.post-type-youtube:after { background-image: url('../img/thumb-overlay-yt.png'); }
-.post-type-mp4:after { background: url('../img/thumb-overlay-mp4.png'); }
+.post-type-mp4:after { background-image: url('../img/thumb-overlay-mp4.png'); }
-.post-type-webm:after { background: url('../img/thumb-overlay-webm.png'); }
+.post-type-webm:after { background-image: url('../img/thumb-overlay-webm.png'); }
-.post-type-ogg:after { background: url('../img/thumb-overlay-ogg.png'); }
+.post-type-ogg:after { background-image: url('../img/thumb-overlay-ogg.png'); }
-.post-type-3gp:after { background: url('../img/thumb-overlay-3gp.png'); }
+.post-type-3gp:after { background-image: url('../img/thumb-overlay-3gp.png'); }
-.post-type-flv:after { background: url('../img/thumb-overlay-flv.png'); }
+.post-type-flv:after { background-image: url('../img/thumb-overlay-flv.png'); }
 
 
 .post .toggle-tag {
@@ -86,8 +89,6 @@
 }
 .post img.thumb {
 	display: inline-block;
-	width: 150px;
-	height: 150px;
 	vertical-align: top;
 }
 

public_html/media/js/core.js

@@ -204,32 +204,11 @@ $(function()
 {
 	$(window).resize(function()
 	{
-		fixSize();
-		if ($('body').width() == $('body').data('last-width'))
-			return;
-		$('body').data('last-width', $('body').width());
 		$('body').trigger('dom-update');
 	});
 	$('body').bind('dom-update', processSidebar);
-	fixSize();
 });
 
-var fixedEvenOnce = false;
-function fixSize()
-{
-	if ($('#small-screen').is(':visible'))
-		return;
-	var multiply = 168;
-	var oldWidth = $('.main-wrapper:eq(0)').width();
-	$('.main-wrapper:eq(0)').width('');
-	var newWidth = $('.main-wrapper:eq(0)').width();
-	if (oldWidth != newWidth || !fixedEvenOnce)
-	{
-		$('.main-wrapper').width(multiply * Math.floor(newWidth / multiply));
-		fixedEvenOnce = true;
-	}
-}
-
 
 
 //autocomplete

public_html/media/js/post-list.js

@@ -1,9 +1,10 @@
-$(function()
+function bindToggleTag()
+{
+	$('.post a.toggle-tag').bindOnce('toggle-tag', 'click', toggleTagEventHandler);
+}
+
+function toggleTagEventHandler(e)
 {
-	$('body').bind('dom-update', function()
-	{
-		$('.post a.toggle-tag').bindOnce('toggle-tag', 'click', function(e)
-		{
 	e.preventDefault();
 
 	var aDom = $(this);
@@ -30,6 +31,27 @@ $(function()
 			: 'Fatal error');
 		aDom.removeClass('inactive');
 	});
-		});
+}
+
+function alignPosts()
+{
+	var samplePost = $('.posts .post:last-child');
+	var container = $('.posts');
+	samplePost.find('.thumb').css('width', thumbnailWidth + 'px');
+	var containerWidth = container.width();
+	var thumbnailOuterWidth = samplePost.outerWidth(true);
+	var thumbnailInnerWidth = samplePost.find('.thumb').outerWidth();
+	var margin = thumbnailOuterWidth - thumbnailInnerWidth;
+	var numberOfThumbnailsToFitInRow = Math.ceil(containerWidth / thumbnailOuterWidth);
+	var newThumbnailWidth = Math.floor(containerWidth / numberOfThumbnailsToFitInRow) - margin;
+	container.find('.thumb').css('width', newThumbnailWidth + 'px');
+}
+
+$(function()
+{
+	$('body').bind('dom-update', function()
+	{
+		bindToggleTag();
+		alignPosts();
 	});
 });

src/Views/layout-normal.phtml

@@ -31,6 +31,8 @@ if (!empty(Core::getConfig()->appearance->extraStylesheets))
 				isset($this->context->transport->lastSearchQuery)
 					? $this->context->transport->lastSearchQuery
 					:'') ?>;
+			var thumbnailWidth = <?= Core::getConfig()->browsing->thumbnailWidth ?>;
+			var thumbnailHeight = <?= Core::getConfig()->browsing->thumbnailHeight ?>;
 		</script>
 
 		<nav id="top-nav">