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

Jump to bottom

Move DocSearch out of offcanvas to always show it on mobile #36824

Merged
merged 2 commits into from Jul 27, 2022
Merged

Move DocSearch out of offcanvas to always show it on mobile #36824

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2861898
Move DocSearch out of offcanvas to always show it on mobile
mdo Jul 23, 2022
d007cb3
Cleanup comments, fix spacing
mdo Jul 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 6 additions & 0 deletions site/assets/scss/_navbar.scss
View file
Open in desktop
Expand Up @@ -4,6 +4,12 @@
background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15);

.bd-navbar-toggle {
@include media-breakpoint-down(lg) {
mdo marked this conversation as resolved.
Show resolved Hide resolved
width: 4.25rem;
}
}

.navbar-toggler {
padding: 0;
margin-right: -.5rem;
Expand Down
21 changes: 20 additions & 1 deletion site/assets/scss/_search.scss
View file
Open in desktop
Expand Up @@ -2,7 +2,6 @@

.bd-search {
position: relative;
width: 100%;

@include media-breakpoint-up(lg) {
position: absolute;
Expand Down Expand Up @@ -57,6 +56,26 @@
opacity: 1;
}
}

@include media-breakpoint-down(lg) {
&,
&:hover,
&:focus {
background: transparent;
border: 0;
box-shadow: none;
}
&:focus {
box-shadow: var(--docsearch-searchbox-shadow);
}
}
}

.DocSearch-Button-Keys,
.DocSearch-Button-Placeholder {
@include media-breakpoint-down(lg) {
display: none;
}
}

.DocSearch-Button-Keys {
Expand Down
22 changes: 12 additions & 10 deletions site/layouts/partials/docs-navbar.html
View file
Open in desktop
@@ -1,21 +1,29 @@
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
{{- if eq .Layout "docs" }}
<div class="bd-navbar-toggle">
<button class="navbar-toggler p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdSidebar" aria-controls="bdSidebar" aria-label="Toggle docs navigation">
{{ partial "icons/hamburger.svg" (dict "class" "bi" "width" "24" "height" "24") }}
<span class="d-none fs-6 pe-1">Browse</span>
</button>
</div>
{{- else }}
mdo marked this conversation as resolved.
Show resolved Hide resolved
<div class="d-lg-none" style="width: 2.25rem;"></div>
<div class="d-lg-none" style="width: 1.5rem;"></div>
{{- end }}

<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
{{ partial "icons/bootstrap-white-fill.svg" (dict "class" "d-block my-1" "width" "40" "height" "32") }}
</a>

<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<div class="d-flex">
{{ if eq .Layout "docs" }}
<div class="bd-search" id="docsearch" data-bd-docs-version="{{ .Site.Params.docs_version }}"></div>
{{ end }}

<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-label="Toggle navigation">
<svg class="bi" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
</div>

<div class="offcanvas-lg offcanvas-end flex-grow-1" tabindex="-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel" data-bs-scroll="true">
<div class="offcanvas-header px-4 pb-0">
Expand Down Expand Up @@ -45,12 +53,6 @@ <h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5

<hr class="d-lg-none text-white-50">

{{ if eq .Layout "docs" }}
<div class="bd-search" id="docsearch" data-bd-docs-version="{{ .Site.Params.docs_version }}"></div>

<hr class="d-lg-none text-white-50">
{{ end }}

<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="{{ .Site.Params.github_org }}" target="_blank" rel="noopener">
Expand Down