Skip to content

Commit 7e4b51f

Browse files
chillenbergerchillenberger
authored
Dan top nav sticky (#743)
1 parent d0ad185 commit 7e4b51f

File tree

17 files changed

+242
-107
lines changed

17 files changed

+242
-107
lines changed

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

Lines 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

Lines 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

Lines 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

Lines 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

Lines 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

Lines 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

Lines 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

Lines 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

Lines 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

Lines 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+
}

0 commit comments

Comments
 (0)