Revamp subnav mobile layout so everything's on one line

twbs · Sep 16, 2020 · faffc82 · faffc82
1 parent 88a8a68
commit faffc82
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 12 deletions.
diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss
@@ -25,10 +25,6 @@
 }
 
 .bd-search {
-  @include media-breakpoint-down(md) {
-    width: 100%;
-  }
-
   .form-control:focus {
     border-color: $bd-purple-bright;
     box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);

diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html
@@ -2,7 +2,7 @@
   {{- $url := split .Permalink "/" -}}
   {{- $page_slug := index $url (sub (len $url) 2) -}}
 
-  <ul class="list-unstyled mb-0 pt-1 pb-3">
+  <ul class="list-unstyled mb-0 py-3 pt-md-1">
   {{- range $group := .Site.Data.sidebar -}}
     {{- $link := $group.title -}}
     {{- $link_slug := $link | urlize -}}

diff --git a/site/layouts/partials/docs-subnav.html b/site/layouts/partials/docs-subnav.html
@@ -1,12 +1,12 @@
-<nav class="bd-subnavbar pt-2 pb-3 pb-md-2" aria-label="Secondary navigation">
-  <div class="container-xxl d-flex align-items-md-center flex-wrap">
-    <form class="bd-search position-relative mb-2 mb-md-0 mr-auto">
+<nav class="bd-subnavbar py-2" aria-label="Secondary navigation">
+  <div class="container-xxl d-flex align-items-md-center">
+    <form class="bd-search position-relative mr-auto">
       <input type="search" class="form-control" id="search-input" placeholder="Search docs..." aria-label="Search docs for..." autocomplete="off" data-docs-version="{{ .Site.Params.docs_version }}">
     </form>
 
     {{ partial "docs-versions" . }}
 
-    <button class="btn bd-search-docs-toggle d-md-none p-0 ml-3 order-3 ml-auto" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
+    <button class="btn bd-search-docs-toggle d-md-none p-0 ml-3 order-3" type="button" data-toggle="collapse" data-target="#bd-docs-nav" aria-controls="bd-docs-nav" aria-expanded="false" aria-label="Toggle docs navigation">
      {{ partial "icons/list.svg" (dict "class" "bi" "width" "" "height" "2rem") }}
    </button>
   </div>

diff --git a/site/layouts/partials/docs-versions.html b/site/layouts/partials/docs-versions.html
@@ -1,8 +1,8 @@
-<div class="dropdown">
+<div class="dropdown ml-3">
   <button class="btn btn-bd-light dropdown-toggle" id="bd-versions" data-toggle="dropdown" aria-expanded="false" data-display="static">
-    Bootstrap v{{ .Site.Params.docs_version }}
+    <span class="d-none d-lg-inline">Bootstrap</span> v{{ .Site.Params.docs_version }}
   </button>
-  <ul class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
+  <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="bd-versions">
     <li><a class="dropdown-item current" aria-current="true" href="/docs/{{ .Site.Params.docs_version }}/">Latest (5.0.x)</a></li>
     <li><hr class="dropdown-divider"></li>
     <li><a class="dropdown-item" href="https://getbootstrap.com/docs/4.5/">v4.5.0</a></li>