Movatterモバイル変換

[0]ホーム
URL:

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

 Sign up
Appearance settings

Commitf7dfa89

Browse files
Dan top nav sticky (#743)
1 parent31ead6b commitf7dfa89

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 {
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:5pxsolidtransparent;
33+
border-bottom:5pxsolidtransparent;
34+
35+
border-left:5pxsolid#{$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:10px14px;
112-
min-width:10rem;
113-
color:#{$hp-white};
114110
background-color:transparent;
115-
border-radius:var(--bs-border-radius-pill);
116-
border:2pxsolid#{$gray-600};
117-
118-
&:hover {
119-
cursor:text;
120-
border:2pxsolid#{$gray-400};
121-
}
122-
123-
@includemedia-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:1pxsolidrgba(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-
@includemedia-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+
@includemedia-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:1pxsolidtransparent;
31+
32+
&:active {
33+
border-bottom:1pxsolid#{$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+
@includemedia-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
@includemedia-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:00.65pxwhite,00.65pxwhite;//change font weight without element resizing
86-
}
84+
&:hover {
85+
text-shadow:00.65px#{$purple},00.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
letbtnMarginX=22
4949
letbtnMarginY=12
50+
letborderRadius=8;
5051
letwidth=btn.offsetWidth
5152
letheight=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
varctx=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
vargradient=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
exportdefaultclassextendsController{
66
statictargets=[
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
constquery=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-
newbootstrap.Modal(this.searchModalTarget).show()
34-
this.searchInputTarget.value=e.currentTarget.value
35+
newbootstrap.Modal(this.target).show()
36+
this.searchInput.value=e.currentTarget.value
3537
}
3638

3739
disconnect(){
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+
exportdefaultclassextendsController{
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)
[8]ページ先頭
©2009-2025 Movatter.jp