Skip to content
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

Navbar: Handle in a proper way our dropdowns inside documentation navbar #2432

Merged
merged 6 commits into from
Dec 27, 2023
+36 −16
Merged

Navbar: Handle in a proper way our dropdowns inside documentation navbar #2432

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
cf96e9d
.
louismaximepiton Dec 20, 2023
94fb376
fix review
louismaximepiton Dec 26, 2023
d90e3b7
Fix overflow in the navbar
louismaximepiton Dec 26, 2023
33d4c0c
Merge branch 'main' into main-lmp-navbar-fix-mobile-scroll
julien-deramond Dec 26, 2023
3259613
fix
louismaximepiton Dec 27, 2023
a86b6d5
.
julien-deramond Dec 27, 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
19 changes: 19 additions & 0 deletions site/assets/scss/_navbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,8 +51,27 @@
@include media-breakpoint-down(lg) {
border-top: 1px solid #666;
}

.dropdown-toggle {
line-height: 1.5625rem;

@include media-breakpoint-up(md) {
line-height: 1.875rem;
}
}
}
// End mod
}

// Boosted mod
.bd-header {
max-height: 100vh;
overflow: hidden auto;

@include media-breakpoint-up(lg) {
overflow: visible;
}
}
// End mod

// Boosted mod: no `@include color-mode(dark)` since Boosted doesn't yet fully support dark mode
2 changes: 2 additions & 0 deletions site/assets/scss/_search.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,8 @@
--docsearch-searchbox-focus-background: #{$black};
--docsearch-text-color: #{$white};

height: auto;
padding: 0;
margin: 0;
border: 0;

Expand Down
21 changes: 10 additions & 11 deletions site/layouts/partials/docs-navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<header class="sticky-top">
<header class="sticky-top bd-header">
<nav class="navbar navbar-dark navbar-expand bg-dark supra d-none" aria-label="Supra-navigation - New release banner">
<div class="container-xxl d-flex justify-content-center">
<ul class="navbar-nav">
Expand Down Expand Up @@ -42,27 +42,26 @@
</ul>
</div>
<div id="bd-navbar2" class="navbar-collapse collapse bd-navbar border-0">
<ul class="navbar-nav flex-row">
<ul class="navbar-nav flex-row me-lg-3">
<li class="nav-item">
<a class="nav-link nav-icon" href="{{ .Site.Params.repo }}" target="_blank" rel="noopener">
{{ partial "icons/github.svg" }}
<span class="visually-hidden">GitHub</span>
</a>
</li>
<li class="nav-item d-flex align-items-md-center mb-0 me-1 me-md-0 me-lg-2">
<div class="bd-search" id="docsearch" data-bd-docs-version="{{ .Site.Params.docs_version }}"></div>
<li class="nav-item">
<div class="bd-search nav-link nav-icon" id="docsearch" data-bd-docs-version="{{ .Site.Params.docs_version }}"></div>
</li>

{{ partial "docs-versions" . }}
</ul>
<ul class="navbar-nav flex-row">
<li class="nav-item dropdown d-flex">
<a href="#" class="nav-link dropdown-toggle gap-1 mx-lg-2 bg-transparent" id="bd-theme" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme (auto)">
<ul class="navbar-nav flex-row ms-lg-3">
<li class="nav-item dropdown">
<button class="nav-link nav-icon dropdown-toggle" id="bd-theme" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme (auto)">
<svg class="bi theme-icon-active"><use href="#circle-half"></use></svg>
<span class="d-lg-none ms-2" aria-hidden="true" id="bd-theme-text">Toggle theme</span>
<span class="visually-hidden">Toggle theme</span>
</a>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark position-absolute" aria-labelledby="bd-theme-text">
<span class="d-lg-none ms-2" id="bd-theme-text">Toggle theme</span>
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark mb-2" aria-labelledby="bd-theme-text">
<li>
<button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false">
<svg class="bi me-2"><use href="#sun-fill"></use></svg>
Expand Down
10 changes: 5 additions & 5 deletions site/layouts/partials/docs-versions.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@
{{- $versions_link = printf "%s/" $page_slug -}}
{{- end }}

<li class="nav-item dropdown d-flex">
<a href="#" class="nav-link dropdown-toggle gap-1 mx-0 bg-transparent" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Boosted</span><span class="visually-hidden">Boosted&nbsp;</span> v{{ .Site.Params.docs_version }} <span class="visually-hidden">(switch to other versions)</span>
</a>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark position-absolute">
<li class="nav-item dropdown">
<button class="nav-link nav-icon dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" data-bs-display="static">
<span class="d-lg-none" aria-hidden="true">Boosted&nbsp;</span><span class="visually-hidden">Boosted&nbsp;</span>v{{ .Site.Params.docs_version }} <span class="visually-hidden">(switch to other versions)</span>
</button>
<ul class="dropdown-menu dropdown-menu-end dropdown-menu-dark mb-2 mb-lg-0">
<li><h6 class="dropdown-header">v5 releases</h6></li>
<li>
<a class="dropdown-item d-flex align-items-center justify-content-between active" aria-current="true" href="{{ if .IsHome }}/{{ else }}/docs/{{ .Site.Params.docs_version }}/{{ $versions_link }}{{ end }}">
Expand Down