Dan icon dropdown fix (#1073)

chillenberger · web-flow · commit c1aacf602de4 · 2023-10-13T11:00:44.000-06:00
diff --git a/pgml-dashboard/src/components/navigation/left_nav/web_app/template.html b/pgml-dashboard/src/components/navigation/left_nav/web_app/template.html
@@ -1,5 +1,5 @@
 <% use crate::components::{LeftNavMenu, Dropdown}; %>
-<nav class="navbar leftnav nav-pills h-100" data-controller="extend-bs-collapse navigation-left-nav-web-app" data-extend-bs-collapse-affected-value=".leftnav-collapse-affect">
+<nav class="leftnav nav-pills h-100" data-controller="extend-bs-collapse navigation-left-nav-web-app" data-extend-bs-collapse-affected-value=".leftnav-collapse-affect">
   <div class="d-flex flex-column justify-content-between h-100 w-100">
     <div class="d-flex flex-column">
       <button class="btn-left-nav-toggle mb-5" type="button" data-bs-toggle="collapse" data-bs-target=".leftnav-collapse" aria-expanded="true">
diff --git a/pgml-dashboard/src/components/navigation/left_nav/web_app/web_app.scss b/pgml-dashboard/src/components/navigation/left_nav/web_app/web_app.scss
@@ -14,6 +14,7 @@
 }
 
 .leftnav {
+    @extend .navbar;
     max-width: 260px;
 
     border: none;
diff --git a/pgml-dashboard/src/components/navigation/navbar/marketing/marketing.scss b/pgml-dashboard/src/components/navigation/navbar/marketing/marketing.scss
@@ -1,4 +1,5 @@
 .navbar-marketing-site {
+    @extend .navbar;
     &.horizontal {
         background: linear-gradient(180deg, rgba(0, 0, 0, 0.64) -55.68%, rgba(0, 0, 0, 0) 100%);
     }
diff --git a/pgml-dashboard/src/components/navigation/navbar/marketing/template.html b/pgml-dashboard/src/components/navigation/navbar/marketing/template.html
@@ -2,7 +2,7 @@
 <% use crate::templates::components::PostgresLogo; %>
 
   <div class="sticky-top-nav" data-controller="navigation-navbar-marketing">
-    <nav class="navbar navbar-marketing-site horizontal navbar-expand-lg" data-controller="search topnav-styling">
+    <nav class="navbar-marketing-site horizontal navbar-expand-lg" data-controller="search topnav-styling">
       <div class="container gap-4">
         <div class="controls">
           <%+ PostgresLogo::new("/") %>
diff --git a/pgml-dashboard/src/components/navigation/navbar/web_app/template.html b/pgml-dashboard/src/components/navigation/navbar/web_app/template.html
@@ -5,7 +5,7 @@
 %>
 
   <div class="fixed-top-nav" data-controller="navigation-navbar-web-app">
-    <nav class="navbar navbar-web-app horizontal navbar-expand-lg" data-controller="search topnav-web-app">
+    <nav class="navbar-web-app horizontal navbar-expand-lg" data-controller="search topnav-web-app">
       
       <div class="controls">
         <!-- Toggles items that come from left nav -->
diff --git a/pgml-dashboard/src/components/navigation/navbar/web_app/web_app.scss b/pgml-dashboard/src/components/navigation/navbar/web_app/web_app.scss
@@ -1,4 +1,5 @@
 .navbar-web-app {
+    @extend .navbar;
     background-color: var(--webapp-nav-bg);
 
     border-bottom: 1px solid #{$gray-500};
diff --git a/pgml-dashboard/src/guards.rs b/pgml-dashboard/src/guards.rs
@@ -90,7 +90,7 @@ impl Cluster {
                             "Notebooks".to_string(),
                             "/dashboard?tab=Notebooks".to_string(),
                         )
-                        .icon("thumbnail_bar")
+                        .icon("add_notes")
                         .active(
                             uri.is_some()
                                 && (uri.clone().unwrap().starts_with("/dashboard?tab=Notebook")
@@ -100,7 +100,7 @@ impl Cluster {
                             "Projects".to_string(),
                             "/dashboard?tab=Projects".to_string(),
                         )
-                        .icon("thumbnail_bar")
+                        .icon("library_add")
                         .active(
                             uri.is_some()
                                 && uri.clone().unwrap().starts_with("/dashboard?tab=Project"),
@@ -109,7 +109,7 @@ impl Cluster {
                             "Models".to_string(),
                             "/dashboard?tab=Models".to_string(),
                         )
-                        .icon("thumbnail_bar")
+                        .icon("space_dashboard")
                         .active(
                             uri.is_some()
                                 && uri.clone().unwrap().starts_with("/dashboard?tab=Model"),
@@ -118,7 +118,7 @@ impl Cluster {
                             "Snapshots".to_string(),
                             "/dashboard?tab=Snapshots".to_string(),
                         )
-                        .icon("thumbnail_bar")
+                        .icon("filter_center_focus")
                         .active(
                             uri.is_some()
                                 && uri.clone().unwrap().starts_with("/dashboard?tab=Snapshot"),
@@ -127,7 +127,7 @@ impl Cluster {
                             "Upload data".to_string(),
                             "/dashboard?tab=Upload_Data".to_string(),
                         )
-                        .icon("thumbnail_bar")
+                        .icon("upload")
                         .active(
                             uri.is_some()
                                 && uri
diff --git a/pgml-dashboard/static/css/scss/layout/_containers.scss b/pgml-dashboard/static/css/scss/layout/_containers.scss
@@ -148,6 +148,10 @@
 
 .webapp-content-max-width-container {
     max-width: $webapp-content-max-width;
-    margin: 0px auto;
+    margin: 0px 20px;
     min-height: calc(100vh - $navbar-height - $breadcrumb-height - 1px);
+    
+    @include media-breakpoint-up(md) {
+        margin: 0px auto;
+    }
   }

Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,7 @@`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`.leftnav {`
	`17`	`+ @extend .navbar;`
`17`	`18`	`max-width: 260px;`
`18`	`19`
`19`	`20`	`border: none;`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`.navbar-marketing-site {`
	`2`	`+ @extend .navbar;`
`2`	`3`	`&.horizontal {`
`3`	`4`	`background: linear-gradient(180deg, rgba(0, 0, 0, 0.64) -55.68%, rgba(0, 0, 0, 0) 100%);`
`4`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`.navbar-web-app {`
	`2`	`+ @extend .navbar;`
`2`	`3`	`background-color: var(--webapp-nav-bg);`
`3`	`4`
`4`	`5`	`border-bottom: 1px solid #{$gray-500};`