From 7853c2cc380b95d24324832ba998d4858b19cf73 Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Sun, 18 Sep 2022 22:34:05 +0800
Subject: [PATCH] Update Maintenance UI

---
 src/assets/app.scss             | 17 +++++--
 src/languages/en.js             |  4 +-
 src/pages/EditMaintenance.vue   | 88 ++++++++++++++++-----------------
 src/pages/ManageMaintenance.vue |  2 +-
 src/pages/StatusPage.vue        |  7 ++-
 5 files changed, 61 insertions(+), 57 deletions(-)

diff --git a/src/assets/app.scss b/src/assets/app.scss
index 691adb682..81cf77245 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -22,6 +22,19 @@ textarea.form-control {
     width: 10px;
 }
 
+.bg-maintenance {
+    color: white !important;
+    background-color: $maintenance !important;
+}
+
+.bg-dark {
+    color: white;
+}
+
+.text-maintenance {
+    color: $maintenance !important;
+}
+
 .list-group {
     border-radius: 0.75rem;
 
@@ -252,10 +265,6 @@ optgroup {
         color: $dark-font-color2;
     }
 
-    .bg-maintenance {
-        background-color: $maintenance;
-    }
-
     .btn-secondary {
         color: white;
     }
diff --git a/src/languages/en.js b/src/languages/en.js
index 59c0ea14e..1a5956f76 100644
--- a/src/languages/en.js
+++ b/src/languages/en.js
@@ -10,17 +10,17 @@ export default {
     maxRedirectDescription: "Maximum number of redirects to follow. Set to 0 to disable redirects.",
     acceptedStatusCodesDescription: "Select status codes which are considered as a successful response.",
     Maintenance: "Maintenance",
-    "Monitors": "Monitors",
     "Schedule maintenance": "Schedule maintenance",
     "Affected Monitors": "Affected Monitors",
     "Pick Affected Monitors...": "Pick Affected Monitors...",
     "Start of maintenance": "Start of maintenance",
     "Expected end of maintenance": "Expected end of maintenance",
-    "Show on all pages": "Show on all status pages",
+    "All Status Pages": "All Status Pages",
     "Selected status pages": "Selected status pages",
     "Select status pages...": "Select status pages...",
     End: "End",
     affectedMonitorsDescription: "Select monitors that are affected by current maintenance",
+    affectedStatusPages: "Show this maintenance message on selected status pages",
     atLeastOneMonitor: "Select at least one affected monitor",
     maintenanceInvalidDate: "Invalid maintenance end date entered",
     selectedStatusPagesDescription: "Select status pages to display maintenance info on",
diff --git a/src/pages/EditMaintenance.vue b/src/pages/EditMaintenance.vue
index 3e650faa5..65f2d7241 100644
--- a/src/pages/EditMaintenance.vue
+++ b/src/pages/EditMaintenance.vue
@@ -5,7 +5,7 @@
             <form @submit.prevent="submit">
                 <div class="shadow-box">
                     <div class="row">
-                        <div class="col-md-6">
+                        <div class="col-xl-7">
                             <!-- Title -->
                             <div class="my-3">
                                 <label for="name" class="form-label">{{ $t("Title") }}</label>
@@ -24,9 +24,10 @@
                             </div>
 
                             <!-- Affected Monitors -->
-                            <div class="my-3">
-                                <label for="affected_monitors" class="form-label">{{ $t("Affected Monitors") }}</label>
+                            <h2 class="mt-5">{{ $t("Affected Monitors") }}</h2>
+                            {{ $t("affectedMonitorsDescription") }}
 
+                            <div class="my-3">
                                 <VueMultiselect
                                     id="affected_monitors"
                                     v-model="affectedMonitors"
@@ -43,12 +44,46 @@
                                     :max-height="600"
                                     :taggable="false"
                                 ></VueMultiselect>
+                            </div>
+
+                            <!-- Status pages to display maintenance info on -->
+                            <h2 class="mt-5">{{ $t("Status Pages") }}</h2>
+                            {{ $t("affectedStatusPages") }}
+
+                            <div class="my-3">
+                                <!-- Show on all pages -->
+                                <div class="form-check mb-2">
+                                    <input
+                                        id="show-on-all-pages" v-model="showOnAllPages" class="form-check-input"
+                                        type="checkbox"
+                                    >
+                                    <label class="form-check-label" for="show-powered-by">{{
+                                        $t("All Status Pages")
+                                    }}</label>
+                                </div>
 
-                                <div class="form-text">
-                                    {{ $t("affectedMonitorsDescription") }}
+                                <div v-if="!showOnAllPages">
+                                    <VueMultiselect
+                                        id="selected_status_pages"
+                                        v-model="selectedStatusPages"
+                                        :options="selectedStatusPagesOptions"
+                                        track-by="id"
+                                        label="name"
+                                        :multiple="true"
+                                        :allow-empty="true"
+                                        :close-on-select="false"
+                                        :clear-on-select="false"
+                                        :preserve-search="true"
+                                        :placeholder="$t('Select status pages...')"
+                                        :preselect-first="false"
+                                        :max-height="600"
+                                        :taggable="false"
+                                    ></VueMultiselect>
                                 </div>
                             </div>
 
+                            <h2 class="mt-5">{{ $t("Effective Date Range") }}</h2>
+
                             <!-- Start Date Time -->
                             <div class="my-3">
                                 <label for="start_date" class="form-label">{{ $t("Start Date") }}</label>
@@ -67,46 +102,7 @@
                                 >
                             </div>
 
-                            <!-- Show on all pages -->
-                            <div class="my-3 form-check">
-                                <input
-                                    id="show-on-all-pages" v-model="showOnAllPages" class="form-check-input"
-                                    type="checkbox"
-                                >
-                                <label class="form-check-label" for="show-powered-by">{{
-                                    $t("Show this Maintenance Message on ALL Status Pages")
-                                }}</label>
-                            </div>
-
-                            <!-- Status pages to display maintenance info on -->
-                            <div v-if="!showOnAllPages" class="my-3">
-                                <label for="selected_status_pages" class="form-label">{{
-                                    $t("Show this Maintenance Message on which Status Pages")
-                                }}</label>
-
-                                <VueMultiselect
-                                    id="selected_status_pages"
-                                    v-model="selectedStatusPages"
-                                    :options="selectedStatusPagesOptions"
-                                    track-by="id"
-                                    label="name"
-                                    :multiple="true"
-                                    :allow-empty="false"
-                                    :close-on-select="false"
-                                    :clear-on-select="false"
-                                    :preserve-search="true"
-                                    :placeholder="$t('Select status pages...')"
-                                    :preselect-first="false"
-                                    :max-height="600"
-                                    :taggable="false"
-                                ></VueMultiselect>
-
-                                <div class="form-text">
-                                    {{ $t("selectedStatusPagesDescription") }}
-                                </div>
-                            </div>
-
-                            <div class="mt-5 mb-1">
+                            <div class="mt-4 mb-1">
                                 <button
                                     id="monitor-submit-btn" class="btn btn-primary" type="submit"
                                     :disabled="processing"
@@ -329,7 +325,7 @@ export default {
 }
 
 textarea {
-    min-height: 200px;
+    min-height: 150px;
 }
 
 .dark-calendar::-webkit-calendar-picker-indicator {
diff --git a/src/pages/ManageMaintenance.vue b/src/pages/ManageMaintenance.vue
index 2165d7a5a..bcd47acfd 100644
--- a/src/pages/ManageMaintenance.vue
+++ b/src/pages/ManageMaintenance.vue
@@ -33,7 +33,7 @@
                     </div>
 
                     <div class="buttons">
-                        <router-link :to="maintenanceURL(item.id)" class="btn btn-light">{{ $t("Details") }}</router-link>
+                        <router-link v-if="false" :to="maintenanceURL(item.id)" class="btn btn-light">{{ $t("Details") }}</router-link>
                         <router-link :to="'/maintenance/edit/' + item.id" class="btn btn-secondary">
                             <font-awesome-icon icon="edit" /> {{ $t("Edit") }}
                         </router-link>
diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index 96ff60853..699c236d2 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -199,14 +199,14 @@
             <template v-if="maintenance.length">
                 <div
                     v-for="maintenanceItem in maintenance" :key="maintenanceItem.id"
-                    class="shadow-box alert mb-4 p-4 maintenance mt-4 position-relative" role="alert"
+                    class="shadow-box alert mb-4 p-3 bg-maintenance mt-4 position-relative" role="alert"
                 >
                     <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"
+                                    class="maintenance-icon"
                                 />
                             </div>
                             <div class="col-11 col-md-11">
@@ -215,7 +215,6 @@
 
                                 <div class="date mt-3">
                                     {{ $t("End") }}: {{ $root.datetimeMaintenance(maintenanceItem.end_date) }}
-                                    ({{ dateFromNow(maintenanceItem.start_date) }})<br />
                                 </div>
                             </div>
                         </div>
@@ -996,7 +995,7 @@ footer {
 }
 
 .maintenance-icon {
-    font-size: 30px;
+    font-size: 35px;
     vertical-align: middle;
 }