From ac41bb18f8f40663ba4fa1554b201ac549189188 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=93scar?= Date: Fri, 25 Aug 2023 15:52:25 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8feat(quick-navigation):=20add=20ToC=20?= =?UTF-8?q?button=20(#115)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- sass/main.scss | 1 + sass/parts/_header.scss | 9 +- sass/parts/_misc.scss | 46 --------- sass/parts/_quick_navigation_buttons.scss | 119 ++++++++++++++++++++++ templates/macros/content.html | 34 +++++-- 5 files changed, 147 insertions(+), 62 deletions(-) create mode 100644 sass/parts/_quick_navigation_buttons.scss diff --git a/sass/main.scss b/sass/main.scss index 8e8f29c..8d3be21 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -13,6 +13,7 @@ @use 'parts/_multilingual_quote.scss'; @use 'parts/_pagination.scss'; @use 'parts/_posts_list.scss'; +@use 'parts/_quick_navigation_buttons.scss'; @use 'parts/_spoiler.scss'; @use 'parts/_table.scss'; @use 'parts/_tags.scss'; diff --git a/sass/parts/_header.scss b/sass/parts/_header.scss index a89253c..3cf6ff8 100644 --- a/sass/parts/_header.scss +++ b/sass/parts/_header.scss @@ -82,11 +82,6 @@ header { } } -.card-meta { - color: var(--meta-color); - font-size: 0.92rem; -} - .language-switcher { margin-left: 0.5rem; margin-right: 0.5rem; @@ -108,7 +103,7 @@ header { .dropdown { display: inline-block; position: relative; - z-index: 99; + z-index: 1; font-size: 0.8rem; } @@ -117,7 +112,7 @@ header { position: absolute; padding-left: 0.5rem; padding-right: 0.5rem; - z-index: 99; + z-index: 1; left: 50%; transform: translateX(-50%); text-align: center; diff --git a/sass/parts/_misc.scss b/sass/parts/_misc.scss index d7670e1..61635b8 100644 --- a/sass/parts/_misc.scss +++ b/sass/parts/_misc.scss @@ -151,49 +151,3 @@ hr { border-radius: 10px; text-align: center; } - -#button-container { - position: fixed; - right: 2rem; - bottom: 2rem; - display: flex; - flex-direction: column; - gap: 0.6rem; - - #comments-button, #top-button { - background-color: var(--bg-1); - padding: 0.4rem; - height: 1rem; - width: 1rem; - text-align: center; - border-radius: 50%; - border: none; - display: flex; - justify-content: center; - align-items: center; - - &:hover { - background-color: var(--bg-3); - - svg { - fill: var(--primary-color); - } - - &::before { - background-color: transparent; - } - } - - svg { - width: 1rem; - height: 1rem; - fill: var(--text-color); - } - } - - @media (max-width: 700px) { - #comments-button, #top-button { - display: none; - } - } -} diff --git a/sass/parts/_quick_navigation_buttons.scss b/sass/parts/_quick_navigation_buttons.scss new file mode 100644 index 0000000..475c85f --- /dev/null +++ b/sass/parts/_quick_navigation_buttons.scss @@ -0,0 +1,119 @@ +#button-container { + display: flex; + position: fixed; + right: 2rem; + bottom: 2rem; + flex-direction: column; + gap: 0.6rem; + z-index: 2; // Above "copy-code" buttons. Important for the ToC. + + #toc-button, + #comments-button, + #top-button { + display: flex; + justify-content: center; + align-items: center; + z-index: 2; + cursor: pointer; + border: none; + border-radius: 50%; + background-color: var(--bg-1); + padding: 0.4rem; + width: 1rem; + height: 1rem; + text-align: center; + + &:hover { + background-color: var(--bg-3); + + svg { + fill: var(--primary-color); + } + + &::before { + background-color: transparent; + } + } + + svg { + fill: var(--text-color); + width: 1rem; + height: 1rem; + } + } + + #toc-floating-container { + + $padding-vertical: 0.7rem; + $padding-horizontal: 1rem; + + #toc-button { + position: relative; + z-index: 2; + } + + .toc-container { + margin: 0; + margin-top: $padding-vertical; + } + + .toc-content { + display: none; + position: absolute; + right: 0; + bottom: 100%; + z-index: 2; + margin-bottom: $padding-vertical; + box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; + border: 1px solid var(--divider-color); + border-radius: 5px; + background-color: var(--background-color); + padding-right: $padding-horizontal; + max-height: 80vh; + overflow-y: auto; + font-size: 0.8rem; + text-align: left; + white-space: nowrap; // Prevents wrapping, allowing content to define width. + + ul { + padding-left: $padding-horizontal; + list-style: none; + } + } + + .toggle { + display: none; + + &:checked { + + + .overlay, + + .overlay + #toc-button + .toc-content { + display: block; + } + + + .overlay + #toc-button svg { + fill: var(--primary-color); // Show the ToC icon as toggled. + } + } + } + + .overlay { + display: none; + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + opacity: 40%; + z-index: 1; // Lower than the Table of Contents + background: var(--background-color); + } + + } +} + +@media (max-width: 700px) { + #button-container { + display: none !important; + } +} diff --git a/templates/macros/content.html b/templates/macros/content.html index 9119ea0..4c42835 100644 --- a/templates/macros/content.html +++ b/templates/macros/content.html @@ -101,16 +101,32 @@ {% if config.extra.quick_navigation_buttons or page.extra.quick_navigation_buttons %}
- {% if comment_system %} - - - - {% endif %} + {# Button to go show a floating Table of Contents #} + {% if page.toc %} +
+ + + +
+ {{ macros_toc::toc(page=page, header=false) }} +
+
+ {% endif %} - - - -
+ {# Button to go to the comment section #} + {% if comment_system %} + + + + {% endif %} + + {# Button to go to the top of the page #} + + + + {% endif %} {% endmacro content %}