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/_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/_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/components/_tree-menu.scss b/sass/components/_tree-menu.scss new file mode 100644 index 0000000000..069d5c516c --- /dev/null +++ b/sass/components/_tree-menu.scss @@ -0,0 +1,106 @@ +.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; + opacity: 0.6; + + &:hover { + opacity: 1.0; + 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; + opacity: 1.0; + + .tree-menu__link { + color: $color-white; + } + } + } + + // 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/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/sass/site.scss b/sass/site.scss index 51aa02f523..511d8a684b 100644 --- a/sass/site.scss +++ b/sass/site.scss @@ -2,6 +2,7 @@ // Core @import 'vars'; +@import 'mixins'; // Fonts @import 'fonts/firamono'; @@ -24,6 +25,7 @@ @import "components/sponsors"; @import "components/item-grid"; @import "components/syntax-theme"; +@import "components/tree-menu"; // Pages // - Page specific CSS 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/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/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/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 %} 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 %}