Merge pull request #236 from Ponkhy/clean-mobile-table

Added clean monitor table for smaller screens
This commit is contained in:
Louis Lam 2021-08-24 23:21:22 +08:00 committed by GitHub
commit 13f6c79e79
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 72 additions and 8 deletions

View File

@ -80,6 +80,55 @@ h2 {
} }
} }
@media (max-width: 550px) {
.table-shadow-box {
padding: 10px !important;
thead {
display: none;
}
tbody {
.shadow-box {
background-color: white;
}
}
tr {
margin-top: 0 !important;
padding: 4px 10px !important;
display: block;
margin-bottom: 6px;
td:first-child {
font-weight: bold;
}
td:nth-child(-n+3) {
text-align: center;
}
td:last-child {
text-align: left;
}
td {
border-bottom: 1px solid $dark-font-color;
display: block;
padding: 4px;
.badge {
margin: auto;
display: block;
width: 30%;
}
}
}
}
}
// Dark Theme override here // Dark Theme override here
.dark { .dark {
background-color: #090C10; background-color: #090C10;
@ -192,6 +241,20 @@ h2 {
.multiselect__option--selected { .multiselect__option--selected {
background-color: $dark-bg; background-color: $dark-bg;
} }
@media (max-width: 550px) {
.table-shadow-box {
tbody {
.shadow-box {
background-color: $dark-bg2;
td {
border-bottom: 1px solid $dark-border-color;
}
}
}
}
}
} }
/* /*

View File

@ -26,7 +26,7 @@
</div> </div>
</div> </div>
<div class="shadow-box" style="margin-top: 25px;overflow-x: scroll"> <div class="shadow-box table-shadow-box" style="overflow-x: scroll">
<table class="table table-borderless table-hover"> <table class="table table-borderless table-hover">
<thead> <thead>
<tr> <tr>
@ -37,11 +37,11 @@
</tr> </tr>
</thead> </thead>
<tbody> <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>{{ beat.name }}</td>
<td><Status :status="beat.status" /></td> <td><Status :status="beat.status" /></td>
<td><Datetime :value="beat.time" /></td> <td :class="{ 'border-0':! beat.msg}"><Datetime :value="beat.time" /></td>
<td>{{ beat.msg }}</td> <td class="border-0">{{ beat.msg }}</td>
</tr> </tr>
<tr v-if="importantHeartBeatList.length === 0"> <tr v-if="importantHeartBeatList.length === 0">
@ -170,6 +170,7 @@ export default {
.shadow-box { .shadow-box {
padding: 20px; padding: 20px;
margin-top: 25px;
} }
table { table {

View File

@ -128,7 +128,7 @@
</div> </div>
</div> </div>
<div class="shadow-box"> <div class="shadow-box table-shadow-box">
<table class="table table-borderless table-hover"> <table class="table table-borderless table-hover">
<thead> <thead>
<tr> <tr>
@ -138,10 +138,10 @@
</tr> </tr>
</thead> </thead>
<tbody> <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}" style="padding: 10px;">
<td><Status :status="beat.status" /></td> <td><Status :status="beat.status" /></td>
<td><Datetime :value="beat.time" /></td> <td :class="{ 'border-0':! beat.msg}"><Datetime :value="beat.time" /></td>
<td>{{ beat.msg }}</td> <td class="border-0">{{ beat.msg }}</td>
</tr> </tr>
<tr v-if="importantHeartBeatList.length === 0"> <tr v-if="importantHeartBeatList.length === 0">