mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 13:28:11 +00:00
Responsywność i ułożenie opcji filtrów
This commit is contained in:
@@ -125,7 +125,7 @@ li.sticky {
|
||||
}
|
||||
|
||||
.journal_day {
|
||||
margin: 1em 0;
|
||||
margin-bottom: 1em;
|
||||
padding: 0.5em;
|
||||
font-weight: bold;
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="journal-options">
|
||||
<div class="filters-options">
|
||||
<div class="bg" v-if="showOptions" @click="showOptions = false"></div>
|
||||
|
||||
<button class="btn--image" @click="showOptions = !showOptions">
|
||||
@@ -10,7 +10,7 @@
|
||||
<transition name="options-anim">
|
||||
<div class="options_wrapper" v-if="showOptions">
|
||||
<div class="options_content">
|
||||
<h1>{{ $t('options.sort-title') }}</h1>
|
||||
<h1 class="option-title">{{ $t('options.sort-title') }}</h1>
|
||||
|
||||
<div class="options_sorters">
|
||||
<div v-for="opt in translatedSorterOptions">
|
||||
@@ -20,7 +20,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 v-if="filters.length != 0">{{ $t('options.filter-title') }}</h1>
|
||||
<h1 class="option-title" v-if="filters.length != 0">{{ $t('options.filter-title') }}</h1>
|
||||
<div class="options_filters">
|
||||
<button
|
||||
v-for="filter in filters"
|
||||
@@ -33,7 +33,7 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h1>{{ $t('options.search-title') }}</h1>
|
||||
<h1 class="option-title">{{ $t('options.search-title') }}</h1>
|
||||
<div class="search_content">
|
||||
<div class="search" v-for="(_, propName) in searchersValues" :key="propName">
|
||||
<label v-if="propName == 'search-date'" for="date">{{ $t('options.search-date') }}</label>
|
||||
@@ -167,160 +167,5 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../styles/responsive.scss';
|
||||
@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;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.journal-options {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.options_wrapper {
|
||||
position: absolute;
|
||||
|
||||
background-color: #111111ee;
|
||||
box-shadow: 0 0 10px 2px #111;
|
||||
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
|
||||
padding: 1em;
|
||||
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
h1 {
|
||||
position: relative;
|
||||
font-size: 1.1em;
|
||||
margin: 0.7em 0 0.25em 0;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
|
||||
width: 50%;
|
||||
height: 2px;
|
||||
background-color: white;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.options_sorters {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
padding: 0.25em 0.25em 0 0;
|
||||
}
|
||||
|
||||
.options_filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0.5em 0 0 0;
|
||||
}
|
||||
|
||||
.sort-option,
|
||||
.filter-option {
|
||||
margin: 0 0.25em 0 0;
|
||||
}
|
||||
|
||||
.sort-option[data-selected='true'] {
|
||||
color: $accentCol;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.filter-option {
|
||||
&#abandoned {
|
||||
color: salmon;
|
||||
}
|
||||
|
||||
&#fulfilled {
|
||||
color: lightgreen;
|
||||
}
|
||||
|
||||
&#active {
|
||||
color: lightblue;
|
||||
}
|
||||
}
|
||||
|
||||
.search_content > .search {
|
||||
margin: 0.5em auto;
|
||||
}
|
||||
|
||||
.search_content > button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.search_content > .search_actions {
|
||||
display: flex;
|
||||
margin: 1em 0 0.5em 0;
|
||||
|
||||
button {
|
||||
margin: 0.25em 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.data-status {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 1.1em;
|
||||
|
||||
height: 1.5em;
|
||||
}
|
||||
|
||||
@include smallScreen() {
|
||||
h1 {
|
||||
text-align: center;
|
||||
|
||||
&::before {
|
||||
width: 75%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.options_wrapper {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.btn--image {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.filter-option,
|
||||
.sort-option {
|
||||
margin: 0.25em 0.25em;
|
||||
}
|
||||
|
||||
.options_filters,
|
||||
.options_sorters {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@import '../../styles/filters_options.scss';
|
||||
</style>
|
||||
@@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<div class="train-options">
|
||||
<div class="filters-options">
|
||||
<div class="bg" v-if="showOptions" @click="showOptions = false"></div>
|
||||
|
||||
<button class="btn--open" @click="showOptions = !showOptions">
|
||||
<button class="btn--image" @click="showOptions = !showOptions">
|
||||
<img :src="getIcon('filter2')" alt="Open filters" />
|
||||
{{ $t('options.filters') }}
|
||||
</button>
|
||||
@@ -10,7 +10,7 @@
|
||||
<transition name="options-anim">
|
||||
<div class="options_wrapper" v-if="showOptions">
|
||||
<div class="options_content">
|
||||
<h1>{{ $t('options.sort-title') }}</h1>
|
||||
<h1 class="option-title">{{ $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)">
|
||||
@@ -19,7 +19,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1 v-if="trainFilterList.length != 0">{{ $t('options.filter-title') }}</h1>
|
||||
<h1 class="option-title" 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)">
|
||||
@@ -35,8 +35,9 @@
|
||||
<button @click="resetAllFilters">{{ $t('options.filter-reset') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<h1>{{ $t('options.search-title') }}</h1>
|
||||
<div class="content_search">
|
||||
|
||||
<h1 class="option-title">{{ $t('options.search-title') }}</h1>
|
||||
<div class="search_content">
|
||||
<div class="search-box">
|
||||
<input class="search-input" :placeholder="$t(`options.search-train`)" v-model="searchedTrain" />
|
||||
<button class="search-exit">
|
||||
@@ -134,119 +135,18 @@ export default defineComponent({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../../styles/responsive.scss';
|
||||
@import '../../styles/search_box.scss';
|
||||
@import '../../styles/variables.scss';
|
||||
@import '../../styles/filters_options.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;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.journal-options {
|
||||
position: relative;
|
||||
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.options_wrapper {
|
||||
position: absolute;
|
||||
|
||||
background-color: #111111ee;
|
||||
box-shadow: 0 0 10px 2px #111;
|
||||
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
|
||||
padding: 1em;
|
||||
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.btn--open {
|
||||
display: flex;
|
||||
|
||||
padding: 0.4em 1em;
|
||||
font-weight: bold;
|
||||
font-size: 1em;
|
||||
|
||||
border-radius: 0.75em 0.75em 0 0;
|
||||
|
||||
img {
|
||||
height: 1.3em;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
position: relative;
|
||||
font-size: 1.1em;
|
||||
margin: 0.7em 0 0.25em 0;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
|
||||
width: 50%;
|
||||
height: 2px;
|
||||
background-color: white;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.options_sorters {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
padding: 0.25em 0.25em 0 0;
|
||||
}
|
||||
|
||||
.content_search > div {
|
||||
.search_content > div {
|
||||
margin: 0.5em auto;
|
||||
}
|
||||
|
||||
.content_search > button {
|
||||
.search_content > button {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.options_filters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0.5em 0 0 0;
|
||||
}
|
||||
|
||||
.sort-option,
|
||||
.filter-option {
|
||||
margin: 0.25em 0.25em 0.25em 0;
|
||||
}
|
||||
|
||||
.sort-option[data-selected='true'] {
|
||||
color: $accentCol;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.filter-option {
|
||||
button {
|
||||
color: white;
|
||||
@@ -257,29 +157,4 @@ h1 {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include smallScreen() {
|
||||
h1 {
|
||||
text-align: center;
|
||||
|
||||
&::before {
|
||||
width: 75%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
|
||||
.options_wrapper {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.btn--open {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.options_filters,
|
||||
.options_sorters {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user