feat: Remove Roles dropdown and align the sidenav to match latest des…

…igns & Fix sidenav items wrapping on hover (#301)
SPANDigital · Sep 9, 2024 · 11e0d08 · 11e0d08
1 parent 5314b77
commit 11e0d08
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 174 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -256,3 +256,9 @@
 ## 2024-08-14
 ### Bugfix
 - Center navbar header content, fix navbar header image size & improve how navbar determines height. @CharlRitterDev https://spandigital.atlassian.net/browse/PRSDM-6146
+
+## 2024-09-09
+### Features
+- Remove Roles dropdown and align the sidenav to match latest designs. @CharlRitterDev https://spandigital.atlassian.net/browse/PRSDM-6329
+### Bugfix
+- Fix sidenav items wrapping on hover. @CharlRitterDev https://spandigital.atlassian.net/browse/PRSDM-6206
diff --git a/assets/_sass/_navbar.scss b/assets/_sass/_navbar.scss
@@ -94,21 +94,8 @@ $nav-item-border: darken($navbar-default-bg, 8%);
     .menu-row {
       background-color: transparent;
 
-      &:not(.open) {
-        &:hover {
-          background-color: $brand-primary;
-
-          > div.link > a {
-            > .menu-title {
-              color: white;
-            }
-
-            > div.menu-expander > span.glyphicon {
-              margin: 0 5px;
-              -webkit-text-stroke: 1px $brand-primary;
-            }
-          }
-        }
+      &:not(.open):hover {
+        background-color: $gray-lighter;
       }
 
       &.open {
@@ -144,8 +131,8 @@ $nav-item-border: darken($navbar-default-bg, 8%);
         margin-bottom: 8px;
 
         img {
-          max-width: 100%;
-          height: 87px;
+          max-width: 260px;
+          max-height: 87px;
         }
       }
 
@@ -156,8 +143,6 @@ $nav-item-border: darken($navbar-default-bg, 8%);
         appearance: none;
         appearance: none;
         width: auto;
-        font-weight: 600;
-        font-size: 12px;
         margin-top: -10px;
 
         &:hover {
@@ -184,67 +169,6 @@ $nav-item-border: darken($navbar-default-bg, 8%);
           width: 100%;
           margin: 0;
         }
-
-        .dropdown {
-          display: block;
-          z-index: $zindex-navbar;
-
-          .dropdown__control {
-            background-color: transparent;
-          }
-
-          .dropdown__menu {
-            width: 200px;
-          }
-
-          .dropdown__option {
-            color: white;
-          }
-
-          .dropdown__option--is-focused {
-            background-color: $brand-primary;
-          }
-
-          .dropdown__option--is-selected {
-            background-color: $brand-primary;
-          }
-
-          .dropdown__indicator--is-focused {
-            color: white;
-            background-color: $brand-primary;
-          }
-
-          .dropdown__indicator--is-selected {
-            color: $brand-primary;
-            background-color: $brand-primary;
-          }
-
-          .dropdown__indicator-separator {
-            display: none;
-          }
-
-          .dropdown__indicators {
-            max-height: 10px;
-            margin: auto;
-          }
-
-          .dropdown__value-container {
-            padding: 0;
-          }
-
-          .dropdown__control--is-focused .dropdown__dropdown-indicator > svg {
-            fill: $brand-primary;
-          }
-
-          .dropdown__control--is-selected .dropdown__dropdown-indicator > svg {
-            fill: $brand-primary;
-          }
-
-          .dropdown__single-value,
-          .dropdown__placeholder {
-            display: none;
-          }
-        }
       }
     }
 
@@ -253,36 +177,21 @@ $nav-item-border: darken($navbar-default-bg, 8%);
       margin-left: 0;
       margin-right: 0;
       flex-grow: 1;
-      padding: 0 20px;
+      padding: 0 8px;
       word-break: break-all;
       overflow-wrap: anywhere;
       hyphens: auto;
       overflow-y: auto;
 
-      .menu-title {
-        font-style: normal;
-        font-weight: 400;
-        line-height: 18px;
-      }
-
-      .filter {
-        margin: 20px 0;
-
-        .control-label {
-          font-size: 12px;
-          font-weight: normal;
-        }
-      }
-
       span.glyphicon {
         padding: 4px;
         -webkit-text-stroke: 1px $navbar-default-bg;
         line-height: 0.6;
 
         &:hover {
-          background-color: $brand-tint;
+          background-color: #e2e2e2;
           border-radius: 4px;
-          -webkit-text-stroke: 1px $brand-tint;
+          -webkit-text-stroke: 1px #e2e2e2;
         }
       }
 
@@ -311,8 +220,7 @@ $nav-item-border: darken($navbar-default-bg, 8%);
           float: none;
           position: relative;
           display: block;
-          font-size: 12px;
-          font-weight: bold;
+          font-weight: 600;
 
           &.hidden {
             display: none;
@@ -334,7 +242,7 @@ $nav-item-border: darken($navbar-default-bg, 8%);
     .menu-row {
       a {
         display: flex;
-        padding: 8px 10px;
+        padding: 4px 8px;
         color: $color-grey;
         flex-grow: 1;
         text-decoration: none;
@@ -348,12 +256,11 @@ $nav-item-border: darken($navbar-default-bg, 8%);
         text-decoration: none;
         flex-grow: 1;
 
-        &:hover > .article-navbar-options .add-icon {
-          display: block;
-        }
-
-        &:hover > .article-navbar-options .delete-icon {
-          display: block;
+        &:hover > .article-navbar-options {
+          .add-icon,
+          .delete-icon {
+            visibility: visible;
+          }
         }
 
         &.level-1 {
@@ -376,7 +283,7 @@ $nav-item-border: darken($navbar-default-bg, 8%);
           margin: auto 5px auto auto;
 
           .option-button {
-            display: none;
+            visibility: hidden;
             width: 22px;
             height: 22px;
             background-color: transparent;
@@ -409,42 +316,31 @@ $nav-item-border: darken($navbar-default-bg, 8%);
         }
       }
 
-      &.child > .link > a > div {
+      a > div {
         padding-left: 5px;
       }
 
       &.active,
       .active {
-        &.child .add-icon,
-        &.closed .add-icon {
-          background-image: url('assets/svg/plus-white.svg');
-        }
-
-        &.child .delete-icon,
-        &.closed .delete-icon {
-          background-image: url('assets/svg/trash-white.svg');
-        }
-
         &.child {
-          background-color: $brand-primary;
+          background-color: $gray-lighter;
         }
 
         &.child > div > a,
         &.closed > div > a {
-          background-color: $brand-primary;
-          color: $navbar-default-link-hover-bg;
+          background-color: $gray-lighter;
 
           span {
-            -webkit-text-stroke: $brand-primary;
+            -webkit-text-stroke: $gray-lighter;
           }
         }
       }
 
       .menu-expander {
-        margin-left: -25px;
+        margin-left: -33px;
 
         .glyphicon {
-          margin: 0 5px;
+          margin-left: 5px;
         }
       }
 

diff --git a/assets/_sass/bootstrap/bootstrap/_forms.scss b/assets/_sass/bootstrap/bootstrap/_forms.scss
@@ -207,16 +207,6 @@ input[type="search"] {
 }
 
 
-// Form groups
-//
-// Designed to help with the organization and spacing of vertical forms. For
-// horizontal forms, use the predefined grid classes.
-
-.form-group {
-  margin-bottom: $form-group-margin-bottom;
-}
-
-
 // Checkboxes and radios
 //
 // Indent the labels to position radios/checkboxes as hanging controls.
@@ -474,13 +464,6 @@ input[type="checkbox"] {
 
   // Kick in the inline
   @media (min-width: $screen-sm-min) {
-    // Inline-block all the things for "inline"
-    .form-group {
-      display: inline-block;
-      margin-bottom: 0;
-      vertical-align: middle;
-    }
-
     // In navbar-form, allow folks to *not* use `.form-group`
     .form-control {
       display: inline-block;
@@ -571,11 +554,6 @@ input[type="checkbox"] {
     min-height: ($line-height-computed + ($padding-base-vertical + 1));
   }
 
-  // Make form groups behave like rows
-  .form-group {
-    @include make-row;
-  }
-
   // Reset spacing and right align labels, but scope to media queries so that
   // labels on narrow viewports stack the same as a default form example.
   @media (min-width: $screen-sm-min) {

diff --git a/assets/_sass/bootstrap/bootstrap/_navbar.scss b/assets/_sass/bootstrap/bootstrap/_navbar.scss
@@ -295,16 +295,6 @@
   // Mixin behavior for optimum display
   @include form-inline;
 
-  .form-group {
-    @media (max-width: $grid-float-breakpoint-max) {
-      margin-bottom: 5px;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-
   // Vertically center in expanded, horizontal navbar
   @include navbar-vertical-align($input-height-base);
 

diff --git a/layouts/partials/navigation/root.html b/layouts/partials/navigation/root.html
@@ -7,17 +7,7 @@
 <nav class="navbar scrollable-container">
   <div class="navbar-header">{{ partial "navigation/brand.html" . }}</div>
   <div class="navbar-items">
-    {{ $roles := .Site.Params.roles.options | default slice }} {{ if and (gt (len $roles) 0) .Site.Params.show.role }}
-    <div class="filter form-group">
-      <label class="control-label" for="roles-select">{{ .Site.Params.roles.label }}:</label>
-      <select id="roles-select" class="form-control">
-        <option value="All Roles">{{ .Site.Params.roles.all }}</option>
-        {{ range sort $roles }}
-        <option value="{{ . }}">{{ . }}</option>
-        {{ end }}
-      </select>
-    </div>
-    {{ end }} {{ $currentPage := . }}
+    {{ $currentPage := . }}
     <ul class="nav navbar-nav">
       {{ range $menu := .Site.Menus.main.ByWeight }} {{ $isRendering := true }} {{ if (isset $menu.Params "scope" ) }}
       {{ if $scopingEnabled }} {{ $menuScope := $menu.Params.scope }} {{ $isRendering = gt (len (intersect $menuScope

diff --git a/static/assets/svg/plus-white.svg b/static/assets/svg/plus-white.svg
diff --git a/static/assets/svg/trash-white.svg b/static/assets/svg/trash-white.svg