ric/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-11-24 07:14:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Added clean monitor table for smaller screens

Browse source
This commit is contained in:
Ponkhy 2021-08-21 21:12:44 +02:00
parent 49ba5fb1b2
commit dbd3f48f68
2 changed files with 39 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/assets/app.scss
View file

@ -80,6 +80,12 @@ h2 {
}
}
@media (max-width: 550px) {
tbody .shadow-box {
background-color: white;
}
}
// Dark Theme override here
.dark {
background-color: #090C10;
@ -192,6 +198,12 @@ h2 {
.multiselect__option--selected {
background-color: $dark-bg;
}
@media (max-width: 550px) {
tbody .shadow-box {
background-color: $dark-bg2;
}
}
}
/*

29
src/pages/DashboardHome.vue
View file

@ -49,11 +49,11 @@
</tr>
</thead>
<tbody>
<tr v-for="(beat, index) in displayedRecords" :key="index">
<tr v-for="(beat, index) in displayedRecords" :key="index" :class="{ 'shadow-box': $root.windowWidth <= 550}">
<td>{{ beat.name }}</td>
<td><Status :status="beat.status" /></td>
<td><Datetime :value="beat.time" /></td>
<td>{{ beat.msg }}</td>
<td class="no-border">{{ beat.msg }}</td>
</tr>
<tr v-if="importantHeartBeatList.length === 0">
@ -191,4 +191,29 @@ table {
transition: all ease-in-out 0.2ms;
}
}
@media (max-width: 550px) {
.no-border {
border: 0px;
}
tr.shadow-box, .shadow-box:last-child {
padding: 10px;
}
thead {
display: none;
}
tr {
display: block;
margin-bottom: 10px;
}
td {
border-bottom: 1px solid $dark-font-color;
display: block;
padding: 6px;
}
}
</style>