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

fix(ui): refreshing the page if pressing enter in the search, horizontal scrolling the monitor lit on mobile/tablets and aligning items in the monitor list (#6751)

Browse Source
This commit is contained in:
Maybe 2026-01-17 16:56:55 +09:00 committed by GitHub
parent f470b01168
commit 777c252915
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 6 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/MonitorList.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="shadow-box mb-3" :style="boxStyle"> <div class="shadow-box mb-3 p-0" :style="boxStyle">
<div class="list-header"> <div class="list-header">
<div class="header-top"> <div class="header-top">
<div class="select-checkbox-wrapper"> <div class="select-checkbox-wrapper">
@ -28,7 +28,7 @@
<a v-if="searchText != ''" class="search-icon" @click="clearSearchText"> <a v-if="searchText != ''" class="search-icon" @click="clearSearchText">
<font-awesome-icon icon="times" /> <font-awesome-icon icon="times" />
</a> </a>
<form> <form @submit.prevent>
<input <input
v-model="searchText" v-model="searchText"
class="form-control search-input" class="form-control search-input"
@ -89,7 +89,7 @@
</div> </div>
<div <div
ref="monitorList" ref="monitorList"
class="monitor-list" class="monitor-list px-2"
:class="{ scrollbar: scrollbar }" :class="{ scrollbar: scrollbar }"
:style="monitorListStyle" :style="monitorListStyle"
data-testid="monitor-list" data-testid="monitor-list"
@ -536,7 +536,6 @@ export default {
.list-header { .list-header {
border-bottom: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6;
border-radius: 10px 10px 0 0; border-radius: 10px 10px 0 0;
margin: -10px;
margin-bottom: 10px; margin-bottom: 10px;
padding: 10px; padding: 10px;
@ -679,7 +678,6 @@ export default {
@media (max-width: 770px) { @media (max-width: 770px) {
.list-header { .list-header {
margin: -20px;
margin-bottom: 10px; margin-bottom: 10px;
padding: 5px; padding: 5px;
} }

5
src/components/MonitorListItem.vue
View File

@ -24,12 +24,12 @@
<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-9 col-xl-6 small-padding" class="col-9 col-xl-6 small-padding d-flex align-items-center"
:class="{ :class="{
'monitor-item': $root.userHeartbeatBar == 'bottom' || $root.userHeartbeatBar == 'none', 'monitor-item': $root.userHeartbeatBar == 'bottom' || $root.userHeartbeatBar == 'none',
}" }"
> >
<div class="info"> <div class="info d-flex align-items-center gap-2">
<Uptime :monitor="monitor" type="24" :pill="true" /> <Uptime :monitor="monitor" type="24" :pill="true" />
<span v-if="hasChildren" class="collapse-padding" @click.prevent="changeCollapsed"> <span v-if="hasChildren" class="collapse-padding" @click.prevent="changeCollapsed">
<font-awesome-icon <font-awesome-icon
@ -383,6 +383,7 @@ export default {
/* We don't want the padding change due to the border animated */ /* We don't want the padding change due to the border animated */
.item { .item {
padding: 12px 15px;
transition: none !important; transition: none !important;
} }