From 60192ae4c93a017c2681b7e0ae834485a96fe015 Mon Sep 17 00:00:00 2001 From: Alexander Fuks Date: Thu, 26 Sep 2024 21:57:32 +0000 Subject: [PATCH] feat: add mobile view toc --- _includes/overlay.html | 1 + _includes/topbar.html | 6 ++++++ _javascript/modules/components/overlay.js | 22 ++++++++++++++++++++++ _javascript/modules/components/toc.js | 2 ++ _layouts/default.html | 3 ++- _layouts/post.html | 1 - _sass/addon/commons.scss | 21 +++++++++++++++++++-- _sass/colors/typography-dark.scss | 2 +- _sass/colors/typography-light.scss | 2 +- 9 files changed, 54 insertions(+), 6 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..7fecace2fc8 --- /dev/null +++ b/_includes/overlay.html @@ -0,0 +1 @@ +
diff --git a/_includes/topbar.html b/_includes/topbar.html index fd68d1feb9d..a04a0bba6c2 100644 --- a/_includes/topbar.html +++ b/_includes/topbar.html @@ -59,6 +59,12 @@ + {% if page.layout == 'post' %} + + {% endif %} + { + hideOverlay(); +}); + +overlayTrigger.addEventListener('click', () => { + const toc = document.getElementById('toc-wrapper').innerHTML; + overlay.innerHTML = toc; + 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/_layouts/post.html b/_layouts/post.html index f17ceea8641..c1ac9bf8644 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -8,7 +8,6 @@ - post-nav - comments --- - {% include lang.html %}
diff --git a/_sass/addon/commons.scss b/_sass/addon/commons.scss index e2a0e6154b5..21aba63a0a6 100644 --- a/_sass/addon/commons.scss +++ b/_sass/addon/commons.scss @@ -972,6 +972,19 @@ $btn-mb: 0.5rem; @include placeholder-focus; } +#overlay { + position: fixed; + display: none; + width: 100%; + height: 100%; + top: 0; + left: 0; + right: 0; + background-color: rgba(0, 0, 0, 0.9); + z-index: 2; + cursor: pointer; +} + search { display: flex; width: 100%; @@ -988,7 +1001,8 @@ search { } #sidebar-trigger, -#search-trigger { +#search-trigger, +#overlay-trigger { display: none; } @@ -1320,6 +1334,8 @@ search { #topbar-wrapper { @include slide(top 0.2s ease); + position: sticky; + top: 0; left: 0; } @@ -1330,7 +1346,8 @@ search { #topbar-title, #sidebar-trigger, - #search-trigger { + #search-trigger, + #overlay-trigger { display: block; } 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;