From 1b2b0040b408923b67c4deb2efb1f90fddcca5ba Mon Sep 17 00:00:00 2001 From: Triccsr Date: Fri, 26 Apr 2024 22:09:19 +0800 Subject: [PATCH] Display sidebar on mobile for Pisces and Gemini (#710) Co-authored-by: Mimi <1119186082@qq.com> --- _config.yml | 16 +- layout/_partials/widgets.njk | 2 +- layout/_scripts/index.njk | 4 + scripts/filters/minify.js | 4 + source/css/_common/outline/sidebar/index.styl | 109 +++++++++++++ .../outline/sidebar/sidebar-toggle.styl | 4 +- source/css/_common/scaffolding/toggles.styl | 4 +- source/css/_mixins.styl | 21 +-- source/css/_schemes/Muse/_sidebar.styl | 147 +++--------------- source/css/_schemes/Pisces/_header.styl | 2 +- source/css/_schemes/Pisces/_layout.styl | 8 +- source/css/_schemes/Pisces/_sidebar.styl | 138 ++++++++-------- source/css/_variables/Muse.styl | 3 - source/css/_variables/Pisces.styl | 4 +- source/css/_variables/base.styl | 3 + source/js/schemes/muse.js | 48 ------ source/js/sidebar.js | 50 ++++++ 17 files changed, 293 insertions(+), 274 deletions(-) create mode 100644 source/js/sidebar.js diff --git a/_config.yml b/_config.yml index 3e8c96c..a4f27bf 100644 --- a/_config.yml +++ b/_config.yml @@ -117,16 +117,18 @@ menu_settings: # --------------------------------------------------------------- sidebar: - # Sidebar Position. + # Sidebar position. Available values: left | right position: left - #position: right - # Manual define the sidebar width. If commented, will be default for: - # Muse | Mist: 320 - # Pisces | Gemini: 240 - #width: 300 + # Sidebar width. + # Applicable to Muse | Mist and mobile of Pisces | Gemini. + width_expanded: 320 + # Applicable to desktop of Pisces | Gemini. + width_dual_column: 240 - # Sidebar Display (only for Muse | Mist), available values: + # Sidebar display. + # Applicable to Muse | Mist and mobile of Pisces | Gemini. + # Available values: # - post expand on posts automatically. Default. # - always expand for all pages automatically. # - hide expand only when click on the sidebar toggle icon. diff --git a/layout/_partials/widgets.njk b/layout/_partials/widgets.njk index 4e5b2d3..b312d0a 100644 --- a/layout/_partials/widgets.njk +++ b/layout/_partials/widgets.njk @@ -1,6 +1,6 @@ {# Widgets with fixed position #} -{%- if theme.sidebar.display !== 'remove' and (theme.scheme === 'Muse' or theme.scheme === 'Mist') %} +{%- if theme.sidebar.display !== 'remove' %}
diff --git a/layout/_scripts/index.njk b/layout/_scripts/index.njk index 6a3788b..e988032 100644 --- a/layout/_scripts/index.njk +++ b/layout/_scripts/index.njk @@ -11,6 +11,10 @@ {{- next_js('schemes/muse.js') }} {%- endif %} +{%- if theme.sidebar.display !== 'remove' %} + {{- next_js('sidebar.js') }} +{%- endif %} + {{- next_js('next-boot.js') }} {%- if theme.bookmark.enable %} {{- next_js('bookmark.js') }} diff --git a/scripts/filters/minify.js b/scripts/filters/minify.js index 0f33711..310e1a8 100644 --- a/scripts/filters/minify.js +++ b/scripts/filters/minify.js @@ -44,6 +44,10 @@ hexo.extend.filter.register('after_generate', () => { hexo.route.remove('js/schemes/muse.js'); } + if (theme.sidebar.display === 'remove') { + hexo.route.remove('js/sidebar.js'); + } + // Third Party Scripts // Analytics if (!theme.baidu_analytics) { diff --git a/source/css/_common/outline/sidebar/index.styl b/source/css/_common/outline/sidebar/index.styl index 5b04716..682cee4 100644 --- a/source/css/_common/outline/sidebar/index.styl +++ b/source/css/_common/outline/sidebar/index.styl @@ -1,3 +1,112 @@ ++sidebar() { + if ($sidebar-toggle-alignment == 'right') { + .sidebar { + right: 0 - $sidebar-width-expanded; + + .sidebar-active & { + right: 0; + } + } + } else { + .sidebar { + left: 0 - $sidebar-width-expanded; + + .sidebar-active & { + left: 0; + } + } + } + + .sidebar { + background: $black-deep; + bottom: 0; + if (not hexo-config('back2top.sidebar')) { + box-shadow: inset 0 2px 6px black; + } + max-height: 100vh; + overflow-y: auto; + position: fixed; + top: 0; + transition: all $transition-ease-out; + width: $sidebar-width-expanded; + z-index: $zindex-2; + + a { + border-bottom-color: $black-light; + color: $grey-dark; + + &:hover { + border-bottom-color: $gainsboro; + color: $gainsboro; + } + } + } + + .links-of-author { + &:not(:first-child) { + margin-top: 15px; + } + + a { + border-bottom-color: $black-light; + display: inline-block; + margin-bottom: 10px; + margin-right: 10px; + vertical-align: middle; + + if (hexo-config('social_icons.transition')) { + transition: all $transition-ease; + } + + &::before { + background: rgb(random-color(0, 255) - 50%, random-color(0, 255) - 50%, random-color(0, 255) - 50%); + display: inline-block; + margin-right: 3px; + transform: translateY(-2px); + round-icon(4px); + } + } + } + + .links-of-blogroll-item { + if (hexo-config('links_settings.layout') == 'inline') { + display: inline-block; + } + padding: 2px 10px; + + a { + box-sizing: border-box; + display: inline-block; + max-width: 280px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + + .popular-posts .popular-posts-item .popular-posts-link:hover { + background: none; + } + + .sidebar-dimmer { + background: black; + height: 100%; + left: 0; + opacity: 0; + position: fixed; + top: 0; + transition: visibility .4s, opacity .4s; + visibility: hidden; + width: 100%; + z-index: $zindex-1; + + .sidebar-active & { + opacity: .7; + visibility: visible; + } + } +} + .sidebar-inner { color: $grey-dark; padding: $sidebar-padding 10px; diff --git a/source/css/_common/outline/sidebar/sidebar-toggle.styl b/source/css/_common/outline/sidebar/sidebar-toggle.styl index 0b19b89..2b5273d 100644 --- a/source/css/_common/outline/sidebar/sidebar-toggle.styl +++ b/source/css/_common/outline/sidebar/sidebar-toggle.styl @@ -12,10 +12,10 @@ @media (any-hover: hover) { body:not(.sidebar-active) .sidebar-toggle:hover { - toggle-arrow(hexo-config('sidebar.position')); + toggle-arrow($sidebar-toggle-alignment); } } .sidebar-active .sidebar-toggle { - toggle-close(hexo-config('sidebar.position')); + toggle-close($sidebar-toggle-alignment); } diff --git a/source/css/_common/scaffolding/toggles.styl b/source/css/_common/scaffolding/toggles.styl index 163bd9e..96fe460 100644 --- a/source/css/_common/scaffolding/toggles.styl +++ b/source/css/_common/scaffolding/toggles.styl @@ -22,9 +22,9 @@ } .toggle.toggle-arrow { - toggle-arrow(hexo-config('sidebar.position')); + toggle-arrow($sidebar-toggle-alignment); } .toggle.toggle-close { - toggle-close(hexo-config('sidebar.position')); + toggle-close($sidebar-toggle-alignment); } diff --git a/source/css/_mixins.styl b/source/css/_mixins.styl index 7c172d2..0ca778b 100644 --- a/source/css/_mixins.styl +++ b/source/css/_mixins.styl @@ -52,6 +52,16 @@ desktop-largest() { } } +sidebar() { + if (($scheme == 'Muse') or ($scheme == 'Mist')) { + {block} + } else { + +tablet-mobile() { + {block} + } + } +} + random-color($min, $max) { return floor(math(0, 'random') * ($max - $min + 1) + $min); } @@ -124,16 +134,9 @@ main-container() { } } -sidebar-toggle-alignment($reverse) { - $condition = hexo-config('sidebar.position') == 'right'; - if (($scheme == 'Muse') or ($scheme == 'Mist')) { - $condition = $condition == $reverse; - } - return $condition ? ('left' 'right') : ('right' 'left'); -} - sidebar-toggle-position($reverse) { - $alignment = sidebar-toggle-alignment($reverse)[0]; + $condition = ($sidebar-toggle-alignment == 'right') == $reverse; + $alignment = $condition ? 'left' : 'right'; {$alignment}: $b2t-position-right; +tablet-mobile() { {$alignment}: $b2t-position-right-mobile; diff --git a/source/css/_schemes/Muse/_sidebar.styl b/source/css/_schemes/Muse/_sidebar.styl index 87b0ef2..6556259 100644 --- a/source/css/_schemes/Muse/_sidebar.styl +++ b/source/css/_schemes/Muse/_sidebar.styl @@ -1,134 +1,23 @@ -if (hexo-config('sidebar.position') == 'right') { - .sidebar-active { - // Note: $sidebar-desktop + $content-desktop-large should be less than desktop-large threshold - // Otherwise a horizontal scrollbar will appear - +desktop-large() { - padding-right: $sidebar-desktop; - - .footer-fixed { - right: $sidebar-desktop; - } - } - } - - .sidebar { - right: 0 - $sidebar-desktop; - - .sidebar-active & { - right: 0; - } - } -} else { - .sidebar-active { - +desktop-large() { - padding-left: $sidebar-desktop; - - .footer-fixed { - left: $sidebar-desktop; - } - } - } - - .sidebar { - left: 0 - $sidebar-desktop; - - .sidebar-active & { - left: 0; - } - } -} - -.sidebar { - background: $black-deep; - bottom: 0; - if (not hexo-config('back2top.sidebar')) { - box-shadow: inset 0 2px 6px black; - } - max-height: 100vh; - overflow-y: auto; - position: fixed; - top: 0; - transition: all $transition-ease-out; - width: $sidebar-desktop; - z-index: $zindex-2; - - a { - border-bottom-color: $black-light; - color: $grey-dark; - - &:hover { - border-bottom-color: $gainsboro; - color: $gainsboro; - } - } -} - -.links-of-author { - &:not(:first-child) { - margin-top: 15px; - } - - a { - border-bottom-color: $black-light; - display: inline-block; - margin-bottom: 10px; - margin-right: 10px; - vertical-align: middle; - - if (hexo-config('social_icons.transition')) { - transition: all $transition-ease; - } - - &::before { - background: rgb(random-color(0, 255) - 50%, random-color(0, 255) - 50%, random-color(0, 255) - 50%); - display: inline-block; - margin-right: 3px; - transform: translateY(-2px); - round-icon(4px); - } - } -} - -.links-of-blogroll-item { - if (hexo-config('links_settings.layout') == 'inline') { - display: inline-block; - } - padding: 2px 10px; - - a { - box-sizing: border-box; - display: inline-block; - max-width: 280px; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } -} - -.popular-posts .popular-posts-item .popular-posts-link:hover { - background: none; -} - -.sidebar-dimmer { - background: black; - height: 100%; - left: 0; - opacity: 0; - position: fixed; - top: 0; - transition: visibility .4s, opacity .4s; - visibility: hidden; - width: 100%; - z-index: $zindex-1; - - .sidebar-active & { - opacity: .7; - visibility: visible; - } -} - +desktop-large() { .sidebar-dimmer { display: none; } + + .sidebar-active { + // Note: $sidebar-width-expanded + $content-desktop-large should be less than desktop-large threshold + // Otherwise a horizontal scrollbar will appear + if ($sidebar-toggle-alignment == 'right') { + padding-right: $sidebar-width-expanded; + + .footer-fixed { + right: $sidebar-width-expanded; + } + } else { + padding-left: $sidebar-width-expanded; + + .footer-fixed { + left: $sidebar-width-expanded; + } + } + } } diff --git a/source/css/_schemes/Pisces/_header.styl b/source/css/_schemes/Pisces/_header.styl index 6716886..443bcb3 100644 --- a/source/css/_schemes/Pisces/_header.styl +++ b/source/css/_schemes/Pisces/_header.styl @@ -1,5 +1,5 @@ .column { - width: $sidebar-desktop; + width: $sidebar-width-dual-column; +tablet-mobile() { width: auto; diff --git a/source/css/_schemes/Pisces/_layout.styl b/source/css/_schemes/Pisces/_layout.styl index 2d74dc7..451fc23 100644 --- a/source/css/_schemes/Pisces/_layout.styl +++ b/source/css/_schemes/Pisces/_layout.styl @@ -14,7 +14,7 @@ header.header { justify-content: space-between; main-container(); - if (hexo-config('sidebar.position') == 'right') { + if ($sidebar-toggle-alignment == 'right') { flex-direction: row-reverse; } @@ -36,10 +36,10 @@ header.header { } .footer-inner { - if (hexo-config('sidebar.position') == 'right') { - padding-right: $sidebar-desktop + $sidebar-offset; + if ($sidebar-toggle-alignment == 'right') { + padding-right: $sidebar-width-dual-column + $sidebar-offset; } else { - padding-left: $sidebar-desktop + $sidebar-offset; + padding-left: $sidebar-width-dual-column + $sidebar-offset; } +tablet-mobile() { diff --git a/source/css/_schemes/Pisces/_sidebar.styl b/source/css/_schemes/Pisces/_sidebar.styl index 2ce83a7..3a43a4c 100644 --- a/source/css/_schemes/Pisces/_sidebar.styl +++ b/source/css/_schemes/Pisces/_sidebar.styl @@ -1,88 +1,94 @@ -.sidebar { - // https://caniuse.com/css-sticky - position: -webkit-sticky; - position: sticky; - top: $sidebar-offset; ++desktop() { + .sidebar { + // https://caniuse.com/css-sticky + position: -webkit-sticky; + position: sticky; + top: $sidebar-offset; - +tablet-mobile() { + +tablet-mobile() { + display: none; + } + } + + .sidebar-toggle { display: none; } -} -.sidebar-inner { - background: var(--content-bg-color); - border-radius: $border-radius; - box-shadow: $box-shadow; - box-sizing: border-box; - color: var(--text-color); - margin-top: $sidebar-offset; - max-height: 'calc(100vh - %s)' % unit($sidebar-offset * 2, 'px'); + .sidebar-inner { + background: var(--content-bg-color); + border-radius: $border-radius; + box-shadow: $box-shadow; + box-sizing: border-box; + color: var(--text-color); + margin-top: $sidebar-offset; + max-height: 'calc(100vh - %s)' % unit($sidebar-offset * 2, 'px'); - if (hexo-config('motion.enable') and hexo-config('motion.transition.sidebar')) { - visibility: hidden; + if (hexo-config('motion.enable') and hexo-config('motion.transition.sidebar')) { + visibility: hidden; + } } -} -.site-state-item { - padding: 0 10px; -} + .site-state-item { + padding: 0 10px; + } -.sidebar .sidebar-button { - border-bottom: 1px dotted $grey-light; - border-top: 1px dotted $grey-light; + .sidebar .sidebar-button { + border-bottom: 1px dotted $grey-light; + border-top: 1px dotted $grey-light; - button { - border: 0; - color: $orange; - display: block; - width: 100%; - - &:hover { - background: none; + button { border: 0; - color: darken($orange, 20%); + color: $orange; + display: block; + width: 100%; + + &:hover { + background: none; + border: 0; + color: darken($orange, 20%); + } } } -} -.links-of-author { - flex-wrap(); -} - -.links-of-author-item { - sidebar-inline-links-item(); - - if (not hexo-config('social_icons.icons_only')) { - width: 50%; + .links-of-author { + flex-wrap(); } - a { - border-bottom: 0; - border-radius: 4px; - display: block; - - &:hover { - background: var(--body-bg-color); - } - } -} - -.links-of-blogroll-item { - if (hexo-config('links_settings.layout') == 'inline') { - display: inline-block; - max-width: 100%; + .links-of-author-item { sidebar-inline-links-item(); + + if (not hexo-config('social_icons.icons_only')) { + width: 50%; + } + + a { + border-bottom: 0; + border-radius: 4px; + display: block; + + &:hover { + background: var(--body-bg-color); + } + } } -} -if (hexo-config('back2top.sidebar')) { - // Only when back2top.sidebar is true, apply the following styles - .back-to-top { - background: var(--body-bg-color); - margin: 8px - $sidebar-offset -10px -18px; + .links-of-blogroll-item { + if (hexo-config('links_settings.layout') == 'inline') { + display: inline-block; + max-width: 100%; + sidebar-inline-links-item(); + } + } - &.back-to-top-on { - margin-top: 16px; + if (hexo-config('back2top.sidebar')) { + // Only when back2top.sidebar is true, apply the following styles + .back-to-top { + background: var(--body-bg-color); + margin: 8px - $sidebar-offset -10px -18px; + + &.back-to-top-on { + margin-top: 16px; + } } } } diff --git a/source/css/_variables/Muse.styl b/source/css/_variables/Muse.styl index b63b697..190b7cd 100644 --- a/source/css/_variables/Muse.styl +++ b/source/css/_variables/Muse.styl @@ -1,9 +1,6 @@ // Variables of Muse scheme // ================================================== -$sidebar-width = hexo-config('sidebar.width') is a 'unit' ? hexo-config('sidebar.width') : 320; -$sidebar-desktop = unit($sidebar-width, 'px'); - $content-padding-bottom = 60px; $posts-first-padding = 70px; $posts-first-padding-mobile = 35px; diff --git a/source/css/_variables/Pisces.styl b/source/css/_variables/Pisces.styl index 34b84f8..99b5514 100644 --- a/source/css/_variables/Pisces.styl +++ b/source/css/_variables/Pisces.styl @@ -5,8 +5,8 @@ // -------------------------------------------------- $body-bg-color = #f5f7f9; -$sidebar-width = hexo-config('sidebar.width') is a 'unit' ? hexo-config('sidebar.width') : 240; -$sidebar-desktop = unit($sidebar-width, 'px'); +$sidebar-width = hexo-config('sidebar.width_dual_column') is a 'unit' ? hexo-config('sidebar.width_dual_column') : 240; +$sidebar-width-dual-column = unit($sidebar-width, 'px'); $content-wrap = 'calc(100% - %s)' % unit($sidebar-width + $sidebar-offset, 'px'); $content-desktop = 'calc(100% - %s)' % unit($content-desktop-padding / 2, 'px'); diff --git a/source/css/_variables/base.styl b/source/css/_variables/base.styl index 6faafe3..4562c09 100644 --- a/source/css/_variables/base.styl +++ b/source/css/_variables/base.styl @@ -242,6 +242,8 @@ $tag-cloud-end-dark = #eee; // Variables for sidebar section elements. // -------------------------------------------------- +$sidebar-width = hexo-config('sidebar.width_expanded') is a 'unit' ? hexo-config('sidebar.width_expanded') : 320; +$sidebar-width-expanded = unit($sidebar-width, 'px'); $sidebar-padding = hexo-config('sidebar.padding') is a 'unit' ? unit(hexo-config('sidebar.padding'), px) : 18px; $sidebar-offset = hexo-config('sidebar.offset') is a 'unit' ? unit(hexo-config('sidebar.offset'), px) : 12px; $sidebar-nav-color = $grey-dim; @@ -281,6 +283,7 @@ $b2t-bg-color = $black-deep; $sidebar-toggle-inner-size = 16px; $sidebar-toggle-padding = 5px; $sidebar-toggle-size = $sidebar-toggle-inner-size + $sidebar-toggle-padding * 2; +$sidebar-toggle-alignment = hexo-config('sidebar.position') == 'left' ? 'left' : 'right'; // .post-expand .post-eof // In Muse scheme, margin above and below the post separator diff --git a/source/js/schemes/muse.js b/source/js/schemes/muse.js index ba60b51..bdd9fc5 100644 --- a/source/js/schemes/muse.js +++ b/source/js/schemes/muse.js @@ -1,53 +1,5 @@ -/* global CONFIG */ - document.addEventListener('DOMContentLoaded', () => { - const isRight = CONFIG.sidebar.position === 'right'; - - const sidebarToggleMotion = { - mouse: {}, - init : function() { - window.addEventListener('mousedown', this.mousedownHandler.bind(this)); - window.addEventListener('mouseup', this.mouseupHandler.bind(this)); - document.querySelector('.sidebar-dimmer').addEventListener('click', this.clickHandler.bind(this)); - document.querySelector('.sidebar-toggle').addEventListener('click', this.clickHandler.bind(this)); - window.addEventListener('sidebar:show', this.showSidebar); - window.addEventListener('sidebar:hide', this.hideSidebar); - }, - mousedownHandler: function(event) { - this.mouse.X = event.pageX; - this.mouse.Y = event.pageY; - }, - mouseupHandler: function(event) { - const deltaX = event.pageX - this.mouse.X; - const deltaY = event.pageY - this.mouse.Y; - const clickingBlankPart = Math.hypot(deltaX, deltaY) < 20 && event.target.matches('.main'); - // Fancybox has z-index property, but medium-zoom does not, so the sidebar will overlay the zoomed image. - if (clickingBlankPart || event.target.matches('img.medium-zoom-image')) { - this.hideSidebar(); - } - }, - clickHandler: function() { - document.body.classList.contains('sidebar-active') ? this.hideSidebar() : this.showSidebar(); - }, - showSidebar: function() { - document.body.classList.add('sidebar-active'); - const animateAction = isRight ? 'fadeInRight' : 'fadeInLeft'; - document.querySelectorAll('.sidebar .animated').forEach((element, index) => { - element.style.animationDelay = (100 * index) + 'ms'; - element.classList.remove(animateAction); - setTimeout(() => { - // Trigger a DOM reflow - element.classList.add(animateAction); - }); - }); - }, - hideSidebar: function() { - document.body.classList.remove('sidebar-active'); - } - }; - if (CONFIG.sidebar.display !== 'remove') sidebarToggleMotion.init(); - function updateFooterPosition() { const footer = document.querySelector('.footer'); const containerHeight = document.querySelector('.main').offsetHeight + footer.offsetHeight; diff --git a/source/js/sidebar.js b/source/js/sidebar.js new file mode 100644 index 0000000..6ab3c6b --- /dev/null +++ b/source/js/sidebar.js @@ -0,0 +1,50 @@ +/* global CONFIG */ + +document.addEventListener('DOMContentLoaded', () => { + + const isRight = CONFIG.sidebar.position === 'right'; + + const sidebarToggleMotion = { + mouse: {}, + init : function() { + window.addEventListener('mousedown', this.mousedownHandler.bind(this)); + window.addEventListener('mouseup', this.mouseupHandler.bind(this)); + document.querySelector('.sidebar-dimmer').addEventListener('click', this.clickHandler.bind(this)); + document.querySelector('.sidebar-toggle').addEventListener('click', this.clickHandler.bind(this)); + window.addEventListener('sidebar:show', this.showSidebar); + window.addEventListener('sidebar:hide', this.hideSidebar); + }, + mousedownHandler: function(event) { + this.mouse.X = event.pageX; + this.mouse.Y = event.pageY; + }, + mouseupHandler: function(event) { + const deltaX = event.pageX - this.mouse.X; + const deltaY = event.pageY - this.mouse.Y; + const clickingBlankPart = Math.hypot(deltaX, deltaY) < 20 && event.target.matches('.main'); + // Fancybox has z-index property, but medium-zoom does not, so the sidebar will overlay the zoomed image. + if (clickingBlankPart || event.target.matches('img.medium-zoom-image')) { + this.hideSidebar(); + } + }, + clickHandler: function() { + document.body.classList.contains('sidebar-active') ? this.hideSidebar() : this.showSidebar(); + }, + showSidebar: function() { + document.body.classList.add('sidebar-active'); + const animateAction = isRight ? 'fadeInRight' : 'fadeInLeft'; + document.querySelectorAll('.sidebar .animated').forEach((element, index) => { + element.style.animationDelay = (100 * index) + 'ms'; + element.classList.remove(animateAction); + setTimeout(() => { + // Trigger a DOM reflow + element.classList.add(animateAction); + }); + }); + }, + hideSidebar: function() { + document.body.classList.remove('sidebar-active'); + } + }; + sidebarToggleMotion.init(); +});