@@ -11,29 +11,10 @@ - <%+ LeftNavMenu { nav: lower_nav} %>

diff --git a/pgml-dashboard/src/components/mod.rs b/pgml-dashboard/src/components/mod.rs index d8c65199b..94f9174b1 100644 --- a/pgml-dashboard/src/components/mod.rs +++ b/pgml-dashboard/src/components/mod.rs @@ -13,6 +13,10 @@ pub use breadcrumbs::Breadcrumbs; pub mod confirm_modal; pub use confirm_modal::ConfirmModal; +// src/components/dropdown +pub mod dropdown; +pub use dropdown::Dropdown; + // src/components/github_icon pub mod github_icon; pub use github_icon::GithubIcon; diff --git a/pgml-dashboard/static/css/modules.scss b/pgml-dashboard/static/css/modules.scss index c038c5029..e457a99bd 100644 --- a/pgml-dashboard/static/css/modules.scss +++ b/pgml-dashboard/static/css/modules.scss @@ -1,6 +1,7 @@ // This file is automatically generated. // There is no need to edit it manually. +@import "../../src/components/dropdown/dropdown.scss"; @import "../../src/components/left_nav_menu/left_nav_menu.scss"; @import "../../src/components/left_nav_web_app/left_nav_web_app.scss"; @import "../../src/components/modal/modal.scss"; diff --git a/pgml-dashboard/static/css/scss/components/_buttons.scss b/pgml-dashboard/static/css/scss/components/_buttons.scss index 0dd97c365..04670a96c 100644 --- a/pgml-dashboard/static/css/scss/components/_buttons.scss +++ b/pgml-dashboard/static/css/scss/components/_buttons.scss @@ -244,57 +244,6 @@ font-weight: $font-weight-medium; } -.btn-dropdown { - @extend .btn; - border-radius: $border-radius; - background: #{$gray-700}; - color: #{$gray-100}; - display: flex; - justify-content: space-between; - font-weight: $font-weight-normal; - - --bs-btn-border-color: transparent; - --bs-btn-border-width: 1px; - --bs-btn-hover-border-color: #{$neon-shade-100}; - --bs-btn-active-border-color: #{$neon-shade-100}; - --bs-btn-active-bg: #{$gray-700}; - --bs-btn-active-color: #{$gray-100}; - --bs-btn-hover-color: #{$gray-100}; - - .material-symbols-outlined { - color: #{$neon-shade-100}; - } - - &:after { - content: None; - } - - &.show { - .material-symbols-outlined { - transform: rotate(-180deg); - } - } - - .collapase { - width: 100%; - } -} - -.btn-dropdown-menu-item { - @extend .menu-item; - a { - padding: 8px 12px; - } - - &:hover { - cursor: pointer; - } - - &:after { - content: None; - } -} - .btn-left-nav-toggle { @extend .btn; --bs-btn-padding-x: 0px; diff --git a/pgml-dashboard/static/css/scss/components/_dropdown.scss b/pgml-dashboard/static/css/scss/components/_dropdown.scss index a53d12a2c..8ee69cc26 100644 --- a/pgml-dashboard/static/css/scss/components/_dropdown.scss +++ b/pgml-dashboard/static/css/scss/components/_dropdown.scss @@ -10,6 +10,7 @@ .dropdown-menu { @include dropdown-menu($gray-600); max-height: $dropdown-menu-height; + overflow: hidden; } .sub-menu-dropdown { diff --git a/pgml-dashboard/static/css/scss/components/_navs.scss b/pgml-dashboard/static/css/scss/components/_navs.scss index 13f8d1dac..3864995a9 100644 --- a/pgml-dashboard/static/css/scss/components/_navs.scss +++ b/pgml-dashboard/static/css/scss/components/_navs.scss @@ -195,18 +195,6 @@ } } -.leftnav { - @extend .navbar; - - border: none; - align-items: start; - background-color: inherit; - - @include media-breakpoint-down(lg) { - background-color: #{$gray-900} - } -} - .toc, .guides { --bs-border-color: #{$gray-500}; .nav-link { @@ -265,11 +253,14 @@ color: #{$neon-shade-300}; } - & button, & a { + button, a { padding: 8px 24px 8px 24px; color: #{$gray-100}; width: 100%; transition: padding $animation-timer; + + text-overflow: ellipsis; + overflow: hidden; } &:hover { From 0ec0817899ca413c1e04d724345df7e6e95822c6 Mon Sep 17 00:00:00 2001 From: Lev Kokotov Date: Fri, 1 Sep 2023 09:01:15 -0700 Subject: [PATCH 02/18] lint --- pgml-dashboard/.editorconfig | 4 ++ .../src/components/dropdown/dropdown.scss | 64 +++++++++---------- 2 files changed, 36 insertions(+), 32 deletions(-) create mode 100644 pgml-dashboard/.editorconfig diff --git a/pgml-dashboard/.editorconfig b/pgml-dashboard/.editorconfig new file mode 100644 index 000000000..9c9a9cb3f --- /dev/null +++ b/pgml-dashboard/.editorconfig @@ -0,0 +1,4 @@ + +[*.scss] +indent_style = space +indent_size = 4 diff --git a/pgml-dashboard/src/components/dropdown/dropdown.scss b/pgml-dashboard/src/components/dropdown/dropdown.scss index 72a1081df..a20634218 100644 --- a/pgml-dashboard/src/components/dropdown/dropdown.scss +++ b/pgml-dashboard/src/components/dropdown/dropdown.scss @@ -1,24 +1,24 @@ .dropdown { - @extend .d-flex; - width: 100%; - - .dropdown-toggle { - a { - padding: 8px 12px; - } - - &:hover { - cursor: pointer; - } - - &:after { - content: none; - } - } - - .dropdown-menu { - width: 100%; - } + @extend .d-flex; + width: 100%; + + .dropdown-toggle { + a { + padding: 8px 12px; + } + + &:hover { + cursor: pointer; + } + + &:after { + content: none; + } + } + + .dropdown-menu { + width: 100%; + } } .btn-dropdown { @@ -63,18 +63,18 @@ } .menu-item { - a { - padding: 8px 12px; - } - - &:hover { - cursor: pointer; - } - - &:after { - content: None; - } - } + a { + padding: 8px 12px; + } + + &:hover { + cursor: pointer; + } + + &:after { + content: None; + } + } } From 122f289ade78e23ec5e17e91e1de8f5d11cdfc12 Mon Sep 17 00:00:00 2001 From: Lev Kokotov Date: Fri, 1 Sep 2023 09:29:51 -0700 Subject: [PATCH 03/18] Fix collapse --- pgml-dashboard/src/components/dropdown/mod.rs | 13 ++++++++++++- .../src/components/dropdown/template.html | 4 ++-- .../src/components/left_nav_web_app/template.html | 2 +- 3 files changed, 15 insertions(+), 4 deletions(-) diff --git a/pgml-dashboard/src/components/dropdown/mod.rs b/pgml-dashboard/src/components/dropdown/mod.rs index bdc17eae4..c9e95ef53 100644 --- a/pgml-dashboard/src/components/dropdown/mod.rs +++ b/pgml-dashboard/src/components/dropdown/mod.rs @@ -6,12 +6,18 @@ use crate::components::StaticNavLink; #[derive(TemplateOnce, Default)] #[template(path = "dropdown/template.html")] pub struct Dropdown { + //github.com/ The currently selected value. value: String, + + //github.com/ The list of dropdown links to render. links: Vec, + + //github.com/ Whether or not the dropdown is collapsble. + collapsable: bool, } impl Dropdown { - pub fn new(links: Vec) -> Dropdown { + pub fn new(links: Vec) -> Self { let binding = links .iter() .filter(|link| link.active) @@ -28,6 +34,11 @@ impl Dropdown { ..Default::default() } } + + pub fn collapsable(mut self) -> Self { + self.collapsable = true; + self + } } component!(Dropdown); diff --git a/pgml-dashboard/src/components/dropdown/template.html b/pgml-dashboard/src/components/dropdown/template.html index f6b02e3c1..55bd78cac 100644 --- a/pgml-dashboard/src/components/dropdown/template.html +++ b/pgml-dashboard/src/components/dropdown/template.html @@ -1,12 +1,12 @@

- -

+ From 67356a178a4035d07547ce2da7e52d6a9fb4a918 Mon Sep 17 00:00:00 2001 From: Lev Kokotov Date: Fri, 1 Sep 2023 14:24:55 -0700 Subject: [PATCH 04/18] Dropdown with profile icon --- pgml-dashboard/src/components/dropdown/mod.rs | 46 ++++++++++++++++- .../src/components/dropdown/template.html | 50 +++++++++++++++---- pgml-dashboard/src/components/mod.rs | 4 ++ .../src/components/profile_icon/mod.rs | 14 ++++++ .../src/components/profile_icon/template.html | 3 ++ .../templates/content/playground.html | 40 ++++++++++++--- 6 files changed, 139 insertions(+), 18 deletions(-) create mode 100644 pgml-dashboard/src/components/profile_icon/mod.rs create mode 100644 pgml-dashboard/src/components/profile_icon/template.html diff --git a/pgml-dashboard/src/components/dropdown/mod.rs b/pgml-dashboard/src/components/dropdown/mod.rs index c9e95ef53..00bac60a6 100644 --- a/pgml-dashboard/src/components/dropdown/mod.rs +++ b/pgml-dashboard/src/components/dropdown/mod.rs @@ -1,19 +1,38 @@ use crate::components::component; +use crate::components::component::Component; use sailfish::TemplateOnce; use crate::components::StaticNavLink; +pub enum DropdownValue { + Icon(Component), + Text(Component), +} + +impl Default for DropdownValue { + fn default() -> Self { + DropdownValue::Text("Menu".into()) + } +} + #[derive(TemplateOnce, Default)] #[template(path = "dropdown/template.html")] pub struct Dropdown { //github.com/ The currently selected value. - value: String, + value: DropdownValue, //github.com/ The list of dropdown links to render. links: Vec, + //github.com/ Position of the dropdown menu. + offset: String, + //github.com/ Whether or not the dropdown is collapsble. collapsable: bool, + offset_collapsed: String, + + //github.com/ Where the dropdown menu should appear + menu_position: String, } impl Dropdown { @@ -30,15 +49,38 @@ impl Dropdown { }; Dropdown { links, - value, + value: DropdownValue::Text(value.into()), + offset: "0, 10".to_owned(), + offset_collapsed: "68, -44".to_owned(), + menu_position: "".to_owned(), ..Default::default() } } + pub fn text(mut self, value: Component) -> Self { + self.value = DropdownValue::Text(value); + self + } + + pub fn icon(mut self, icon: Component) -> Self { + self.value = DropdownValue::Icon(icon); + self + } + pub fn collapsable(mut self) -> Self { self.collapsable = true; self } + + pub fn menu_end(mut self) -> Self { + self.menu_position = "dropdown-menu-end".to_owned(); + self + } + + pub fn menu_start(mut self) -> Self { + self.menu_position = "dropdown-menu-start".to_owned(); + self + } } component!(Dropdown); diff --git a/pgml-dashboard/src/components/dropdown/template.html b/pgml-dashboard/src/components/dropdown/template.html index 55bd78cac..ed825a696 100644 --- a/pgml-dashboard/src/components/dropdown/template.html +++ b/pgml-dashboard/src/components/dropdown/template.html @@ -1,22 +1,52 @@ -

- -

+<% use crate::components::dropdown::DropdownValue; %> + + + + diff --git a/pgml-dashboard/src/components/mod.rs b/pgml-dashboard/src/components/mod.rs index 94f9174b1..fd6a206da 100644 --- a/pgml-dashboard/src/components/mod.rs +++ b/pgml-dashboard/src/components/mod.rs @@ -53,6 +53,10 @@ pub use navbar_web_app::NavbarWebApp; pub mod postgres_logo; pub use postgres_logo::PostgresLogo; +// src/components/profile_icon +pub mod profile_icon; +pub use profile_icon::ProfileIcon; + // src/components/static_nav pub mod static_nav; pub use static_nav::StaticNav; diff --git a/pgml-dashboard/src/components/profile_icon/mod.rs b/pgml-dashboard/src/components/profile_icon/mod.rs new file mode 100644 index 000000000..309694bec --- /dev/null +++ b/pgml-dashboard/src/components/profile_icon/mod.rs @@ -0,0 +1,14 @@ +use crate::components::component; +use sailfish::TemplateOnce; + +#[derive(TemplateOnce, Default)] +#[template(path = "profile_icon/template.html")] +pub struct ProfileIcon; + +impl ProfileIcon { + pub fn new() -> ProfileIcon { + ProfileIcon::default() + } +} + +component!(ProfileIcon); diff --git a/pgml-dashboard/src/components/profile_icon/template.html b/pgml-dashboard/src/components/profile_icon/template.html new file mode 100644 index 000000000..04fef6804 --- /dev/null +++ b/pgml-dashboard/src/components/profile_icon/template.html @@ -0,0 +1,3 @@ + diff --git a/pgml-dashboard/templates/content/playground.html b/pgml-dashboard/templates/content/playground.html index 1d03bb214..1e5f80c89 100644 --- a/pgml-dashboard/templates/content/playground.html +++ b/pgml-dashboard/templates/content/playground.html @@ -1,11 +1,39 @@ <% use crate::components::*; %> -

Playground

- <%+ GithubIcon::new() %> -

+ <%+ GithubIcon::new() %> +

- <%- Navbar::render(None) %> +

+ <%+ Dropdown::new( + vec![ + StaticNavLink::new("Test".into(), "#test".into()) + ] + ).collapsable() + .icon(ProfileIcon::new().into()) %> +

+ <%+ Dropdown::new( + vec![ + StaticNavLink::new("Test".into(), "#test".into()) + ] + ).collapsable() + .text("Dropdown".into()) %> +

+ <%+ Dropdown::new( + vec![ + StaticNavLink::new("Really long title in the dropdown".into(), "#test".into()), + StaticNavLink::new("Normal link".into(), "#test".into()) + ] + ).collapsable() + .text("Really long name in the dropdown".into()) %> +

From 8185d7b28bc5b9da7b257fc2709c809045ae5e20 Mon Sep 17 00:00:00 2001 From: Lev Kokotov Date: Fri, 1 Sep 2023 14:27:55 -0700 Subject: [PATCH 05/18] typo --- pgml-dashboard/src/components/dropdown/mod.rs | 10 ++++++++++ pgml-dashboard/src/components/dropdown/template.html | 2 +- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/pgml-dashboard/src/components/dropdown/mod.rs b/pgml-dashboard/src/components/dropdown/mod.rs index 00bac60a6..3303254ad 100644 --- a/pgml-dashboard/src/components/dropdown/mod.rs +++ b/pgml-dashboard/src/components/dropdown/mod.rs @@ -81,6 +81,16 @@ impl Dropdown { self.menu_position = "dropdown-menu-start".to_owned(); self } + + pub fn offset(mut self, offset: &str) -> Self { + self.offset = offset.to_owned(); + self + } + + pub fn offset_collapsed(mut self, offset: &str) -> Self { + self.offset_collapsed = offset.to_owned(); + self + } } component!(Dropdown); diff --git a/pgml-dashboard/src/components/dropdown/template.html b/pgml-dashboard/src/components/dropdown/template.html index ed825a696..058b8f4c2 100644 --- a/pgml-dashboard/src/components/dropdown/template.html +++ b/pgml-dashboard/src/components/dropdown/template.html @@ -24,7 +24,7 @@ expand_more - + <% } %> <% if collapsable { %> From 7ffebfb9e0441d545f15e5849df327540ba69962 Mon Sep 17 00:00:00 2001 From: Lev Kokotov Date: Fri, 1 Sep 2023 14:43:27 -0700 Subject: [PATCH 06/18] use dropdown --- .../src/components/dropdown/template.html | 8 ++++++-- .../components/navbar_web_app/template.html | 20 ++++--------------- 2 files changed, 10 insertions(+), 18 deletions(-) diff --git a/pgml-dashboard/src/components/dropdown/template.html b/pgml-dashboard/src/components/dropdown/template.html index 058b8f4c2..ae95006cf 100644 --- a/pgml-dashboard/src/components/dropdown/template.html +++ b/pgml-dashboard/src/components/dropdown/template.html @@ -43,8 +43,12 @@ diff --git a/pgml-dashboard/src/components/navbar_web_app/template.html b/pgml-dashboard/src/components/navbar_web_app/template.html index 070cf9730..22aab2d2b 100644 --- a/pgml-dashboard/src/components/navbar_web_app/template.html +++ b/pgml-dashboard/src/components/navbar_web_app/template.html @@ -1,5 +1,6 @@ <% use crate::templates::components::GithubIcon; %> <% use crate::templates::components::PostgresLogo; %> +<% use crate::components::{Dropdown, ProfileIcon}; %>

@@ -57,22 +58,9 @@ <% if !account_management_nav.links.is_empty() { %> -

+ <%+ Dropdown::new(account_management_nav.links.clone()) + .icon(ProfileIcon::new().into()) %>

Account Management From db1ea2bbcc1668b95a1a7edfb0cc27f7cb907eba Mon Sep 17 00:00:00 2001 From: Lev Kokotov Date: Fri, 1 Sep 2023 14:56:35 -0700 Subject: [PATCH 07/18] overflow --- pgml-dashboard/src/components/dropdown/dropdown.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pgml-dashboard/src/components/dropdown/dropdown.scss b/pgml-dashboard/src/components/dropdown/dropdown.scss index a20634218..dccb533f3 100644 --- a/pgml-dashboard/src/components/dropdown/dropdown.scss +++ b/pgml-dashboard/src/components/dropdown/dropdown.scss @@ -58,8 +58,8 @@ .btn-dropdown-text { width: 100%; overflow: hidden; - text-overflow: ellipsis; - text-align: left; + // text-overflow: ellipsis; + // text-align: left; } .menu-item { From cc4e6f76e4fb58812e7955ca4fffb34b2dd4d28b Mon Sep 17 00:00:00 2001 From: Lev Kokotov Date: Fri, 1 Sep 2023 14:58:51 -0700 Subject: [PATCH 08/18] oh --- pgml-dashboard/src/components/dropdown/dropdown.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pgml-dashboard/src/components/dropdown/dropdown.scss b/pgml-dashboard/src/components/dropdown/dropdown.scss index dccb533f3..3d78cb9db 100644 --- a/pgml-dashboard/src/components/dropdown/dropdown.scss +++ b/pgml-dashboard/src/components/dropdown/dropdown.scss @@ -57,7 +57,7 @@ .btn-dropdown-text { width: 100%; - overflow: hidden; + // overflow: hidden; // text-overflow: ellipsis; // text-align: left; } From 41b203abe4eb3045c7e744420a89d1a26bb87314 Mon Sep 17 00:00:00 2001 From: Lev Kokotov Date: Fri, 1 Sep 2023 15:01:59 -0700 Subject: [PATCH 09/18] hmm --- pgml-dashboard/static/css/scss/components/_navs.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/pgml-dashboard/static/css/scss/components/_navs.scss b/pgml-dashboard/static/css/scss/components/_navs.scss index 3864995a9..286074711 100644 --- a/pgml-dashboard/static/css/scss/components/_navs.scss +++ b/pgml-dashboard/static/css/scss/components/_navs.scss @@ -258,9 +258,6 @@ color: #{$gray-100}; width: 100%; transition: padding $animation-timer; - - text-overflow: ellipsis; - overflow: hidden; } &:hover { From c58a373a5dae6661824ac601a4dfccbb40ddc191 Mon Sep 17 00:00:00 2001 From: Lev Kokotov Date: Fri, 1 Sep 2023 15:02:56 -0700 Subject: [PATCH 10/18] spaghetti --- pgml-dashboard/src/components/dropdown/dropdown.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/pgml-dashboard/src/components/dropdown/dropdown.scss b/pgml-dashboard/src/components/dropdown/dropdown.scss index 3d78cb9db..60bb79ba6 100644 --- a/pgml-dashboard/src/components/dropdown/dropdown.scss +++ b/pgml-dashboard/src/components/dropdown/dropdown.scss @@ -1,6 +1,6 @@ .dropdown { @extend .d-flex; - width: 100%; + min-width: 100%; .dropdown-toggle { a { @@ -17,7 +17,7 @@ } .dropdown-menu { - width: 100%; + min-width: 100%; } } @@ -56,7 +56,7 @@ } .btn-dropdown-text { - width: 100%; + min-width: 100%; // overflow: hidden; // text-overflow: ellipsis; // text-align: left; From 99742f4bcb1305527a24381a0a308d9ba4d5687c Mon Sep 17 00:00:00 2001 From: Lev Kokotov Date: Fri, 1 Sep 2023 15:03:55 -0700 Subject: [PATCH 11/18] button --- pgml-dashboard/src/components/dropdown/dropdown.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/pgml-dashboard/src/components/dropdown/dropdown.scss b/pgml-dashboard/src/components/dropdown/dropdown.scss index 60bb79ba6..1090273e4 100644 --- a/pgml-dashboard/src/components/dropdown/dropdown.scss +++ b/pgml-dashboard/src/components/dropdown/dropdown.scss @@ -57,9 +57,9 @@ .btn-dropdown-text { min-width: 100%; - // overflow: hidden; - // text-overflow: ellipsis; - // text-align: left; + overflow: hidden; + text-overflow: ellipsis; + text-align: left; } .menu-item { From 80ced53d54339294445d5e2e893ef1f3b6a34b7e Mon Sep 17 00:00:00 2001 From: Lev Kokotov Date: Fri, 1 Sep 2023 15:05:02 -0700 Subject: [PATCH 12/18] ok --- pgml-dashboard/src/components/dropdown/dropdown.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/pgml-dashboard/src/components/dropdown/dropdown.scss b/pgml-dashboard/src/components/dropdown/dropdown.scss index 1090273e4..02302d754 100644 --- a/pgml-dashboard/src/components/dropdown/dropdown.scss +++ b/pgml-dashboard/src/components/dropdown/dropdown.scss @@ -56,7 +56,6 @@ } .btn-dropdown-text { - min-width: 100%; overflow: hidden; text-overflow: ellipsis; text-align: left; From 87ad7946434d873fc2486e9dd020767217838aa8 Mon Sep 17 00:00:00 2001 From: Lev Kokotov Date: Fri, 1 Sep 2023 15:20:17 -0700 Subject: [PATCH 13/18] oh --- pgml-dashboard/src/components/dropdown/dropdown.scss | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/pgml-dashboard/src/components/dropdown/dropdown.scss b/pgml-dashboard/src/components/dropdown/dropdown.scss index 02302d754..595d14d91 100644 --- a/pgml-dashboard/src/components/dropdown/dropdown.scss +++ b/pgml-dashboard/src/components/dropdown/dropdown.scss @@ -17,7 +17,12 @@ } .dropdown-menu { - min-width: 100%; + width: 100%; + } + + .dropdown-item { + overflow: hidden; + text-overflow: ellipsis; } } @@ -64,6 +69,8 @@ .menu-item { a { padding: 8px 12px; + overflow: hidden; + text-overflow: ellipsis; } &:hover { From 50ee0816660c0f0ff8b93e8b8d12a256003b2328 Mon Sep 17 00:00:00 2001 From: Lev Kokotov Date: Fri, 1 Sep 2023 15:23:38 -0700 Subject: [PATCH 14/18] exact --- .../src/components/left_nav_web_app/left_nav_web_app.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pgml-dashboard/src/components/left_nav_web_app/left_nav_web_app.scss b/pgml-dashboard/src/components/left_nav_web_app/left_nav_web_app.scss index beb4aac9e..80c36e747 100644 --- a/pgml-dashboard/src/components/left_nav_web_app/left_nav_web_app.scss +++ b/pgml-dashboard/src/components/left_nav_web_app/left_nav_web_app.scss @@ -1,6 +1,6 @@ .leftnav { @extend .navbar; - max-width: 260px; + width: 260px; border: none; align-items: start; From af483868ffc9bd264379f41853e129354846020f Mon Sep 17 00:00:00 2001 From: Lev Kokotov Date: Fri, 1 Sep 2023 15:24:16 -0700 Subject: [PATCH 15/18] ok --- .../src/components/left_nav_web_app/left_nav_web_app.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pgml-dashboard/src/components/left_nav_web_app/left_nav_web_app.scss b/pgml-dashboard/src/components/left_nav_web_app/left_nav_web_app.scss index 80c36e747..beb4aac9e 100644 --- a/pgml-dashboard/src/components/left_nav_web_app/left_nav_web_app.scss +++ b/pgml-dashboard/src/components/left_nav_web_app/left_nav_web_app.scss @@ -1,6 +1,6 @@ .leftnav { @extend .navbar; - width: 260px; + max-width: 260px; border: none; align-items: start; From e95e7fc406a3112f44ac231e4f5e5366fb22e7ea Mon Sep 17 00:00:00 2001 From: Lev Kokotov Date: Mon, 4 Sep 2023 15:50:07 -0700 Subject: [PATCH 16/18] Make sure dropdown works --- .../src/components/dropdown/dropdown.scss | 7 +++++ pgml-dashboard/src/components/dropdown/mod.rs | 6 +++++ .../src/components/dropdown/template.html | 6 ++--- .../components/navbar_web_app/template.html | 7 +++-- pgml-dashboard/src/guards.rs | 26 ++++++++++++++++++- 5 files changed, 46 insertions(+), 6 deletions(-) diff --git a/pgml-dashboard/src/components/dropdown/dropdown.scss b/pgml-dashboard/src/components/dropdown/dropdown.scss index 595d14d91..279ab81b1 100644 --- a/pgml-dashboard/src/components/dropdown/dropdown.scss +++ b/pgml-dashboard/src/components/dropdown/dropdown.scss @@ -20,6 +20,13 @@ width: 100%; } + &.expandable { + .dropdown-menu { + width: auto; + min-width: 100%; + } + } + .dropdown-item { overflow: hidden; text-overflow: ellipsis; diff --git a/pgml-dashboard/src/components/dropdown/mod.rs b/pgml-dashboard/src/components/dropdown/mod.rs index 3303254ad..87835ca3c 100644 --- a/pgml-dashboard/src/components/dropdown/mod.rs +++ b/pgml-dashboard/src/components/dropdown/mod.rs @@ -33,6 +33,7 @@ pub struct Dropdown { //github.com/ Where the dropdown menu should appear menu_position: String, + expandable: bool, } impl Dropdown { @@ -91,6 +92,11 @@ impl Dropdown { self.offset_collapsed = offset.to_owned(); self } + + pub fn expandable(mut self) -> Self { + self.expandable = true; + self + } } component!(Dropdown); diff --git a/pgml-dashboard/src/components/dropdown/template.html b/pgml-dashboard/src/components/dropdown/template.html index ae95006cf..b742725f1 100644 --- a/pgml-dashboard/src/components/dropdown/template.html +++ b/pgml-dashboard/src/components/dropdown/template.html @@ -2,10 +2,10 @@ <% use crate::components::dropdown::DropdownValue; %> -

Playground

Playground

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!