diff --git a/pgml-dashboard/Cargo.lock b/pgml-dashboard/Cargo.lock index 0c605a37d..7927a5bbc 100644 --- a/pgml-dashboard/Cargo.lock +++ b/pgml-dashboard/Cargo.lock @@ -2375,7 +2375,7 @@ checksum = "9b2a4787296e9989611394c33f193f676704af1686e70b8f8033ab5ba9a35a94" [[package]] name = "pgml" -version = "0.9.4" +version = "0.9.5" dependencies = [ "anyhow", "async-trait", diff --git a/pgml-dashboard/src/components/github_icon/github_icon.scss b/pgml-dashboard/src/components/github_icon/github_icon.scss new file mode 100644 index 000000000..5037cae6b --- /dev/null +++ b/pgml-dashboard/src/components/github_icon/github_icon.scss @@ -0,0 +1,31 @@ +.btn-github { + background-color: #{$gray-700}; + border-radius: $border-radius; + padding: 10px 20px; + +} + +.github-badge { + $color: $neon-shade-100; + padding: 4px; + + p { + margin: 0px; + background: #{$color}; + border-radius: calc($border-radius / 2); + padding: 4px; + font-size: 0.8rem; + font-weight: 500; + } + + // Add right pointing arrow + &::after { + content: ""; + width: 0; + height: 0; + border-top: 5px solid transparent; + border-bottom: 5px solid transparent; + + border-left: 5px solid #{$color}; + } +} diff --git a/pgml-dashboard/src/components/github_icon/template.html b/pgml-dashboard/src/components/github_icon/template.html index 5aa0edc9a..1142d5613 100644 --- a/pgml-dashboard/src/components/github_icon/template.html +++ b/pgml-dashboard/src/components/github_icon/template.html @@ -1,10 +1,18 @@ - - <% if show_stars {%> - <% if let Ok(stars) = crate::utils::config::github_stars() { %> -

Stars | <%= stars %>

 - <% } %> - <% } %> - - - - + + +<% if show_stars { %> + + + + + <% if let Ok(stars) = crate::utils::config::github_stars() { %> + <%= stars %> + <% } %> + +<% } else { %> + + + + + +<% } %> diff --git a/pgml-dashboard/src/components/navigation/navbar/marketing/marketing.scss b/pgml-dashboard/src/components/navigation/navbar/marketing/marketing.scss index 4a5c5ab4f..42447bca8 100644 --- a/pgml-dashboard/src/components/navigation/navbar/marketing/marketing.scss +++ b/pgml-dashboard/src/components/navigation/navbar/marketing/marketing.scss @@ -1,6 +1,64 @@ .navbar-marketing-site { @extend .navbar; + + @include media-breakpoint-up(xl) { + height: $navbar-height; + --bs-navbar-padding-y: 24px; + --bs-navbar-padding-x: 1.25rem; + } + + .controls { + display: flex; + align-items: center; + justify-content: space-between; + min-height: $navbar-height; + + @include media-breakpoint-down(xl) { + width: 100%; + } + } + + .navbar-collapse { + @include media-breakpoint-up(xl) { + width: 100%; + } + } + &.horizontal { background: linear-gradient(180deg, rgba(0, 0, 0, 0.64) -55.68%, rgba(0, 0, 0, 0) 100%); } + + .underline { + position: absolute; + width: 100%; + height: 1px; + background-color: #{$gray-600}; + left: 0px; + top: 88px; + + &.collapsing { + height: 1px !important; + } + + &.show { + height: 1px; + } + } + + .btn-primary { + @include media-breakpoint-up(xl) { + padding: 10px 20px; + } + } + + .btn-secondary { + @include media-breakpoint-up(xl) { + padding: 8px 20px; // compensate for 1px boarder + } + } + + .icon-back-btn { + width: 15px; + font-size: 1.5rem; + } } diff --git a/pgml-dashboard/src/components/navigation/navbar/marketing/template.html b/pgml-dashboard/src/components/navigation/navbar/marketing/template.html index 3e2bbb04c..beab8e016 100644 --- a/pgml-dashboard/src/components/navigation/navbar/marketing/template.html +++ b/pgml-dashboard/src/components/navigation/navbar/marketing/template.html @@ -1,69 +1,127 @@ -<% use crate::templates::components::GithubIcon; %> -<% use crate::templates::components::PostgresLogo; %> +<% + use crate::templates::components::GithubIcon; + use crate::templates::components::PostgresLogo; + use crate::components::navigation::navbar::marketing_link::MarketingLink; + use crate::components::static_nav_link::StaticNavLink; + + let solutions_links = vec![ + StaticNavLink::new("ChatBot".to_string(), "/chatbot".to_string()).icon("smart_toy"), + StaticNavLink::new("Site Search".to_string(), "/test2".to_string()).icon("manage_search").disabled(true), + StaticNavLink::new("Forcasting".to_string(), "/test2".to_string()).icon("avg_pace").disabled(true), + StaticNavLink::new("Frad Detection".to_string(), "/test2".to_string()).icon("e911_emergency").disabled(true), + ]; +%>
-
diff --git a/pgml-dashboard/src/components/navigation/navbar/marketing_link/marketing_link.scss b/pgml-dashboard/src/components/navigation/navbar/marketing_link/marketing_link.scss new file mode 100644 index 000000000..8a9d9e3dc --- /dev/null +++ b/pgml-dashboard/src/components/navigation/navbar/marketing_link/marketing_link.scss @@ -0,0 +1,131 @@ +li[data-controller="navigation-navbar-marketing-link"] { + + .nav-item-container { + .nav-link { + font-weight: 600; + } + + .nav-link.disabled { + color: #{$gray-400} !important; + border-bottom: none !important; + pointer-events: none; + cursor: default; + + &::after { + content: " (coming soon!)"; + font-size: 10px; + font-style: normal; + font-weight: 400; + line-height: 14px; + } + } + + &:hover { + .nav-link { + border-bottom: 1px solid #{$slate-shade-100}; + color: #{$slate-shade-100}; + } + + .dropdown-list { + display: flex; + } + } + + &:active { + .nav-link { + @include bold_by_shadow(#{$slate-shade-100}); + color: #{$slate-tint-500}; + border-bottom: 1px solid transparent; + } + } + } + + + .dropdown-list { + list-style-type: none; /* Remove bullets */ + padding: 1.5rem; + margin: 0; + + background: #{$gray-100}; + color: #{$gray-900}; + position: absolute; + top: 100%; + text-wrap: nowrap; + border-radius: $border-radius; + min-width: 12.5rem; + display: none; + flex-direction: column; + gap: 0.75rem; + + li { + span { + color: #{$slate-shade-100}; + scale: .8; + } + + .submenu-link { + display: inline-block; + border-bottom: 1px solid transparent; + --bs-link-color: #{$gray-900}; + } + } + + li.disabled, li.disabled:hover, li.disabled:active { + span { + color: #{$gray-400}; + } + + .submenu-link { + display: inline-block; + border-bottom: 1px solid transparent; + --bs-link-color: #{$gray-400}; + color: #{$gray-400}; + pointer-events: none; + cursor: default; + &::after { + content: " (coming soon!)"; + font-size: 10px; + font-style: normal; + font-weight: 400; + line-height: 14px; + } + } + } + + li:hover { + span { + color: #{$slate-shade-400}; + } + + .submenu-link { + color: #{$slate-shade-400}; + border-bottom: 1px solid #{$slate-shade-400}; + } + } + + li:active { + span { + color: #{$slate-shade-400}; + } + + .submenu-link { + @include bold_by_shadow(#{$slate-shade-400}); + color: #{$slate-shade-400}; + border-bottom: 1px solid transparent; + } + } + } + + .dropdown-list::before { + content: ""; + width: 0; + height: 0; + border-top: 10px solid transparent; + border-bottom: 10px solid #{$gray-100}; + border-left: 10px solid transparent; + border-right: 10px solid transparent; + top: -17px; + position: absolute; + } +} + diff --git a/pgml-dashboard/src/components/navigation/navbar/marketing_link/mod.rs b/pgml-dashboard/src/components/navigation/navbar/marketing_link/mod.rs new file mode 100644 index 000000000..2899b4fb2 --- /dev/null +++ b/pgml-dashboard/src/components/navigation/navbar/marketing_link/mod.rs @@ -0,0 +1,39 @@ +use crate::components::static_nav_link::StaticNavLink as NavLink; +use pgml_components::component; +use sailfish::TemplateOnce; + +#[derive(TemplateOnce, Default)] +#[template(path = "navigation/navbar/marketing_link/template.html")] +pub struct MarketingLink { + name: String, + link: Option, + links: Vec, +} + +impl MarketingLink { + pub fn new() -> MarketingLink { + MarketingLink { + name: String::from("Link Name"), + links: Vec::new(), + link: None, + } + } + + pub fn links(mut self, links: Vec) -> MarketingLink { + self.links = links; + self.link = None; + self + } + + pub fn name(mut self, name: &str) -> MarketingLink { + self.name = name.to_owned(); + self + } + + pub fn link(mut self, link: NavLink) -> MarketingLink { + self.link = Some(link); + self + } +} + +component!(MarketingLink); diff --git a/pgml-dashboard/src/components/navigation/navbar/marketing_link/template.html b/pgml-dashboard/src/components/navigation/navbar/marketing_link/template.html new file mode 100644 index 000000000..2cba7b51b --- /dev/null +++ b/pgml-dashboard/src/components/navigation/navbar/marketing_link/template.html @@ -0,0 +1,23 @@ + +
  • +
    + <% if links.len() > 0 { %> +
    <%- name %>
    + +
    +
      + <% for link in links { %> +
    • + <%- link.icon.unwrap() %> + <%- link.name %> +
      • + <% } %> +
    +
    + + <% } else { %> + <%- link.unwrap().name %> + <% } %> + +
    +
    • diff --git a/pgml-dashboard/src/components/navigation/navbar/mod.rs b/pgml-dashboard/src/components/navigation/navbar/mod.rs index 69d1f8702..5ffa0ca5b 100644 --- a/pgml-dashboard/src/components/navigation/navbar/mod.rs +++ b/pgml-dashboard/src/components/navigation/navbar/mod.rs @@ -5,6 +5,10 @@ pub mod marketing; pub use marketing::Marketing; +// src/components/navigation/navbar/marketing_link +pub mod marketing_link; +pub use marketing_link::MarketingLink; + // src/components/navigation/navbar/web_app pub mod web_app; pub use web_app::WebApp; diff --git a/pgml-dashboard/static/css/modules.scss b/pgml-dashboard/static/css/modules.scss index 760a4255d..08f13600d 100644 --- a/pgml-dashboard/static/css/modules.scss +++ b/pgml-dashboard/static/css/modules.scss @@ -4,6 +4,7 @@ @import "../../src/components/accordian/accordian.scss"; @import "../../src/components/chatbot/chatbot.scss"; @import "../../src/components/dropdown/dropdown.scss"; +@import "../../src/components/github_icon/github_icon.scss"; @import "../../src/components/inputs/range_group/range_group.scss"; @import "../../src/components/inputs/select/select.scss"; @import "../../src/components/inputs/switch/switch.scss"; @@ -13,6 +14,7 @@ @import "../../src/components/navigation/dropdown_link/dropdown_link.scss"; @import "../../src/components/navigation/left_nav/web_app/web_app.scss"; @import "../../src/components/navigation/navbar/marketing/marketing.scss"; +@import "../../src/components/navigation/navbar/marketing_link/marketing_link.scss"; @import "../../src/components/navigation/navbar/web_app/web_app.scss"; @import "../../src/components/navigation/tabs/tab/tab.scss"; @import "../../src/components/navigation/tabs/tabs/tabs.scss"; diff --git a/pgml-dashboard/static/css/scss/base/_base.scss b/pgml-dashboard/static/css/scss/base/_base.scss index e988b693c..96a71e55a 100644 --- a/pgml-dashboard/static/css/scss/base/_base.scss +++ b/pgml-dashboard/static/css/scss/base/_base.scss @@ -47,7 +47,6 @@ a { &:not(.btn, .nav .nav-link, .breadcrumb-item a, .list-group-item, .a-reset, .navbar .nav-link, .navbar .navbar-brand, .menu-item a) { color: var(--bs-link-color); - background-color: transparent; } } diff --git a/pgml-dashboard/static/css/scss/components/_badges.scss b/pgml-dashboard/static/css/scss/components/_badges.scss index ebb3ac4a5..d34961e49 100644 --- a/pgml-dashboard/static/css/scss/components/_badges.scss +++ b/pgml-dashboard/static/css/scss/components/_badges.scss @@ -10,31 +10,6 @@ color: #{$pink}; } -.github-badge { - $color: $neon-shade-100; - padding: 4px; - - p { - margin: 0px; - background: #{$color}; - border-radius: calc($border-radius / 2); - padding: 4px; - font-size: 0.8rem; - font-weight: 500; - } - - // Add right pointing arrow - &::after { - content: ""; - width: 0; - height: 0; - border-top: 5px solid transparent; - border-bottom: 5px solid transparent; - - border-left: 5px solid #{$color}; - } -} - @mixin deployment-status($color) { @extend .badge; border-radius: calc($border-radius / 2); diff --git a/pgml-dashboard/static/css/scss/components/_buttons.scss b/pgml-dashboard/static/css/scss/components/_buttons.scss index 840ba5144..1776f872b 100644 --- a/pgml-dashboard/static/css/scss/components/_buttons.scss +++ b/pgml-dashboard/static/css/scss/components/_buttons.scss @@ -245,9 +245,21 @@ } .btn-search-alt { - border-radius: 0px; - border-left: none; - border-top: none; - border-right: none; - font-weight: $font-weight-medium; + gap: 0.1rem; + font-weight: 600; + + &::before { + content: "/"; + color: #{$slate-tint-100}; + display: inline; + font-size: 1.5rem; + text-shadow: none; + } + + &:active::before { + color: #{$slate-tint-400}; + text-shadow: none; + } + } +