From 698c4baf3a9833fa35a6143c512a8fe92717da7d Mon Sep 17 00:00:00 2001
From: "Jill \"oatmealine\" Monoids" <oatmealine@disroot.org>
Date: Fri, 19 Aug 2022 11:39:49 +0300
Subject: [PATCH] better searchbar

---
 app/src/App.svelte        |  4 ++--
 app/src/lib/Search.svelte | 50 +++++++++++++++++++++++++++++++++++----
 2 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/app/src/App.svelte b/app/src/App.svelte
index f5e68a8..3ae30aa 100644
--- a/app/src/App.svelte
+++ b/app/src/App.svelte
@@ -17,8 +17,8 @@
   let next;
   let query;
 
-  async function search(event) {
-    query = event.target.value;
+  async function search(q) {
+    query = q;
 
     searchAlbums = [];
     loading = true;
diff --git a/app/src/lib/Search.svelte b/app/src/lib/Search.svelte
index e88d59f..9917160 100644
--- a/app/src/lib/Search.svelte
+++ b/app/src/lib/Search.svelte
@@ -42,21 +42,51 @@
     'leroy - dariacore',
     'voljum - dayscapes'
   ];
+
+  import { Icon } from 'svelte-fontawesome';
+  import { faSearch } from '@fortawesome/free-solid-svg-icons/faSearch';
+
+  let query = '';
+
+  function onSubmit(event) {
+    event.preventDefault();
+    onChange(query);
+  }
 </script>
 
-<input type="search" class="album-search" name="q" on:change={onChange} placeholder={placeholders[Math.floor(Math.random() * placeholders.length)]}>
+<form on:submit={onSubmit}>
+  <input type="search" class="album-search" name="q" placeholder={placeholders[Math.floor(Math.random() * placeholders.length)]} bind:value={query}>
+  <button type="submit">
+    <Icon icon={faSearch}/>
+  </button>
+</form>
 
 <style>
   input {
     margin: 5px;
-    width: 550px;
-    max-width: 94%;
     padding: 15px;
     font-size: x-large;
     border: none;
     border-radius: 7px;
     margin-bottom: 0.2rem;
-    transition: 0.1s border-bottom ease-out, 0.1s background-color ease-in-out;
+    transition: 0.1s border-bottom-width ease-in-out, 0.1s margin-bottom ease-in-out, 0.1s background-color ease-in-out;
+    flex: 1 1 0px;
+    width: unset;
+    min-width: 0;
+  }
+
+  button {
+    font-size: x-large;
+    margin: 5px;
+    width: 2.38em;
+    flex: 0 0 auto;
+  }
+
+  form {
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    max-width: 94%;
   }
 
   input:focus, input:hover {
@@ -74,6 +104,9 @@
     input:focus, input:hover {
       background-color: #fafafa;
     }
+    button {
+      box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
+    }
   }
   @media (prefers-color-scheme: dark) {
     input {
@@ -85,5 +118,14 @@
     input:focus, input:hover {
       background-color: #161626;
     }
+    button {
+      box-shadow: 0px 0px 15px #000;
+    }
+  }
+
+  @media (max-width: 520px) {
+    button {
+      display: none;
+    }
   }
 </style>
\ No newline at end of file