From fb23e5638959292d577bac8a104f61d2f51d8722 Mon Sep 17 00:00:00 2001
From: nclsHart <contact@nclshart.net>
Date: Sat, 24 Jan 2015 16:13:57 +0100
Subject: [PATCH] better rendering of Web UI loading page on small devices

---
 glances/outputs/static/css/style.css   | 61 +++++++++++++++++---------
 glances/outputs/static/html/stats.html |  8 +---
 2 files changed, 43 insertions(+), 26 deletions(-)

diff --git a/glances/outputs/static/css/style.css b/glances/outputs/static/css/style.css
index 8f02af5c..2d852eb8 100644
--- a/glances/outputs/static/css/style.css
+++ b/glances/outputs/static/css/style.css
@@ -100,30 +100,48 @@ body {
 #loading-page .glances-logo {
     background: url('glances.png') no-repeat center center;
     background-size: contain;
-    height: 500px;
 }
 
+@media (max-width: 750px) {
+    #loading-page .glances-logo {
+        height: 400px;
+    }
+}
+@media (min-width: 750px) {
+    #loading-page .glances-logo {
+        height: 500px;
+    }
+}
+
+
+/*
+Loading animation
+source : https://github.com/lukehaas/css-loaders
+*/
 #loading-page .loader:before,
 #loading-page .loader:after,
 #loading-page .loader {
-    width: 10px;
-    height: 10px;
     border-radius: 50%;
+    width: 1em;
+    height: 1em;
     -webkit-animation-fill-mode: both;
     animation-fill-mode: both;
-    -webkit-animation: loading 1.8s infinite ease-in-out;
-    animation: loading 1.8s infinite ease-in-out;
+    -webkit-animation: loader 1.8s infinite ease-in-out;
+    animation: loader 1.8s infinite ease-in-out;
 }
 #loading-page .loader {
     margin: auto;
+    font-size: 10px;
     position: relative;
-    text-indent: -9999px;
+    text-indent: -9999em;
     -webkit-animation-delay: 0.16s;
     animation-delay: 0.16s;
 }
-#loading-page .loader:before { left: -40px }
+#loading-page .loader:before {
+    left: -3.5em;
+}
 #loading-page .loader:after {
-    left: 40px;
+    left: 3.5em;
     -webkit-animation-delay: 0.32s;
     animation-delay: 0.32s;
 }
@@ -133,16 +151,19 @@ body {
     position: absolute;
     top: 0;
 }
-
-@-webkit-keyframes loading {
-    0%,
-    80%,
-    100% { box-shadow: 0 20px 0 -10px #56CA69 }
-    40% { box-shadow: 0 20px 0 0 #56CA69 }
+@-webkit-keyframes loader {
+    0%, 80%, 100% {
+        box-shadow: 0 2.5em 0 -1.3em #56CA69;
+    }
+    40% {
+        box-shadow: 0 2.5em 0 0 #56CA69;
+    }
+}
+@keyframes loader {
+    0%, 80%, 100% {
+        box-shadow: 0 2.5em 0 -1.3em #56CA69;
+    }
+    40% {
+        box-shadow: 0 2.5em 0 0 #56CA69;
+    }
 }
-@keyframes loading {
-    0%,
-    80%,
-    100% { box-shadow: 0 20px 0 -10px #56CA69 }
-    40% { box-shadow: 0 20px 0 0 #56CA69 }
-}
\ No newline at end of file
diff --git a/glances/outputs/static/html/stats.html b/glances/outputs/static/html/stats.html
index 1e384f9e..c2586496 100644
--- a/glances/outputs/static/html/stats.html
+++ b/glances/outputs/static/html/stats.html
@@ -1,10 +1,6 @@
     <div ng-show="!result" class="container-fluid" id="loading-page">
-        <div class="row">
-            <div class="col-sm-6 col-sm-offset-3">
-                <div class="glances-logo"></div>
-                <div class="loader">Loading...</div>
-            </div>
-        </div>
+        <div class="glances-logo"></div>
+        <div class="loader">Loading...</div>
     </div>
     <div ng-show="result" class="container-fluid">
         <div class="row">