mirror of
https://github.com/louislam/uptime-kuma.git
synced 2026-01-31 11:03:11 +08:00
fix(ui): improve monitor list readability on mobile (#6699)
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:
@@ -1,5 +1,5 @@
|
||||
<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">
|
||||
<template #status>
|
||||
<Status v-if="filterState.status?.length === 1" :status="filterState.status[0]" />
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
<router-link :to="monitorURL(monitor.id)" class="item" :class="{ disabled: !monitor.active }">
|
||||
<div class="row">
|
||||
<div
|
||||
class="col-6 small-padding"
|
||||
class="col-9 col-xl-6 small-padding"
|
||||
:class="{
|
||||
'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'" />
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -51,7 +51,7 @@
|
||||
<template #item="monitor">
|
||||
<div class="item" data-testid="monitor">
|
||||
<div class="row">
|
||||
<div class="col-6 small-padding">
|
||||
<div class="col-9 col-xl-6 small-padding">
|
||||
<div class="info">
|
||||
<font-awesome-icon
|
||||
v-if="editMode"
|
||||
@@ -116,7 +116,7 @@
|
||||
</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" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<MonitorList :scrollbar="true" />
|
||||
</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 -->
|
||||
<router-view :key="$route.fullPath" :calculatedHeight="height" />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user