css changes for mobile

2 files changed, 16 insertions, 9 deletions

diff --git a/frontend/start.ts b/frontend/start.ts
index 3b4ca1e..838fd7c 100644
--- a/frontend/start.ts
+++ b/frontend/start.ts
@@ -26,7 +26,7 @@ export function section_engine_select() {
     const listing = e("ul", {})
     bangs.then(bangs => {
         for (const key in bangs) if (bangs[key]!.pinned) {
-            listing.prepend(e("li", { class: "pinned", onclick: () => select(key) }, bangs[key]!.name ?? key))
+            listing.append(e("li", { class: "pinned", onclick: () => select(key) }, bangs[key]!.name ?? key))
         }
     })
 
@@ -43,17 +43,16 @@ export function section_engine_select() {
     const submit = e("button", {}, "Select")
     submit.addEventListener("click", () => select(input.value))
 
-    const inputLi = e("li", {id: "select-engine-li"},
-        e("label", {}, "Select other engine by bang:"),
+    const manualInput = e("div", {id: "engine-select-manual"},
+        e("label", {}, "Search engines:"),
         input,
         submit,
         searchResults
     )
 
-    listing.append(inputLi)
-
     return e("section", { class: "engine-select" },
         e("h2", {}, "Select a search engine"),
+        manualInput,
         listing
     )
 }
diff --git a/frontend/style.sass b/frontend/style.sass
index 31827b2..e8606d5 100644
--- a/frontend/style.sass
+++ b/frontend/style.sass
@@ -34,12 +34,13 @@ section.submit
     margin: 5em
 
 section.engine-select
-    margin: 10em
+    margin: 10%
     ul
         list-style: none
         display: flex
         flex-direction: row
         flex-wrap: wrap
+        padding: 0
     li
         background-color: black
         border-radius: 0.5em
@@ -51,12 +52,18 @@ section.engine-select
             transition: background-color 0.1s ease-out
             &:hover
                 background-color: $ac-dark
-        &#select-engine-li
-            position: relative
+
+    div#engine-select-manual
+        position: relative
+        display: block
+        left: 1em
+        label
+            display: block
+
         ul.dropdown
             position: absolute
             display: none
-            left: 1em
+            margin: 0
             padding: 0
             background-color: $dark
             background-color: black
@@ -95,6 +102,7 @@ input, button
 
 input
     width: 25em
+    max-width: 40vw
     border: 0.15em solid $light
     background-color: rgba(0, 0, 0, 0.3)
     outline: none