diff --git a/src/components/TrainsView/TrainOptions.vue b/src/components/TrainsView/TrainOptions.vue
index ea18d4e..a30693e 100644
--- a/src/components/TrainsView/TrainOptions.vue
+++ b/src/components/TrainsView/TrainOptions.vue
@@ -43,15 +43,14 @@
{{ $t('options.sort-title') }}
-
-
-
+
{{ $t('options.filter-title') }}
@@ -191,19 +190,23 @@ export default defineComponent({
margin: 0 auto;
}
-.options_filters div {
+.options_sorters {
+ display: flex;
+ grid-template-columns: repeat(3, 1fr);
+}
+
+.options_filters > div {
display: flex;
width: 100%;
gap: 0.5em;
- margin-bottom: 0.5em;
button {
width: 100%;
color: springgreen;
font-weight: bold;
- &[data-inactive=true] {
+ &[data-inactive='true'] {
color: #aaa;
}
}
diff --git a/src/styles/filters_options.scss b/src/styles/filters_options.scss
index 22e2060..dc28240 100644
--- a/src/styles/filters_options.scss
+++ b/src/styles/filters_options.scss
@@ -77,6 +77,7 @@ h1.option-title {
display: flex;
align-items: center;
flex-wrap: wrap;
+ gap: 0.5em;
padding: 0.25em 0.25em 0 0;
}
@@ -84,17 +85,18 @@ h1.option-title {
.options_filters {
display: flex;
flex-wrap: wrap;
+
+ gap: 0.5em;
margin: 0.5em 0 0 0;
}
.sort-option,
.filter-option {
- margin: 0.25em 0.25em 0.25em 0;
+ padding: 0.25em 0.5em;
}
.sort-option[data-selected='true'] {
color: $accentCol;
- font-weight: bold;
}
.filter-option {