Skip to content

N
nexpie-grafana-theme
Commit f916add0 by Patrick O'Carroll
Options

fixed styling for background and text, added intro animation, added fade in to text

parent dd8076f2
Showing with 79 additions and 7 deletions
public/views/index.template.html
...@@ -23,6 +23,13 @@ ...@@ -23,6 +23,13 @@
<body class="theme-[[ .Theme ]]"> <body class="theme-[[ .Theme ]]">
<style> <style>
body {
margin: 0;
height: 100%;
width: 100%;
position: absolute;
}
.preloader { .preloader {
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
...@@ -31,6 +38,20 @@ ...@@ -31,6 +38,20 @@
align-items: center; align-items: center;
} }
.preloader--light {
background: linear-gradient(-60deg, #f7f8fa, #f5f6f9 70%, #f7f8fa 98%);
}
.preloader--dark {
background: linear-gradient(180deg, #222426 10px, #161719 100px);
}
.preloader__enter {
animation-name: first-bounce;
animation-duration: .9s;
animation-iteration-count: 1;
}
.preloader__bounce { .preloader__bounce {
animation-name: preloader-bounce; animation-name: preloader-bounce;
animation-duration: .9s; animation-duration: .9s;
...@@ -53,6 +74,48 @@ ...@@ -53,6 +74,48 @@
margin-top: 16px; margin-top: 16px;
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
font-family: 'Roboto';
opacity: 0;
animation-name: text-fade-in;
animation-duration: 1.35s;
animation-iteration-count: 1;
animation-delay: .45s;
animation-fill-mode: forwards;
}
.preloader__text--light {
color: #52545c;
}
.preloader__text--dark {
color: #d8d9da;
}
@keyframes first-bounce {
0% {
transform: translateY(100px);
opacity: 0;
animation-timing-function: cubic-bezier(0.3, 0.0, 0.1, 1)
}
50% {
transform: translateY(-50px);
opacity: .8;
animation-timing-function: cubic-bezier(.9, 0, .7, 1)
}
100% {
transform: translateY(0px);
opacity: 1;
}
}
@keyframes text-fade-in {
0% {
opacity: 0;
animation-timing-function: cubic-bezier(0, 0, .2, .9)
}
100% {
opacity: 1;
}
} }
@keyframes preloader-bounce { @keyframes preloader-bounce {
...@@ -94,14 +157,22 @@ ...@@ -94,14 +157,22 @@
animation-timing-function: cubic-bezier(0, 0, 0.7, 1); animation-timing-function: cubic-bezier(0, 0, 0.7, 1);
} }
} }
[ng\:cloak],
[ng-cloak],
.ng-cloak {
display: none !important;
}
</style> </style>
<div class="preloader"> <div class="preloader preloader--[[ .Theme ]]">
<div class="preloader__enter">
<div class="preloader__bounce"> <div class="preloader__bounce">
<div class="preloader__logo"> <div class="preloader__logo">
</div> </div>
</div> </div>
<div class="preloader__text">Loading Grafana</div> </div>
<div class="preloader__text preloader__text--[[ .Theme ]]">Loading Grafana</div>
</div> </div>
<grafana-app class="grafana-app" ng-cloak> <grafana-app class="grafana-app" ng-cloak>
...@@ -171,15 +242,15 @@ ...@@ -171,15 +242,15 @@
settings: [[.Settings]], settings: [[.Settings]],
navTree: [[.NavTree]] navTree: [[.NavTree]]
}; };
console.log([[ .Theme]]);
// load css async // load css async
var myCSS = document.createElement( "link" ); var myCSS = document.createElement("link");
myCSS.rel = "stylesheet"; myCSS.rel = "stylesheet";
myCSS.href = "public/build/grafana.[[ .Theme ]].css?v[[ .BuildVersion ]]+[[ .BuildCommit ]]"; myCSS.href = "public/build/grafana.[[ .Theme ]].css?v[[ .BuildVersion ]]+[[ .BuildCommit ]]";
// insert it at the end of the head in a legacy-friendly manner
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );
</script>
[[if .GoogleTagManagerId]] // insert it at the end of the head in a legacy-friendly manner
document.head.insertBefore(myCSS, document.head.childNodes[document.head.childNodes.length - 1].nextSibling);
</script> [[if .GoogleTagManagerId]]
<script> <script>
dataLayer = [{ dataLayer = [{
'IsSignedIn': '[[.User.IsSignedIn]]', 'IsSignedIn': '[[.User.IsSignedIn]]',
...@@ -202,4 +273,5 @@ ...@@ -202,4 +273,5 @@
[[end]] [[end]]
</body> </body>
</html> </html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment