From 16da1ac25c18e8c1dfd42a95013378ba911a84b3 Mon Sep 17 00:00:00 2001
From: BluemediaGER <oliver@traber-info.de>
Date: Sat, 15 Jan 2022 17:14:01 +0100
Subject: [PATCH] Optimize CSS for mobile devices

---
 src/App.vue                        | 14 ++++++++++-
 src/components/Endpoint.vue        | 40 ++++++++++++++++++++++++++----
 src/components/EndpointHistory.vue |  8 +++++-
 src/components/Header.vue          |  8 ++++++
 src/components/OverallStatus.vue   |  8 ++++++
 5 files changed, 71 insertions(+), 7 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 033c7a3..45b5406 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,7 +9,7 @@
       <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()" />
+      <RefreshSettings class="refresh-settings" :defaultRefreshInterval="$data.config.defaultRefreshInterval" v-on:refresh="this.getApiData()" />
       <Footer />
     </div>
   </div>
@@ -130,6 +130,18 @@ export default {
   margin-top: 1rem;
   margin-bottom: 3rem;
 }
+@media screen and (max-width: 768px) {
+  .main {
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+  .content-wrapper {
+    max-width: 100%;
+  }
+  .refresh-settings {
+    display: none;
+  }
+}
 </style>
 
 <style>
diff --git a/src/components/Endpoint.vue b/src/components/Endpoint.vue
index 057e137..26b9505 100644
--- a/src/components/Endpoint.vue
+++ b/src/components/Endpoint.vue
@@ -1,11 +1,15 @@
 <template>
   <div class="flex ai-center endpoint">
-    <BIconCheckCircleFill class="green icon" v-if="isSuccessfull" />
-    <BIconExclamationCircleFill class="orange icon" v-if="!isSuccessfull" />
-    <span>{{ endpoint.name }}</span>
-    <span class="hostname" v-if="hostname">| {{ hostname }}</span>
+    <div class="flex ai-center info">
+      <BIconCheckCircleFill class="green icon" v-if="isSuccessfull" />
+      <BIconExclamationCircleFill class="orange icon" v-if="!isSuccessfull" />
+      <span>{{ endpoint.name }}</span>
+      <span class="hostname" v-if="hostname">| {{ hostname }}</span>
+    </div>
     <span class="spacer"></span>
-    <EndpointHistory :results="endpoint.results" />
+    <div class="history">
+      <EndpointHistory :results="endpoint.results" />
+    </div>
   </div>
 </template>
 
@@ -56,4 +60,30 @@ span {
 .spacer {
   flex: 1;
 }
+
+@media screen and (max-width: 768px) {
+  .endpoint {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 5px;
+  }
+  .info {
+    flex-direction: row;
+    justify-content: flex-start;
+  }
+  .history {
+    flex-direction: row;
+    align-items: center;
+    width: 100%;
+  }
+  .icon {
+    font-size: 15px;
+  }
+  span {
+    font-size: 15px;
+  }
+  .hostname {
+    display: none;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/EndpointHistory.vue b/src/components/EndpointHistory.vue
index 1f5e928..e507016 100644
--- a/src/components/EndpointHistory.vue
+++ b/src/components/EndpointHistory.vue
@@ -47,6 +47,12 @@ export default {
   background-color: var(--orange);
 }
 .grey {
-  background-color: grey;
+  background-color: var(--grey);
+}
+@media screen and (max-width: 768px) {
+  .history {
+    width: 100%;
+    margin-top: 0.4rem
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 490bcf8..ecdda5a 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -26,4 +26,12 @@ h2 {
   margin: 0;
   margin-left: 20px;
 }
+@media screen and (max-width: 768px) {
+  .logo {
+    width: 40px;
+  }
+  h2 {
+    font-size: 1.2rem;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/OverallStatus.vue b/src/components/OverallStatus.vue
index 7a984ac..34ddcc3 100644
--- a/src/components/OverallStatus.vue
+++ b/src/components/OverallStatus.vue
@@ -55,4 +55,12 @@ export default {
 span {
   margin-left: 1rem;
 }
+@media screen and (max-width: 768px) {
+  .status-wrapper {
+    font-size: 1rem;
+  }
+  .icon {
+    font-size: 20px;
+  }
+}
 </style>
\ No newline at end of file