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