Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-03 05:18:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Opcje filtrów: animacja i poprawki

Browse Source
This commit is contained in:
Spythere
2022-09-08 23:15:54 +02:00
parent a6c0fe86c8
commit 99cdb3442a
3 changed files with 111 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/JournalView/JournalOptions.vue
+59 -55
View File
@@ -7,64 +7,57 @@
FILTRY
</button>
<div class="options_wrapper" v-if="showOptions">
<div class="options_content">
<h1>SORTUJ WG:</h1>
<div class="options_sorters">
<div v-for="opt in translatedSorterOptions">
<button class="sort-option" :data-selected="opt.id == sorterActive.id" @click="onSorterChange(opt)">
{{ opt.value.toUpperCase() }}
<transition name="options-anim">
<div class="options_wrapper" v-if="showOptions">
<div class="options_content">
<h1>SORTUJ WG:</h1>
<div class="options_sorters">
<div v-for="opt in translatedSorterOptions">
<button class="sort-option" :data-selected="opt.id == sorterActive.id" @click="onSorterChange(opt)">
{{ opt.value.toUpperCase() }}
</button>
</div>
</div>
<h1 v-if="filters.length != 0">FILTRUJ WG:</h1>
<div class="options_filters">
<button
v-for="filter in filters"
class="filter-option btn--option"
:class="{ checked: journalFilterActive.id === filter.id }"
:id="filter.id"
@click="onFilterChange(filter)"
>
{{ $t(`options.filter-${filter.id}`) }}
</button>
</div>
</div>
<h1 v-if="filters.length != 0">FILTRUJ WG:</h1>
<div class="options_filters">
<button
v-for="filter in filters"
class="filter-option btn--option"
:class="{ checked: journalFilterActive.id === filter.id }"
:id="filter.id"
@click="onFilterChange(filter)"
>
{{ $t(`options.filter-${filter.id}`) }}
</button>
</div>
<h1>SZUKAJ:</h1>
<div class="content_search">
<div class="search-box" v-for="(_, propName) in searchersValues" :key="propName">
<input
class="search-input"
:type="propName == 'search-date' ? 'date' : 'input'"
@keydown.enter="onSearchConfirm"
:placeholder="$t(`options.${propName}`)"
v-model="searchersValues[propName]"
/>
<button class="search-exit">
<img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear(propName)" />
</button>
<h1>SZUKAJ:</h1>
<div class="content_search">
<div class="search-box" v-for="(_, propName) in searchersValues" :key="propName">
<input
class="search-input"
:type="propName == 'search-date' ? 'date' : 'input'"
@keydown.enter="onSearchConfirm"
:placeholder="$t(`options.${propName}`)"
v-model="searchersValues[propName]"
/>
<button class="search-exit">
<img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear(propName)" />
</button>
</div>
<!-- <label for="">Data</label>
<div class="search-box">
<input class="search-input" placeholder="Data" type="date" v-model="searchDate" />
<button class="search-exit">
<img :src="getIcon('exit')" alt="exit-icon" />
</button>
</div> -->
<action-button class="search-button" @click="onSearchConfirm">
{{ $t('options.search-button') }}
</action-button>
</div>
<!-- <label for="">Data</label>
<div class="search-box">
<input class="search-input" placeholder="Data" type="date" v-model="searchDate" />
<button class="search-exit">
<img :src="getIcon('exit')" alt="exit-icon" />
</button>
</div> -->
<action-button class="search-button" @click="onSearchConfirm">
{{ $t('options.search-button') }}
</action-button>
</div>
</div>
</div>
</transition>
</div>
</template>
@@ -143,6 +136,19 @@ export default defineComponent({
@import '../../styles/search_box.scss';
@import '../../styles/variables.scss';
.options-anim {
&-enter-from,
&-leave-to {
opacity: 0;
transform: translateY(10px);
}
&-enter-active,
&-leave-active {
transition: all 150ms ease;
}
}
.bg {
position: fixed;
top: 0;
@@ -155,8 +161,6 @@ export default defineComponent({
.journal-options {
position: relative;
margin-bottom: 0.5em;
}
.options_wrapper {
src/components/TrainsView/TrainOptions.vue
+52 -47
View File
@@ -7,59 +7,51 @@
FILTRY
</button>
<div class="options_wrapper" v-if="showOptions">
<div class="options_content">
<h1>{{ $t('options.sort-title') }}</h1>
<div class="options_sorters">
<div v-for="opt in translatedSorterOptions">
<button class="sort-option" :data-selected="opt.id == sorterActive.id" @click="onSorterChange(opt)">
{{ opt.value.toUpperCase() }}
</button>
<transition name="options-anim">
<div class="options_wrapper" v-if="showOptions">
<div class="options_content">
<h1>{{ $t('options.sort-title') }}</h1>
<div class="options_sorters">
<div v-for="opt in translatedSorterOptions">
<button class="sort-option" :data-selected="opt.id == sorterActive.id" @click="onSorterChange(opt)">
{{ opt.value.toUpperCase() }}
</button>
</div>
</div>
</div>
<h1 v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
<div class="options_filters">
<div class="filter-option" v-for="filter in trainFilterList">
<button class="btn--option" :data-disabled="!filter.isActive" @click="onFilterChange(filter)">
{{ $t(`options.filter-${filter.id}`) }}
</button>
<h1 v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
<div class="options_filters">
<div class="filter-option" v-for="filter in trainFilterList">
<button class="btn--option" :data-disabled="!filter.isActive" @click="onFilterChange(filter)">
{{ $t(`options.filter-${filter.id}`) }}
</button>
</div>
</div>
</div>
<div class="options_filters">
<div class="filter-option">
<button @click="clearAllFilters">WYŁĄCZ WSZYSTKIE FILTRY</button>
<div class="options_filters">
<div class="filter-option">
<button @click="clearAllFilters">WYŁĄCZ WSZYSTKIE FILTRY</button>
</div>
<div class="filter-option">
<button @click="resetAllFilters">ZRESETUJ FILTRY</button>
</div>
</div>
<div class="filter-option">
<button @click="resetAllFilters">ZRESETUJ FILTRY</button>
</div>
</div>
<h1>{{ $t('options.search-title') }}</h1>
<div class="content_search">
<div class="search-box">
<input class="search-input" :placeholder="$t(`options.search-train`)" v-model="searchedTrain" />
<button class="search-exit">
<img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear('train')" />
</button>
</div>
<div class="search-box">
<input class="search-input" :placeholder="$t(`options.search-driver`)" v-model="searchedDriver" />
<button class="search-exit">
<img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear('driver')" />
</button>
<h1>{{ $t('options.search-title') }}</h1>
<div class="content_search">
<div class="search-box">
<input class="search-input" :placeholder="$t(`options.search-train`)" v-model="searchedTrain" />
<button class="search-exit">
<img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear('train')" />
</button>
</div>
<div class="search-box">
<input class="search-input" :placeholder="$t(`options.search-driver`)" v-model="searchedDriver" />
<button class="search-exit">
<img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear('driver')" />
</button>
</div>
</div>
</div>
</div>
</div>
</transition>
</div>
</template>
@@ -145,6 +137,19 @@ export default defineComponent({
@import '../../styles/search_box.scss';
@import '../../styles/variables.scss';
.options-anim {
&-enter-from,
&-leave-to {
opacity: 0;
transform: translateY(10px);
}
&-enter-active,
&-leave-active {
transition: all 150ms ease;
}
}
.bg {
position: fixed;
top: 0;
src/components/TrainsView/TrainTable.vue
-2
View File
@@ -139,8 +139,6 @@ img.train-image {
&-list {
overflow: auto;
margin-top: 1em;
@include smallScreen() {
width: 100%;
}