Skip to content

Commit abbba6c

Browse files
titusfortnertitusfortner
authored
Fix Mobile View (SeleniumHQ#1534)
[deploy site]
1 parent 98ebae3 commit abbba6c

File tree

2 files changed

+226
-14
lines changed

2 files changed

+226
-14
lines changed

‎website_and_docs/assets/scss/_nav.scss

+212
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
//
2+
// Main navbar
3+
//
4+
5+
.td-navbar-cover {
6+
@include media-breakpoint-up(md) {
7+
background: transparent !important;
8+
9+
.nav-link {
10+
text-shadow: 1px 1px 2px $dark;
11+
}
12+
}
13+
14+
&.navbar-bg-onscroll .nav-link {
15+
text-shadow: none;
16+
}
17+
}
18+
19+
.navbar-bg-onscroll {
20+
background: $primary !important;
21+
opacity: inherit;
22+
}
23+
24+
.td-navbar {
25+
@extend .navbar;
26+
27+
background: $primary;
28+
min-height: 4rem;
29+
margin: 0;
30+
z-index: 32;
31+
32+
.navbar-brand {
33+
text-transform: none;
34+
35+
&__name {
36+
font-weight: $font-weight-bold;
37+
}
38+
39+
svg {
40+
display: inline-block;
41+
margin: 0 10px;
42+
height: 30px;
43+
}
44+
}
45+
46+
.navbar-nav {
47+
padding-top: $spacer * 0.5;
48+
white-space: nowrap;
49+
}
50+
51+
.nav-link {
52+
text-transform: none;
53+
font-weight: $font-weight-bold;
54+
}
55+
56+
// For .td-search__input styling, see _search.scss
57+
58+
.dropdown {
59+
min-width: 100px;
60+
}
61+
62+
@include media-breakpoint-up(md) {
63+
position: fixed;
64+
top: 0;
65+
width: 100%;
66+
67+
.nav-item {
68+
padding-inline-end: $spacer * 0.5;
69+
}
70+
71+
.navbar-nav {
72+
padding-top: 0 !important;
73+
}
74+
}
75+
76+
@include media-breakpoint-down(lg) {
77+
.td-navbar-nav-scroll {
78+
max-width: 100%;
79+
height: 2.5rem;
80+
overflow: hidden;
81+
font-size: 0.9rem;
82+
}
83+
84+
.navbar-brand {
85+
margin-right: 0;
86+
}
87+
88+
.navbar-nav {
89+
padding-bottom: 2rem;
90+
overflow-x: auto;
91+
}
92+
}
93+
}
94+
95+
// Icons
96+
#main_navbar {
97+
li i {
98+
padding-right: 0.5em;
99+
100+
&:before {
101+
display: inline-block;
102+
text-align: center;
103+
min-width: 1em;
104+
}
105+
}
106+
.alert {
107+
background-color: inherit;
108+
padding: 0;
109+
color: $secondary;
110+
border: 0;
111+
font-weight: inherit;
112+
113+
&:before {
114+
display: inline-block;
115+
font-style: normal;
116+
font-variant: normal;
117+
text-rendering: auto;
118+
-webkit-font-smoothing: antialiased;
119+
font-family: $font-awesome-font-name;
120+
font-weight: 900;
121+
content: "\f0d9";
122+
padding-left: 0.5em;
123+
padding-right: 0.5em;
124+
}
125+
}
126+
}
127+
128+
// Foldable sidebar menu
129+
nav.foldable-nav {
130+
&#td-section-nav {
131+
position: relative;
132+
}
133+
134+
&#td-section-nav label {
135+
margin-bottom: 0;
136+
width: 100%;
137+
}
138+
139+
.td-sidebar-nav__section,
140+
.with-child ul {
141+
list-style: none;
142+
padding: 0;
143+
margin: 0;
144+
}
145+
146+
.ul-1 > li {
147+
padding-left: 1.5em;
148+
}
149+
150+
ul.foldable {
151+
display: none;
152+
}
153+
154+
input:checked ~ ul.foldable {
155+
display: block;
156+
}
157+
158+
input[type="checkbox"] {
159+
display: none;
160+
}
161+
162+
.with-child,
163+
.without-child {
164+
position: relative;
165+
padding-left: 1.5em;
166+
}
167+
168+
.ul-1 .with-child > label:before {
169+
display: inline-block;
170+
font-style: normal;
171+
font-variant: normal;
172+
text-rendering: auto;
173+
-webkit-font-smoothing: antialiased;
174+
font-family: $font-awesome-font-name;
175+
font-weight: 900;
176+
content: "\f0da";
177+
position: absolute;
178+
left: 0.1em;
179+
padding-left: 0.4em;
180+
padding-right: 0.4em;
181+
font-size: 1em;
182+
color: $gray-900;
183+
transition: all 0.5s;
184+
&:hover {
185+
transform: rotate(90deg);
186+
}
187+
}
188+
189+
.ul-1 .with-child > input:checked ~ label:before {
190+
color: $primary;
191+
transform: rotate(90deg);
192+
transition: transform 0.5s;
193+
}
194+
195+
.with-child ul {
196+
margin-top: 0.1em;
197+
}
198+
}
199+
200+
@media (hover: hover) and (pointer: fine) {
201+
nav.foldable-nav {
202+
.ul-1 .with-child > label:hover:before {
203+
color: $primary;
204+
transition: color 0.3s;
205+
}
206+
207+
.ul-1 .with-child > input:checked ~ label:hover:before {
208+
color: $primary;
209+
transition: color 0.3s;
210+
}
211+
}
212+
}

‎website_and_docs/layouts/partials/navbar.html

+14-14
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,15 @@
1010
<ul class="navbar-nav mr-4 mb-2 mb-lg-0 ps-4 ps-lg-2">
1111
{{ $p := . }}
1212
{{ range .Site.Menus.main }}
13-
<li class="nav-item mr-4 mb-2 mb-lg-0">
14-
{{ $active := or ($p.IsMenuCurrent "main" .) ($p.HasMenuCurrent "main" .) }}
15-
{{ with .Page }}
16-
{{ $active = or $active ( $.IsDescendant .) }}
17-
{{ end }}
18-
{{ $pre := .Pre }}
19-
{{ $post := .Post }}
20-
{{ $url := urls.Parse .URL }}
21-
{{ $baseurl := urls.Parse $.Site.Params.Baseurl }}
22-
{{ if .HasChildren }}
13+
{{ $active := or ($p.IsMenuCurrent "main" .) ($p.HasMenuCurrent "main" .) }}
14+
{{ with .Page }}
15+
{{ $active = or $active ( $.IsDescendant .) }}
16+
{{ end }}
17+
{{ $pre := .Pre }}
18+
{{ $post := .Post }}
19+
{{ $url := urls.Parse .URL }}
20+
{{ $baseurl := urls.Parse $.Site.Params.Baseurl }}
21+
{{ if .HasChildren }}
2322
<li class="nav-item dropdown">
2423
<a class="nav-link {{if $active }} active{{end}} dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
2524
{{ .Name }}
@@ -31,10 +30,11 @@
3130
{{ end }}
3231
</div>
3332
</li>
34-
{{ else }}
35-
<a class="nav-link{{if $active }} active{{end}}" href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}" {{ if ne $url.Host $baseurl.Host }}target="_blank" {{ end }}>{{ with .Pre}}{{ $pre }}{{ end }}<span{{if $active }} class="active"{{end}}>{{ .Name }}</span>{{ with .Post}}{{ $post }}{{ end }}</a>
36-
{{ end }}
37-
</li>
33+
{{ else }}
34+
<li class="nav-item mr-4 mb-2 mb-lg-0">
35+
<a class="nav-link{{if $active }} active{{end}}" href="{{ with .Page }}{{ .RelPermalink }}{{ else }}{{ .URL | relLangURL }}{{ end }}" {{ if ne $url.Host $baseurl.Host }}target="_blank" {{ end }}>{{ with .Pre}}{{ $pre }}{{ end }}<span{{if $active }} class="active"{{end}}>{{ .Name }}</span>{{ with .Post}}{{ $post }}{{ end }}</a>
36+
</li>
37+
{{ end }}
3838
{{ end }}
3939
{{ if .Site.Params.versions }}
4040
<li class="nav-item dropdown d-none d-lg-block">

0 commit comments

Comments
 (0)