Merge pull request #3 from UCLH-Foundry/frontend-improvements

Frontend improvements
SAFEHR-data · Dec 6, 2023 · 393b3aa · 393b3aa
2 parents caa3be5 + 5308563
commit 393b3aa
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/_includes/navbar.html b/_includes/navbar.html
@@ -28,7 +28,14 @@
         <form id="search-form" class="d-flex" action="{{site.baseurl}}/search.html" method="get">
           <input class="form-control me-2" type="search" id="search-box" name="query" placeholder="Search" aria-label="Search">
         </form>
-        <button id="search-btn" type="button" class="btn border mr-5" _="on click toggle .active on me then toggle .visible on #search-form then toggle .expanded on #search-box">
+        <button 
+          id="search-btn" 
+          type="button" 
+          class="btn border mr-5" 
+          _="on click toggle .active on me 
+             then toggle .visible on #search-form 
+             then toggle .expanded on #search-box 
+             then focus() on #search-box">
           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-search" viewBox="0 0 16 16">
             <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"></path>
           </svg>

diff --git a/_sass/main.scss b/_sass/main.scss
@@ -22,6 +22,9 @@ a {
 #search-btn {
 	transition: background-color 1s;
 	z-index: 2;
+	svg {
+		margin-top: -0.25rem;
+	}
 }
 
 #search-btn:hover {