Optimize CSS

src/App.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="main">
+  <div class="flex flex-column ai-center main">
-    <div v-if="$data.loading" class="loader-wrapper">
+    <div v-if="$data.loading" class="flex ai-center jc-center loader-wrapper">
       <Loader />
     </div>
-    <div v-if="!$data.loading" class="content-wrapper">
+    <div v-if="!$data.loading" class="flex flex-column jc-center content-wrapper">
       <Header :title="this.config.title" />
-      <OverallStatus class="overall-status" :failedEndpoints="failedEndpoints" />
+      <OverallStatus class="mtop-2" :failedEndpoints="failedEndpoints" />
-      <EndpointGroup class="endpoint-group" v-for="(value, key) in groups" :key="key" :name="key" :endpoints="value" />
+      <EndpointGroup class="mtop-2" v-for="(value, key) in groups" :key="key" :name="key" :endpoints="value" />
     </div>
     <div v-if="!$data.loading">
       <RefreshSettings :defaultRefreshInterval="$data.config.defaultRefreshInterval" v-on:refresh="this.getApiData()" />
@@ -114,17 +114,14 @@ export default {
 </script>
 
 <style scoped>
+.mtop-2 {
+  margin-top: 2rem;
+}
 .main {
   padding-left: 30px;
   padding-right: 30px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
 }
 .loader-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   height: 100vh;
 }
 .content-wrapper {
@@ -132,15 +129,6 @@ export default {
   max-width: 95%;
   margin-top: 1rem;
   margin-bottom: 3rem;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-.overall-status {
-  margin-top: 2rem;
-}
-.endpoint-group {
-  margin-top: 2rem;
 }
 </style>
 
@@ -161,6 +149,24 @@ html {
   color: #2F3545;
   padding: 0;
 }
+.flex {
+  display: flex;
+}
+.jc-center {
+  justify-content: center;
+}
+.jc-space-between {
+  justify-content: space-between;
+}
+.ai-center {
+  align-items: center;
+}
+.flex-column {
+  flex-direction: column;
+}
+.flex-row {
+  flex-direction: row;
+}
 .shadow-box {
   box-shadow: 2px 3px 10px 2px rgb(0 0 0 / 10%);
   padding: 10px;

src/components/Endpoint.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="endpoint">
+  <div class="flex ai-center endpoint">
     <BIconCheckCircleFill class="green icon" v-if="isSuccessfull" />
     <BIconExclamationCircleFill class="orange icon" v-if="!isSuccessfull" />
     <span>{{ endpoint.name }}</span>
@@ -39,8 +39,6 @@ export default {
 
 <style scoped>
 .endpoint {
-  display: flex;
-  align-items: center;
   padding: 10px;
 }
 span {

src/components/EndpointGroup.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="endpoint-group">
+  <div>
     <h3>{{ name }}</h3>
-    <div class="shadow-box list">
+    <div class="flex flex-column shadow-box">
       <Endpoint class="endpoint" v-for="endpoint in endpoints" :key="endpoint.name" :endpoint="endpoint" />
     </div>
   </div>
@@ -29,11 +29,6 @@ export default {
 </script>
 
 <style scoped>
-.list {
-  display: flex;
-  flex-direction: column;
-  justify-items: space-between;
-}
 .endpoint {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;

src/components/EndpointHistory.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="history">
+  <div class="flex flex-row jc-space-between history">
     <div v-for="(result, index) in preparedResults" :key="index" :title="result.timestamp" :class="{blob: true, green: result.success === true, orange: result.success === false, grey: !result.timestamp}"></div>
   </div>
 </template>
@@ -27,9 +27,6 @@ export default {
 
 <style scoped>
 .history {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
  width: 300px;
 }
 .blob {

src/components/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="header">
+  <div class="flex ai-center">
     <img src="/img/logo.png" alt="Logo" class="logo">
     <h2>{{ this.title }}</h2>
   </div>
@@ -18,10 +18,6 @@ export default {
 </script>
 
 <style scoped>
-.header {
-  display: flex;
-  align-items: center;
-}
 .logo {
   width: 60px;
   height: auto;

src/components/OverallStatus.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="shadow-box">
-    <div class="status-wrapper" v-if="this.failedEndpoints.length === 0">
+    <div class="flex ai-center status-wrapper" v-if="this.failedEndpoints.length === 0">
       <BIconCheckCircleFill class="icon green" />
       <span>All services healthy.</span>
     </div>
-    <div class="status-wrapper" v-else>
+    <div class="flex ai-center status-wrapper" v-else>
       <BIconExclamationCircleFill class="icon orange" />
       <span>{{ failedEndpointCountText }}</span>
     </div>
@@ -44,8 +44,6 @@ export default {
 
 <style scoped>
 .status-wrapper {
-  display: flex;
-  align-items: center;
   font-size: 1.3rem;
   margin-left: 10px;
   margin-top: 10px;

src/components/RefreshSettings.vue

@@ -1,6 +1,6 @@
 <template>
-  <div id="settings">
+  <div id="settings" class="flex">
-    <div class="reload-icon">
+    <div class="flex jc-center ai-center reload-icon">
       &#x21bb;
     </div>
     <select id="refresh-rate" ref="refreshInterval" @change="handleChangeRefreshInterval">
@@ -50,7 +50,6 @@ export default {
 
 <style scoped>
 #settings {
-  display: flex;
   position: fixed;
   left: 10px;
   bottom: 10px;
@@ -60,9 +59,6 @@ export default {
   box-shadow: 0 1px 3px 0 rgba(0,0,0,.1);
 }
 .reload-icon {
-  display: flex;
-  justify-content: center;
-  align-items: center;
   padding: 0;
   width: 1.4rem;
   height: 1.4rem;