From 7145d1ae8bfa548b042a5c9f3122266a21dbb88f Mon Sep 17 00:00:00 2001 From: Dan <39170265+chillenberger@users.noreply.github.com> Date: Sat, 1 Jun 2024 16:36:05 -0600 Subject: [PATCH 1/3] allow nav to have two colums, or have double nested draweres, add new items --- .../navigation/navbar/marketing/template.html | 153 ++++++++++++------ .../navbar/marketing_link/marketing_link.scss | 46 +++++- .../navigation/navbar/marketing_link/mod.rs | 21 +++ .../navbar/marketing_link/template.html | 52 +++++- 4 files changed, 212 insertions(+), 60 deletions(-) diff --git a/pgml-dashboard/src/components/navigation/navbar/marketing/template.html b/pgml-dashboard/src/components/navigation/navbar/marketing/template.html index 054a27bcc..f4b52deaf 100644 --- a/pgml-dashboard/src/components/navigation/navbar/marketing/template.html +++ b/pgml-dashboard/src/components/navigation/navbar/marketing/template.html @@ -3,12 +3,19 @@ use crate::templates::components::PostgresLogo; use crate::components::navigation::navbar::marketing_link::MarketingLink; use crate::components::static_nav_link::StaticNavLink; + use pgml_components::Component; - let solutions_links = vec![ + let solutions_use_cases_links = vec![ + StaticNavLink::new("Search".to_string(), "/docs/guides/improve-search-results-with-machine-learning".to_string()).icon("feature_search"), StaticNavLink::new("Chatbots".to_string(), "/chatbot".to_string()).icon("smart_toy"), - StaticNavLink::new("Site Search".to_string(), "/test2".to_string()).icon("manage_search").disabled(true), - StaticNavLink::new("Fraud Detection".to_string(), "/test2".to_string()).icon("e911_emergency").disabled(true), - StaticNavLink::new("Forecasting".to_string(), "/test2".to_string()).icon("avg_pace").disabled(true), + ]; + + let solutions_tasks_links = vec![ + StaticNavLink::new("RAG".to_string(), "/test2".to_string()).icon("manage_search").disabled(true), + StaticNavLink::new("NLP".to_string(), "/docs/guides/natural-language-processing".to_string()).icon("description"), + StaticNavLink::new("Supervised Learning".to_string(), "/docs/guides/supervised-learning".to_string()).icon("model_training"), + StaticNavLink::new("Embeddings".to_string(), "/docs/api/sql-extension/pgml.embed".to_string()).icon("subtitles"), + StaticNavLink::new("Vector Database".to_string(), "/docs/product/vector-database".to_string()).icon("open_with"), ]; let company_links = vec![ @@ -17,21 +24,45 @@ StaticNavLink::new("Contact".to_string(), "/contact".to_string()).icon("alternate_email") ]; - struct MobileNavs { - collapse: String, - links: Vec + struct DrawerNav { + collapse_name: String, + links: Vec, + to_expand: Vec } - let mobile_nav_items = vec![ - MobileNavs { - collapse: "solutions-collapse".to_string(), - links: solutions_links.clone() - }, - MobileNavs { - collapse: "company-collapse".to_string(), - links: company_links.clone() - } - ]; + let drawer = |item: DrawerNav| { + let collapse_name = item.collapse_name; + + let links = item.links.iter().map(|link| { + link.clone().render_once().unwrap() + }).collect::>().join("\n"); + + let to_expand = item.to_expand.join(" "); + + format!(r#" +
+ +
+ "#) + }; + + let link_to_drawer = |name: &str, target: &str| { + format!(r##" +
  • + {name} +
    • + "##) + }; + + let close_mobile_main_nav_items = vec!["solutions-collapse", "company-collapse"]; %>
    @@ -57,18 +88,19 @@ + <%- drawer( + DrawerNav { + collapse_name: "company-collapse".to_string(), + links: + company_links.iter().map(|link| { + MarketingLink::new().link( + StaticNavLink::new(link.name.to_string(), link.href.to_string()) + .disabled(link.disabled)) + .into() + }).collect::>(), + to_expand: vec![] + } + ) %> + + <%- drawer( + DrawerNav { + collapse_name: "solutions-tasks-collapse".to_string(), + links: + solutions_tasks_links.iter().map(|link| { + MarketingLink::new().link( + StaticNavLink::new(link.name.to_string(), link.href.to_string()) + .disabled(link.disabled)) + .into() + }).collect::>(), + to_expand: vec![] + } + ) %> + + <%- drawer( + DrawerNav { + collapse_name: "solutions-use-cases-collapse".to_string(), + links: + solutions_use_cases_links.iter().map(|link| { + MarketingLink::new().link( + StaticNavLink::new(link.name.to_string(), link.href.to_string()) + .disabled(link.disabled)) + .into() + }).collect::>(), + to_expand: vec![] + } + ) %> + + <%- drawer( + DrawerNav { + collapse_name: "solutions-collapse".to_string(), + links: + vec![ + Component::from(link_to_drawer("Tasks", "solutions-tasks-collapse")), + Component::from(link_to_drawer("Use Cases", "solutions-use-cases-collapse")) + ], + to_expand: vec!["solutions-tasks-collapse".to_string(), "solutions-use-cases-collapse".to_string()] + } + ) %>
    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 index 8a9d9e3dc..6772cbf9a 100644 --- a/pgml-dashboard/src/components/navigation/navbar/marketing_link/marketing_link.scss +++ b/pgml-dashboard/src/components/navigation/navbar/marketing_link/marketing_link.scss @@ -26,10 +26,24 @@ li[data-controller="navigation-navbar-marketing-link"] { color: #{$slate-shade-100}; } - .dropdown-list { + // .dropdown-list { + // display: flex; + // } + + .dropdown-container { display: flex; } } + .dropdown-container { + display: none; + flex-direction: row; + position: absolute; + top: 100%; + background: #{$gray-100}; + border-radius: $border-radius; + min-width: 12.5rem; + padding: 1.5rem; + } &:active { .nav-link { @@ -43,17 +57,17 @@ li[data-controller="navigation-navbar-marketing-link"] { .dropdown-list { list-style-type: none; /* Remove bullets */ - padding: 1.5rem; + padding: 0px; margin: 0; background: #{$gray-100}; color: #{$gray-900}; - position: absolute; - top: 100%; + // position: absolute; + // top: 100%; text-wrap: nowrap; border-radius: $border-radius; - min-width: 12.5rem; - display: none; + // min-width: 12.5rem; + display: flex; flex-direction: column; gap: 0.75rem; @@ -115,8 +129,25 @@ li[data-controller="navigation-navbar-marketing-link"] { } } } + + .col-title { + color: #{$gray-400}; + padding-bottom: 12px; + } - .dropdown-list::before { + // .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; + // } + + .dropdown-container::before { content: ""; width: 0; height: 0; @@ -126,6 +157,7 @@ li[data-controller="navigation-navbar-marketing-link"] { border-right: 10px solid transparent; top: -17px; position: absolute; + left: 25px; } } diff --git a/pgml-dashboard/src/components/navigation/navbar/marketing_link/mod.rs b/pgml-dashboard/src/components/navigation/navbar/marketing_link/mod.rs index 2899b4fb2..2fcc236ce 100644 --- a/pgml-dashboard/src/components/navigation/navbar/marketing_link/mod.rs +++ b/pgml-dashboard/src/components/navigation/navbar/marketing_link/mod.rs @@ -8,6 +8,9 @@ pub struct MarketingLink { name: String, link: Option, links: Vec, + links_col2: Vec, + title_col1: Option, + title_col2: Option, } impl MarketingLink { @@ -15,7 +18,10 @@ impl MarketingLink { MarketingLink { name: String::from("Link Name"), links: Vec::new(), + links_col2: Vec::new(), link: None, + title_col1: None, + title_col2: None, } } @@ -34,6 +40,21 @@ impl MarketingLink { self.link = Some(link); self } + + pub fn links_col2(mut self, links: Vec) -> MarketingLink { + self.links_col2 = links; + self + } + + pub fn title_col1(mut self, title: &str) -> MarketingLink { + self.title_col1 = Some(title.to_owned()); + self + } + + pub fn title_col2(mut self, title: &str) -> MarketingLink { + self.title_col2 = Some(title.to_owned()); + 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 index 2cba7b51b..510a6d519 100644 --- a/pgml-dashboard/src/components/navigation/navbar/marketing_link/template.html +++ b/pgml-dashboard/src/components/navigation/navbar/marketing_link/template.html @@ -1,18 +1,54 @@ +<% + use crate::components::static_nav_link::StaticNavLink as NavLink; + + let col_title = |title: String| {format!(r#" +
    {}
    "#, title) + }; + + let list_item = |link: NavLink| { + let is_disabled = if link.disabled { "disabled" } else { "" }; + let icon = link.icon.unwrap(); + let href = link.href; + let name = link.name; + format!(r#" +
  • + {icon} + {name} +
    • "#) + }; +%> +
  • <% if links.len() > 0 { %>
    <%- name %>
    -
    -
      - <% for link in links { %> -
    • - <%- link.icon.unwrap() %> - <%- link.name %> -
      • +
      +
      +
      + <% if title_col1.is_some() {%> + <%- col_title(title_col1.unwrap()) %> + <% } %> +
        + <% for link in links { %> + <%- list_item(link) %> + <% } %> +
      +
      + <% if !links_col2.is_empty() {%> +
      + <% if title_col2.is_some() {%> + <%- col_title(title_col2.unwrap()) %> + <% } %> +
        + <% for link in links_col2 { %> + <%- list_item(link) %> + <% } %> +
      +
      <% } %> -
    +
    <% } else { %> From 6bd304a21f37f43375ee4024ddf850adea5677b4 Mon Sep 17 00:00:00 2001 From: Dan <39170265+chillenberger@users.noreply.github.com> Date: Sat, 1 Jun 2024 16:41:00 -0600 Subject: [PATCH 2/3] remove marketing footnote about terms of credit --- .../sections/footers/marketing_footer/template.html | 4 ---- 1 file changed, 4 deletions(-) diff --git a/pgml-dashboard/src/components/sections/footers/marketing_footer/template.html b/pgml-dashboard/src/components/sections/footers/marketing_footer/template.html index 9b3615e39..73210453f 100644 --- a/pgml-dashboard/src/components/sections/footers/marketing_footer/template.html +++ b/pgml-dashboard/src/components/sections/footers/marketing_footer/template.html @@ -89,9 +89,5 @@

    PostgresML 2023 Ⓒ All rights reserved.

    - -
    -

    *Complete your profile to get $100 in free usage credits towards your first AI engine. See Terms of Service.

    -
    From 3890d4869f48ec250a19d638c3ea88fb64f7e10a Mon Sep 17 00:00:00 2001 From: Dan <39170265+chillenberger@users.noreply.github.com> Date: Sat, 1 Jun 2024 16:44:00 -0600 Subject: [PATCH 3/3] remove comments --- .../navbar/marketing_link/marketing_link.scss | 19 ------------------- 1 file changed, 19 deletions(-) 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 index 6772cbf9a..cc65e2b15 100644 --- a/pgml-dashboard/src/components/navigation/navbar/marketing_link/marketing_link.scss +++ b/pgml-dashboard/src/components/navigation/navbar/marketing_link/marketing_link.scss @@ -26,10 +26,6 @@ li[data-controller="navigation-navbar-marketing-link"] { color: #{$slate-shade-100}; } - // .dropdown-list { - // display: flex; - // } - .dropdown-container { display: flex; } @@ -62,11 +58,8 @@ li[data-controller="navigation-navbar-marketing-link"] { background: #{$gray-100}; color: #{$gray-900}; - // position: absolute; - // top: 100%; text-wrap: nowrap; border-radius: $border-radius; - // min-width: 12.5rem; display: flex; flex-direction: column; gap: 0.75rem; @@ -134,18 +127,6 @@ li[data-controller="navigation-navbar-marketing-link"] { color: #{$gray-400}; padding-bottom: 12px; } - - // .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; - // } .dropdown-container::before { content: "";