From 78150b77e02dfbbd8fc54fbdde99e9e3446c6699 Mon Sep 17 00:00:00 2001
From: Thomas Citharel <tcit@tcit.fr>
Date: Fri, 26 Feb 2021 16:21:23 +0100
Subject: [PATCH] Improve search form display
Closes #557
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
---
js/src/views/Search.vue | 20 ++++++++++++++++++--
1 file changed, 18 insertions(+), 2 deletions(-)
diff --git a/js/src/views/Search.vue b/js/src/views/Search.vue
index 6807b1870..6a3c2b044 100644
--- a/js/src/views/Search.vue
+++ b/js/src/views/Search.vue
@@ -31,7 +31,7 @@
/>
</b-field>
<b-field :label="$t('Radius')" label-for="radius">
- <b-select v-model="radius" id="radius">
+ <b-select v-model="radius" id="radius" expanded>
<option
v-for="(radiusOption, index) in radiusOptions"
:key="index"
@@ -42,7 +42,12 @@
</b-select>
</b-field>
<b-field :label="$t('Date')" label-for="date">
- <b-select v-model="when" id="date" :disabled="activeTab !== 0">
+ <b-select
+ v-model="when"
+ id="date"
+ :disabled="activeTab !== 0"
+ expanded
+ >
<option
v-for="(option, index) in options"
:key="index"
@@ -459,5 +464,16 @@ form {
::v-deep .field label.label {
margin-bottom: 0;
}
+
+ .field.is-expanded:last-child > .field-body > .field.is-grouped {
+ flex-wrap: wrap;
+ flex: 1;
+ .field {
+ flex: 1 0 auto;
+ &:first-child {
+ flex: 3 0 300px;
+ }
+ }
+ }
}
</style>