Poprawki filtrów

This commit is contained in:
2022-06-10 01:42:31 +02:00
parent 756ac0b8d9
commit 3e4a4b538f
2 changed files with 40 additions and 24 deletions
+35 -22
View File
@@ -1,17 +1,20 @@
<template> <template>
<section class="info-header"> <section class="info-header">
<div class="scenery-name"> <div class="scenery-name">
<div v-if="station.generalInfo?.project" style="color: salmon; font-size: 0.6em; line-height: 0.7em;"> <a v-if="station.generalInfo?.url" :href="station.generalInfo.url" target="_blank" rel="noopener noreferrer">
{{ station.generalInfo.project }} {{ station.name }}
</div> <sup v-if="station.generalInfo?.project" style="color: salmon; font-size: 0.5em; vertical-align: text-top">
{{ station.generalInfo.project }}
<a v-if="station.generalInfo?.url" :href="station.generalInfo.url" target="_blank" rel="noopener noreferrer">{{ </sup>
station.name </a>
}}</a>
<span v-else>{{ station.name }}</span> <span v-else>{{ station.name }}</span>
</div> </div>
<div class="scenery-hash" v-if="station.onlineInfo?.hash">#{{ station.onlineInfo.hash }}</div>
<div class="scenery-authors" v-if="station.generalInfo?.authors">
Autorzy: {{ station.generalInfo?.authors?.join(', ') }}
</div>
<!-- <div class="scenery-hash" v-if="station.onlineInfo?.hash">#{{ station.onlineInfo.hash }}</div> -->
</section> </section>
</template> </template>
@@ -36,25 +39,35 @@ export default defineComponent({
.info-header { .info-header {
padding-top: 2em; padding-top: 2em;
}
& > .scenery-name { .scenery-name {
font-weight: bold; font-weight: bold;
color: $accentCol; color: $accentCol;
font-size: 3.5em; position: relative;
text-transform: uppercase; font-size: 3.5em;
margin-top: 0.25em;
@include smallScreen() { text-transform: uppercase;
font-size: 2.75em;
}
}
& > .scenery-hash { @include smallScreen() {
line-height: 0.8em; font-size: 2.75em;
color: #aaa;
font-size: 1.5em;
} }
} }
.scenery-hash {
color: #aaa;
font-size: 0.3em;
position: absolute;
top: 0;
}
.scenery-authors {
color: #999;
}
</style> </style>
@@ -56,7 +56,7 @@
</section> </section>
<section class="card_authors-search"> <section class="card_authors-search">
<input type="text" :placeholder="$t('filters.authors-search')" name="authors" @input="handleAuthorsInput" /> <input type="text" :placeholder="$t('filters.authors-search')" name="authors" v-model="authorsInputValue" @input="handleAuthorsInput" />
</section> </section>
<section class="card_sliders"> <section class="card_sliders">
@@ -125,6 +125,7 @@ export default defineComponent({
saveOptions: false, saveOptions: false,
STORAGE_KEY: 'options_saved', STORAGE_KEY: 'options_saved',
authorsInputValue: '',
minimumHours: 0, minimumHours: 0,
currentRegion: { id: '', value: '' }, currentRegion: { id: '', value: '' },
@@ -174,7 +175,7 @@ export default defineComponent({
}, },
handleAuthorsInput(e: Event) { handleAuthorsInput(e: Event) {
if ((e.target as HTMLInputElement).value.length < 3) return; // if ((e.target as HTMLInputElement).value.length < 3) return;
clearTimeout(this.delayInputTimer); clearTimeout(this.delayInputTimer);
@@ -244,6 +245,8 @@ export default defineComponent({
StorageManager.setNumericValue(slider.name, slider.value); StorageManager.setNumericValue(slider.name, slider.value);
}); });
this.authorsInputValue = '';
this.minimumHours = 0; this.minimumHours = 0;
this.changeNumericFilterValue('onlineFromHours', this.minimumHours, true); this.changeNumericFilterValue('onlineFromHours', this.minimumHours, true);