mirrors/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-11-28 06:08:02 +03:00
Code Issues Projects Releases Packages Wiki Activity

More modern look of maintenance information on status page (same design as for the new incident system)

Browse source
This commit is contained in:
Karel Krýda 2022-04-30 15:32:56 +02:00
parent 11ef22edec
commit 57368c8c6c
1 changed files with 30 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/pages/StatusPage.vue
View file

@ -196,19 +196,29 @@
</div> </div>
<!-- Maintenance --> <!-- Maintenance -->
<template v-if="maintenance.length !== 0"> <template v-if="maintenance.length">
<div <div
v-for="maintenanceItem in maintenance" :key="maintenanceItem.id" class="shadow-box alert mb-4 p-4 maintenance" role="alert" v-for="maintenanceItem in maintenance" :key="maintenanceItem.id"
:class="maintenanceClass" class="shadow-box alert mb-4 p-4 maintenance mt-4 position-relative" role="alert"
> >
<h4 class="alert-heading" v-text="maintenanceItem.title" /> <div class="item">
<div class="row">
<div class="col-1 col-md-1 d-flex justify-content-center align-items-center">
<font-awesome-icon
icon="wrench"
class="maintenance-icon maintenance-bg-info"
/>
</div>
<div class="col-11 col-md-11">
<h4 class="alert-heading">{{ maintenanceItem.title }}</h4>
<div class="content">{{ maintenanceItem.description }}</div>
<div class="content" v-text="maintenanceItem.description" /> <div class="date mt-3">
{{ $t("End") }}: {{ $root.datetimeMaintenance(maintenanceItem.end_date) }}
<!-- Incident Date --> ({{ dateFromNow(maintenanceItem.start_date) }})<br />
<div class="date mt-3"> </div>
{{ $t("End") }}: {{ $root.datetimeMaintenance(maintenanceItem.end_date) }} </div>
({{ dateFromNow(maintenanceItem.start_date) }})<br /> </div>
</div> </div>
</div> </div>
</template> </template>
@ -933,20 +943,22 @@ footer {
} }
} }
.maintenance { .maintenance-bg-info {
color: white; color: $maintenance;
.date {
font-size: 12px;
}
} }
.bg-maintenance { .maintenance-icon {
background-color: $maintenance; font-size: 30px;
vertical-align: middle;
}
.dark .shadow-box {
background-color: #0d1117;
} }
.statusMaintenance { .statusMaintenance {
color: $maintenance; color: $maintenance;
margin-right: 5px;
} }
.mobile { .mobile {