From edbbe90742f57151d936f72bcbfabcfbb37aecb3 Mon Sep 17 00:00:00 2001 From: Rushan Date: Fri, 16 Jun 2023 10:36:35 +0000 Subject: [PATCH] Add docs switch menu (#881) Fixes https://github.com/minio/docs/issues/842 Also made some changes to the dark-mode/read-mode icons to maintain the consistency with KES docs UI. **Preview:** Screenshot 2023-06-15 at 14 19 32 Screenshot 2023-06-15 at 14 19 36 **Updating the list:** Edit the `docs` array in `default.conf.py@268`. --- source/_static/img/icons/dark-mode-active.svg | 1 - source/_static/img/icons/dark-mode.svg | 1 - .../_static/img/icons/reading-mode-active.svg | 1 - source/_static/img/icons/reading-mode.svg | 1 - source/_static/scss/includes/_base.scss | 1 + source/_static/scss/includes/_header.scss | 140 +++++++++++++++--- source/_static/scss/includes/_misc.scss | 8 +- source/_static/scss/includes/_theme.scss | 10 +- source/_static/scss/includes/_toc.scss | 2 + source/_templates/header.html | 38 +++-- source/_templates/icons/book-active.html | 4 + source/_templates/icons/book.html | 3 + source/_templates/icons/chevron-down.html | 3 + source/_templates/icons/external-link.html | 3 + source/_templates/icons/menu.html | 2 +- source/_templates/icons/moon.html | 3 + source/_templates/icons/sun.html | 3 + source/default-conf.py | 19 ++- 18 files changed, 191 insertions(+), 52 deletions(-) delete mode 100644 source/_static/img/icons/dark-mode-active.svg delete mode 100644 source/_static/img/icons/dark-mode.svg delete mode 100644 source/_static/img/icons/reading-mode-active.svg delete mode 100644 source/_static/img/icons/reading-mode.svg create mode 100644 source/_templates/icons/book-active.html create mode 100644 source/_templates/icons/book.html create mode 100644 source/_templates/icons/chevron-down.html create mode 100644 source/_templates/icons/external-link.html create mode 100644 source/_templates/icons/moon.html create mode 100644 source/_templates/icons/sun.html diff --git a/source/_static/img/icons/dark-mode-active.svg b/source/_static/img/icons/dark-mode-active.svg deleted file mode 100644 index 85906168..00000000 --- a/source/_static/img/icons/dark-mode-active.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/source/_static/img/icons/dark-mode.svg b/source/_static/img/icons/dark-mode.svg deleted file mode 100644 index 387304ab..00000000 --- a/source/_static/img/icons/dark-mode.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/source/_static/img/icons/reading-mode-active.svg b/source/_static/img/icons/reading-mode-active.svg deleted file mode 100644 index 6dffeb17..00000000 --- a/source/_static/img/icons/reading-mode-active.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/source/_static/img/icons/reading-mode.svg b/source/_static/img/icons/reading-mode.svg deleted file mode 100644 index b87bd435..00000000 --- a/source/_static/img/icons/reading-mode.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/source/_static/scss/includes/_base.scss b/source/_static/scss/includes/_base.scss index 8ca3720c..a9cc54e5 100644 --- a/source/_static/scss/includes/_base.scss +++ b/source/_static/scss/includes/_base.scss @@ -34,4 +34,5 @@ body { background-color: var(--body-bg); display: flex; flex-direction: column; + word-break: break-word; } \ No newline at end of file diff --git a/source/_static/scss/includes/_header.scss b/source/_static/scss/includes/_header.scss index 3f37bf80..21a0dd01 100644 --- a/source/_static/scss/includes/_header.scss +++ b/source/_static/scss/includes/_header.scss @@ -29,19 +29,130 @@ } .header__logo { + display: flex; + & > svg { width: 6.25rem; fill: var(--logo-fill-color); } } -.header__top__title { - line-height: 100%; - font-weight: 500; - color: var(--header-headings-color); - margin-left: 0.5rem; - font-size: $font-size-sm; - padding-bottom: 0.1rem; +.header__docs { + position: relative; + font-size: $font-size-xs; + margin-left: 1rem; + + @include breakpoint-min(breakpoints(lg)) { + position: absolute; + bottom: -2.425rem; + right: 1.75rem; + z-index: 1; + + &:before { + content: "Go to:"; + position: absolute; + left: -2.75rem; + top: 0.35rem; + font-weight: $font-weight-medium; + color: var(--headings-color); + pointer-events: none; + } + } + + &:hover { + .header__docs__menu { + display: flex; + } + + .header__docs__current { + border-radius: $border-radius $border-radius 0 0; + } + } +} + +:root { + &.read-mode { + .header__docs { + @include breakpoint-min(breakpoints(lg)) { + right: 4.5rem; + } + } + } + + &:not(.dark-mode) { + .header__docs { + @include breakpoint-max(breakpoints(lg)) { + .header__docs__current { + --docs-menu-border-color: #{rgba($white, 0.25)}; + --docs-menu-bg: transparent; + --headings-color: #{$white}; + } + + &:hover { + .header__docs__current { + --docs-menu-bg: #{$white}; + --headings-color: $headings-color; + } + } + } + } + + } +} + +.header__docs__current { + color: var(--headings-color); + font-weight: $font-weight-medium; + border: 1px solid var(--docs-menu-border-color); + border-radius: $border-radius; + display: flex; + white-space: nowrap; + align-items: center; + height: 2rem; + padding: 0.075rem 0.75rem 0; + background-color: var(--docs-menu-bg); + + & > svg { + margin-top: 1px; + margin-left: 0.5rem; + } +} + +.header__docs__menu { + position: absolute; + margin-top: -1px; + left: 0; + top: 100%; + width: 100%; + flex-direction: column; + gap: 1px; + display: none; + background-color: var(--nav-dropdown-bg); + padding: 0.25rem; + z-index: 10; + border-radius: 0 0 $border-radius $border-radius; + border: 1px solid var(--docs-menu-border-color); + + & > a { + padding: 0.35rem 1.6rem 0.35rem 0.6rem; + display: flex; + align-items: center; + border-radius: $border-radius; + white-space: nowrap; + color: var(--text-muted-color); + border: 1px solid transparent; + + &:hover { + background-color: var(--theme-light-bg); + color: var(--text-color); + } + + &.current { + background-color: var(--theme-light-hover-bg); + pointer-events: none; + color: var(--text-color); + } + } } .header__actions { @@ -65,26 +176,13 @@ } .icon--switch { - transition: background-color 500ms, border-color 500ms; background-color: var(--header-actions-icon-bg); border-color: var(--header-actions-icon-border-color); + color: var(--text-color); &:hover { background-color: var(--header-actions-icon-hover-bg); } - - & > svg { - stroke: var(--header-actions-icon-stroke); - stroke-width: var(--header-actions-icon-stroke-width); - - &:last-child { - & > path { - &:last-child { - fill: var(--header-actions-icon-path-fill); - } - } - } - } } } diff --git a/source/_static/scss/includes/_misc.scss b/source/_static/scss/includes/_misc.scss index fa859a85..2415c801 100644 --- a/source/_static/scss/includes/_misc.scss +++ b/source/_static/scss/includes/_misc.scss @@ -49,8 +49,8 @@ // Buttons icons // ---------------------- .icon { - width: 1.75rem; - height: 1.75rem; + width: 2rem; + height: 2rem; border: 1px solid transparent; border-radius: $border-radius; background-color: transparent; @@ -79,11 +79,9 @@ & > svg { transform: scale(1); opacity: 1; - transition: transform 300ms, opacity 300ms; position: absolute; &:last-child:not(:only-child) { - transform: scale(0); opacity: 0; } } @@ -92,12 +90,10 @@ & > svg, & > img { &:first-child { - transform: scale(0); opacity: 0; } &:last-child { - transform: scale(1); opacity: 1; } } diff --git a/source/_static/scss/includes/_theme.scss b/source/_static/scss/includes/_theme.scss index d71d134a..f3c9448f 100644 --- a/source/_static/scss/includes/_theme.scss +++ b/source/_static/scss/includes/_theme.scss @@ -12,14 +12,14 @@ $theme-properties: ( --headings-color: $black #E3EEEF, // Theme - --theme-light-bg: $light-300 $dark-200, - --theme-light-hover-bg: $light-500 $dark-300, + --theme-light-bg: $light-200 $dark-200, + --theme-light-hover-bg: $light-300 $dark-300, // Header --header-bg: $header-light-bg $dark-0, --logo-fill-color: $theme-red $white, --header-actions-icon-bg: $white $dark-0, - --header-actions-icon-border-color: transparent $dark-500, + --header-actions-icon-border-color: transparent $dark-300, --header-actions-icon-stroke: $black $dark-500, --header-actions-icon-stroke-width: 1.5 1.25, --header-actions-icon-path-fill: $header-light-bg $dark-500, @@ -129,6 +129,10 @@ $theme-properties: ( --is-meta-key-border-color: #c5cad0 $dark-400, --is-search-border-color: $light-500 $dark-300, --is-search-focus-box-shadow: rgba($light-500, 0.35) rgba($dark-100, 0.75), + + // Docs menu + --docs-menu-border-color: $light-300 $dark-300, + --docs-menu-bg: $white transparent, ); // Activate dark/light themes diff --git a/source/_static/scss/includes/_toc.scss b/source/_static/scss/includes/_toc.scss index 1185f308..4ff90455 100644 --- a/source/_static/scss/includes/_toc.scss +++ b/source/_static/scss/includes/_toc.scss @@ -74,6 +74,8 @@ div.topic { flex: 1; position: relative; border: none; + padding: 0; + margin: 0.25rem 0; .topic-title { @include breakpoint-max(breakpoints(lg)) { diff --git a/source/_templates/header.html b/source/_templates/header.html index 9238f444..e7bd51c1 100644 --- a/source/_templates/header.html +++ b/source/_templates/header.html @@ -6,7 +6,22 @@ -
Documentation
+ +
+
+ {{ docs[0].name }} + + {%- include "icons/chevron-down.html" %} +
+ +