Responsive search bar

Signed-off-by: Conor MacBride <[email protected]>

Author: ConorMacBride

pytest_mpl/summary/templates/navbar.html

@@ -1,37 +1,11 @@
-<nav class="navbar navbar-expand-lg navbar-light bg-light">
+<nav class="navbar navbar-expand-sm navbar-light bg-light">
     <div class="container-fluid">
-        <a class="navbar-brand" href="https://github.com/matplotlib/pytest-mpl">matplotlib / pytest-mpl</a>
-        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
-                aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-            <span class="navbar-toggler-icon"></span>
-        </button>
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
-            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-                <!--<li class="nav-item">
-                    <a class="nav-link active" aria-current="page" href="#">Home</a>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link" href="#">Link</a>
-                </li>
-                <li class="nav-item dropdown">
-                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
-                       data-bs-toggle="dropdown" aria-expanded="false">
-                        Dropdown
-                    </a>
-                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-                        <li><a class="dropdown-item" href="#">Action</a></li>
-                        <li><a class="dropdown-item" href="#">Another action</a></li>
-                        <li>
-                            <hr class="dropdown-divider">
-                        </li>
-                        <li><a class="dropdown-item" href="#">Something else here</a></li>
-                    </ul>
-                </li>
-                <li class="nav-item">
-                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
-                </li>-->
-            </ul>
-            <form class="d-flex">
+        <a class="navbar-brand" href="https://github.com/matplotlib/pytest-mpl">
+            <span class="org">matplotlib</span>&nbsp;/&nbsp;<span class="repo">pytest-mpl</span>
+        </a>
+        <div class="d-flex nav-filtertools">
+            <div class="spacer"></div>
+            <form class="me-2 nav-searchbar">
                 <input class="form-control me-2 search" type="search" placeholder="Search" aria-label="Search">
             </form>
             <button class="btn btn-outline-primary" aria-label="Filter" type="button" data-bs-toggle="offcanvas"

pytest_mpl/summary/templates/styles.css

@@ -1,6 +1,27 @@
 body.no-hash-test .mpl-hash {
     display: none;
 }
+.navbar-brand span.repo {
+    font-weight: bold;
+}
+.nav-filtertools {
+    width: 100%;
+}
+.nav-filtertools div.spacer {
+    flex: 1;
+    display: none;
+}
+.nav-filtertools .nav-searchbar {
+    flex: 10;
+}
+@media (min-width: 576px) {
+    .nav-filtertools div.spacer {
+        display: block;
+    }
+    .nav-filtertools .nav-searchbar {
+        max-width: 400px;
+    }
+}
 .image-missing .mpl-image .card-body {
     display: none;
 }