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

pull/1213/head
Karel Krýda 3 years ago
parent 11ef22edec
commit 57368c8c6c

@ -196,21 +196,31 @@
</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="content" v-text="maintenanceItem.description" /> <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>
<!-- Incident Date -->
<div class="date mt-3"> <div class="date mt-3">
{{ $t("End") }}: {{ $root.datetimeMaintenance(maintenanceItem.end_date) }} {{ $t("End") }}: {{ $root.datetimeMaintenance(maintenanceItem.end_date) }}
({{ dateFromNow(maintenanceItem.start_date) }})<br /> ({{ dateFromNow(maintenanceItem.start_date) }})<br />
</div> </div>
</div> </div>
</div>
</div>
</div>
</template> </template>
<!-- Overall Status --> <!-- Overall Status -->
@ -933,20 +943,22 @@ footer {
} }
} }
.maintenance { .maintenance-bg-info {
color: white; color: $maintenance;
}
.date { .maintenance-icon {
font-size: 12px; font-size: 30px;
} vertical-align: middle;
} }
.bg-maintenance { .dark .shadow-box {
background-color: $maintenance; background-color: #0d1117;
} }
.statusMaintenance { .statusMaintenance {
color: $maintenance; color: $maintenance;
margin-right: 5px;
} }
.mobile { .mobile {

Loading…
Cancel
Save