From 7f15006b51f3862700814610fbf89ec6447d3b8f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thibaud=20Lepr=C3=AAtre?= Date: Sat, 15 Apr 2017 14:22:40 +0200 Subject: Upgrade theme base on hexo 1.10.0 version - [x] Italian translation - [x] `showMeta` & `showActions` - [x] `rel="noopener"` - [x] _sharing options_ - [x] XLG side bar bug on Edge - [x] 'OLDER POSTS' Button Overlaps Sidebar - [x] Print media queries However I will not backport persian translation because I can't handle by myself the missing translation for that theme that is not exist on hexo one closes #132 --- src/js/search-modal.js | 5 ++-- src/js/share-options.js | 10 +++---- src/scss/components/_pagination.scss | 1 + src/scss/components/_post-actions.scss | 10 +++++-- src/scss/components/_share-options-bar.scss | 41 +++++++++++++++++++---------- src/scss/layouts/_header.scss | 7 +++++ src/scss/layouts/_sidebar.scss | 7 +++++ src/scss/utils/mixins/_sidebar.scss | 19 +++++++------ 8 files changed, 69 insertions(+), 31 deletions(-) (limited to 'src') diff --git a/src/js/search-modal.js b/src/js/search-modal.js index cfd1e50..808a685 100755 --- a/src/js/search-modal.js +++ b/src/js/search-modal.js @@ -33,8 +33,9 @@ // open modal when `s` button is pressed $(document).keyup(function(event) { var target = event.target || event.srcElement; - // exit if user is focusing an input - if (target.tagName.toUpperCase() === 'INPUT') { + // exit if user is focusing an input or textarea + var tagName = target.tagName.toUpperCase(); + if (tagName === 'INPUT' || tagName === 'TEXTAREA') { return; } diff --git a/src/js/share-options.js b/src/js/share-options.js index 5ea077b..24367c3 100755 --- a/src/js/share-options.js +++ b/src/js/share-options.js @@ -10,7 +10,8 @@ var ShareOptionsBar = function() { this.$shareOptionsBar = $('#share-options-bar'); this.$openBtn = $('.btn-open-shareoptions'); - this.$closeBtn = $('#share-options-mask'); + this.$closeBtn = $('#btn-close-shareoptions'); + this.$body = $('body'); }; ShareOptionsBar.prototype = { @@ -52,7 +53,7 @@ !this.$shareOptionsBar.hasClass('processing')) { // Open the share option bar self.$shareOptionsBar.addClass('processing opened'); - + self.$body.css('overflow', 'hidden'); setTimeout(function() { self.$shareOptionsBar.removeClass('processing'); }, 250); @@ -71,12 +72,11 @@ if (self.$shareOptionsBar.hasClass('opened') && !this.$shareOptionsBar.hasClass('processing')) { // Close the share option bar - self.$shareOptionsBar - .addClass('processing') - .removeClass('opened'); + self.$shareOptionsBar.addClass('processing').removeClass('opened'); setTimeout(function() { self.$shareOptionsBar.removeClass('processing'); + self.$body.css('overflow', ''); }, 250); } } diff --git a/src/scss/components/_pagination.scss b/src/scss/components/_pagination.scss index 0f7be25..d1aa58c 100755 --- a/src/scss/components/_pagination.scss +++ b/src/scss/components/_pagination.scss @@ -4,6 +4,7 @@ height: $pagination-height; .pagination { + position: relative; height: $pagination-height; line-height: $pagination-height; display: block; diff --git a/src/scss/components/_post-actions.scss b/src/scss/components/_post-actions.scss index 55ccba6..599873b 100755 --- a/src/scss/components/_post-actions.scss +++ b/src/scss/components/_post-actions.scss @@ -18,7 +18,7 @@ // Post's navigation options ul.post-action-nav { // Best width for responsive post's navigation panel on small screen and up - width: 45%; + width: 35%; // On very small screen `.post-actions-nav` will be above `.post-actions-share` z-index: map-get($z-indexes, c-post-bottom-bar) + 2; @@ -38,7 +38,7 @@ ul.post-action-share { // 100% minus width of `.post-action-nav`, // best width for responsive post's share panel on small screen and up - width: 55%; + width: 65%; // On very small screen `.post-actions-nav` will be above `.post-actions-share` z-index: map-get($z-indexes, c-post-bottom-bar) + 1; @@ -80,4 +80,10 @@ width: 65%; } } +} + +@media print { + .post-actions-wrap { + display: none; + } } \ No newline at end of file diff --git a/src/scss/components/_share-options-bar.scss b/src/scss/components/_share-options-bar.scss index 95aba60..04bf805 100755 --- a/src/scss/components/_share-options-bar.scss +++ b/src/scss/components/_share-options-bar.scss @@ -2,23 +2,31 @@ position: fixed; // height + border-top // used to hide the div at the bottom of the window - bottom: -156px; + bottom: -100%; background: white; - height: 155px; + height: 100%; clear: both; border-top: 1px solid #eef2f8; transition: transform .25s ease-in-out; z-index: map-get($z-indexes, 'c-share-options-bar'); -webkit-transition: -webkit-transform .25s ease-in-out; + display: -webkit-flex; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + // use to animate the share option bar &.opened { - @include prefix(transform, translate3d(0, -155px, 0), 'webkit' 'moz'); + @include prefix(transform, translate3d(0, -100%, 0), 'webkit' 'moz'); } .share-options { padding: 0; margin: 0; - text-align: center; list-style: none; .share-option { @@ -46,15 +54,13 @@ } } -// mask where the user can click to close the share options bar -.share-options-mask { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: none; - z-index: map-get($z-indexes, 'c-mask'); +#btn-close-shareoptions { + position: absolute; + top: 15px; + right: 15px; + font-size: 20px; + color: map-get($colors, 'base'); + cursor: pointer; } // Behavior of the share options bar on small screens @@ -88,7 +94,7 @@ .share-options-bar { // Display share options bar in small size &[data-behavior="1"], - &[data-behavior="2"]{ + &[data-behavior="2"] { @include share-options-bar-sm; } // Display share options bar in medium size @@ -102,4 +108,11 @@ @include share-options-bar-lg; } } +} + +// Hide share options in print layout +@media print { + .share-options-bar { + display: none; + } } \ No newline at end of file diff --git a/src/scss/layouts/_header.scss b/src/scss/layouts/_header.scss index dc71569..4760154 100755 --- a/src/scss/layouts/_header.scss +++ b/src/scss/layouts/_header.scss @@ -109,4 +109,11 @@ @include header-pushed-lg; } } +} + +// Hide header in print layout +@media print { + #header { + display: none; + } } \ No newline at end of file diff --git a/src/scss/layouts/_sidebar.scss b/src/scss/layouts/_sidebar.scss index 0275397..4e68241 100755 --- a/src/scss/layouts/_sidebar.scss +++ b/src/scss/layouts/_sidebar.scss @@ -166,3 +166,10 @@ display: none; } } + +// Hide sidebar in print layout +@media print { + #sidebar { + display: none; + } +} \ No newline at end of file diff --git a/src/scss/utils/mixins/_sidebar.scss b/src/scss/utils/mixins/_sidebar.scss index f1ff827..d5ca2ec 100755 --- a/src/scss/utils/mixins/_sidebar.scss +++ b/src/scss/utils/mixins/_sidebar.scss @@ -110,15 +110,18 @@ /// Mixin helper to display the sidebar in large size @mixin sidebar-xlg { - width: map-get($sidebar, xlg-screen-width); - box-sizing: border-box; - padding: 0 80px; + width: map-get($sidebar, xlg-screen-width); + display: -webkit-flex; + display: -webkit-box; + display: -moz-box; + display: -ms-flexbox; + display: flex; + flex-direction: column; + justify-content: center; + .sidebar-container { - position: relative; - top: 50%; - transform: translateY(-50%); - -webkit-transform: translateY(-50%); - -moz-transform: translateY(-50%); + position: relative; + padding: 0 80px; } // Author information .sidebar-profile { -- cgit v1.2.3