breadcrumb dropdown styling

chillenberger · chillenberger · commit ec845db36bee · 2025-01-22T16:34:41.000-07:00
diff --git a/pgml-dashboard/src/components/breadcrumbs/breadcrumbs.scss b/pgml-dashboard/src/components/breadcrumbs/breadcrumbs.scss
@@ -28,9 +28,16 @@
       }
   }
 
-  .vr {
-    opacity: 1;
-    color: #{$gray-600};
-    width: 2px;
+  > *:not(:last-child) {
+    &::after {
+      content: '/';
+      margin: 0 2px;
+      color: #{$gray-600};
+    }
+  }
+
+  li {
+    display: flex;
+    align-items: center;
   }
 }
diff --git a/pgml-dashboard/src/components/breadcrumbs/template.html b/pgml-dashboard/src/components/breadcrumbs/template.html
@@ -12,30 +12,19 @@
 
 <nav>
   <nav aria-label="breadcrumb z-1">
-    <ol class="breadcrumb">
-      <!-- <li class="breadcrumb-item body-regular-text <% if path.is_empty() {%>active<% } %>">
-        <a class="d-flex gap-2 align-items-center" href="<%- home_uri %>">
-          <span class="icon-owl icomoon"></span>
-          Home
-        </a>
-      </li> -->
-
+    <ol class="breadcrumb gap-3">
       <% if !organizations.is_empty() {%>
       <li>
-        <%+ Dropdown::nav(organizations) %>
+        <%+ Dropdown::nav(organizations).inline_style() %>
       </li>
       <% } %>
 
       <% if !databases.is_empty() {%>
       <li>
-        <%+ Dropdown::nav(databases) %>
+        <%+ Dropdown::nav(databases).inline_style() %>
       </li>
       <% } %>
 
-      <% if !path.is_empty() {%>
-      <div class="vr my-1 mx-2"></div>
-      <% } %>
-
       <% for link in path {
         let active = if link.active {
           "active"
@@ -54,9 +43,6 @@
         <a href="<%= link.href %>">
           <%= link.name %>
         </a>
-        <% if active.is_empty() { %>
-        <div class="vr my-1 ms-2"></div>
-        <% } %>
       </li>
       <% } %>
     </ol>
diff --git a/pgml-dashboard/src/components/dropdown/dropdown.scss b/pgml-dashboard/src/components/dropdown/dropdown.scss
@@ -92,6 +92,51 @@
     }
 }
 
+.btn-dropdown-inline {
+    color: #{$slate-shade-100};
+    display: flex;
+    justify-content: space-between;
+    font-weight: $font-weight-normal;
+
+    --bs-btn-hover-color: #{$slate-tint-400};
+    --bs-btn-active-color: #{$slate-tint-700};
+    --bs-btn-active-border-color: transparent;
+
+
+
+    &:after {
+        content: None;
+    }
+
+    &.show {
+        .material-symbols-outlined {
+            transform: rotate(-180deg);
+        }
+    }
+
+    .btn-dropdown-text {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        text-align: left;
+    }
+
+    .menu-item {
+        a, div {
+            padding: 8px 12px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        &:hover {
+            cursor: pointer;
+        }
+
+        &:after {
+            content: None;
+        }
+    }
+}
+
 @mixin dropdown-menu($primary-color: null) {
     padding: 20px 0px 20px 0px;
     overflow-y: auto;
diff --git a/pgml-dashboard/src/components/dropdown/mod.rs b/pgml-dashboard/src/components/dropdown/mod.rs
@@ -85,6 +85,9 @@ pub struct Dropdown {
 
     /// If the dropdown should be shown
     show: String,
+
+    /// alt styling for button
+    inline_style: bool,
 }
 
 impl Dropdown {
@@ -95,6 +98,7 @@ impl Dropdown {
             offset: "0, 10".to_owned(),
             offset_collapsed: "68, -44".to_owned(),
             menu_position: "".to_owned(),
+            inline_style: false,
             ..Default::default()
         }
     }
@@ -192,6 +196,11 @@ impl Dropdown {
         self.show = "show".into();
         self
     }
+
+    pub fn inline_style(mut self) -> Self {
+        self.inline_style = true;
+        self
+    }
 }
 
 component!(Dropdown);
diff --git a/pgml-dashboard/src/components/dropdown/template.html b/pgml-dashboard/src/components/dropdown/template.html
@@ -1,8 +1,21 @@
 
 <% use crate::components::dropdown::DropdownValue; %>
+<%
+  let btn_style = if inline_style {
+    "btn-dropdown-inline"
+  } else {
+    "btn-dropdown"
+  };
+
+  let padding = if inline_style {
+    "p-0"
+  } else {
+    ""
+  };
+%>
 
 <!-- Dropdown component -->
-<div class="dropdown <% if expandable { %>expandable<% } %>">
+<div class="dropdown <%- padding %> <% if expandable { %>expandable<% } %>">
   <% if let DropdownValue::Icon(icon) = value { %>
   <a
     class="top-nav-controls dropdown-toggle"
@@ -15,7 +28,7 @@
   </a>
   <% } else if let DropdownValue::Text(text) = value { %>
   <button
-    class="horizontal-hide btn btn-dropdown dropdown-toggle expanded <% if collapsable { %>leftnav-collapse-affect<% } %>"
+    class="horizontal-hide btn <%- btn_style %> dropdown-toggle expanded <% if collapsable { %>leftnav-collapse-affect<% } %>"
     role="button"
     data-bs-toggle="dropdown"
     data-bs-offset="<%= offset %>"

Original file line number	Diff line number	Diff line change
`@@ -28,9 +28,16 @@`
`28`	`28`	`}`
`29`	`29`	`}`
`30`	`30`
`31`		`- .vr {`
`32`		`- opacity: 1;`
`33`		`- color: #{$gray-600};`
`34`		`- width: 2px;`
	`31`	`+ > *:not(:last-child) {`
	`32`	`+ &::after {`
	`33`	`+ content: '/';`
	`34`	`+ margin: 0 2px;`
	`35`	`+ color: #{$gray-600};`
	`36`	`+ }`
	`37`	`+ }`
	`38`	`+`
	`39`	`+ li {`
	`40`	`+ display: flex;`
	`41`	`+ align-items: center;`
`35`	`42`	`}`
`36`	`43`	`}`
Original file line number	Diff line number	Diff line change
`@@ -85,6 +85,9 @@ pub struct Dropdown {`
`85`	`85`
`86`	`86`	`/// If the dropdown should be shown`
`87`	`87`	`show: String,`
	`88`	`+`
	`89`	`+ /// alt styling for button`
	`90`	`+ inline_style: bool,`
`88`	`91`	`}`
`89`	`92`
`90`	`93`	`impl Dropdown {`
`@@ -95,6 +98,7 @@ impl Dropdown {`
`95`	`98`	`offset: "0, 10".to_owned(),`
`96`	`99`	`offset_collapsed: "68, -44".to_owned(),`
`97`	`100`	`menu_position: "".to_owned(),`
	`101`	`+ inline_style: false,`
`98`	`102`	`..Default::default()`
`99`	`103`	`}`
`100`	`104`	`}`
`@@ -192,6 +196,11 @@ impl Dropdown {`
`192`	`196`	`self.show = "show".into();`
`193`	`197`	`self`
`194`	`198`	`}`
	`199`	`+`
	`200`	`+ pub fn inline_style(mut self) -> Self {`
	`201`	`+ self.inline_style = true;`
	`202`	`+ self`
	`203`	`+ }`
`195`	`204`	`}`
`196`	`205`
`197`	`206`	`component!(Dropdown);`