mirror/glances
1
0
Fork 0
mirror of https://github.com/nicolargo/glances.git synced 2026-03-16 04:52:30 -04:00
Code Issues Packages Projects Releases Wiki Activity

better rendering of Web UI loading page on small devices

Browse Source
This commit is contained in:
nclsHart
2015-01-24 16:13:57 +01:00
parent 5c531cd82d
commit fb23e56389
2 changed files with 43 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
glances/outputs/static/css/style.css
View File

@@ -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 }
}

8
glances/outputs/static/html/stats.html
View File

@@ -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">