From 988fec8ed2884b82631619c69e4869a25ff5b120 Mon Sep 17 00:00:00 2001
From: Karlis Cudars <karlis.cudars1996@gmail.com>
Date: Sun, 24 Oct 2021 01:27:11 +0300
Subject: [PATCH] Select box design, design for search box and filters in:
 trending, feed, subscriptions, search page

---
 public/img/arrow-down.png            | Bin 0 -> 3652 bytes
 src/App.vue                          |  12 +++
 src/components/FeedPage.vue          |  44 ++++++++---
 src/components/SearchResults.vue     | 110 ++++++++++++++++++++++-----
 src/components/SubscriptionsPage.vue |  47 ++++++++++--
 src/components/TrendingPage.vue      |  12 +--
 6 files changed, 180 insertions(+), 45 deletions(-)
 create mode 100644 public/img/arrow-down.png

diff --git a/public/img/arrow-down.png b/public/img/arrow-down.png
new file mode 100644
index 0000000000000000000000000000000000000000..b389fbfe63807963166921ac070508e000a3e3e6
GIT binary patch
literal 3652
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

literal 0
HcmV?d00001

diff --git a/src/App.vue b/src/App.vue
index de167463..4f170f2e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -129,4 +129,16 @@ b {
 main {
     background-color: #1d2438;
 }
+
+.uk-select {
+    background-color: #30354b !important;
+    -webkit-border-radius: 20px !important;
+    -moz-border-radius: 20px !important;
+    border-radius: 20px !important;
+    height: auto !important;
+    padding: 12px 50px 12px 30px !important;
+    background-image: url("/img/arrow-down.png") !important;
+    background-size: 30px !important;
+    background-position: calc(100% - 15px) 11px !important;
+}
 </style>
diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue
index e090cc55..bcb5f903 100644
--- a/src/components/FeedPage.vue
+++ b/src/components/FeedPage.vue
@@ -1,19 +1,25 @@
 <template>
     <h1
         v-if="isMobile"
-        v-t="'titles.trending'"
+        v-t="'titles.feed'"
         style="margin-bottom: 0; padding-top: 34px; font-weight: bold;"
         class="uk-heading-small"
     />
 
-    <div class="uk-flex uk-flex-middle uk-flex-between uk-flex-row-reverse" style="padding: 34px 0">
+    <div class="" style="padding: 34px 0">
         <div
             class="uk-search"
             :style="{
-                width: isMobile ? '100%' : '35ch',
+                width: '100%',
             }"
         >
-            <div class="uk-position-relative">
+            <div
+                class="uk-position-relative"
+                :style="{
+                    float: isMobile ? 'none' : 'right',
+                    width: isMobile ? '100%' : '35ch',
+                }"
+            >
                 <input
                     class="uk-search-input"
                     style="border-radius: 9999px; padding: 12px 18px 12px 40px;"
@@ -32,9 +38,29 @@
                     style="position: absolute; x: 0px; y: 0px;"
                     class="uk-position-center-left uk-position-small"
                 />
+                <SearchSuggestions
+                    v-show="searchText && suggestionsVisible"
+                    ref="searchSuggestions"
+                    :search-text="searchText"
+                    @searchchange="onSearchTextChange"
+                />
             </div>
-            <span class="uk-align-right@m">
-                <select id="ddlSortBy" v-model="selectedSort" class="uk-select uk-width-auto" @change="onChange()">
+            <span
+                class="uk-align-right@m"
+                :style="{
+                    float: isMobile ? 'none' : 'right',
+                    marginRight: isMobile ? '0px' : '20px',
+                }"
+            >
+                <select
+                    id="ddlSortBy"
+                    v-model="selectedSort"
+                    class="uk-select uk-width-auto"
+                    @change="onChange()"
+                    :style="{
+                        width: isMobile ? '100%' : 'auto',
+                    }"
+                >
                     <option v-t="'actions.most_recent'" value="descending" />
                     <option v-t="'actions.least_recent'" value="ascending" />
                     <option v-t="'actions.channel_name_asc'" value="channel_ascending" />
@@ -42,12 +68,6 @@
                 </select>
             </span>
         </div>
-        <SearchSuggestions
-            v-show="searchText && suggestionsVisible"
-            ref="searchSuggestions"
-            :search-text="searchText"
-            @searchchange="onSearchTextChange"
-        />
 
         <div
             v-if="!isMobile"
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 41281fa4..49a8e92f 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -1,25 +1,68 @@
 <template>
-    <h1 class="uk-text-center">
-        {{ $route.query.search_query }}
-    </h1>
-
-    <label for="ddlSearchFilters"
-        ><b>{{ $t("actions.filter") }}: </b></label
-    >
-    <select
-        id="ddlSearchFilters"
-        v-model="selectedFilter"
-        default="all"
-        class="uk-select uk-width-auto"
-        style="height: 100%"
-        @change="updateResults()"
-    >
-        <option v-for="filter in availableFilters" :key="filter" :value="filter">
-            {{ filter.replace("_", " ") }}
-        </option>
-    </select>
-
-    <hr />
+    <div class="" style="padding: 34px 0">
+        <div
+            class="uk-search"
+            :style="{
+                width: '100%',
+            }"
+        >
+            <div
+                class="uk-position-relative"
+                :style="{
+                    float: isMobile ? 'none' : 'right',
+                    width: isMobile ? '100%' : '35ch',
+                }"
+            >
+                <input
+                    class="uk-search-input"
+                    style="border-radius: 9999px; padding: 12px 18px 12px 40px;"
+                    :style="{ backgroundColor: secondaryBackgroundColor }"
+                    v-model="searchText"
+                    type="text"
+                    role="search"
+                    :title="$t('actions.search')"
+                    :placeholder="$t('actions.search')"
+                    @keyup="onKeyUp"
+                    @focus="onInputFocus"
+                    @blur="onInputBlur"
+                />
+                <font-awesome-icon
+                    icon="search"
+                    style="position: absolute; x: 0px; y: 0px;"
+                    class="uk-position-center-left uk-position-small"
+                />
+                <SearchSuggestions
+                    v-show="searchText && suggestionsVisible"
+                    ref="searchSuggestions"
+                    :search-text="searchText"
+                    @searchchange="onSearchTextChange"
+                />
+            </div>
+            <span
+                class="uk-align-right@m"
+                :style="{
+                    float: isMobile ? 'none' : 'right',
+                    marginRight: isMobile ? '0px' : '20px',
+                }"
+            >
+                <select
+                    id="ddlSearchFilters"
+                    v-model="selectedFilter"
+                    default="all"
+                    class="uk-select uk-width-auto"
+                    style="height: 100%"
+                    @change="updateResults()"
+                    :style="{
+                        width: isMobile ? '100%' : 'auto',
+                    }"
+                >
+                    <option v-for="filter in availableFilters" :key="filter" :value="filter">
+                        {{ filter.replace("_", " ") }}
+                    </option>
+                </select>
+            </span>
+        </div>
+    </div>
 
     <div v-if="results && results.corrected" style="height: 7vh">
         {{ $t("search.did_you_mean") }}
@@ -73,9 +116,11 @@
 
 <script>
 import VideoItem from "@/components/VideoItem.vue";
+import SearchSuggestions from "@/components/SearchSuggestions";
 
 export default {
     components: {
+        SearchSuggestions,
         VideoItem,
     },
     data() {
@@ -92,6 +137,7 @@ export default {
                 "music_playlists",
             ],
             selectedFilter: "all",
+            searchText: this.$route.query.search_query,
         };
     },
     mounted() {
@@ -136,6 +182,28 @@ export default {
         shouldUseVideoItem(item) {
             return item.title;
         },
+        onKeyUp(e) {
+            if (e.key === "Enter") {
+                e.target.blur();
+                this.$router.push({
+                    name: "SearchResults",
+                    query: { search_query: this.searchText },
+                });
+                return;
+            } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+                e.preventDefault();
+            }
+            this.$refs.searchSuggestions.onKeyUp(e);
+        },
+        onInputFocus() {
+            this.suggestionsVisible = true;
+        },
+        onInputBlur() {
+            this.suggestionsVisible = false;
+        },
+        onSearchTextChange(searchText) {
+            this.searchText = searchText;
+        },
     },
 };
 </script>
diff --git a/src/components/SubscriptionsPage.vue b/src/components/SubscriptionsPage.vue
index fc2215c0..b4361be8 100644
--- a/src/components/SubscriptionsPage.vue
+++ b/src/components/SubscriptionsPage.vue
@@ -1,8 +1,15 @@
 <template>
+    <h1
+        v-if="isMobile"
+        v-t="'titles.subscriptions'"
+        style="margin-bottom: 0; padding-top: 34px; font-weight: bold;"
+        class="uk-heading-small"
+    />
     <div class="uk-flex uk-flex-middle uk-flex-between uk-flex-row-reverse" style="padding: 34px 0">
         <div
             class="uk-search"
             :style="{
+                float: isMobile ? 'none' : 'right',
                 width: isMobile ? '100%' : '35ch',
             }"
         >
@@ -25,6 +32,12 @@
                     style="position: absolute; x: 0px; y: 0px;"
                     class="uk-position-center-left uk-position-small"
                 />
+                <SearchSuggestions
+                    v-show="searchText && suggestionsVisible"
+                    ref="searchSuggestions"
+                    :search-text="searchText"
+                    @searchchange="onSearchTextChange"
+                />
             </div>
             <div style="text-align: center">
                 <button
@@ -49,12 +62,6 @@
                 </button>
             </div>
         </div>
-        <SearchSuggestions
-            v-show="searchText && suggestionsVisible"
-            ref="searchSuggestions"
-            :search-text="searchText"
-            @searchchange="onSearchTextChange"
-        />
 
         <div
             v-if="!isMobile"
@@ -105,11 +112,17 @@
 </template>
 
 <script>
+import SearchSuggestions from "@/components/SearchSuggestions";
+
 export default {
+    components: {
+        SearchSuggestions,
+    },
     data() {
         return {
             subscriptions: [],
             loading: true,
+            searchText: "",
         };
     },
     mounted() {
@@ -180,6 +193,28 @@ export default {
             elem.click();
             elem.remove();
         },
+        onKeyUp(e) {
+            if (e.key === "Enter") {
+                e.target.blur();
+                this.$router.push({
+                    name: "SearchResults",
+                    query: { search_query: this.searchText },
+                });
+                return;
+            } else if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+                e.preventDefault();
+            }
+            this.$refs.searchSuggestions.onKeyUp(e);
+        },
+        onInputFocus() {
+            this.suggestionsVisible = true;
+        },
+        onInputBlur() {
+            this.suggestionsVisible = false;
+        },
+        onSearchTextChange(searchText) {
+            this.searchText = searchText;
+        },
     },
 };
 </script>
diff --git a/src/components/TrendingPage.vue b/src/components/TrendingPage.vue
index 724a75d0..5a1a64d7 100644
--- a/src/components/TrendingPage.vue
+++ b/src/components/TrendingPage.vue
@@ -33,13 +33,13 @@
                     class="uk-position-center-left uk-position-small"
                 />
             </div>
+            <SearchSuggestions
+                v-show="searchText && suggestionsVisible"
+                ref="searchSuggestions"
+                :search-text="searchText"
+                @searchchange="onSearchTextChange"
+            />
         </div>
-        <SearchSuggestions
-            v-show="searchText && suggestionsVisible"
-            ref="searchSuggestions"
-            :search-text="searchText"
-            @searchchange="onSearchTextChange"
-        />
 
         <div
             v-if="!isMobile"