Select box design, design for search box and filters in: trending, feed, subscriptions, search page

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>

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: '100%',
+            }"
+        >
+            <div
+                class="uk-position-relative"
+                :style="{
+                    float: isMobile ? 'none' : 'right',
                     width: isMobile ? '100%' : '35ch',
                 }"
             >
-            <div class="uk-position-relative">
                 <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">
+            <span
-                <select id="ddlSortBy" v-model="selectedSort" class="uk-select uk-width-auto" @change="onChange()">
+                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"

src/components/SearchResults.vue

@@ -1,10 +1,49 @@
 <template>
-    <h1 class="uk-text-center">
+    <div class="" style="padding: 34px 0">
-        {{ $route.query.search_query }}
+        <div
-    </h1>
+            class="uk-search"
-
+            :style="{
-    <label for="ddlSearchFilters"
+                width: '100%',
-        ><b>{{ $t("actions.filter") }}: </b></label
+            }"
+        >
+            <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"
@@ -13,13 +52,17 @@
                     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>
-    <hr />
+        </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>

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>

src/components/TrendingPage.vue

@@ -33,13 +33,13 @@
                     class="uk-position-center-left uk-position-small"
                 />
             </div>
-        </div>
             <SearchSuggestions
                 v-show="searchText && suggestionsVisible"
                 ref="searchSuggestions"
                 :search-text="searchText"
                 @searchchange="onSearchTextChange"
             />
+        </div>
 
         <div
             v-if="!isMobile"