website

commit 496a4e1d1e8185288c04c52da015634a83673f5c
parent 7d5765dae0dea3ad7a23c31adb90abe86ad8edab
Author: Michael Neuper <michael@michaelneuper.com>
Date:   Sun,  5 Nov 2023 09:48:27 +0200

Add search button to searchbox

Diffstat:
M
assets/sass/layouts/common.scss
 | 
24
------------------------
M
assets/sass/layouts/list.scss
 | 
43
+++++++++++++++++++++++++++++++++++++++++++
M
layouts/_default/list.html
 | 
5
+++++
A
static/images/icons/search.svg
 | 
4
++++

4 files changed, 52 insertions(+), 24 deletions(-)
diff --git a/assets/sass/layouts/common.scss b/assets/sass/layouts/common.scss
@@ -180,30 +180,6 @@ main {
   flex-wrap: wrap;
 }
 
-#searchbox {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  margin-top: 0;
-  margin-bottom: $margin;
-
-  #ddgSearch > input {
-    color: var(--text-emphasized);
-    background-color: var(--background-secondary);
-    font-family: "Latin Modern Roman", "Times New Roman", serif;
-    padding-left: 8px;
-    width: 200px;
-    height: 1.5rem;
-    border: $border solid var(--text-secondary);
-    border-radius: $radius;
-
-    &:focus {
-      outline: $border solid var(--text-emphasized);
-    }
-  }
-}
-
 .icon {
   padding-right: 0.1em;
   padding-left: 0.1em;
diff --git a/assets/sass/layouts/list.scss b/assets/sass/layouts/list.scss
@@ -36,3 +36,46 @@
     }
   }
 }
+
+#searchbox {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  margin-top: 0;
+  margin-bottom: $margin;
+
+  #ddgSearch {
+    position: relative;
+    display: inline-block;
+
+    input {
+      color: var(--text-emphasized);
+      background-color: var(--background-secondary);
+      font-family: sans-serif;
+      padding-left: 10px;
+      width: 200px;
+      height: 1.7rem;
+      border: $border solid var(--text-secondary);
+      border-radius: $radius;
+
+      &:focus {
+        outline: 1px solid var(--text-emphasized);
+      }
+    }
+
+    button {
+      position: absolute;
+      aspect-ratio: 1rem;
+      right: 1em;
+      top: 4.9px;
+      background-color: transparent;
+      border: none;
+      cursor: pointer;
+
+      svg {
+        fill: var(--text-emphasized);
+      }
+    }
+  }
+}
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
@@ -16,6 +16,11 @@
         <input type="hidden" name="kae" value="-1" > <!-- default theme -->
         <input type="hidden" name="k1" value="-1" > <!-- no ads -->
         <input type="text" name="q" placeholder="Search…" aria-label="Search michaelneuper.com on DuckDuckGo"/>
+        <button type="submit">
+            <svg aria-hidden="true" height="1rem" viewBox="0 0 16 16" version="1.1" width="1rem" data-view-component="true" class="octicon octicon-search Button-visual">
+            <path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path>
+            </svg>
+          </button>
     </form>
   </div>
   {{ end }}  
diff --git a/static/images/icons/search.svg b/static/images/icons/search.svg
@@ -0,0 +1,3 @@
+<svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="octicon octicon-search Button-visual">
+<path d="M10.68 11.74a6 6 0 0 1-7.922-8.982 6 6 0 0 1 8.982 7.922l3.04 3.04a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215ZM11.5 7a4.499 4.499 0 1 0-8.997 0A4.499 4.499 0 0 0 11.5 7Z"></path>
+</svg>
+\ No newline at end of file