Add possibility to publish a public notice

src/App.vue

@@ -5,6 +5,7 @@
     </div>
     <div v-if="!$data.loading" class="flex flex-column jc-center content-wrapper">
       <Header :title="this.config.title" />
+      <Notice class="mtop-2" v-if="this.config.notice" :notice="this.config.notice" />
       <OverallStatus class="mtop-2" :failedEndpoints="failedEndpoints" />
       <EndpointGroup class="mtop-2" v-for="(value, key) in groups" :key="key" :name="key" :endpoints="value" />
     </div>
@@ -18,6 +19,7 @@
 <script>
 import Loader from '@/components/Loader.vue';
 import Header from '@/components/Header.vue';
+import Notice from '@/components/Notice.vue';
 import OverallStatus from '@/components/OverallStatus.vue';
 import EndpointGroup from '@/components/EndpointGroup.vue';
 import RefreshSettings from '@/components/RefreshSettings.vue';
@@ -30,6 +32,7 @@ export default {
   components: {
     Loader,
     Header,
+    Notice,
     OverallStatus,
     EndpointGroup,
     RefreshSettings,
@@ -150,7 +153,20 @@ export default {
   margin-top: 1rem;
   margin-bottom: 3rem;
 }
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 1200px) {
+  .content-wrapper {
+    width: 80%;
+  }
+}
+@media screen and (max-width: 820px) {
+  .content-wrapper {
+    width: 90%;
+  }
+  .refresh-settings {
+    display: none;
+  }
+}
+@media screen and (max-width: 767px) {
   .main {
     padding-left: 15px;
     padding-right: 15px;
@@ -158,9 +174,6 @@ export default {
   .content-wrapper {
     width: 100%;
   }
-  .refresh-settings {
-    display: none;
-  }
 }
 </style>
 

src/components/Notice.vue

@@ -0,0 +1,57 @@
+<template>
+    <div :class="{
+        notice: true, 'shadow-box': true,
+        primary: this.notice.type === 'primary',
+        warning: this.notice.type === 'warning',
+        danger: this.notice.type === 'danger',
+        info: this.notice.type === 'info'
+    }">
+        <h4>{{ this.notice.title }}</h4>
+        <p>{{ this.notice.content }}</p>
+        <div class="flex flex-column time">
+            Created at: {{ this.notice.createdAt }}
+            <br>
+            <span v-if="this.notice.updatedAt">Last updated: {{ this.notice.updatedAt }}</span>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'Notice',
+    props: {
+        notice: {
+            type: Object,
+            required: true
+        }
+    },
+}
+</script>
+
+<style scoped>
+.notice {
+    padding: 1.35rem;
+}
+.notice > h4 {
+    margin: 0;
+    font-size: calc(1rem + 0.3vw);
+}
+.time {
+    font-size: calc(0.7rem + 0.1vw);
+}
+.time > span {
+    margin-top: 0.2rem;
+}
+.primary {
+    background-color: #5cdd8b;
+}
+.warning {
+    background-color: #ffc107;
+}
+.danger {
+    background-color: #ff5252;
+}
+.info {
+    background-color: #5ae4ff;
+}
+</style>