From 9016032d48e458d50a830489365d39878c65cd23 Mon Sep 17 00:00:00 2001
From: Maurice Oegerli <maurice@oeger.li>
Date: Thu, 1 Apr 2021 00:09:39 +0200
Subject: [PATCH] Add non-interactive suggestions

---
 src/App.vue                          | 74 ++-------------------
 src/components/Navigation.vue        | 99 ++++++++++++++++++++++++++++
 src/components/SearchSuggestions.vue | 31 ++++++++-
 3 files changed, 132 insertions(+), 72 deletions(-)
 create mode 100644 src/components/Navigation.vue

diff --git a/src/App.vue b/src/App.vue
index 73f6c072..0fca9e1d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,53 +3,7 @@
         class="uk-container uk-container-expand uk-light uk-height-viewport"
         style="background: #0b0e0f"
     >
-        <nav
-            class="uk-navbar-container uk-container-expand uk-light"
-            style="background: #0b0e0f"
-            uk-navbar
-        >
-            <div class="uk-navbar-left">
-                <router-link class="uk-navbar-item uk-logo uk-text-bold" to="/"
-                    ><img
-                        src="../public/img/icons/logo.svg"
-                        height="32"
-                        width="32"
-                    />iped</router-link
-                >
-            </div>
-            <div class="uk-navbar-center uk-flex uk-visible@s">
-                <input
-                    class="uk-input"
-                    type="text"
-                    placeholder="Search"
-                    v-model="searchText"
-                    @keypress="onChange($event)"
-                />
-            </div>
-            <div class="uk-navbar-right">
-                <ul class="uk-navbar-nav">
-                    <li>
-                        <router-link to="/preferences">Preferences</router-link>
-                    </li>
-                    <li>
-                        <router-link to="/login">Login</router-link>
-                    </li>
-                    <li>
-                        <router-link to="/feed">Feed</router-link>
-                    </li>
-                </ul>
-            </div>
-        </nav>
-        <div class="uk-container-expand uk-hidden@s">
-            <input
-                class="uk-input"
-                type="text"
-                placeholder="Search"
-                v-model="searchText"
-                @keypress="onChange($event)"
-            />
-        </div>
-
+        <Navigation />
         <router-view />
 
         <div style="text-align: center">
@@ -70,30 +24,10 @@
 </template>
 
 <script>
-import Constants from "@/Constants.js";
+import Navigation from "@/components/Navigation";
 export default {
-    data() {
-        return {
-            searchText: "",
-            searchSuggestions: []
-        };
-    },
-    methods: {
-        onChange(e) {
-            if (e.key === "Enter") {
-                this.$router.push({
-                    name: "SearchResults",
-                    query: { search_query: this.searchText }
-                });
-                return;
-            }
-
-            this.fetchJson(
-                Constants.BASE_URL +
-                    "/suggestions?query=" +
-                    encodeURI(this.searchText + e.key)
-            );
-        }
+    components: {
+        Navigation
     }
 };
 </script>
diff --git a/src/components/Navigation.vue b/src/components/Navigation.vue
new file mode 100644
index 00000000..e9d2399f
--- /dev/null
+++ b/src/components/Navigation.vue
@@ -0,0 +1,99 @@
+<template
+    ><nav
+        class="uk-navbar-container uk-container-expand uk-position-relative uk-light"
+        style="background: #0b0e0f"
+        uk-navbar
+    >
+        <div class="uk-navbar-left">
+            <router-link class="uk-navbar-item uk-logo uk-text-bold" to="/"
+                ><img
+                    src="/img/icons/logo.svg"
+                    height="32"
+                    width="32"
+                />iped</router-link
+            >
+        </div>
+        <div class="uk-navbar-center uk-flex uk-visible@m">
+            <input
+                class="uk-input"
+                type="text"
+                placeholder="Search"
+                v-model="searchText"
+                @keypress="onChange($event)"
+                @focus="onInputFocus"
+                @blur="onInputBlur"
+            />
+        </div>
+        <div class="uk-navbar-right">
+            <ul class="uk-navbar-nav">
+                <li>
+                    <router-link to="/preferences">Preferences</router-link>
+                </li>
+                <li>
+                    <router-link to="/login">Login</router-link>
+                </li>
+                <li>
+                    <router-link to="/feed">Feed</router-link>
+                </li>
+            </ul>
+        </div>
+    </nav>
+    <div class="uk-container-expand uk-hidden@m">
+        <input
+            class="uk-input"
+            type="text"
+            placeholder="Search"
+            v-model="searchText"
+            @keypress="onChange($event)"
+            @focus="onInputFocus"
+            @blur="onInputBlur"
+        />
+    </div>
+    <SearchSuggestions
+        v-if="searchText && suggestionsVisible && searchSuggestions.length > 0"
+        :searchSuggestions="searchSuggestions"
+    />
+</template>
+
+<script>
+import SearchSuggestions from "@/components/SearchSuggestions";
+import Constants from "@/Constants.js";
+
+export default {
+    components: {
+        SearchSuggestions
+    },
+    data() {
+        return {
+            searchText: "",
+            searchSuggestions: [],
+            suggestionsVisible: false
+        };
+    },
+    methods: {
+        async onChange(e) {
+            if (e.key === "Enter") {
+                this.$router.push({
+                    name: "SearchResults",
+                    query: { search_query: this.searchText }
+                });
+                return;
+            }
+
+            this.searchSuggestions = await this.fetchJson(
+                Constants.BASE_URL +
+                    "/suggestions?query=" +
+                    encodeURI(this.searchText + e.key)
+            );
+        },
+        onInputFocus() {
+            this.suggestionsVisible = true;
+        },
+        onInputBlur() {
+            this.suggestionsVisible = false;
+        }
+    }
+};
+</script>
+
+<style></style>
diff --git a/src/components/SearchSuggestions.vue b/src/components/SearchSuggestions.vue
index 64e58aa4..652965ee 100644
--- a/src/components/SearchSuggestions.vue
+++ b/src/components/SearchSuggestions.vue
@@ -1,5 +1,13 @@
 <template>
-    <div class="uk-container-expand"></div>
+    <div
+        class="uk-position-absolute uk-panel uk-box-shadow-large uk-padding-small suggestions-container"
+    >
+        <ul class="uk-list uk-margin-remove uk-text-secondary">
+            <li v-for="(suggestion, i) in searchSuggestions" :key="i">
+                {{ suggestion }}
+            </li>
+        </ul>
+    </div>
 </template>
 
 <script>
@@ -10,4 +18,23 @@ export default {
 };
 </script>
 
-<style></style>
+<style>
+.suggestions-container {
+    background-color: #242727;
+    left: 50%;
+    transform: translateX(-50%);
+    max-width: 640px;
+    width: 100%;
+    box-sizing: border-box;
+}
+@media screen and (max-width: 959px) {
+    .suggestions-container {
+        max-width: calc(100% - 60px);
+    }
+}
+@media screen and (max-width: 639px) {
+    .suggestions-container {
+        max-width: calc(100% - 30px);
+    }
+}
+</style>