mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-08-14 23:57:27 +00:00
Select box design, design for search box and filters in: trending, feed, subscriptions, search page
This commit is contained in:
Karlis Cudars
parent
6683be1ca8
commit
988fec8ed2
6 changed files with 180 additions and 45 deletions
BIN
public/img/arrow-down.png
Normal file
BIN
public/img/arrow-down.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
12
src/App.vue
12
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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue