small html/css fixes/simplifications

3 files changed, 19 insertions, 31 deletions

diff --git a/frontend/search.ts b/frontend/search.ts
index 374cccf..1d28f58 100644
--- a/frontend/search.ts
+++ b/frontend/search.ts
@@ -19,18 +19,15 @@ export function section_search(engine: string) {
         }
     })
 
-    const heading = document.createElement("h1")
-    heading.textContent = engine
+    const heading = e("h1", {}, engine)
     bangs.then(bangs => heading.textContent = bangs[engine]?.name ?? engine)
 
-    const input = document.createElement("input")
-    input.type = "input"
+    const input = e("input", {type: "text"})
     input.addEventListener("keydown", ev => {
         if (ev.code == "Enter") process_query(engine, input.value ?? "")
     })
 
-    const submit = document.createElement("button")
-    submit.textContent = "Search"
+    const submit = e("button", {}, "Search")
     submit.addEventListener("click", () => {
         process_query(engine, input.value ?? "")
     })
@@ -49,11 +46,11 @@ function link_engine(engine: string) {
         // <link /> is already present, we need reload because browser wont notice otherwise
         window.location.reload()
     }
-    const link = document.createElement("link")
-    link.rel = "search"
-    link.id = "search-link"
-    link.type = "application/opensearchdescription+xml"
-    link.href = `/search.xml?default=${encodeURIComponent(engine)}`
-    link.title = `Fastbangs (default engine: ${engine})`
+    const link = e("link", {
+        rel: "search",
+        id: "search-link",
+        type: "application/opensearchdescription+xml",
+        href: `/search.xml?default=${encodeURIComponent(engine)}`,
+        title: `Fastbangs (default engine: ${engine})`})
     document.head.append(link)
-}
\ No newline at end of file
+}
diff --git a/frontend/start.ts b/frontend/start.ts
index 5e006de..c7d50d2 100644
--- a/frontend/start.ts
+++ b/frontend/start.ts
@@ -7,43 +7,35 @@ export function section_info_start() {
         e("h1", {}, "Fastbangs"),
         e("p", {}, `
             This application provides a way to (mostly) locally handle search bangs. To use it:
-		`),
-		e("ul", {},
-			e("li", {}, "Select a fallback search engine, used when a search doesn't contain a bang"),
-			e("li", {}, "Add this search engine to your browser, or bookmark this page"),
+        `),
+        e("ul", {},
+            e("li", {}, "Select a fallback search engine, used when a search doesn't contain a bang"),
+            e("li", {}, "Add this search engine to your browser, or bookmark this page"),
         ),
-        e("a", { href: "#~submit" }, "Propose or change a bang"),
+        e("span", {}, "Can't find a search engine? "), e("a", { href: "#~submit" }, "Propose or change a bang."),
     )
 }
 
 export function section_engine_select() {
-    const section = document.createElement("section")
-    section.classList.add("engine-select")
-
     const select = async (e: string) => {
         const engine = e.toLowerCase();
         if (!(await bangs)[engine]) return status("error", `Engine ${JSON.stringify(e)} does not exist.`)
         window.location.hash = `#${e}`
     }
 
-    const heading = document.createElement("h2")
-    heading.textContent = "Select a search engine"
-
-    const listing = document.createElement("ul")
+    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))
         }
     })
 
-    const input = document.createElement("input")
-    input.type = "input"
+    const input = e("input", {type: "text"})
     input.addEventListener("keydown", ev => {
         if (ev.code == "Enter") select(input.value)
     })
 
-    const submit = document.createElement("button")
-    submit.textContent = "Select"
+    const submit = e("button", {}, "Select")
     submit.addEventListener("click", () => select(input.value))
 
     listing.append(e("li", {},
@@ -52,7 +44,6 @@ export function section_engine_select() {
         submit
     ))
 
-    section.append(heading, listing)
     return e("section", { class: "engine-select" },
         e("h2", {}, "Select a search engine"),
         listing
diff --git a/frontend/style.sass b/frontend/style.sass
index b804f37..ca3921b 100644
--- a/frontend/style.sass
+++ b/frontend/style.sass
@@ -7,7 +7,7 @@ body
     background-color: $dark
     margin: 0px
 
-p, h1, h2, h3, h4, h5, h6, input, button, label, li
+p, h1, h2, h3, h4, h5, h6, input, button, label, li, span
     color: white
 
 h1