From 7bea7666f82af843d48e198f601c11df24da3e74 Mon Sep 17 00:00:00 2001 From: doup Date: Thu, 7 Apr 2022 20:45:02 +0200 Subject: [PATCH 1/5] Add mixins file --- sass/_mixins.scss | 5 +++++ sass/site.scss | 1 + 2 files changed, 6 insertions(+) create mode 100644 sass/_mixins.scss diff --git a/sass/_mixins.scss b/sass/_mixins.scss new file mode 100644 index 0000000000..39000705d0 --- /dev/null +++ b/sass/_mixins.scss @@ -0,0 +1,5 @@ +@mixin flex-center() { + display: flex; + align-items: center; + justify-content: center; +} diff --git a/sass/site.scss b/sass/site.scss index 51aa02f523..4d1c918601 100644 --- a/sass/site.scss +++ b/sass/site.scss @@ -2,6 +2,7 @@ // Core @import 'vars'; +@import 'mixins'; // Fonts @import 'fonts/firamono'; From 5d0181e3a6d7f89b99b812f3e8b0b7095bed8a74 Mon Sep 17 00:00:00 2001 From: doup Date: Thu, 7 Apr 2022 20:46:23 +0200 Subject: [PATCH 2/5] Add `tree-menu` component --- sass/_vars.scss | 4 ++ sass/components/_tree-menu.scss | 103 ++++++++++++++++++++++++++++++++ sass/site.scss | 1 + 3 files changed, 108 insertions(+) create mode 100644 sass/components/_tree-menu.scss diff --git a/sass/_vars.scss b/sass/_vars.scss index 8a97fce3b4..91bf00abf8 100644 --- a/sass/_vars.scss +++ b/sass/_vars.scss @@ -28,6 +28,10 @@ $syntax-theme-background-hover: #414247; $default-image-background-color: #1b1b1b; $card-hover-background: #2f3033; +// Animation +$duration-fast: 100ms; +$duration: 250ms; + // General $content-top-margin: 30px; $default-padding: 15px; diff --git a/sass/components/_tree-menu.scss b/sass/components/_tree-menu.scss new file mode 100644 index 0000000000..29e854fdf6 --- /dev/null +++ b/sass/components/_tree-menu.scss @@ -0,0 +1,103 @@ +.tree-menu { + $hover-color: rgba($color-white, 0.1); + $item-height: 32px; + $border-radius: 4px; + + margin: 0; + padding: 0; + position: relative; + + // TODO: REMOVE THIS SNIPPET ONCE THE HEADER IS REFACTORED + // vvv + z-index: 2; + + * { + box-sizing: border-box; + } + // ^^^ + + &__state { + display: none; + } + + &__item { + list-style: none; + + > .tree-menu { + display: none; + padding-left: 16px; + } + } + + &__label { + display: flex; + border-radius: $border-radius; + margin-bottom: 2px; + + &:hover { + background-color: $hover-color; + } + + &--with-chevron { + .tree-menu__link { + padding-right: 4px; + } + } + } + + &__link { + display: flex; + align-items: center; + flex-grow: 1; + padding: 4px 16px; + min-height: $item-height; + text-decoration: none; + line-height: 1.25; + font-size: 1rem; + + &, &:focus, &:active, &:hover, &:link, &:visited { + color: $color-white; + } + } + + &__toggle { + @include flex-center; + + flex-shrink: 0; + width: 44px; + cursor: pointer; + border-radius: $border-radius; + user-select: none; + + &:hover { + background-color: $hover-color; + } + } + + &__chevron { + transition: transform $duration; + transform: rotate(-90deg); + } + + &__item--active { + // Target just the first label, ignore subsection labels + > .tree-menu__label { + background-color: $hover-color; + + .tree-menu__link { + color: #b1d9ff; + } + } + } + + // Sub-menu open state + &__state:checked + .tree-menu__item { + > .tree-menu__label .tree-menu__chevron { + transform: rotate(0deg); + } + + > .tree-menu { + display: block; + } + } +} diff --git a/sass/site.scss b/sass/site.scss index 4d1c918601..511d8a684b 100644 --- a/sass/site.scss +++ b/sass/site.scss @@ -25,6 +25,7 @@ @import "components/sponsors"; @import "components/item-grid"; @import "components/syntax-theme"; +@import "components/tree-menu"; // Pages // - Page specific CSS From e2e91601b0830b95a61e8844db6b0cee02194833 Mon Sep 17 00:00:00 2001 From: doup Date: Thu, 7 Apr 2022 20:46:53 +0200 Subject: [PATCH 3/5] Update book sidebar menu with new `tree-menu` --- sass/components/_book-nav.scss | 4 ++- sass/pages/_book.scss | 7 ++-- static/assets/icon-chevron-down.svg | 3 ++ templates/book-section.html | 9 +---- templates/macros/book.html | 56 +++++++++++++++++++++-------- 5 files changed, 52 insertions(+), 27 deletions(-) create mode 100644 static/assets/icon-chevron-down.svg diff --git a/sass/components/_book-nav.scss b/sass/components/_book-nav.scss index 98de04abc9..1d3af5198c 100644 --- a/sass/components/_book-nav.scss +++ b/sass/components/_book-nav.scss @@ -1,7 +1,7 @@ $inactive-nav-color: #999999; $book-nav-width: 210px; -@media screen and (max-width: 900px) { +@media screen and (max-width: 980px) { #show-book-nav:not(:checked) + .book-nav { transform: translateX(calc(0px - #{$book-nav-width})); } @@ -16,10 +16,12 @@ $book-nav-width: 210px; } .book-nav { + box-sizing: border-box; margin-top: $default-padding; flex: 0 0 $book-nav-width; user-select: none; transition: transform 0.3s; + padding-left: 8px; } .book-nav-sections { diff --git a/sass/pages/_book.scss b/sass/pages/_book.scss index c552f0fb74..52b70ab385 100644 --- a/sass/pages/_book.scss +++ b/sass/pages/_book.scss @@ -66,14 +66,15 @@ $pager-bar-background-color-in: #29292c; height: 100%; width: $pager-bar-width; transition: 0.2s; + z-index: 1; } .book-pager-bar-previous:hover { - background-image: linear-gradient(to right, #00000000, rgba($pager-bar-background-color-in, 100), rgba($pager-bar-background-color-in, 255)); + background-image: linear-gradient(to right, #00000000, rgba($pager-bar-background-color-in, 0.75)); } .book-pager-bar-next:hover { - background-image: linear-gradient(to left, #00000000, rgba($pager-bar-background-color-in, 100), rgba($pager-bar-background-color-in, 255)); + background-image: linear-gradient(to left, #00000000, rgba($pager-bar-background-color-in, 0.75)); } .book-pager-bar-previous { @@ -118,4 +119,4 @@ $pager-bar-icon-width: 200px; .book-pager-bar-icon-next { position: absolute; left: -$pager-bar-icon-width; -} \ No newline at end of file +} diff --git a/static/assets/icon-chevron-down.svg b/static/assets/icon-chevron-down.svg new file mode 100644 index 0000000000..c16b12cad1 --- /dev/null +++ b/static/assets/icon-chevron-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/templates/book-section.html b/templates/book-section.html index 3f994c2be0..161dcade01 100644 --- a/templates/book-section.html +++ b/templates/book-section.html @@ -9,14 +9,7 @@
{% set root_section = get_section(path="learn/book/_index.md") %} diff --git a/templates/macros/book.html b/templates/macros/book.html index ed4ec9e7fd..7920f66b32 100644 --- a/templates/macros/book.html +++ b/templates/macros/book.html @@ -1,17 +1,43 @@ -{% macro book_nav_section(section_path, section_number) %} -{% set section = get_section(path=section_path) %} -
  • - - {{ section_number }}. - {{ section.title | lower }} - - {% if section.subsections and section.path in current_path %} -
      - {% for s in section.subsections %} - {% set subsection_number = section_number ~ "." ~ loop.index %} - {{ book_macros::book_nav_section(section_path=s, section_number=subsection_number) }} +{% macro book_menu_row(prefix, section_path) %} + {% set section = get_section(path=section_path) %} + {% set is_in_branch = section.path in current_path %} + {% set is_active = current_path == section.path %} + {% set id = prefix ~ '-' ~ section.path | slugify %} + {% set class = "tree-menu__item" %} + {% set label_class = "tree-menu__label" %} + + {% if is_active %} + {% set class = class ~ " tree-menu__item--active" %} + {% endif %} + + {% if section.subsections %} + {% set label_class = label_class ~ " tree-menu__label--with-chevron" %} + + {% endif %} + +
    • +
      + {{ section.title }} + {% if section.subsections %} + + {% endif %} +
      + {% if section.subsections %} +
        + {% for s in section.subsections %} + {{ self::book_menu_row(prefix=prefix, section_path=s) }} + {% endfor %} +
      + {% endif %} +
      • +{% endmacro book_menu_row %} + +{% macro book_menu(root, prefix) %} +
        + {% for s in root.subsections %} + {{ self::book_menu_row(prefix=prefix, section_path=s) }} {% endfor %}
      - {% endif %} - -{% endmacro book_nav_section %} +{% endmacro %} From e5c6983b00788c824faae9334a45c3316e9a7776 Mon Sep 17 00:00:00 2001 From: doup Date: Thu, 7 Apr 2022 20:47:16 +0200 Subject: [PATCH 4/5] Update `assets/examples` sidebar with new `tree-menu` --- templates/assets.html | 24 +---------------------- templates/examples.html | 25 ++---------------------- templates/macros/assets.html | 37 ++++++++++++++++++++++++++++++++++++ 3 files changed, 40 insertions(+), 46 deletions(-) diff --git a/templates/assets.html b/templates/assets.html index 925c0b62b7..7385685641 100644 --- a/templates/assets.html +++ b/templates/assets.html @@ -5,29 +5,7 @@
      {% for subsection in section.subsections %} diff --git a/templates/examples.html b/templates/examples.html index b40503cee5..b0d7ddf72c 100644 --- a/templates/examples.html +++ b/templates/examples.html @@ -1,32 +1,11 @@ {% extends "layouts/base.html" %} +{% import "macros/assets.html" as assets_macros %} {% block content %}
      {% for subsection in section.subsections %} diff --git a/templates/macros/assets.html b/templates/macros/assets.html index 365bf473b6..fd3e63d021 100644 --- a/templates/macros/assets.html +++ b/templates/macros/assets.html @@ -15,3 +15,40 @@
      {% endmacro card %} + +{% macro assets_menu_row(prefix, section_path) %} + {% set section = get_section(path=section_path) %} + {% set id = prefix ~ '-' ~ section.path | slugify %} + {% set label_class = "tree-menu__label" %} + + {% if section.subsections %} + {% set label_class = label_class ~ " tree-menu__label--with-chevron" %} + + {% endif %} + +
    • +
      + {{ section.title }} + {% if section.subsections %} + + {% endif %} +
      + {% if section.subsections %} +
        + {% for s in section.subsections %} + {{ self::assets_menu_row(prefix=prefix, section_path=s) }} + {% endfor %} +
      + {% endif %} +
      • +{% endmacro %} + +{% macro assets_menu(root, prefix) %} +
        + {% for s in root.subsections %} + {{ self::assets_menu_row(prefix=prefix, section_path=s)}} + {% endfor %} +
      +{% endmacro %} From 9e9d6acfe60d032f2ef4d4e5dadfd424e77f737f Mon Sep 17 00:00:00 2001 From: doup Date: Fri, 8 Apr 2022 19:36:17 +0200 Subject: [PATCH 5/5] Dim unselected tree-menu items --- sass/components/_tree-menu.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/sass/components/_tree-menu.scss b/sass/components/_tree-menu.scss index 29e854fdf6..069d5c516c 100644 --- a/sass/components/_tree-menu.scss +++ b/sass/components/_tree-menu.scss @@ -33,8 +33,10 @@ display: flex; border-radius: $border-radius; margin-bottom: 2px; + opacity: 0.6; &:hover { + opacity: 1.0; background-color: $hover-color; } @@ -83,9 +85,10 @@ // Target just the first label, ignore subsection labels > .tree-menu__label { background-color: $hover-color; + opacity: 1.0; .tree-menu__link { - color: #b1d9ff; + color: $color-white; } } }