Move search input to top

phpDocumentor · Oct 26, 2020 · 001ab56 · 001ab56
1 parent a8a497e
commit 001ab56
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 22 deletions.
diff --git a/data/templates/default/components/header.html.twig b/data/templates/default/components/header.html.twig
@@ -4,5 +4,6 @@
     <label class="phpdocumentor-header__menu-icon" for="menu-button">
         <i class="fas fa-bars"></i>
     </label>
+    {{ include('components/search.html.twig') }}
     {% include 'components/topnav.html.twig' %}
 </header>
diff --git a/data/templates/default/components/search.css.twig b/data/templates/default/components/search.css.twig
@@ -3,17 +3,19 @@
     display: none; /** disable by default for non-js flow */
     opacity: .3; /** white-out default for loading indication */
     transition: opacity .3s, background .3s;
+    margin-left: auto;
 }
-.phpdocumentor-search:before {
-    content: '';
-    background: transparent;
-    left: calc(-1 * var(--spacing-md));
-    height: 100%;
-    position: absolute;
-    right: -15px;
-    z-index: -1;
-    opacity: 0;
-    transition: opacity .3s, background .3s;
+
+.phpdocumentor-search label {
+    display: flex;
+    align-items: center;
+}
+
+.phpdocumentor-search__icon {
+    color: var(--primary-color);
+    margin-right: var(--spacing-sm);
+    width: 1rem;
+    height: 1rem;
 }
 
 .phpdocumentor-search--enabled {
@@ -23,11 +25,16 @@
 .phpdocumentor-search--active {
     opacity: 1;
 }
-.phpdocumentor-search--has-results:before {
-    background: var(--popover-background-color);
-    opacity: 1;
-}
 
 .phpdocumentor-search input:disabled {
     background-color: lightgray;
 }
+
+.phpdocumentor-search__field:focus,
+.phpdocumentor-search__field {
+    margin-bottom: 0;
+    border: 0;
+    border-bottom: 2px solid var(--primary-color);
+    padding: 0;
+    border-radius: 0;
+}
diff --git a/data/templates/default/components/search.html.twig b/data/templates/default/components/search.html.twig
@@ -1,7 +1,10 @@
 <section data-search-form class="phpdocumentor-search">
-    <h2 class="phpdocumentor-sidebar__category-header">Search</h2>
-    <label class="phpdocumentor-label">
+    <label>
         <span class="visually-hidden">Search for</span>
+        <svg class="phpdocumentor-search__icon" width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="7.5" cy="7.5" r="6.5" stroke="currentColor" stroke-width="2"/>
+            <line x1="12.4892" y1="12.2727" x2="19.1559" y2="18.9393" stroke="currentColor" stroke-width="3"/>
+        </svg>
         <input type="search" class="phpdocumentor-field phpdocumentor-search__field" placeholder="Loading .." disabled />
     </label>
 </section>
diff --git a/data/templates/default/components/sidebar.html.twig b/data/templates/default/components/sidebar.html.twig
@@ -1,6 +1,4 @@
 <aside class="phpdocumentor-column -four phpdocumentor-sidebar">
-    {{ include('components/search.html.twig') }}
-
     {% if menu() %}
     <section class="phpdocumentor-sidebar__category">
         <h2 class="phpdocumentor-sidebar__category-header">Documentation</h2>

diff --git a/data/templates/default/components/topnav.css.twig b/data/templates/default/components/topnav.css.twig
@@ -1,6 +1,5 @@
 .phpdocumentor-topnav {
     display: flex;
-    flex: 1;
     align-items: center;
     margin: 0;
     max-height: 0;
@@ -50,7 +49,6 @@
 
 @media (min-width: {{ breakpoints['md'] }}) {
     .phpdocumentor-topnav {
-        margin-left: 4%;
         max-height: none;
         overflow: visible;
         flex-basis: auto;

diff --git a/data/templates/default/search.js.twig b/data/templates/default/search.js.twig
@@ -73,6 +73,8 @@ var Search = (function () {
 
         form.classList.toggle('phpdocumentor-search--has-results', false);
         searchResults.classList.add('phpdocumentor-search-results--hidden');
+        var searchField = document.querySelector('[data-search-form] input[type="search"]');
+        searchField.blur();
     }
 
     function search(event) {
@@ -117,15 +119,18 @@ var Search = (function () {
         fuse = new Fuse(index, options);
 
         var form = document.querySelector('[data-search-form]');
-        var searchField = document.querySelector('[data-search-form] input[type="search"');
+        var searchField = document.querySelector('[data-search-form] input[type="search"]');
 
         form.classList.add('phpdocumentor-search--active');
 
-        searchField.setAttribute('placeholder', 'Search for ..');
+        searchField.setAttribute('placeholder', 'Search (Press "/" to focus)');
         searchField.removeAttribute('disabled');
         searchField.addEventListener('keyup', debounce(search, 300));
 
         window.addEventListener('keyup', function (event) {
+            if (event.key === '/') {
+                searchField.focus();
+            }
             if (event.code === 'Escape') {
                 close();
             }