fix breadcrumb, nav, bug (#1209)

chillenberger · web-flow · commit ffe4bfe9cf20 · 2023-12-01T16:29:11.000-07:00
diff --git a/pgml-dashboard/src/components/breadcrumbs/breadcrumbs.scss b/pgml-dashboard/src/components/breadcrumbs/breadcrumbs.scss
@@ -0,0 +1,36 @@
+
+.breadcrumb {
+  .breadcrumb-item {
+      display: flex; 
+      align-items: center;
+      text-align: center;
+      border: none;
+      
+      &:not(.active) a {
+          @extend .btn-tertiary-web-app;
+          padding: 0px;
+      }
+
+      &.active {
+          a {
+              color: #{$gray-100};
+              border-bottom: none;
+              
+              &:hover {
+                  @include semibold_by_shadow(#{$gray-100});
+              }
+
+              &:active {
+                  @include bold_by_shadow(#{$gray-100});
+              }
+
+          }
+      }
+  }
+
+  .vr {
+    opacity: 1;
+    color: #{$gray-600};
+    width: 2px;
+  }
+}
diff --git a/pgml-dashboard/src/components/breadcrumbs/template.html b/pgml-dashboard/src/components/breadcrumbs/template.html
@@ -1,6 +1,14 @@
 <nav>
   <nav aria-label="breadcrumb z-1">
     <ol class="breadcrumb">
+      <!-- not quite ready for this yet -->
+      <!-- <li class="breadcrumb-item body-regular-text <% if links.is_empty() {%>active<% } %>">
+        <a class="d-flex" href="/deployments">
+          <span class="material-symbols-outlined">
+            roofing
+          </span>
+        </a>
+      </li> -->
       <% for link in links {
         let active = if link.active {
           "active"
@@ -15,14 +23,14 @@
         };
   
       %>
-        <li class="breadcrumb-item <%= active %> fs-6" <%- area %>>
-          <a class="" href="<%= link.href %>">
-            <%= link.name %>
-          </a>
-          <% if active.is_empty() { %>
-          <div class="vr my-1 ms-2 opacity-100" style="width: 2px"></div>
-          <% } %>
-        </li>
+      <li class="breadcrumb-item body-regular-text <%= active %>" <%- area %>>
+        <a href="<%= link.href %>">
+          <%= link.name %>
+        </a>
+        <% if active.is_empty() { %>
+        <div class="vr my-1 ms-2"></div>
+        <% } %>
+      </li>
       <% } %>
     </ol>
   </nav>
diff --git a/pgml-dashboard/src/components/navigation/navbar/marketing/template.html b/pgml-dashboard/src/components/navigation/navbar/marketing/template.html
@@ -57,7 +57,7 @@
 
         <div class="collapse navbar-collapse drawer-submenu-container navbarSupportedContent" id="navbarSupportedContent">
           <!-- Main Menu -->
-          <div class="nav-item w-100 d-xl-flex flex-column flex-xl-row align-items-xl-center collapse collapse-horizontal show drawer-submenu <% for item in &mobile_nav_items {%> <%- item.collapse %><% } %>">
+          <div class="nav-item w-100 d-xl-flex flex-column flex-xl-row align-items-xl-center collapse collapse-horizontal drawer-submenu <% for item in &mobile_nav_items {%> <%- item.collapse %><% } %> show">
             <ul class="navbar-nav flex-grow-1 gap-4 me-auto my-4 my-xl-0">
 
               <% if !standalone_dashboard { %>
diff --git a/pgml-dashboard/static/css/bootstrap-theme.scss b/pgml-dashboard/static/css/bootstrap-theme.scss
@@ -80,7 +80,6 @@
 // Components 
 @import 'scss/components/icon';
 @import 'scss/components/admonitions';
-@import 'scss/components/breadcrumb';
 @import 'scss/components/navs';
 @import 'scss/components/tables';
 @import 'scss/components/badges';
diff --git a/pgml-dashboard/static/css/modules.scss b/pgml-dashboard/static/css/modules.scss
@@ -2,6 +2,7 @@
 // There is no need to edit it manually.
 
 @import "../../src/components/accordian/accordian.scss";
+@import "../../src/components/breadcrumbs/breadcrumbs.scss";
 @import "../../src/components/chatbot/chatbot.scss";
 @import "../../src/components/dropdown/dropdown.scss";
 @import "../../src/components/github_icon/github_icon.scss";
diff --git a/pgml-dashboard/static/css/scss/base/_typography.scss b/pgml-dashboard/static/css/scss/base/_typography.scss
@@ -48,7 +48,7 @@ h6, .h6 {
     }
 }
 
-.eyebrow {
+.eyebrow-text {
     font-weight: $font-weight-bold; font-size: var(--eyebrow-font-size); line-height: var(--eyebrow-line-height);
     @include media-breakpoint-down(md) {
         font-size: 16px; line-height: 22px;
@@ -60,14 +60,35 @@ h6, .h6 {
     font-size: 18px;
     line-height: 22px;
 }
-.body-text {
-    font-size: 16px;
-    line-height: 20px;
+
+.body-large-text {
+    font-size: var(--body-large-font-size); line-height: var(--body-large-line-height);
+    @include media-breakpoint-down(md) {
+        font-size: 18px; line-height: 24px;
+    }
+}
+
+.body-regular-text {
+    font-size: var(--body-regular-font-size); line-height: var(--body-regular-line-height);
+    @include media-breakpoint-down(md) {
+        font-size: 16px; line-height: 20px;
+    }
+}
+
+.body-small-text {
+    font-size: var(--body-small-font-size); line-height: var(--body-small-line-height);
+    @include media-breakpoint-down(md) {
+        font-size: 14px; line-height: 18px;
+    }
 }
+
 .legal-text {
     font-family: Inter;
-    font-size: 12px;
-    line-height: 16px;
+    font-size: var(--legal-font-size);
+    line-height: var(--legal-line-height);
+    @include media-breakpoint-down(md) {
+        font-size: 12px; line-height: 16px;
+    }
 }
 
 .text-error {
@@ -108,23 +129,3 @@ h6, .h6 {
 .text-gradient-party, .party-time {
     @include text-gradient($gradient-text);
 }
-
-.marketing-body-large {
-    font-size: 20px;
-    line-height: 26px;
-    color: #{$gray-200};
-    @include media-breakpoint-down(md) {
-        font-size: 18px;
-        line-height: 24px;
-    }
-}
-
-.marketing-body {
-    font-size: 18px;
-    line-height: 22px;
-    color: #{$gray-200};
-    @include media-breakpoint-down(md) {
-        font-size: 16px;
-        line-height: 20px;
-    }
-}
diff --git a/pgml-dashboard/static/css/scss/components/_breadcrumb.scss b/pgml-dashboard/static/css/scss/components/_breadcrumb.scss
diff --git a/pgml-dashboard/static/css/scss/components/_buttons.scss b/pgml-dashboard/static/css/scss/components/_buttons.scss
@@ -177,10 +177,6 @@
     width: fit-content;
     padding: 0px;
 
-    span {
-        font-size: 2rem;
-    }
-
     &:hover {
         color: #{$slate-tint-400};
         border-bottom-color: #{$slate-tint-400};
diff --git a/pgml-dashboard/static/css/scss/themes/docs.scss b/pgml-dashboard/static/css/scss/themes/docs.scss
@@ -7,6 +7,10 @@
   --h5-font-size: 24px;
   --h6-font-size: 20px;
   --eyebrow-font-size: 18px;
+  --legal-font-size: 12px;
+  --body-large-font-size: 20px;
+  --body-regulare-font-size: 18px;
+  --body-small-font-size: 16px;
 
   --h1-big-line-height: 84px;
   --h1-line-height: 72px;
@@ -16,4 +20,8 @@
   --h5-line-height: 30px;
   --h6-line-height: 24px;
   --eyebrow-line-height: 24px;
+  --legal-line-height: 16px;
+  --body-large-line-height: 26px;
+  --body-regular-line-height: 22px;
+  --body-small-line-height: 20px;
 }
diff --git a/pgml-dashboard/static/css/scss/themes/marketing.scss b/pgml-dashboard/static/css/scss/themes/marketing.scss
@@ -8,6 +8,10 @@
   --h5-font-size: 28px;
   --h6-font-size: 24px;
   --eyebrow-font-size: 18px;
+  --legal-font-size: 10px;
+  --body-large-font-size: 20px;
+  --body-regulare-font-size: 18px;
+  --body-small-font-size: 16px;
 
   --h1-big-line-height: 84px;
   --h1-line-height: 72px;
@@ -17,4 +21,8 @@
   --h5-line-height: 34px;
   --h6-line-height: 30px;
   --eyebrow-line-height: 24px;
+  --legal-line-height: 14px;
+  --body-large-line-height: 26px;
+  --body-regular-line-height: 22px;
+  --body-small-line-height: 20px;
 }
diff --git a/pgml-dashboard/static/css/scss/themes/product.scss b/pgml-dashboard/static/css/scss/themes/product.scss
@@ -7,6 +7,10 @@
   --h5-font-size: 24px;
   --h6-font-size: 20px;
   --eyebrow-font-size: 14px;
+  --legal-font-size: 12px;
+  --body-large-font-size: 18px;
+  --body-regular-font-size: 16px;
+  --body-small-font-size: 14px;
 
   --h1-big-line-height: 84px;
   --h1-line-height: 72px;
@@ -16,4 +20,8 @@
   --h5-line-height: 30px;
   --h6-line-height: 24px;
   --eyebrow-line-height: normal;
+  --legal-line-height: 16px;
+  --body-large-line-height: 24px;
+  --body-regular-line-height: 20px;
+  --body-small-line-height: 18px;
 }
diff --git a/pgml-dashboard/static/js/topnav-web-app.js b/pgml-dashboard/static/js/topnav-web-app.js
@@ -3,20 +3,25 @@ import {
 } from '@hotwired/stimulus'
 
 export default class extends Controller {
-
     connect() {
-        let navbarMenues = document.querySelectorAll('.navbar-collapse');
-
-        document.addEventListener('show.bs.collapse', e => {
-            this.closeOtherMenues(navbarMenues, e.target)
-        })
+        document.addEventListener('show.bs.collapse', this.closeOtherMenus)
+        document.addEventListener('hidden.bs.collapse', this.closeSubmenus, false)
+    }
 
-        document.addEventListener('hidden.bs.collapse', e => {
-            this.closeSubmenus(e.target.querySelectorAll('.drawer-submenu'))
+    closeSubmenus(e) {
+        let submenus = e.target.querySelectorAll('.drawer-submenu')
+        submenus.forEach(submenu => {
+            const bsInstance = bootstrap.Collapse.getInstance(submenu)
+            if ( bsInstance ) {
+                bsInstance.hide()
+            }
         })
     }
 
-    closeOtherMenues(menus, current) {
+    closeOtherMenus(e) {
+        let menus = document.querySelectorAll('.navbar-collapse')
+        let current = e.target
+
         menus.forEach( menu => {
             const bsInstance = bootstrap.Collapse.getInstance(menu)
             if ( bsInstance && menu != current && menu != current.parentElement ) {
@@ -25,12 +30,8 @@ export default class extends Controller {
         })
     }
 
-    closeSubmenus(submenues) {
-        submenues.forEach(submenu => {
-            const bsInstance = bootstrap.Collapse.getInstance(submenu)
-            if ( bsInstance ) {
-                bsInstance.hide()
-            }
-        })
+    disconnect() {
+        document.removeEventListener('show.bs.collapse', this.closeOtherMenus)
+        document.removeEventListener('hidden.bs.collapse', this.closeSubmenus)
     }
 }
diff --git a/pgml-dashboard/templates/layout/base.html b/pgml-dashboard/templates/layout/base.html
@@ -2,11 +2,11 @@
   use crate::components::navigation::navbar::marketing::Marketing as MarketingNavbar;
 %>
 <!DOCTYPE html>
-<html lang="en-US" data-bs-theme="dark" data-theme="docs">
+<html lang="en-US">
 
   <% include!("head.html"); %>
 
-  <body>
+  <body data-bs-theme="dark" data-theme="docs">
     <main>
       <div class="container-fluid bg-primary pb-4 min-vh-100">
         <div class="ellipse-container position-absolute" style="margin: -2rem; height: 100vh; width: 100vw;">
diff --git a/pgml-dashboard/templates/layout/web_app_base.html b/pgml-dashboard/templates/layout/web_app_base.html
@@ -15,9 +15,9 @@
 %>
 
 <!DOCTYPE html>
-<html lang="en-US" data-bs-theme="dark" data-theme="product">
+<html lang="en-US">
     <%- head %>
-    <body>
+    <body data-bs-theme="dark" data-theme="product">
         <% for component in body_components { %>
         <%+ component %>
         <% } %>
