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 {
background-color: var(--card-bg-color);
padding: 20px;
padding-bottom: 70px;
.searchFilterInner {
max-width: 800px;
margin-left: auto;
margin-right: auto;
padding: 20px 20px 70px 20px;
max-height: 410px;
overflow-y: auto;
background-color: var(--card-bg-color);
box-shadow: 0 1px 2px rgba(0,0,0,.1);
opacity: 0.9;
}
.center {
@ -22,6 +28,6 @@
@media only screen and (max-width: 600px) {
.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>
<div class="searchFilter">
<h2 class="center">
{{ $t("Search Filters.Search Filters") }}
</h2>
<ft-flex-box class="radioFlexBox">
<ft-radio-button
ref="sortByRadio"
:title="$t('Search Filters.Sort By.Sort By')"
:labels="sortByLabels"
:values="sortByValues"
class="searchRadio"
@change="updateSortBy"
/>
<ft-radio-button
ref="timeRadio"
:title="$t('Search Filters.Time.Time')"
:labels="timeLabels"
:values="timeValues"
class="searchRadio"
@change="updateTime"
/>
<ft-radio-button
ref="typeRadio"
:title="$t('Search Filters.Type.Type')"
:labels="typeLabels"
:values="typeValues"
class="searchRadio"
@change="updateType"
/>
<ft-radio-button
ref="durationRadio"
:title="$t('Search Filters.Duration.Duration')"
:labels="durationLabels"
:values="durationValues"
class="searchRadio"
@change="updateDuration"
/>
</ft-flex-box>
<div>
<div class="searchFilterInner">
<h2 class="center">
{{ $t("Search Filters.Search Filters") }}
</h2>
<ft-flex-box class="radioFlexBox">
<ft-radio-button
ref="sortByRadio"
:title="$t('Search Filters.Sort By.Sort By')"
:labels="sortByLabels"
:values="sortByValues"
class="searchRadio"
@change="updateSortBy"
/>
<ft-radio-button
ref="timeRadio"
:title="$t('Search Filters.Time.Time')"
:labels="timeLabels"
:values="timeValues"
class="searchRadio"
@change="updateTime"
/>
<ft-radio-button
ref="typeRadio"
:title="$t('Search Filters.Type.Type')"
:labels="typeLabels"
:values="typeValues"
class="searchRadio"
@change="updateType"
/>
<ft-radio-button
ref="durationRadio"
:title="$t('Search Filters.Duration.Duration')"
:labels="durationLabels"
:values="durationValues"
class="searchRadio"
@change="updateDuration"
/>
</ft-flex-box>
</div>
</div>
</template>