From aa20251ee54575af0bb6114ce6a9200004d2f0ba Mon Sep 17 00:00:00 2001 From: Marcin Kurczewski Date: Fri, 25 Jul 2014 14:31:39 +0200 Subject: [PATCH] Improved aligning post lists to their containers --- data/config.ini | 4 +- public_html/media/css/comment-list.css | 5 ++ public_html/media/css/post-small.css | 27 ++++----- public_html/media/js/core.js | 69 ++++++++-------------- public_html/media/js/post-list.js | 80 ++++++++++++++++---------- public_html/media/js/post-view.js | 40 ++++++------- src/Views/layout-normal.phtml | 2 + 7 files changed, 118 insertions(+), 109 deletions(-) diff --git a/data/config.ini b/data/config.ini index 7af3f9b0..842193ea 100644 --- a/data/config.ini +++ b/data/config.ini @@ -39,8 +39,8 @@ postsPerPage=20 logsPerPage=250 tagsPerPage=100 tagsRelated=15 -thumbnailWidth=150 -thumbnailHeight=150 +thumbnailWidth=175 +thumbnailHeight=175 thumbnailStyle=outside endlessScrollingDefault=1 showPostTagTitlesDefault=0 diff --git a/public_html/media/css/comment-list.css b/public_html/media/css/comment-list.css index c68e20fd..f2d20de0 100644 --- a/public_html/media/css/comment-list.css +++ b/public_html/media/css/comment-list.css @@ -1,3 +1,8 @@ +.post .thumb { + width: 150px; + height: 150px; +} + .comment-group .post-wrapper { float: left; } diff --git a/public_html/media/css/post-small.css b/public_html/media/css/post-small.css index cfc5295a..927f1dd9 100644 --- a/public_html/media/css/post-small.css +++ b/public_html/media/css/post-small.css @@ -17,10 +17,13 @@ .post-type-3gp:after, .post-type-flv:after { position: absolute; - right: 1px; /* border */ - top: 1px; /* border */ - width: 150px; - height: 150px; + /* border */ + right: 1px; + top: 1px; + 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-youtube:after { background: url('../img/thumb-overlay-yt.png'); } -.post-type-mp4:after { background: url('../img/thumb-overlay-mp4.png'); } -.post-type-webm:after { background: url('../img/thumb-overlay-webm.png'); } -.post-type-ogg:after { background: url('../img/thumb-overlay-ogg.png'); } -.post-type-3gp:after { background: url('../img/thumb-overlay-3gp.png'); } -.post-type-flv:after { background: url('../img/thumb-overlay-flv.png'); } +.post-type-swf:after { background-image: url('../img/thumb-overlay-swf.png'); } +.post-type-youtube:after { background-image: url('../img/thumb-overlay-yt.png'); } +.post-type-mp4:after { background-image: url('../img/thumb-overlay-mp4.png'); } +.post-type-webm:after { background-image: url('../img/thumb-overlay-webm.png'); } +.post-type-ogg:after { background-image: url('../img/thumb-overlay-ogg.png'); } +.post-type-3gp:after { background-image: url('../img/thumb-overlay-3gp.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; } diff --git a/public_html/media/js/core.js b/public_html/media/js/core.js index 6877a05a..69fb9364 100644 --- a/public_html/media/js/core.js +++ b/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 @@ -416,40 +395,40 @@ Mousetrap.bind = function(key, func, args) $(function() { Mousetrap.bind('q', function() - { - $('#top-nav input').focus(); - return false; - }, 'keyup'); + { + $('#top-nav input').focus(); + return false; + }, 'keyup'); Mousetrap.bind('w', function() - { - $('body,html').animate({scrollTop: '-=150px'}, 200); - }); + { + $('body,html').animate({scrollTop: '-=150px'}, 200); + }); Mousetrap.bind('s', function() - { - $('body,html').animate({scrollTop: '+=150px'}, 200); - }); + { + $('body,html').animate({scrollTop: '+=150px'}, 200); + }); Mousetrap.bind('a', function() - { - var url = $('.paginator:visible .prev:not(.disabled) a').attr('href'); - if (typeof url !== 'undefined') - window.location.href = url; - }, 'keyup'); + { + var url = $('.paginator:visible .prev:not(.disabled) a').attr('href'); + if (typeof url !== 'undefined') + window.location.href = url; + }, 'keyup'); Mousetrap.bind('d', function() - { - var url = $('.paginator:visible .next:not(.disabled) a').attr('href'); - if (typeof url !== 'undefined') - window.location.href = url; - }, 'keyup'); + { + var url = $('.paginator:visible .next:not(.disabled) a').attr('href'); + if (typeof url !== 'undefined') + window.location.href = url; + }, 'keyup'); Mousetrap.bind('p', function() - { - $('.post a').eq(0).focus(); - return false; - }, 'keyup'); + { + $('.post a').eq(0).focus(); + return false; + }, 'keyup'); }); diff --git a/public_html/media/js/post-list.js b/public_html/media/js/post-list.js index dcef3ac9..dacdb80e 100644 --- a/public_html/media/js/post-list.js +++ b/public_html/media/js/post-list.js @@ -1,35 +1,57 @@ +function bindToggleTag() +{ + $('.post a.toggle-tag').bindOnce('toggle-tag', 'click', toggleTagEventHandler); +} + +function toggleTagEventHandler(e) +{ + e.preventDefault(); + + var aDom = $(this); + if (aDom.hasClass('inactive')) + return; + aDom.addClass('inactive'); + + var enable = !aDom.parents('.post').hasClass('tagged'); + var url = $(this).attr('href'); + url = url.replace(/\/[01]\/?$/, '/' + (enable ? '1' : '0')); + postJSON({ url: url }).success(function(data) + { + aDom.removeClass('inactive'); + aDom.parents('.post').removeClass('tagged'); + if (enable) + aDom.parents('.post').addClass('tagged'); + aDom.text(enable + ? aDom.attr('data-text-tagged') + : aDom.attr('data-text-untagged')); + }).error(function(xhr) + { + alert(xhr.responseJSON + ? xhr.responseJSON.message + : '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() { - $('.post a.toggle-tag').bindOnce('toggle-tag', 'click', function(e) - { - e.preventDefault(); - - var aDom = $(this); - if (aDom.hasClass('inactive')) - return; - aDom.addClass('inactive'); - - var enable = !aDom.parents('.post').hasClass('tagged'); - var url = $(this).attr('href'); - url = url.replace(/\/[01]\/?$/, '/' + (enable ? '1' : '0')); - postJSON({ url: url }).success(function(data) - { - aDom.removeClass('inactive'); - aDom.parents('.post').removeClass('tagged'); - if (enable) - aDom.parents('.post').addClass('tagged'); - aDom.text(enable - ? aDom.attr('data-text-tagged') - : aDom.attr('data-text-untagged')); - }).error(function(xhr) - { - alert(xhr.responseJSON - ? xhr.responseJSON.message - : 'Fatal error'); - aDom.removeClass('inactive'); - }); - }); + bindToggleTag(); + alignPosts(); }); }); diff --git a/public_html/media/js/post-view.js b/public_html/media/js/post-view.js index 78b8c453..0e9f93e3 100644 --- a/public_html/media/js/post-view.js +++ b/public_html/media/js/post-view.js @@ -135,30 +135,30 @@ $(function() }); Mousetrap.bind('a', function() + { + var a = $('#sidebar .left a'); + var url = a.attr('href'); + if (typeof url !== 'undefined') { - var a = $('#sidebar .left a'); - var url = a.attr('href'); - if (typeof url !== 'undefined') - { - a.click(); - window.location.href = url; - } - }, 'keyup'); + a.click(); + window.location.href = url; + } + }, 'keyup'); Mousetrap.bind('d', function() + { + var a = $('#sidebar .right a'); + var url = a.attr('href'); + if (typeof url !== 'undefined') { - var a = $('#sidebar .right a'); - var url = a.attr('href'); - if (typeof url !== 'undefined') - { - a.click(); - window.location.href = url; - } - }, 'keyup'); + a.click(); + window.location.href = url; + } + }, 'keyup'); Mousetrap.bind('e', function() - { - $('a.edit-post').trigger('click'); - return false; - }, 'keyup'); + { + $('a.edit-post').trigger('click'); + return false; + }, 'keyup'); }); diff --git a/src/Views/layout-normal.phtml b/src/Views/layout-normal.phtml index 1fd52c0b..e8f73659 100644 --- a/src/Views/layout-normal.phtml +++ b/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 = browsing->thumbnailWidth ?>; + var thumbnailHeight = browsing->thumbnailHeight ?>;