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

Commit 7e4b51f

Browse filesBrowse files
chillenbergerchillenberger
authored
Dan top nav sticky (#743)
1 parent d0ad185 commit 7e4b51f
Copy full SHA for 7e4b51f

File tree

Expand file treeCollapse file tree

17 files changed

+242
-107
lines changed
Filter options
Expand file treeCollapse file tree

17 files changed

+242
-107
lines changed

‎pgml-dashboard/static/css/scss/abstracts/variables.scss

Copy file name to clipboardExpand all lines: pgml-dashboard/static/css/scss/abstracts/variables.scss
+7Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,11 @@ $violet-shade-100: #A105FF;
2828
// Neon Scale
2929
$neon-tint-100: #5162FF;
3030
$neon-tint-200: #6271FF;
31+
$neon-tint-300: #7381FF;
32+
33+
$neon-shade-100: #5162FF;
34+
$neon-shade-200: #4858E5;
35+
$neon-shade-300: #404ECC;
3136

3237
// Teal Scale
3338
$teal-tint-100: #00E0FF;
@@ -99,6 +104,7 @@ $badge-font-size: 0.65em;
99104

100105
// Navbar
101106
$navbar-nav-link-padding-x: 1rem;
107+
$navbar-height: 88px;
102108

103109
// Nav Tabs
104110
$nav-link-transition: none;
@@ -107,6 +113,7 @@ $nav-tabs-border-radius: 0px;
107113
$nav-underline-border-width: 2px;
108114
$nav-tabs-link-active-color: #{$gray-100};
109115
$nav-tabs-link-active-bg: transparent;
116+
$nav-pills-border-radius: calc(#{$border-radius} / 2);
110117

111118
//Grid
112119
$enable-cssgrid: true;

‎pgml-dashboard/static/css/scss/base/_base.scss

Copy file name to clipboardExpand all lines: pgml-dashboard/static/css/scss/base/_base.scss
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ table {
110110
}
111111

112112
html, body, main {
113-
height: 100%;
113+
height: fit-content;
114114
}
115115

116116
article {

‎pgml-dashboard/static/css/scss/components/_badges.scss

Copy file name to clipboard
+26-1Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,37 @@
11
// Center badge content
22
.badge {
3-
text-transform: uppercase;
43
display: flex;
54
justify-content: center;
65
align-items: center;
76
}
87

98
.beta-badge {
109
@extend .badge;
10+
text-transform: uppercase;
1111
color: #{$pink};
1212
}
13+
14+
.github-badge {
15+
$color: $neon-shade-100;
16+
padding: 4px;
17+
18+
p {
19+
margin: 0px;
20+
background: #{$color};
21+
border-radius: calc($border-radius / 2);
22+
padding: 4px;
23+
font-size: 0.8rem;
24+
font-weight: 500;
25+
}
26+
27+
// Add right pointing arrow
28+
&::after {
29+
content: "";
30+
width: 0;
31+
height: 0;
32+
border-top: 5px solid transparent;
33+
border-bottom: 5px solid transparent;
34+
35+
border-left: 5px solid #{$color};
36+
}
37+
}

‎pgml-dashboard/static/css/scss/components/_buttons.scss

Copy file name to clipboardExpand all lines: pgml-dashboard/static/css/scss/components/_buttons.scss
+2-16Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
.btn {
2-
--bs-btn-border-radius: var(--bs-border-radius-pill);
32
--bs-btn-padding-x: 22px;
4-
--bs-btn-padding-y: 12px; // Need to decrease from style because border radius gets in the way.
3+
--bs-btn-padding-y: 12px;
54

65
display: flex;
76
justify-content: center;
@@ -108,19 +107,6 @@
108107
}
109108

110109
.btn-search {
111-
padding: 10px 14px;
112-
min-width: 10rem;
113-
color: #{$hp-white};
114110
background-color: transparent;
115-
border-radius: var(--bs-border-radius-pill);
116-
border: 2px solid #{$gray-600};
117-
118-
&:hover {
119-
cursor: text;
120-
border: 2px solid #{$gray-400};
121-
}
122-
123-
@include media-breakpoint-down(lg) {
124-
width: 100%;
125-
}
111+
border: none;
126112
}

‎pgml-dashboard/static/css/scss/components/_navs.scss

Copy file name to clipboardExpand all lines: pgml-dashboard/static/css/scss/components/_navs.scss
+36-8Lines changed: 36 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,43 @@
1+
.sticky-top-nav{
2+
height: $navbar-height;
3+
position: sticky;
4+
top: 0px;
5+
z-index: $zindex-sticky;
6+
}
7+
18
.navbar {
2-
--bs-navbar-padding-y: 0;
9+
--bs-navbar-padding-y: 24px;
310
--bs-navbar-padding-x: 24px;
4-
border: 1px solid rgba(33, 33, 35, 0.5);
11+
--bs-nav-link-font-weight: 500;
512

613
&.horizontal {
714
--bs-navbar-padding-x: 1.25rem;
8-
--bs-navbar-padding-y: 1.25rem;
9-
border-radius: var(--bs-border-radius-pill);
10-
@include media-breakpoint-down(lg) {
11-
border-radius: 12px;
15+
min-height: $navbar-height;
16+
background: linear-gradient(180deg, rgba(0, 0, 0, 0.64) -55.68%, rgba(0, 0, 0, 0) 100%);
17+
18+
@include media-breakpoint-up(lg) {
19+
height: $navbar-height;
20+
}
21+
22+
&.pinned {
23+
background: #{$gray-900};
24+
}
25+
26+
.nav-link {
27+
--bs-nav-link-padding-y: 0px;
28+
--bs-nav-link-padding-x: 0px;
29+
30+
border-bottom: 1px solid transparent;
31+
32+
&:active {
33+
border-bottom: 1px solid #{$slate-tint-500};
34+
}
1235
}
1336
}
1437

1538
.nav-link {
1639
--bs-nav-link-padding-y: 16px;
17-
--bs-nav-link-font-weight: 500;
1840
--bs-nav-link-padding-x: 24px;
19-
--bs-nav-pills-border-radius: 4px;
2041
}
2142

2243
.nav {
@@ -61,6 +82,10 @@
6182
}
6283
}
6384

85+
.navbar-expanded {
86+
background-color: #{$gray-900} !important;
87+
}
88+
6489
.offcanvas-body {
6590
--bs-offcanvas-padding-x: 0;
6691
}
@@ -136,4 +161,7 @@
136161
transform: rotate(-90deg);
137162
}
138163
}
164+
@include media-breakpoint-down(xxl) {
165+
border-radius: 0px;
166+
}
139167
}

‎pgml-dashboard/static/css/scss/layout/_containers.scss

Copy file name to clipboardExpand all lines: pgml-dashboard/static/css/scss/layout/_containers.scss
+13-2Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@
8686
@extend .z-1;
8787

8888
position: sticky;
89-
top: 0;
89+
top: $navbar-height;
9090
height: 2.5rem;
9191
overflow: visible;
9292

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

114115
.collapse {
115116
height: 100%;
@@ -123,4 +124,14 @@
123124
font-size: 4rem;
124125
font-weight: 700;
125126
line-height: 80px;
126-
}
127+
}
128+
129+
.container>.sticky-top-nav, .container-fluid>.sticky-top-nav {
130+
margin-left: calc(var(--bs-gutter-x) * -0.5);
131+
margin-right: calc(var(--bs-gutter-x) * -0.5);
132+
}
133+
134+
.tuck-under-navbar {
135+
margin-top: -$navbar-height;
136+
padding-top: $navbar-height;
137+
}

‎pgml-dashboard/static/css/scss/themes/dark.scss

Copy file name to clipboardExpand all lines: pgml-dashboard/static/css/scss/themes/dark.scss
+13-6Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -78,15 +78,22 @@
7878
background: #151516;
7979

8080
.nav-link {
81-
--bs-nav-link-color: #{$gray-300};
82-
--bs-nav-link-hover-color: #{$gray-100};
81+
--bs-nav-link-color: #{$gray-100};
82+
--bs-nav-link-hover-color: #{$purple};
8383

84-
&:hover {
85-
text-shadow: 0 0 .65px white, 0 0 .65px white; //change font weight without element resizing
86-
}
84+
&:hover {
85+
text-shadow: 0 0 .65px #{$purple}, 0 0 .65px #{$purple}; //change font weight without element resizing
86+
87+
path {
88+
fill: var(--bs-nav-link-hover-color);
89+
}
90+
}
8791

8892
&:active {
89-
color: #{$gray-200};
93+
color: #{$slate-tint-500};
94+
path {
95+
fill: #{$slate-tint-500};
96+
}
9097
}
9198
}
9299
}

‎pgml-dashboard/static/js/btn-secondary.js

Copy file name to clipboardExpand all lines: pgml-dashboard/static/js/btn-secondary.js
+9-7Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,10 @@ export default class extends Controller {
4747
drawBorder(btn, canvas) {
4848
let btnMarginX = 22
4949
let btnMarginY = 12
50+
let borderRadius = 8;
5051
let width = btn.offsetWidth
5152
let height = btn.offsetHeight
53+
5254

5355
canvas.width = width
5456
canvas.height = height
@@ -59,13 +61,13 @@ export default class extends Controller {
5961

6062
// Draw border compensating for border thickenss
6163
var ctx = canvas.getContext("2d")
62-
ctx.moveTo(height/2-1, 1)
63-
ctx.lineTo(width-height/2-1, 1)
64-
ctx.arcTo(width-1, 1, width-1, height/2-1, height/2-1)
65-
ctx.arcTo(width-1, height-1, width-height/2-1, height-1, height/2-1)
66-
ctx.lineTo(height/2-1, height-1)
67-
ctx.arcTo(1, height-1, 1, height/2-1, height/2-1)
68-
ctx.arcTo(1, 1, height/2-1, 1, height/2-1)
64+
ctx.moveTo(borderRadius, 1)
65+
ctx.lineTo(width-borderRadius-1, 1)
66+
ctx.arcTo(width-1, 1, width-1, borderRadius-1, borderRadius-1)
67+
ctx.arcTo(width-1, height-1, width-borderRadius-1, height-1, borderRadius-1)
68+
ctx.lineTo(borderRadius-1, height-1)
69+
ctx.arcTo(1, height-1, 1, borderRadius-1, borderRadius-1)
70+
ctx.arcTo(1, 1, borderRadius-1, 1, borderRadius-1)
6971

7072
var gradient = ctx.createLinearGradient(0, canvas.height, canvas.width, 0)
7173
gradient.addColorStop(0, "rgb(217, 64, 255)");

‎pgml-dashboard/static/js/search.js

Copy file name to clipboardExpand all lines: pgml-dashboard/static/js/search.js
+12-10Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,34 +4,36 @@ import {
44

55
export default class extends Controller {
66
static targets = [
7-
'searchInput',
8-
'searchModal',
97
'searchTrigger',
10-
'searchFrame',
118
]
129

1310
connect() {
14-
this.searchModalTarget.addEventListener('shown.bs.modal', this.focusSearchInput)
15-
this.searchModalTarget.addEventListener('hidden.bs.modal', this.updateSearch)
11+
this.target = document.getElementById("search");
12+
this.searchInput = document.getElementById("search-input");
13+
this.searchFrame = document.getElementById("search-results")
14+
15+
this.target.addEventListener('shown.bs.modal', this.focusSearchInput)
16+
this.target.addEventListener('hidden.bs.modal', this.updateSearch)
17+
this.searchInput.addEventListener('input', (e) => this.search(e))
1618
}
1719

1820
search(e) {
1921
const query = e.currentTarget.value
20-
this.searchFrameTarget.src = `/docs/search?query=${query}`
22+
this.searchFrame.src = `/docs/search?query=${query}`
2123
}
2224

2325
focusSearchInput = (e) => {
24-
this.searchInputTarget.focus()
26+
this.searchInput.focus()
2527
this.searchTriggerTarget.blur()
2628
}
2729

2830
updateSearch = () => {
29-
this.searchTriggerTarget.value = this.searchInputTarget.value
31+
this.searchTriggerTarget.value = this.searchInput.value
3032
}
3133

3234
openSearch = (e) => {
33-
new bootstrap.Modal(this.searchModalTarget).show()
34-
this.searchInputTarget.value = e.currentTarget.value
35+
new bootstrap.Modal(this.target).show()
36+
this.searchInput.value = e.currentTarget.value
3537
}
3638

3739
disconnect() {

‎pgml-dashboard/static/js/topnav-styling.js

Copy file name to clipboard
+45Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import {
2+
Controller
3+
} from '@hotwired/stimulus'
4+
5+
export default class extends Controller {
6+
initialize() {
7+
this.pinned_to_top = false;
8+
}
9+
10+
connect() {
11+
this.act_when_scrolled();
12+
this.act_when_expanded();
13+
}
14+
15+
act_when_scrolled() {
16+
// check scroll position in initial render
17+
if( window.scrollY > 48) {
18+
this.pinned_to_top = true;
19+
this.element.classList.add("pinned");
20+
}
21+
22+
addEventListener("scroll", (event) => {
23+
if (window.scrollY > 48 && !this.pinned_to_top) {
24+
this.pinned_to_top = true;
25+
this.element.classList.add("pinned");
26+
}
27+
28+
if (window.scrollY < 48 && this.pinned_to_top) {
29+
this.pinned_to_top = false;
30+
this.element.classList.remove("pinned");
31+
};
32+
})
33+
}
34+
35+
// Applies a class when navbar is expanded, used in mobile view for adding background contrast.
36+
act_when_expanded() {
37+
addEventListener('show.bs.collapse', () => {
38+
this.element.classList.add('navbar-expanded');
39+
})
40+
addEventListener('hidden.bs.collapse', () => {
41+
this.element.classList.remove('navbar-expanded');
42+
})
43+
}
44+
45+
}

‎pgml-dashboard/templates/components/github_icon.html

Copy file name to clipboard
+6Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<a class="d-flex align-items-center nav-link p-0 border-bottom-0" href="https://github.com/postgresml/postgresml">
2+
<span class="badge github-badge"><p>Stars | 3.3K</p></span>
3+
<svg width="35" height="35" viewBox="0 0 40 39" fill="none" xmlns="http://www.w3.org/2000/svg">
4+
<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"/>
5+
</svg>
6+
</a>

‎pgml-dashboard/templates/components/search_modal.html

Copy file name to clipboardExpand all lines: pgml-dashboard/templates/components/search_modal.html
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="modal modal-xl" tabindex="-1" data-search-target="searchModal" id="search">
1+
<div class="modal modal-xl" tabindex="-1" id="search">
22
<div class="modal-dialog">
33
<div class="modal-content">
44
<div class="modal-header">

‎pgml-dashboard/templates/content/article.html

Copy file name to clipboardExpand all lines: pgml-dashboard/templates/content/article.html
+4Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
<% use crate::utils::config::standalone_dashboard; %>
2+
13
<article class="docs col-12 col-xxl-8 col-xl-9 overflow-x-auto py-4 px-xl-5 order-3 order-xxl-2">
24
<%- content %>
35

@@ -6,11 +8,13 @@ <h2 class="h2 mb-3">Have Questions?</h2>
68
<p><a href="https://discord.gg/DmyJP3qJ7U">Join our Discord</a> and ask us anything! We're friendly and would love to talk about PostgresML.</p>
79
</div>
810

11+
<% if !standalone_dashboard() { %>
912
<div class="mt-5 pb-3">
1013
<h2 class="h2 mb-3">Try It Out</h2>
1114
<p>Try PostresML using our <strong>free</strong> serverless cloud. It comes with GPUs, 5 GiB of space and plenty of datasets to get you started.</p>
1215
<div class="d-flex justify-content-center gap-2 pt-3 pb-4">
1316
<a class="btn btn-primary" href="<%- crate::utils::config::signup_url() %>">Get Started</a>
1417
</div>
1518
</div>
19+
<% } %>
1620
</article>

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.