tesses50
/
freetube
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Top-Nav: Improve search filter's appearance (#1360) 

* Update search filter style to have little transparency & smaller size
This commit is contained in:
PikachuEXE 2021-06-15 22:53:06 +08:00 committed by GitHub
parent 9acafc7292
commit 6d2b1f3632
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 51 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/renderer/components/ft-search-filters/ft-search-filters.css
View File

@ -1,10 +1,16 @@
.searchFilter { .searchFilterInner {
background-color: var(--card-bg-color); max-width: 800px;
padding: 20px; margin-left: auto;
padding-bottom: 70px; margin-right: auto;
padding: 20px 20px 70px 20px;
max-height: 410px; max-height: 410px;
overflow-y: auto; overflow-y: auto;
background-color: var(--card-bg-color);
box-shadow: 0 1px 2px rgba(0,0,0,.1); box-shadow: 0 1px 2px rgba(0,0,0,.1);
opacity: 0.9;
} }
.center { .center {
@ -22,6 +28,6 @@
@media only screen and (max-width: 600px) { @media only screen and (max-width: 600px) {
.searchRadio { .searchRadio {
border-right: 0px; border-right: 0;
} }
} }

78
src/renderer/components/ft-search-filters/ft-search-filters.vue
View File

@ -1,42 +1,44 @@
<template> <template>
<div class="searchFilter"> <div>
<h2 class="center"> <div class="searchFilterInner">
{{ $t("Search Filters.Search Filters") }} <h2 class="center">
</h2> {{ $t("Search Filters.Search Filters") }}
<ft-flex-box class="radioFlexBox"> </h2>
<ft-radio-button <ft-flex-box class="radioFlexBox">
ref="sortByRadio" <ft-radio-button
:title="$t('Search Filters.Sort By.Sort By')" ref="sortByRadio"
:labels="sortByLabels" :title="$t('Search Filters.Sort By.Sort By')"
:values="sortByValues" :labels="sortByLabels"
class="searchRadio" :values="sortByValues"
@change="updateSortBy" class="searchRadio"
/> @change="updateSortBy"
<ft-radio-button />
ref="timeRadio" <ft-radio-button
:title="$t('Search Filters.Time.Time')" ref="timeRadio"
:labels="timeLabels" :title="$t('Search Filters.Time.Time')"
:values="timeValues" :labels="timeLabels"
class="searchRadio" :values="timeValues"
@change="updateTime" class="searchRadio"
/> @change="updateTime"
<ft-radio-button />
ref="typeRadio" <ft-radio-button
:title="$t('Search Filters.Type.Type')" ref="typeRadio"
:labels="typeLabels" :title="$t('Search Filters.Type.Type')"
:values="typeValues" :labels="typeLabels"
class="searchRadio" :values="typeValues"
@change="updateType" class="searchRadio"
/> @change="updateType"
<ft-radio-button />
ref="durationRadio" <ft-radio-button
:title="$t('Search Filters.Duration.Duration')" ref="durationRadio"
:labels="durationLabels" :title="$t('Search Filters.Duration.Duration')"
:values="durationValues" :labels="durationLabels"
class="searchRadio" :values="durationValues"
@change="updateDuration" class="searchRadio"
/> @change="updateDuration"
</ft-flex-box> />
</ft-flex-box>
</div>
</div> </div>
</template> </template>