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 @@
<body class="theme-[[ .Theme ]]">
<style>
body {
margin: 0;
height: 100%;
width: 100%;
position: absolute;
}
.preloader {
height: 100%;
flex-direction: column;
......@@ -31,6 +38,20 @@
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 {
animation-name: preloader-bounce;
animation-duration: .9s;
......@@ -53,6 +74,48 @@
margin-top: 16px;
font-weight: 500;
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 {
......@@ -94,14 +157,22 @@
animation-timing-function: cubic-bezier(0, 0, 0.7, 1);
}
}
[ng\:cloak],
[ng-cloak],
.ng-cloak {
display: none !important;
}
</style>
<div class="preloader">
<div class="preloader preloader--[[ .Theme ]]">
<div class="preloader__enter">
<div class="preloader__bounce">
<div class="preloader__logo">
</div>
</div>
<div class="preloader__text">Loading Grafana</div>
</div>
<div class="preloader__text preloader__text--[[ .Theme ]]">Loading Grafana</div>
</div>
<grafana-app class="grafana-app" ng-cloak>
......@@ -171,15 +242,15 @@
settings: [[.Settings]],
navTree: [[.NavTree]]
};
console.log([[ .Theme]]);
// load css async
var myCSS = document.createElement( "link" );
var myCSS = document.createElement("link");
myCSS.rel = "stylesheet";
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>
dataLayer = [{
'IsSignedIn': '[[.User.IsSignedIn]]',
......@@ -202,4 +273,5 @@
[[end]]
</body>
</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