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

fix(ui): improve monitor list readability on mobile (#6699)

Browse Source 
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Frank Elsinga <frank@elsinga.de>
This commit is contained in:
Anurag Ekkati 2026-01-13 00:38:52 -08:00 committed by GitHub
parent d61cbbe56d
commit 70d541a11c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/MonitorListFilter.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="d-flex align-items-center"> <div class="d-flex align-items-center flex-wrap gap-1">
<MonitorListFilterDropdown :filterActive="filterState.status?.length > 0"> <MonitorListFilterDropdown :filterActive="filterState.status?.length > 0">
<template #status> <template #status>
<Status v-if="filterState.status?.length === 1" :status="filterState.status[0]" /> <Status v-if="filterState.status?.length === 1" :status="filterState.status[0]" />

8
src/components/MonitorListItem.vue
View File

@ -24,7 +24,7 @@
<router-link :to="monitorURL(monitor.id)" class="item" :class="{ disabled: !monitor.active }"> <router-link :to="monitorURL(monitor.id)" class="item" :class="{ disabled: !monitor.active }">
<div class="row"> <div class="row">
<div <div
class="col-6 small-padding" class="col-9 col-xl-6 small-padding"
:class="{ :class="{
'monitor-item': $root.userHeartbeatBar == 'bottom' || $root.userHeartbeatBar == 'none', 'monitor-item': $root.userHeartbeatBar == 'bottom' || $root.userHeartbeatBar == 'none',
}" }"
@ -44,7 +44,11 @@
<Tag v-for="tag in monitor.tags" :key="tag" :item="tag" :size="'sm'" /> <Tag v-for="tag in monitor.tags" :key="tag" :item="tag" :size="'sm'" />
</div> </div>
</div> </div>
<div v-show="$root.userHeartbeatBar == 'normal'" :key="$root.userHeartbeatBar" class="col-6"> <div
v-show="$root.userHeartbeatBar == 'normal'"
:key="$root.userHeartbeatBar"
class="col-3 col-xl-6"
>
<HeartbeatBar ref="heartbeatBar" size="small" :monitor-id="monitor.id" /> <HeartbeatBar ref="heartbeatBar" size="small" :monitor-id="monitor.id" />
</div> </div>
</div> </div>

4
src/components/PublicGroupList.vue
View File

@ -51,7 +51,7 @@
<template #item="monitor"> <template #item="monitor">
<div class="item" data-testid="monitor"> <div class="item" data-testid="monitor">
<div class="row"> <div class="row">
<div class="col-6 small-padding"> <div class="col-9 col-xl-6 small-padding">
<div class="info"> <div class="info">
<font-awesome-icon <font-awesome-icon
v-if="editMode" v-if="editMode"
@ -116,7 +116,7 @@
</div> </div>
</div> </div>
</div> </div>
<div :key="$root.userHeartbeatBar" class="col-6"> <div :key="$root.userHeartbeatBar" class="col-3 col-xl-6">
<HeartbeatBar size="mid" :monitor-id="monitor.element.id" /> <HeartbeatBar size="mid" :monitor-id="monitor.element.id" />
</div> </div>
</div> </div>

2
src/pages/Dashboard.vue
View File

@ -11,7 +11,7 @@
<MonitorList :scrollbar="true" /> <MonitorList :scrollbar="true" />
</div> </div>
<div ref="container" class="col-12 col-md-7 col-xl-8 mb-3"> <div ref="container" class="col-12 col-md-7 col-xl-8 mb-3 gx-0">
<!-- Add :key to disable vue router re-use the same component --> <!-- Add :key to disable vue router re-use the same component -->
<router-view :key="$route.fullPath" :calculatedHeight="height" /> <router-view :key="$route.fullPath" :calculatedHeight="height" />
</div> </div>