blacklight/gpstracker
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make FilterForm view more compact.

Browse source 
It can easily overflow on mobile devices.
This commit is contained in:
Fabio Manganiello 2025-03-31 13:53:10 +02:00
parent 9ac36dec3e
commit fd279e0dbf
Signed by: blacklight
GPG key ID: D90FBA7F76362774
1 changed files with 72 additions and 45 deletions

53
frontend/src/components/filter/Form.vue
View file

@ -13,7 +13,10 @@
<div class="date-selectors" v-if="enableDateRange">
<div class="date-selector">
<label for="start-date">Start Date</label>
<label for="start-date">
<font-awesome-icon icon="fas fa-calendar-day" />
Start Date
</label>
<input type="datetime-local"
id="start-date"
name="start-date"
@ -49,7 +52,10 @@
</div>
<div class="date-selector">
<label for="end-date">End Date</label>
<label for="end-date">
<font-awesome-icon icon="fas fa-calendar-day" />
End Date
</label>
<input type="datetime-local"
id="end-date"
name="end-date"
@ -85,9 +91,12 @@
</div>
</div>
<div class="pagination-container">
<div class="limit-container">
<label for="limit">Max Results</label>
<div class="form-row">
<div class="container limit-container">
<label for="limit">
<font-awesome-icon icon="fas fa-list-ol" />
Max Results
</label>
<input type="number"
id="limit"
name="limit"
@ -97,10 +106,12 @@
:disabled="disabled"
min="1" />
</div>
</div>
<div class="order-container">
<label for="order">Order</label>
<div class="container order-container">
<label for="order">
<font-awesome-icon icon="fas fa-sort" />
Order
</label>
<select id="order"
name="order"
v-model="newFilter.order"
@ -109,10 +120,13 @@
<option value="desc">Newest points first</option>
</select>
</div>
</div>
<div class="resolution-container">
<div class="form-row">
<div class="container resolution-container">
<label for="resolution">
<p class="title">
<font-awesome-icon icon="fas fa-ruler" />
Resolution (m)
</p>
@ -131,8 +145,11 @@
min="0" />
</div>
<div class="device-container">
<label for="device">Device</label>
<div class="container device-container">
<label for="device">
<font-awesome-icon icon="fas fa-mobile-alt" />
Device
</label>
<select id="device"
name="device"
v-model="newFilter.deviceId"
@ -141,6 +158,7 @@
<option v-for="device in devices" :key="device.id" :value="device.id">{{ device.name }}</option>
</select>
</div>
</div>
<div class="footer">
<button type="submit" :disabled="disabled || !changed">
@ -394,17 +412,20 @@ export default {
}
}
.pagination-container {
.form-row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin: 0.5em;
.limit-container {
.container {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 1em;
}
label {
@ -416,6 +437,12 @@ export default {
}
}
.limit-container {
display: flex;
flex-direction: column;
align-items: center;
}
.resolution-container {
display: flex;
flex-direction: column;