Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Dan top nav sticky #743

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 11 commits into from
Jun 15, 2023
Merged

Dan top nav sticky #743

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
10e1b9a
make sticky, remove radius, shift tertiary btns
chillenberger Jun 13, 2023
fe74d1d
sticky nav sizing
chillenberger Jun 13, 2023
97e030c
sticky nav background and transition js
chillenberger Jun 14, 2023
69f1210
add github stars, fix search
chillenberger Jun 14, 2023
dcf528a
add topnav hover states, js for dynamic styling, spacing
chillenberger Jun 15, 2023
bda8d50
remove override for development
chillenberger Jun 15, 2023
a1c0d8a
style nav ubttons active state, refactor top nav html
chillenberger Jun 15, 2023
49c9033
search underline spacing
chillenberger Jun 15, 2023
ace765e
square buttons
chillenberger Jun 15, 2023
cd31eda
add pricing link, remove open source link
chillenberger Jun 15, 2023
51945bb
Merge branch 'master' into dan-top-nav-sticky
chillenberger Jun 15, 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
Prev Previous commit
Next Next commit
sticky nav sizing
  • Loading branch information
@chillenberger
chillenberger committed Jun 13, 2023
commit fe74d1da3848837275397ad0629633ae1d115800
1 change: 1 addition & 0 deletions 1 pgml-dashboard/static/css/scss/abstracts/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@ $badge-font-size: 0.65em;

// Navbar
$navbar-nav-link-padding-x: 1rem;
$navbar-height: 88px;

// Nav Tabs
$nav-link-transition: none;
Expand Down
2 changes: 1 addition & 1 deletion 2 pgml-dashboard/static/css/scss/components/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.btn {
// --bs-btn-border-radius: var(--bs-border-radius-pill);
--bs-btn-border-radius: var(--bs-border-radius-pill);
--bs-btn-padding-x: 22px;
--bs-btn-padding-y: 12px; // Need to decrease from style because border radius gets in the way.

Expand Down
12 changes: 7 additions & 5 deletions 12 pgml-dashboard/static/css/scss/components/_navs.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
.navbar {
--bs-navbar-padding-y: 0;
--bs-navbar-padding-y: 24px;
--bs-navbar-padding-x: 24px;
border: 1px solid rgba(33, 33, 35, 0.5);

&.horizontal {
--bs-navbar-padding-x: 1.25rem;
--bs-navbar-padding-y: 1.25rem;
@include media-breakpoint-down(lg) {
border-radius: 12px;
min-height: $navbar-height;
@include media-breakpoint-up(lg) {
height: $navbar-height;
}
}

Expand Down Expand Up @@ -135,4 +134,7 @@
transform: rotate(-90deg);
}
}
@include media-breakpoint-down(xxl) {
border-radius: 0px;
}
}
10 changes: 9 additions & 1 deletion 10 pgml-dashboard/static/css/scss/layout/_containers.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@
@extend .z-1;

position: sticky;
top: 0;
top: $navbar-height;
height: 2.5rem;
overflow: visible;

Expand All @@ -110,6 +110,7 @@
@include media-breakpoint-up(xxl) {
height: 100%;
max-height: 80vh;
top: calc($navbar-height + $spacer);

.collapse {
height: 100%;
Expand All @@ -126,11 +127,18 @@
}

.sticky-top-nav{
height: $navbar-height;
position: sticky;
top: 0px;
margin-bottom: ($spacer * 1.5);
z-index: $zindex-sticky;

@include media_breakpoint_up(xxl) {
margin-bottom: ($spacer * 3);
}
}

.container>.sticky-top-nav, .container-fluid>.sticky-top-nav {
margin-left: calc(var(--bs-gutter-x) * -0.5);
margin-right: calc(var(--bs-gutter-x) * -0.5);
}
2 changes: 1 addition & 1 deletion 2 pgml-dashboard/templates/layout/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

<body>
<main>
<div class="container-fluid bg-primary py-4 min-vh-100">
<div class="container-fluid bg-primary pb-4 min-vh-100">
<div class="ellipse-container position-absolute" style="margin: -2rem; height: 100vh; width: 100vw;">
<div class="ellipse-21" style="width: 35vw; height: 35vh; top: 0vh; left: -7vw"></div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion 2 pgml-dashboard/templates/layout/nav/toc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<nav class="card nav toc">
<div class="card-body py-2 py-xxl-4">
<h6 class="h6 mb-2 pb-2 d-none d-xxl-block">Table of Contents</h6>
<a class="h6 px-0 my-1 d-flex justify-content-between align-items-center d-xxl-none text-white" role="button" data-bs-toggle="collapse" href="#toc-nav" aria-expanded="false" aria-congrols="tox-nav">
<a class="h6 px-0 my-1 d-flex justify-content-between align-items-center d-xxl-none text-white" role="button" data-bs-toggle="collapse" href="#toc-nav" aria-expanded="false" aria-controls="toc-nav">
<span>Table of Contents</span><span class="material-symbols-outlined" >expand_more</span>
</a>

Expand Down
5 changes: 2 additions & 3 deletions 5 pgml-dashboard/templates/layout/nav/top.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<nav class="navbar horizontal navbar-expand-lg" data-controller="search">
<div class="container-fluid">
<div class="container">
<a class="navbar-brand d-flex align-items-center gap-2" href="/">
<img src="/dashboard/static/images/owl_gradient.svg" alt="PostgresML Logo" height="30" width="21">
<span class="fw-normal position-relative overflow-visible">Postgres
Expand Down Expand Up @@ -37,12 +37,11 @@
<% if !standalone_dashboard { %>
<div class="d-flex gap-2 justify-content-end align-items-center">
<% if current_user.as_ref().is_none() || current_user.as_ref().unwrap().id == -1 { %>
<a class="btn btn-primary" href="/signup">Get Started</a>
<a class="btn btn-primary" href="/signup">Sign Up</a>
<% } else { %>
<a class="btn btn-primary" href="/clusters">Console</a>
<% } %>
</div>

<% } %>
</div>
</div>
Expand Down
Morty Proxy This is a proxified and sanitized view of the page, visit original site.