From 38cb230e49de65440f66c5aaa5268df6557eaa79 Mon Sep 17 00:00:00 2001 From: Alexander Fuks Date: Thu, 26 Sep 2024 22:19:08 +0000 Subject: [PATCH] feat: add mobile view toc --- _includes/overlay.html | 3 ++ _includes/topbar.html | 7 ++++ _javascript/modules/components/overlay.js | 39 +++++++++++++++++++++++ _javascript/modules/components/toc.js | 2 ++ _layouts/default.html | 3 +- _sass/addon/commons.scss | 35 ++++++++++++++++++-- _sass/colors/typography-dark.scss | 2 +- _sass/colors/typography-light.scss | 2 +- 8 files changed, 88 insertions(+), 5 deletions(-) create mode 100644 _includes/overlay.html create mode 100644 _javascript/modules/components/overlay.js diff --git a/_includes/overlay.html b/_includes/overlay.html new file mode 100644 index 00000000000..254ce216d13 --- /dev/null +++ b/_includes/overlay.html @@ -0,0 +1,3 @@ +
+
+
diff --git a/_includes/topbar.html b/_includes/topbar.html index fd68d1feb9d..3dd518b04fe 100644 --- a/_includes/topbar.html +++ b/_includes/topbar.html @@ -47,6 +47,13 @@
{% if page.layout == 'home' %} {{- site.data.locales[include.lang].title | default: site.title -}} + {% elsif page.layout == 'post' and site.toc and page.toc %} +
+ Contents + +
{% elsif page.collection == 'tabs' or page.layout == 'page' %} {%- capture tab_key -%}{{ page.url | split: '/' }}{%- endcapture -%} {{- site.data.locales[include.lang].tabs[tab_key] | default: page.title -}} diff --git a/_javascript/modules/components/overlay.js b/_javascript/modules/components/overlay.js new file mode 100644 index 00000000000..c538a07832e --- /dev/null +++ b/_javascript/modules/components/overlay.js @@ -0,0 +1,39 @@ +const body = document.body; +const overlay = document.getElementById('overlay'); +const overlayContent = document.getElementById('overlay-content'); +const overlayTrigger = document.getElementById('overlay-trigger'); + +function showOverlay() { + body.classList.add('noscroll'); + overlay.classList.add('d-block'); +} + +function hideOverlay() { + body.classList.remove('noscroll'); + overlay.classList.remove('d-block'); +} + +function addTocToOverlay() { + const toc = document.getElementById('toc-wrapper'); + const clonedToc = toc.cloneNode(true); + clearOverlayContent(); + overlayContent.appendChild(clonedToc); +} + +function clearOverlayContent() { + while (overlayContent.firstChild) { + overlayContent.removeChild(overlayContent.firstChild); + } +} + +overlay.addEventListener('click', () => { + clearOverlayContent(); + hideOverlay(); +}); + +overlayTrigger.addEventListener('click', () => { + addTocToOverlay(); + showOverlay(); +}); + +export { showOverlay, hideOverlay }; diff --git a/_javascript/modules/components/toc.js b/_javascript/modules/components/toc.js index 56ce26fac50..358ab144b92 100644 --- a/_javascript/modules/components/toc.js +++ b/_javascript/modules/components/toc.js @@ -1,3 +1,5 @@ +import { showOverlay } from './overlay'; + export function toc() { if (document.querySelector('main h2, main h3')) { // see: https://github.com/tscanlin/tocbot#usage diff --git a/_layouts/default.html b/_layouts/default.html index ea438fe7abb..b601d4b894d 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1,7 +1,6 @@ --- layout: compress --- - {% include origin-type.html %} @@ -74,6 +73,8 @@ {% include_cached notification.html lang=lang %} {% endif %} + {% include overlay.html %} + {% include js-selector.html lang=lang %} diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index e2a0e6154b5..c01d439bc0c 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -35,6 +35,10 @@ body { font-family: $font-family-base; } +.noscroll { + overflow: hidden; +} + /* --- Typography --- */ @for $i from 1 through 5 { @@ -972,6 +976,19 @@ $btn-mb: 0.5rem; @include placeholder-focus; } +#overlay { + position: fixed; + overflow-y: scroll; + display: none; + width: 100%; + height: 100%; + inset: 0; + background-color: rgba(0, 0, 0, 0.95); + z-index: 3; + cursor: pointer; + padding: 1rem 0; +} + search { display: flex; width: 100%; @@ -988,7 +1005,8 @@ search { } #sidebar-trigger, -#search-trigger { +#search-trigger, +#overlay-trigger { display: none; } @@ -1094,6 +1112,11 @@ search { white-space: nowrap; } +#contents-title { + display: inline-flex; + align-items: baseline; +} + #mask { display: none; position: fixed; @@ -1320,7 +1343,10 @@ search { #topbar-wrapper { @include slide(top 0.2s ease); + position: sticky; + top: 0; left: 0; + z-index: 1; } main, @@ -1330,7 +1356,8 @@ search { #topbar-title, #sidebar-trigger, - #search-trigger { + #search-trigger, + #overlay-trigger { display: block; } @@ -1368,6 +1395,10 @@ search { } } + #overlay { + display: none !important; + } + #search-hints { display: none; } diff --git a/_sass/colors/typography-dark.scss b/_sass/colors/typography-dark.scss index 12427ec494a..b8a9296822a 100644 --- a/_sass/colors/typography-dark.scss +++ b/_sass/colors/typography-dark.scss @@ -47,7 +47,7 @@ --avatar-border-color: rgb(206, 206, 206, 0.9); /* Topbar */ - --topbar-bg: rgb(27, 27, 30, 0.64); + --topbar-bg: rgb(27, 27, 30, 1); --topbar-text-color: var(--text-color); --search-border-color: rgb(55, 55, 55); --search-icon-color: rgb(100, 102, 105); diff --git a/_sass/colors/typography-light.scss b/_sass/colors/typography-light.scss index 78000746925..9b699337df7 100644 --- a/_sass/colors/typography-light.scss +++ b/_sass/colors/typography-light.scss @@ -50,7 +50,7 @@ --avatar-border-color: white; /* Topbar */ - --topbar-bg: rgb(255, 255, 255, 0.7); + --topbar-bg: rgb(255, 255, 255, 1); --topbar-text-color: rgb(78, 78, 78); --search-border-color: rgb(240, 240, 240); --search-icon-color: #c2c6cc;