From 8a5570fd2f9c2defbc55572869b9ebfbe7506aed Mon Sep 17 00:00:00 2001 From: Pablo Vazquez Date: Fri, 16 Aug 2024 15:23:57 +0200 Subject: [PATCH] Navdrawer: Style and layout fixes * Highlight active items in the tree. * Fix glitches on hover. * Do not use :before selector for items hover indicator, simply use the item itself. * Use WBA variables for border-radius, instead of bootstrap's. * Do not apply transitions to "all". It's not performant, can lead to glitches, and lazy. Only transition what's needed. * Slightly more compact by applying more consistent spacing. * Highlight training progress even when not hover. --- .../common/styles/studio/_navdrawer.sass | 135 ++++++++---------- .../nav_drawer_section_progress.html | 2 +- films/templates/films/gallery.html | 6 +- .../training/base_with_navigation.html | 8 +- 4 files changed, 71 insertions(+), 80 deletions(-) diff --git a/common/static/common/styles/studio/_navdrawer.sass b/common/static/common/styles/studio/_navdrawer.sass index 367bc8f3..baef85cb 100644 --- a/common/static/common/styles/studio/_navdrawer.sass +++ b/common/static/common/styles/studio/_navdrawer.sass @@ -111,8 +111,12 @@ .nav-drawer-body @include media-breakpoint-up(md) + display: flex + flex-direction: column + gap: var(--spacer-1) height: 100% max-height: calc(100vh - var(--nav-global-navbar-height)) + +padding(2, bottom) .nav-drawer-list @include media-breakpoint-down(sm) @@ -145,15 +149,27 @@ transition: margin-left var(--nav-drawer-animation-duration) .drawer-nav-group, .drawer-nav-header - h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, p, a + h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, a margin-bottom: 0 +.drawer-nav-group + display: flex + flex-direction: column + gap: var(--spacer-1) + +padding(1, bottom) + .drawer-nav-list - background: var(--navbar-bg) + background-color: var(--color-bg-secondary) + border-radius: var(--border-radius) color: var(--color-text-secondary) + display: flex + flex-direction: column + gap: var(--spacer-1) list-style: none - margin: var(--spacer) / 4 0 - padding: var(--spacer) / 4 0 + +margin(2, x) + +margin(1, y) + +padding(1, x) + +padding(2, y) &.training .drawer-nav-section @@ -197,14 +213,25 @@ .drawer-nav-section-link align-items: center + border-radius: var(--border-radius) color: inherit display: flex flex-direction: row flex-grow: 1 - padding: calc(var(--spacer) * 0.5) var(--spacer) - transition: $transition-base + padding: var(--spacer-1) + margin: 0 var(--spacer-1) + transition: background-color var(--transition-speed), color var(--transition-speed) width: 100% + &:hover + background: var(--color-bg-primary) + color: var(--color-text-primary) + + &.active + background: var(--color-bg-primary) + color: var(--color-text-primary) + +fw-bold + .drawer-nav-section-icon-progress .progress transition: $transition-base @@ -214,36 +241,13 @@ h4, .h4 margin-bottom: 0 - line-height: 1.5 - color: var(--color-text-secondary) - transition: $transition-base span line-height: 1 - &::before - background: var(--color-bg-primary) - border-radius: $border-radius - content: close-quote - height: calc(100% - var(--spacer) / 2) - left: var(--spacer) / 2 - opacity: 0 - position: absolute - top: var(--spacer) / 4 - transition: $transition-base - width: calc(100% - var(--spacer)) - pointer-events: none - &:hover text-decoration: none - .drawer-nav-section-icon-progress .progress - stroke: var(--color-accent) - - // TODO: fix drawer-nav-section-link ::before - &::before - opacity: 1 - // Fix before overflowing content on hover i, p @@ -252,13 +256,6 @@ >i margin-right: (var(--spacer) / 2) - &.active - h4, .h4 - .drawer-nav-section-icon - &-progress - .progress - stroke: var(--color-accent) - .subtitle color: font-size: var(--fs-xs) @@ -276,10 +273,9 @@ opacity: 1 .drawer-nav-header - margin-top: -$spacer / 4 - border-bottom: var(--border-width) solid var(--box-bg-color) - margin-bottom: $spacer / 4 - padding: $spacer + border-bottom: var(--border-width) solid var(--color-bg-alt) + +margin(3, x) + +padding(2, y) @include media-breakpoint-down(sm) padding: $spacer / 2 $spacer @@ -294,8 +290,9 @@ position: absolute width: 24px - h5 + span font-size: var(--fs-sm) + +fw-bold left: 50% line-height: 0 position: absolute @@ -334,20 +331,18 @@ $circle-circumference: $circle-diameter * 3.14 .progress fill: none //not using the $progress-bg here as it's too strong, meant for overlaying images - // TODO: @web-sasets check variable $highlight-white-strong replacement - // stroke: $highlight-white-strong - stroke: var(--color-text-secondary) + stroke: var(--color-accent) stroke-dasharray: $circle-circumference stroke-dashoffset: calc((1 - var(--progress-fraction, 0)) * #{$circle-circumference}px) stroke-linecap: round - stroke-width: 3px + stroke-width: 2px .background fill: none - // stroke: $highlight-white - stroke: var(--color-text-secondary) + stroke: currentColor stroke-linecap: round - stroke-width: 3px + stroke-width: 1px + opacity: .33 .drawer-nav-dropdown-wrapper @include button-float @@ -361,33 +356,32 @@ $circle-circumference: $circle-diameter * 3.14 .drawer-nav-dropdown align-items: center + border-radius: var(--border-radius) color: var(--nav-global-color-text) cursor: pointer display: flex flex-grow: 1 - margin-bottom: 0 + margin: 0 var(--spacer-2) max-width: 100% - padding: $spacer / 2 $spacer + padding: var(--spacer-1) var(--spacer-2) position: relative - transition: $transition-base + transition: background-color var(--transition-speed), color var(--transition-speed) user-select: none - &.dropdown - max-width: calc(100% - 44px) - - &::before - // background: $highlight-white + &:hover background: var(--color-bg-primary) - border-radius: $border-radius - content: close-quote - height: calc(100% - #{$spacer / 2}) - left: $spacer / 2 - opacity: 0 - position: absolute - top: $spacer / 4 - transition: $transition-base - width: calc(100% - #{$spacer}) - pointer-events: none + color: var(--color-text-primary) + + &.active + background: var(--color-bg-primary) + color: var(--color-text-primary) + +fw-bold + + i + color: var(--color-text-primary) + + &+.icon + color: var(--color-text-primary) &.collapsed i @@ -396,9 +390,6 @@ $circle-circumference: $circle-diameter * 3.14 &:hover text-decoration: none - &::before - opacity: 1 - // Fix before overflowing content on hover i, span @@ -414,9 +405,9 @@ $circle-circumference: $circle-diameter * 3.14 flex-grow: 0 flex-shrink: 1 justify-content: center - margin-left: - $spacer / 2 - min-width: calc(var(--spacer) * 3) - padding: $spacer / 2 $spacer * .75 + +padding(3, x) + margin-left: 0 + +margin(right, 2) .drawer-nav-dropdown-text margin-right: auto diff --git a/common/templates/common/components/navigation/nav_drawer_section_progress.html b/common/templates/common/components/navigation/nav_drawer_section_progress.html index ba88d459..c3095204 100644 --- a/common/templates/common/components/navigation/nav_drawer_section_progress.html +++ b/common/templates/common/components/navigation/nav_drawer_section_progress.html @@ -3,7 +3,7 @@
-
{{ nth }}
+ {{ nth }} {% comment %} TODO(Anna): Fix fraction calculation {% endcomment %} diff --git a/films/templates/films/gallery.html b/films/templates/films/gallery.html index ef7622e1..9c97b7f9 100644 --- a/films/templates/films/gallery.html +++ b/films/templates/films/gallery.html @@ -45,7 +45,7 @@
- + All Artwork @@ -151,7 +151,7 @@ {% for collection, child_collections in collections.items %}
{% if child_collections %} - {{ collection.name }} @@ -162,7 +162,7 @@ {% else %} - {{ collection.name }} diff --git a/training/templates/training/base_with_navigation.html b/training/templates/training/base_with_navigation.html index 3c96f1a9..799c8921 100644 --- a/training/templates/training/base_with_navigation.html +++ b/training/templates/training/base_with_navigation.html @@ -66,9 +66,9 @@ {% block nested_nav_drawer_header %}
-

- {% firstof training.type.label training.type|capfirst %} -

+
+ {% firstof training.type.label training.type|capfirst %} +
{{ training.name }}
{% endblock nested_nav_drawer_header %} @@ -87,7 +87,7 @@ {% if chapter_navigation.is_published or request.user.is_superuser or request.user.is_staff %}
{{ chapter_navigation.name }} {% if not chapter_navigation.is_published %} -- 2.30.2