Spythere/stacjownik
1
0
Fork 0
mirror of https://github.com/Spythere/stacjownik.git synced 2026-05-03 21:38:13 +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 FILTRY
</button> </button>
<div class="options_wrapper" v-if="showOptions"> <transition name="options-anim">
<div class="options_content"> <div class="options_wrapper" v-if="showOptions">
<h1>SORTUJ WG:</h1> <div class="options_content">
<h1>SORTUJ WG:</h1>
<div class="options_sorters"> <div class="options_sorters">
<div v-for="opt in translatedSorterOptions"> <div v-for="opt in translatedSorterOptions">
<button class="sort-option" :data-selected="opt.id == sorterActive.id" @click="onSorterChange(opt)"> <button class="sort-option" :data-selected="opt.id == sorterActive.id" @click="onSorterChange(opt)">
{{ opt.value.toUpperCase() }} {{ 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> </button>
</div> </div>
</div> <h1>SZUKAJ:</h1>
<div class="content_search">
<h1 v-if="filters.length != 0">FILTRUJ WG:</h1> <div class="search-box" v-for="(_, propName) in searchersValues" :key="propName">
<input
<div class="options_filters"> class="search-input"
<button :type="propName == 'search-date' ? 'date' : 'input'"
v-for="filter in filters" @keydown.enter="onSearchConfirm"
class="filter-option btn--option" :placeholder="$t(`options.${propName}`)"
:class="{ checked: journalFilterActive.id === filter.id }" v-model="searchersValues[propName]"
:id="filter.id" />
@click="onFilterChange(filter)" <button class="search-exit">
> <img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear(propName)" />
{{ $t(`options.filter-${filter.id}`) }} </button>
</button> </div>
</div> <!-- <label for="">Data</label>
<div class="search-box">
<h1>SZUKAJ:</h1> <input class="search-input" placeholder="Data" type="date" v-model="searchDate" />
<button class="search-exit">
<div class="content_search"> <img :src="getIcon('exit')" alt="exit-icon" />
<div class="search-box" v-for="(_, propName) in searchersValues" :key="propName"> </button>
<input </div> -->
class="search-input" <action-button class="search-button" @click="onSearchConfirm">
:type="propName == 'search-date' ? 'date' : 'input'" {{ $t('options.search-button') }}
@keydown.enter="onSearchConfirm" </action-button>
:placeholder="$t(`options.${propName}`)"
v-model="searchersValues[propName]"
/>
<button class="search-exit">
<img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear(propName)" />
</button>
</div> </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> </div>
</div> </transition>
</div> </div>
</template> </template>
@@ -143,6 +136,19 @@ export default defineComponent({
@import '../../styles/search_box.scss'; @import '../../styles/search_box.scss';
@import '../../styles/variables.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 { .bg {
position: fixed; position: fixed;
top: 0; top: 0;
@@ -155,8 +161,6 @@ export default defineComponent({
.journal-options { .journal-options {
position: relative; position: relative;
margin-bottom: 0.5em;
} }
.options_wrapper { .options_wrapper {
src/components/TrainsView/TrainOptions.vue
+52 -47
View File
@@ -7,59 +7,51 @@
FILTRY FILTRY
</button> </button>
<div class="options_wrapper" v-if="showOptions"> <transition name="options-anim">
<div class="options_content"> <div class="options_wrapper" v-if="showOptions">
<h1>{{ $t('options.sort-title') }}</h1> <div class="options_content">
<h1>{{ $t('options.sort-title') }}</h1>
<div class="options_sorters"> <div class="options_sorters">
<div v-for="opt in translatedSorterOptions"> <div v-for="opt in translatedSorterOptions">
<button class="sort-option" :data-selected="opt.id == sorterActive.id" @click="onSorterChange(opt)"> <button class="sort-option" :data-selected="opt.id == sorterActive.id" @click="onSorterChange(opt)">
{{ opt.value.toUpperCase() }} {{ opt.value.toUpperCase() }}
</button> </button>
</div>
</div> </div>
</div> <h1 v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
<div class="options_filters">
<h1 v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1> <div class="filter-option" v-for="filter in trainFilterList">
<button class="btn--option" :data-disabled="!filter.isActive" @click="onFilterChange(filter)">
<div class="options_filters"> {{ $t(`options.filter-${filter.id}`) }}
<div class="filter-option" v-for="filter in trainFilterList"> </button>
<button class="btn--option" :data-disabled="!filter.isActive" @click="onFilterChange(filter)"> </div>
{{ $t(`options.filter-${filter.id}`) }}
</button>
</div> </div>
</div> <div class="options_filters">
<div class="filter-option">
<div class="options_filters"> <button @click="clearAllFilters">WYŁĄCZ WSZYSTKIE FILTRY</button>
<div class="filter-option"> </div>
<button @click="clearAllFilters">WYŁĄCZ WSZYSTKIE FILTRY</button> <div class="filter-option">
<button @click="resetAllFilters">ZRESETUJ FILTRY</button>
</div>
</div> </div>
<h1>{{ $t('options.search-title') }}</h1>
<div class="filter-option"> <div class="content_search">
<button @click="resetAllFilters">ZRESETUJ FILTRY</button> <div class="search-box">
</div> <input class="search-input" :placeholder="$t(`options.search-train`)" v-model="searchedTrain" />
</div> <button class="search-exit">
<img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear('train')" />
<h1>{{ $t('options.search-title') }}</h1> </button>
</div>
<div class="content_search"> <div class="search-box">
<div class="search-box"> <input class="search-input" :placeholder="$t(`options.search-driver`)" v-model="searchedDriver" />
<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('driver')" />
<button class="search-exit"> </button>
<img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear('train')" /> </div>
</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> </div>
</div> </transition>
</div> </div>
</template> </template>
@@ -145,6 +137,19 @@ export default defineComponent({
@import '../../styles/search_box.scss'; @import '../../styles/search_box.scss';
@import '../../styles/variables.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 { .bg {
position: fixed; position: fixed;
top: 0; top: 0;
src/components/TrainsView/TrainTable.vue
-2
View File
@@ -139,8 +139,6 @@ img.train-image {
&-list { &-list {
overflow: auto; overflow: auto;
margin-top: 1em;
@include smallScreen() { @include smallScreen() {
width: 100%; width: 100%;
} }