Skip to content

Dan marketing nav rebuild #1138

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Oct 31, 2023
Merged

Dan marketing nav rebuild #1138

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4ab8c22
start new marketing top global top nav
chillenberger Oct 31, 2023
91666b5
update search icon, gihub icon
chillenberger Oct 31, 2023
2e521df
Merge branch 'master' into dan-marketing-nav-rebuild
chillenberger Oct 31, 2023
90e46d1
fix mismatch div elements
chillenberger Oct 31, 2023
b084b10
break at xl screen
chillenberger Oct 31, 2023
1ed5cb9
delete dead code
chillenberger Oct 31, 2023
af54754
disable mobile on links
chillenberger Oct 31, 2023
8a9890b
add coming soon to mobile
chillenberger Oct 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion pgml-dashboard/Cargo.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

31 changes: 31 additions & 0 deletions pgml-dashboard/src/components/github_icon/github_icon.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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};
}
}
28 changes: 18 additions & 10 deletions pgml-dashboard/src/components/github_icon/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,18 @@
<a class="d-flex align-items-center nav-link p-0 border-bottom-0" href="https://github.com/postgresml/postgresml">
<% if show_stars {%>
<% if let Ok(stars) = crate::utils::config::github_stars() { %>
<span class="badge github-badge"><p>Stars | <%= stars %></p></span>
<% } %>
<% } %>
<svg width="25" height="25" viewBox="0 0 40 39" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 0.25C17.3736 0.25 14.7728 0.763591 12.3463 1.76145C9.91982 2.75931 7.71504 4.22189 5.85786 6.06569C2.10714 9.78942 0 14.8399 0 20.106C0 28.8824 5.74 36.3284 13.68 38.9692C14.68 39.1281 15 38.5126 15 37.9764V34.6208C9.46 35.8121 8.28 31.9601 8.28 31.9601C7.36 29.6568 6.06 29.0412 6.06 29.0412C4.24 27.8102 6.2 27.8499 6.2 27.8499C8.2 27.9889 9.26 29.895 9.26 29.895C11 32.9132 13.94 32.0196 15.08 31.5431C15.26 30.2525 15.78 29.3788 16.34 28.8824C11.9 28.386 7.24 26.6784 7.24 19.1132C7.24 16.9092 8 15.142 9.3 13.7322C9.1 13.2358 8.4 11.1708 9.5 8.49025C9.5 8.49025 11.18 7.95414 15 10.5156C16.58 10.0787 18.3 9.86032 20 9.86032C21.7 9.86032 23.42 10.0787 25 10.5156C28.82 7.95414 30.5 8.49025 30.5 8.49025C31.6 11.1708 30.9 13.2358 30.7 13.7322C32 15.142 32.76 16.9092 32.76 19.1132C32.76 26.6982 28.08 28.3661 23.62 28.8625C24.34 29.4781 25 30.6893 25 32.5359V37.9764C25 38.5126 25.32 39.1479 26.34 38.9692C34.28 36.3085 40 28.8824 40 20.106C40 17.4985 39.4827 14.9165 38.4776 12.5075C37.4725 10.0984 35.9993 7.9095 34.1421 6.06569C32.285 4.22189 30.0802 2.75931 27.6537 1.76145C25.2272 0.763591 22.6264 0.25 20 0.25Z" fill="#FAFAFA"/>
</svg>
</a>


<% if show_stars { %>
<a class="d-flex align-items-center btn-github nav-link gap-2 border-0" href="https://github.com/postgresml/postgresml">
<svg width="25" height="25" viewBox="0 0 40 39" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 0.25C17.3736 0.25 14.7728 0.763591 12.3463 1.76145C9.91982 2.75931 7.71504 4.22189 5.85786 6.06569C2.10714 9.78942 0 14.8399 0 20.106C0 28.8824 5.74 36.3284 13.68 38.9692C14.68 39.1281 15 38.5126 15 37.9764V34.6208C9.46 35.8121 8.28 31.9601 8.28 31.9601C7.36 29.6568 6.06 29.0412 6.06 29.0412C4.24 27.8102 6.2 27.8499 6.2 27.8499C8.2 27.9889 9.26 29.895 9.26 29.895C11 32.9132 13.94 32.0196 15.08 31.5431C15.26 30.2525 15.78 29.3788 16.34 28.8824C11.9 28.386 7.24 26.6784 7.24 19.1132C7.24 16.9092 8 15.142 9.3 13.7322C9.1 13.2358 8.4 11.1708 9.5 8.49025C9.5 8.49025 11.18 7.95414 15 10.5156C16.58 10.0787 18.3 9.86032 20 9.86032C21.7 9.86032 23.42 10.0787 25 10.5156C28.82 7.95414 30.5 8.49025 30.5 8.49025C31.6 11.1708 30.9 13.2358 30.7 13.7322C32 15.142 32.76 16.9092 32.76 19.1132C32.76 26.6982 28.08 28.3661 23.62 28.8625C24.34 29.4781 25 30.6893 25 32.5359V37.9764C25 38.5126 25.32 39.1479 26.34 38.9692C34.28 36.3085 40 28.8824 40 20.106C40 17.4985 39.4827 14.9165 38.4776 12.5075C37.4725 10.0984 35.9993 7.9095 34.1421 6.06569C32.285 4.22189 30.0802 2.75931 27.6537 1.76145C25.2272 0.763591 22.6264 0.25 20 0.25Z" fill="#FAFAFA"/>
</svg>
<% if let Ok(stars) = crate::utils::config::github_stars() { %>
<span class=""><%= stars %></span>
<% } %>
</a>
<% } else { %>
<a class="d-flex align-items-center nav-link p-0 border-bottom-0" href="https://github.com/postgresml/postgresml">
<svg width="25" height="25" viewBox="0 0 40 39" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 0.25C17.3736 0.25 14.7728 0.763591 12.3463 1.76145C9.91982 2.75931 7.71504 4.22189 5.85786 6.06569C2.10714 9.78942 0 14.8399 0 20.106C0 28.8824 5.74 36.3284 13.68 38.9692C14.68 39.1281 15 38.5126 15 37.9764V34.6208C9.46 35.8121 8.28 31.9601 8.28 31.9601C7.36 29.6568 6.06 29.0412 6.06 29.0412C4.24 27.8102 6.2 27.8499 6.2 27.8499C8.2 27.9889 9.26 29.895 9.26 29.895C11 32.9132 13.94 32.0196 15.08 31.5431C15.26 30.2525 15.78 29.3788 16.34 28.8824C11.9 28.386 7.24 26.6784 7.24 19.1132C7.24 16.9092 8 15.142 9.3 13.7322C9.1 13.2358 8.4 11.1708 9.5 8.49025C9.5 8.49025 11.18 7.95414 15 10.5156C16.58 10.0787 18.3 9.86032 20 9.86032C21.7 9.86032 23.42 10.0787 25 10.5156C28.82 7.95414 30.5 8.49025 30.5 8.49025C31.6 11.1708 30.9 13.2358 30.7 13.7322C32 15.142 32.76 16.9092 32.76 19.1132C32.76 26.6982 28.08 28.3661 23.62 28.8625C24.34 29.4781 25 30.6893 25 32.5359V37.9764C25 38.5126 25.32 39.1479 26.34 38.9692C34.28 36.3085 40 28.8824 40 20.106C40 17.4985 39.4827 14.9165 38.4776 12.5075C37.4725 10.0984 35.9993 7.9095 34.1421 6.06569C32.285 4.22189 30.0802 2.75931 27.6537 1.76145C25.2272 0.763591 22.6264 0.25 20 0.25Z" fill="#FAFAFA"/>
</svg>
</a>
<% } %>
58 changes: 58 additions & 0 deletions pgml-dashboard/src/components/navigation/navbar/marketing/marketing.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
170 changes: 114 additions & 56 deletions pgml-dashboard/src/components/navigation/navbar/marketing/template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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),
];
%>

<div class="sticky-top-nav" data-controller="navigation-navbar-marketing">
<nav class="navbar-marketing-site horizontal navbar-expand-lg" data-controller="search topnav-styling">
<div class="container gap-4">
<nav class="navbar-marketing-site horizontal navbar-expand-xl" data-controller="search topnav-styling">
<div class="container column-gap-4">
<div class="controls">
<%+ PostgresLogo::new("/") %>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav flex-grow-1 gap-4 me-auto mb-4 mb-lg-0">
<% if !standalone_dashboard { %>
<li class="nav-item d-flex align-items-center">
<a class="nav-link p-0" href="/pricing">Pricing</a>
</li>
<% } %>
<li class="nav-item d-flex align-items-center">
<a class="nav-link p-0" href="/docs/guides/">Docs</a>
</li>
<li class="nav-item d-flex align-items-center">
<a class="nav-link p-0" href="/blog/speeding-up-vector-recall-by-5x-with-hnsw">Blog</a>
</li>
</ul>

<ul class="navbar-nav gap-4 gap-lg-3 mb-2 mb-lg-0">
<li class="align-items-center d-none d-lg-flex">
<%+ GithubIcon {show_stars: true} %>
</li>
<li class="d-flex align-items-center d-block d-lg-none">
<a class="nav-link p-0" href="https://github.com/postgresml/postgresml">Open Source</a>
</li>
<li class="nav-item d-flex align-items-center">
<button type="text" class="btn nav-link btn-search-alt p-0" name="search" data-bs-toggle="modal" data-bs-target="#search" autocomplete="off" data-search-target="searchTrigger" data-action="search#openSearch">
Search
<div class="d-flex flex-row gap-1">
<li class="nav-item d-flex align-items-center d-block d-xl-none">
<button type="text" class="btn nav-link btn-search-alt border-0 p-0" name="search" data-bs-toggle="modal" data-bs-target="#search" autocomplete="off" data-search-target="searchTrigger" data-action="search#openSearch">
<span class="material-symbols-outlined">search</span>
</button>
</li>
<% if !standalone_dashboard { %>
<div class="vr my-2 opacity-100 d-lg-block d-none" style="width: 2px"></div>
<% if current_user.as_ref().is_none() || current_user.as_ref().unwrap().id == -1 { %>
<li class="nav-item d-flex align-items-center">
<a class="nav-link p-0" href="/login">Sign In</a>
</li>
<li class="d-flex align-items-center">
<a class="btn btn-primary py-2 px-3" href="/signup">Sign Up</a>
</li>
<% } else { %>
<li class="nav-item d-flex align-items-center">
<a class="nav-link p-0" href="/logout">Sign Out</a>
</li>
<li class="d-flex align-items-center">
<a class="btn btn-primary py-2 px-3" href="/clusters">Console</a>
</li>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>

<div class="navbarSupportedContent underline collapse"></div>

<div class="collapse navbar-collapse drawer-submenu-container navbarSupportedContent" id="navbarSupportedContent">
<!-- Main Menu -->
<div class="nav-item w-100 d-xl-flex flex-column flex-xl-row align-items-xl-center collapse collapse-horizontal solutions-collapse show drawer-submenu">
<ul class="navbar-nav flex-grow-1 gap-4 me-auto my-4 my-xl-0">

<% if !standalone_dashboard { %>
<div class="d-none d-xl-flex">
<%+ MarketingLink::new()
.name("Solutions")
.links(solutions_links.clone()) %>
</div>
<li class="nav-item d-flex align-items-center d-flex d-xl-none">
<a class="nav-link p-0 fw-semibold" href="#" data-bs-toggle="collapse" data-bs-target=".solutions-collapse">Solutions</a>
</li>

<%+ MarketingLink::new().link(StaticNavLink::new("Pricing".to_string(), "/pricing".to_string())) %>
<% } %>
<% } %>

<% if standalone_dashboard { %>
<li class="nav-item d-flex align-items-center">
<a class="btn btn-primary py-2 px-3" href="/dashboard">Dashboard</a>
</li>
<% } %>
</ul>
<%+ MarketingLink::new().link(StaticNavLink::new("docs".to_string(), "/docs/guides/".to_string())) %>
<%+ MarketingLink::new().link(StaticNavLink::new("Blog".to_string(), "/blog/speeding-up-vector-recall-by-5x-with-hnsw".to_string())) %>

<li class="nav-item d-none d-xl-flex align-items-center">
<button type="text" class="btn nav-link btn-search-alt border-0 p-0" name="search" data-bs-toggle="modal" data-bs-target="#search" autocomplete="off" data-search-target="searchTrigger" data-action="search#openSearch">
<span class="material-symbols-outlined">search</span>
</button>
</li>
</ul>

<ul class="navbar-nav gap-4 mb-2 mb-xl-0">
<li class="align-items-center d-none d-xl-flex">
<%+ GithubIcon {show_stars: true} %>
</li>

<div class="d-block d-xl-none">
<%+ MarketingLink::new().link(StaticNavLink::new("GitHub".to_string(), "https://github.com/postgresml/postgresml".to_string())) %>
</div>


<div class="mb-5 mt-4 my-xl-0 d-flex flex-column flex-xl-row gap-4">
<% if !standalone_dashboard { %>
<% if current_user.as_ref().is_none() || current_user.as_ref().unwrap().id == -1 { %>
<li class="nav-item d-flex align-items-center">
<a class="btn btn-secondary w-100" data-controller="btn-secondary" data-btn-secondary-target="btnSecondary" href="/login">Sign In</a>
</li>
<li class="d-flex align-items-center">
<a class="btn btn-primary w-100" href="/signup">Start Your Project</a>
</li>
<% } else { %>
<li class="nav-item d-flex align-items-center">
<a class="btn btn-secondary w-100" data-controller="btn-secondary" data-btn-secondary-target="btnSecondary" href="/logout">Sign Out</a>
</li>
<li class="d-flex align-items-center">
<a class="btn btn-primary w-100" href="/clusters">Console</a>
</li>
<% } %>
<% } %>

<% if standalone_dashboard { %>
<li class="nav-item d-flex align-items-center ">
<a class="btn btn-primary w-100" href="/dashboard">Dashboard</a>
</li>
<% } %>

</div>
</ul>
</div>


<!-- Solutions nav for less than large screens -->
<div class="nav-item collapse-horizontal solutions-collapse collapse drawer-submenu">
<ul class="sub-menu-dropdown mb-5 d-flex flex-column gap-3">
<a class="btn btn-tertiary-web-app" data-bs-toggle="collapse" data-bs-target=".solutions-collapse">
<span class="material-symbols-outlined icon-back-btn">
arrow_back
</span>
Back
</a>
<% for link in solutions_links { %>
<%+ MarketingLink::new().link(
StaticNavLink::new(link.name.to_string(), link.href.to_string())
.disabled(link.disabled)
) %>
<% } %>
</ul>
</div>


</div>

</div>
</nav>
</div>
Expand Down
Loading
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy