mirror of
https://github.com/Spythere/stacjownik.git
synced 2026-05-03 21:38:13 +00:00
Poprawki responsywności selectboxów
This commit is contained in:
@@ -131,6 +131,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
.select-box {
|
.select-box {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.arrow {
|
.arrow {
|
||||||
|
|||||||
@@ -1,260 +1,218 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="journal-options">
|
<div class="journal-options">
|
||||||
<div class="options_wrapper">
|
<div class="options_wrapper">
|
||||||
<div class="options_content">
|
<div class="options_content">
|
||||||
<div class="content_select">
|
<div class="content_select">
|
||||||
<select-box
|
<select-box
|
||||||
:itemList="translatedSorterOptions"
|
:itemList="translatedSorterOptions"
|
||||||
:defaultItemIndex="0"
|
:defaultItemIndex="0"
|
||||||
@selected="onSorterChange"
|
@selected="onSorterChange"
|
||||||
:prefix="$t('journal.sort-prefix')"
|
:prefix="$t('journal.sort-prefix')"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content_search">
|
<div class="content_search">
|
||||||
<div class="search-box" v-for="(value, propName) in searchersValues" :key="propName">
|
<div class="search-box" v-for="(value, propName) in searchersValues" :key="propName">
|
||||||
<input
|
<input
|
||||||
class="search-input"
|
class="search-input"
|
||||||
:placeholder="$t(`journal.${propName}`)"
|
:placeholder="$t(`journal.${propName}`)"
|
||||||
v-model="searchersValues[propName]"
|
v-model="searchersValues[propName]"
|
||||||
@keydown.enter="onInputSearch"
|
@keydown.enter="onInputSearch"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<img class="search-exit" :src="getIcon('exit')" alt="exit-icon" @click="onInputClear(propName)" />
|
<button class="search-exit">
|
||||||
</div>
|
<img :src="getIcon('exit')" alt="exit-icon" @click="onInputClear(propName)" />
|
||||||
<!-- <div class="search-box">
|
</button>
|
||||||
<input
|
</div>
|
||||||
class="search-input"
|
<!-- <div class="search-box">
|
||||||
v-model="searchedTrain"
|
<input
|
||||||
:placeholder="$t('journal.search-train')"
|
class="search-input"
|
||||||
@keydown.enter="search"
|
v-model="searchedTrain"
|
||||||
/>
|
:placeholder="$t('journal.search-train')"
|
||||||
|
@keydown.enter="search"
|
||||||
<img class="search-exit" :src="exitIcon" alt="exit-icon" @click="clearTrain" />
|
/>
|
||||||
</div>
|
|
||||||
|
<img class="search-exit" :src="exitIcon" alt="exit-icon" @click="clearTrain" />
|
||||||
<div class="search-box">
|
</div>
|
||||||
<input
|
|
||||||
class="search-input"
|
<div class="search-box">
|
||||||
v-model="searchedDriver"
|
<input
|
||||||
:placeholder="$t('journal.search-driver')"
|
class="search-input"
|
||||||
@keydown.enter="search"
|
v-model="searchedDriver"
|
||||||
/>
|
:placeholder="$t('journal.search-driver')"
|
||||||
|
@keydown.enter="search"
|
||||||
<img class="search-exit" :src="exitIcon" alt="exit-icon" @click="clearDriver" />
|
/>
|
||||||
</div> -->
|
|
||||||
|
<img class="search-exit" :src="exitIcon" alt="exit-icon" @click="clearDriver" />
|
||||||
<action-button class="search-button" @click="onInputSearch">
|
</div> -->
|
||||||
{{ $t('journal.search') }}
|
|
||||||
</action-button>
|
<action-button class="search-button" @click="onInputSearch">
|
||||||
</div>
|
{{ $t('journal.search') }}
|
||||||
</div>
|
</action-button>
|
||||||
|
</div>
|
||||||
<div class="options_filters">
|
</div>
|
||||||
<button
|
|
||||||
v-for="filter in filters"
|
<div class="options_filters">
|
||||||
class="journal-filter-option btn--option"
|
<button
|
||||||
:class="{ checked: journalFilterActive.id === filter.id }"
|
v-for="filter in filters"
|
||||||
:id="filter.id"
|
class="journal-filter-option btn--option"
|
||||||
@click="onFilterChange(filter)"
|
:class="{ checked: journalFilterActive.id === filter.id }"
|
||||||
>
|
:id="filter.id"
|
||||||
{{ $t(`journal.filter-${filter.id}`) }}
|
@click="onFilterChange(filter)"
|
||||||
</button>
|
>
|
||||||
</div>
|
{{ $t(`journal.filter-${filter.id}`) }}
|
||||||
</div>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
|
</div>
|
||||||
<script lang="ts">
|
</template>
|
||||||
import { defineComponent, inject, JournalFilter, PropType } from 'vue';
|
|
||||||
import imageMixin from '../../mixins/imageMixin';
|
<script lang="ts">
|
||||||
import ActionButton from '../Global/ActionButton.vue';
|
import { defineComponent, inject, JournalFilter, PropType } from 'vue';
|
||||||
import SelectBox from '../Global/SelectBox.vue';
|
import imageMixin from '../../mixins/imageMixin';
|
||||||
|
import ActionButton from '../Global/ActionButton.vue';
|
||||||
export default defineComponent({
|
import SelectBox from '../Global/SelectBox.vue';
|
||||||
components: { SelectBox, ActionButton },
|
|
||||||
emits: ['onSorterChange', 'onInputChange', 'onFilterChange'],
|
export default defineComponent({
|
||||||
mixins: [imageMixin],
|
components: { SelectBox, ActionButton },
|
||||||
|
emits: ['onSorterChange', 'onInputChange', 'onFilterChange'],
|
||||||
props: {
|
mixins: [imageMixin],
|
||||||
sorterOptionIds: {
|
|
||||||
type: Array as PropType<Array<string>>,
|
props: {
|
||||||
required: true,
|
sorterOptionIds: {
|
||||||
},
|
type: Array as PropType<Array<string>>,
|
||||||
|
required: true,
|
||||||
filters: {
|
},
|
||||||
type: Array as PropType<JournalFilter[]>,
|
|
||||||
default: [],
|
filters: {
|
||||||
},
|
type: Array as PropType<JournalFilter[]>,
|
||||||
},
|
default: [],
|
||||||
|
},
|
||||||
|
},
|
||||||
setup() {
|
|
||||||
return {
|
setup() {
|
||||||
searchersValues: inject('searchersValues') as {[key: string]: string},
|
return {
|
||||||
sorterActive: inject('sorterActive') as { id: string | number; dir: number },
|
searchersValues: inject('searchersValues') as { [key: string]: string },
|
||||||
journalFilterActive: inject('journalFilterActive') as JournalFilter,
|
sorterActive: inject('sorterActive') as { id: string | number; dir: number },
|
||||||
};
|
journalFilterActive: inject('journalFilterActive') as JournalFilter,
|
||||||
},
|
};
|
||||||
|
},
|
||||||
computed: {
|
|
||||||
translatedSorterOptions() {
|
computed: {
|
||||||
return this.$props.sorterOptionIds.map((id) => ({
|
translatedSorterOptions() {
|
||||||
id,
|
return this.$props.sorterOptionIds.map((id) => ({
|
||||||
value: this.$t(`journal.option-${id}`),
|
id,
|
||||||
}));
|
value: this.$t(`journal.option-${id}`),
|
||||||
},
|
}));
|
||||||
},
|
},
|
||||||
|
},
|
||||||
methods: {
|
|
||||||
onSorterChange(item: { id: string | number; value: string }) {
|
methods: {
|
||||||
this.sorterActive.id = item.id;
|
onSorterChange(item: { id: string | number; value: string }) {
|
||||||
this.sorterActive.dir = -1;
|
this.sorterActive.id = item.id;
|
||||||
|
this.sorterActive.dir = -1;
|
||||||
this.$emit('onSorterChange');
|
|
||||||
},
|
this.$emit('onSorterChange');
|
||||||
|
},
|
||||||
onFilterChange(filter: JournalFilter) {
|
|
||||||
this.journalFilterActive = filter;
|
onFilterChange(filter: JournalFilter) {
|
||||||
this.$emit('onFilterChange');
|
this.journalFilterActive = filter;
|
||||||
},
|
this.$emit('onFilterChange');
|
||||||
|
},
|
||||||
onInputSearch() {
|
|
||||||
this.$emit('onInputChange');
|
onInputSearch() {
|
||||||
},
|
this.$emit('onInputChange');
|
||||||
|
},
|
||||||
onInputClear(id: any) {
|
|
||||||
this.searchersValues[id] = '';
|
onInputClear(id: any) {
|
||||||
this.onInputSearch();
|
this.searchersValues[id] = '';
|
||||||
},
|
this.onInputSearch();
|
||||||
},
|
},
|
||||||
});
|
},
|
||||||
</script>
|
});
|
||||||
|
</script>
|
||||||
<style lang="scss" scoped>
|
|
||||||
@import '../../styles/responsive';
|
<style lang="scss" scoped>
|
||||||
@import '../../styles/option.scss';
|
@import '../../styles/responsive';
|
||||||
|
@import '../../styles/option.scss';
|
||||||
.options {
|
@import '../../styles/search_box.scss';
|
||||||
&_wrapper {
|
|
||||||
display: flex;
|
.options {
|
||||||
flex-direction: column;
|
&_wrapper {
|
||||||
}
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
&_content {
|
}
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
&_content {
|
||||||
|
display: flex;
|
||||||
.content_search,
|
flex-wrap: wrap;
|
||||||
.content_select {
|
|
||||||
display: flex;
|
.content_search,
|
||||||
align-items: center;
|
.content_select {
|
||||||
flex-wrap: wrap;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
padding: 0.25em 0.25em 0 0;
|
flex-wrap: wrap;
|
||||||
}
|
|
||||||
}
|
padding: 0.25em 0.25em 0 0;
|
||||||
|
}
|
||||||
&_filters {
|
}
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
&_filters {
|
||||||
margin: 0.5em 0 0 0;
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
.journal-filter-option {
|
margin: 0.5em 0 0 0;
|
||||||
margin: 0 0.25em 0 0;
|
|
||||||
|
.journal-filter-option {
|
||||||
&#abandoned {
|
margin: 0 0.25em 0 0;
|
||||||
color: salmon;
|
|
||||||
}
|
&#abandoned {
|
||||||
|
color: salmon;
|
||||||
&#fulfilled {
|
}
|
||||||
color: lightgreen;
|
|
||||||
}
|
&#fulfilled {
|
||||||
|
color: lightgreen;
|
||||||
&#active {
|
}
|
||||||
color: lightblue;
|
|
||||||
}
|
&#active {
|
||||||
}
|
color: lightblue;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
.search {
|
}
|
||||||
&-box {
|
|
||||||
position: relative;
|
@include smallScreen() {
|
||||||
|
.journal-options {
|
||||||
background: #333;
|
width: 100%;
|
||||||
border-radius: 0.5em;
|
}
|
||||||
min-width: 200px;
|
|
||||||
margin-right: 0.25em;
|
.options {
|
||||||
}
|
&_wrapper {
|
||||||
|
justify-content: center;
|
||||||
&-input {
|
align-items: center;
|
||||||
border: none;
|
}
|
||||||
|
|
||||||
min-width: 100%;
|
&_content {
|
||||||
padding: 0.35em 0.5em;
|
padding: 0 1em;
|
||||||
}
|
|
||||||
|
flex-direction: column;
|
||||||
&-exit {
|
|
||||||
position: absolute;
|
.content_select {
|
||||||
cursor: pointer;
|
margin: 0 auto;
|
||||||
|
padding: 0;
|
||||||
top: 50%;
|
}
|
||||||
right: 10px;
|
|
||||||
transform: translateY(-50%);
|
.content_search {
|
||||||
|
justify-content: center;
|
||||||
width: 1em;
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
&_filters {
|
||||||
@include smallScreen() {
|
justify-content: center;
|
||||||
.journal-options {
|
|
||||||
width: 100%;
|
.journal-filter-option {
|
||||||
}
|
margin: 0.25em 0.25em;
|
||||||
.options {
|
}
|
||||||
&_wrapper {
|
}
|
||||||
justify-content: center;
|
}
|
||||||
align-items: center;
|
}
|
||||||
}
|
</style>
|
||||||
|
|
||||||
&_content {
|
|
||||||
padding: 0 1em;
|
|
||||||
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.content_select {
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content_search {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&_filters {
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.journal-filter-option {
|
|
||||||
margin: 0.25em 0.25em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.search {
|
|
||||||
&-box,
|
|
||||||
&-button {
|
|
||||||
margin: 0.5em 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-box {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-button {
|
|
||||||
width: 80%;
|
|
||||||
max-width: 300px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@@ -15,13 +15,17 @@
|
|||||||
<div class="search-box">
|
<div class="search-box">
|
||||||
<input class="search-input" v-model="searchedTrain" :placeholder="$t('trains.search-train')" />
|
<input class="search-input" v-model="searchedTrain" :placeholder="$t('trains.search-train')" />
|
||||||
|
|
||||||
<img class="search-exit" :src="getIcon('exit')" alt="exit-icon" @click="() => (searchedTrain = '')" />
|
<button class="search-exit">
|
||||||
|
<img :src="getIcon('exit')" alt="exit-icon" @click="() => (searchedTrain = '')" />
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="search-box">
|
<div class="search-box">
|
||||||
<input class="search-input" v-model="searchedDriver" :placeholder="$t('trains.search-driver')" />
|
<input class="search-input" v-model="searchedDriver" :placeholder="$t('trains.search-driver')" />
|
||||||
|
|
||||||
<img class="search-exit" :src="getIcon('exit')" alt="exit-icon" @click="() => (searchedDriver = '')" />
|
<button class="search-exit">
|
||||||
|
<img :src="getIcon('exit')" alt="exit-icon" @click="() => (searchedDriver = '')" />
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -130,8 +134,8 @@ export default defineComponent({
|
|||||||
|
|
||||||
resetFilters() {
|
resetFilters() {
|
||||||
this.filterList.forEach((f) => (f.isActive = true));
|
this.filterList.forEach((f) => (f.isActive = true));
|
||||||
this.searchedDriver = "";
|
this.searchedDriver = '';
|
||||||
this.searchedTrain = "";
|
this.searchedTrain = '';
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
@@ -139,10 +143,12 @@ export default defineComponent({
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '../../styles/responsive';
|
@import '../../styles/responsive';
|
||||||
|
@import '../../styles/search_box.scss';
|
||||||
|
|
||||||
.train-options {
|
.train-options {
|
||||||
@include smallScreen() {
|
@include smallScreen() {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
font-size: 1.25em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -166,34 +172,6 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search {
|
|
||||||
&-box {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
background: #333;
|
|
||||||
border-radius: 0.5em;
|
|
||||||
min-width: 200px;
|
|
||||||
margin-right: 0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-input {
|
|
||||||
border: none;
|
|
||||||
|
|
||||||
min-width: 100%;
|
|
||||||
padding: 0.35em 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-exit {
|
|
||||||
position: absolute;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
top: 50%;
|
|
||||||
right: 10px;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
|
|
||||||
width: 1em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.filters {
|
.filters {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
@@ -227,6 +205,7 @@ export default defineComponent({
|
|||||||
.journal-options {
|
.journal-options {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.options {
|
.options {
|
||||||
&_wrapper {
|
&_wrapper {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -247,21 +226,5 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search {
|
|
||||||
&-box,
|
|
||||||
&-button {
|
|
||||||
margin: 0.5em 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-box {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&-button {
|
|
||||||
width: 80%;
|
|
||||||
max-width: 300px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -60,7 +60,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@include smallScreen() {
|
@include smallScreen() {
|
||||||
.journal-wrapper {
|
.journal_wrapper {
|
||||||
font-size: 1.25em;
|
font-size: 1.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -0,0 +1,51 @@
|
|||||||
|
@import 'responsive.scss';
|
||||||
|
|
||||||
|
.search {
|
||||||
|
&-box {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
border-radius: 0.5em;
|
||||||
|
min-width: 200px;
|
||||||
|
margin-right: 0.25em;
|
||||||
|
background-color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-input {
|
||||||
|
border: none;
|
||||||
|
border-radius: 0.5em 0 0 0.5em;
|
||||||
|
background-color: #333;
|
||||||
|
|
||||||
|
padding: 0.35em 0.5em;
|
||||||
|
margin-right: 0.2em;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-exit {
|
||||||
|
background-color: #333;
|
||||||
|
padding: 0 0.5em;
|
||||||
|
border-radius: 0 0.5em 0.5em 0;
|
||||||
|
|
||||||
|
img {
|
||||||
|
vertical-align: middle;
|
||||||
|
height: 1.3em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@include smallScreen {
|
||||||
|
&-box,
|
||||||
|
&-button {
|
||||||
|
margin: 0.5em 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-box {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-button {
|
||||||
|
width: 80%;
|
||||||
|
max-width: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -103,9 +103,4 @@ export default defineComponent({
|
|||||||
max-width: 1350px;
|
max-width: 1350px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include smallScreen {
|
|
||||||
.options-bar {
|
|
||||||
font-size: 1.25em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user