Andrey/uptime-kuma
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: reorganize filter controls layout and improve responsiveness

Browse Source
This commit is contained in:
Dorian Grasset 2026-01-16 18:36:21 +01:00
parent 7b07074bbe
commit 7a7cf6f074
1 changed files with 46 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/MonitorList.vue
View File

@ -3,24 +3,6 @@
<div class="list-header">
<!-- Line 1: Checkbox + Status + Tags + Search Bar -->
<div class="filter-row">
<input
v-if="!selectMode"
v-model="selectMode"
class="form-check-input"
type="checkbox"
:aria-label="$t('selectAllMonitorsAria')"
@change="selectAll = selectMode"
/>
<input
v-else
v-model="selectAll"
class="form-check-input"
type="checkbox"
:aria-label="selectAll ? $t('deselectAllMonitorsAria') : $t('selectAllMonitorsAria')"
/>
<MonitorListFilter :filterState="filterState" @update-filter="updateFilter" />
<div class="search-wrapper">
<a v-if="searchText != ''" class="search-icon" @click="clearSearchText">
<font-awesome-icon icon="times" />
@ -35,6 +17,26 @@
/>
</form>
</div>
<div class="filters-group">
<input
v-if="!selectMode"
v-model="selectMode"
class="form-check-input"
type="checkbox"
:aria-label="$t('selectAllMonitorsAria')"
@change="selectAll = selectMode"
/>
<input
v-else
v-model="selectAll"
class="form-check-input"
type="checkbox"
:aria-label="selectAll ? $t('deselectAllMonitorsAria') : $t('selectAllMonitorsAria')"
/>
<MonitorListFilter :filterState="filterState" @update-filter="updateFilter" />
</div>
</div>
<!-- Line 2: Cancel + Actions (shown when selection mode is active) -->
@ -563,6 +565,12 @@ export default {
}
}
.filters-group {
display: flex;
align-items: center;
gap: 8px;
}
.actions-wrapper {
display: flex;
align-items: center;
@ -667,6 +675,25 @@ export default {
}
}
@media (max-width: 975px) {
.filter-row {
flex-direction: column-reverse;
align-items: stretch;
gap: 8px;
}
.search-wrapper {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
flex: 1 1 100%;
}
.filters-group {
width: 100%;
}
}
@media (max-width: 770px) {
.list-header {
margin: -20px;
@ -683,6 +710,7 @@ export default {
min-width: 0;
max-width: 300px;
margin-left: auto;
order: 1;
form {
width: 100%;