KevinMidboe/zoff
1
0
Fork 0
mirror of https://github.com/KevinMidboe/zoff.git synced 2025-10-29 18:00:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added a load-screen, will test for some time and see if it helps any

Browse Source
This commit is contained in:
Kasper Rynning-Tønnesen
2018-08-08 16:20:23 +02:00
parent 795146af88
commit 5c12c2f261
2 changed files with 189 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
server/public/assets/css/style.css
View File

@@ -25,6 +25,17 @@ a {
outline: 0 !important;
}
.initial-load {
display: none !important;
}
body {
height: auto !important;
overflow: initial !important;
}
#main-container, footer {
display: initial !important;
}
.error-code-container {
background: lightgrey;
border: 1px solid darkgrey;

179
server/public/layouts/client/main.handlebars
View File

@@ -31,7 +31,7 @@
<link rel="mask-icon" href="/assets/images/safari-pinned-tab.svg" color="#2d2d2d">
{{/unless}}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="/assets/css/{{stylesheet}}">
<link rel="stylesheet" type="text/css" href="/assets/css/{{stylesheet}}" title="Default" media="none" onload="if(media!='all')media='all'">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" media="none" onload="if(media!='all')media='all'">
{{#unless embed}}
<script async type="text/javascript">
@@ -49,6 +49,172 @@
}
</script>
{{/unless}}
<style>
@-webkit-keyframes uil-ring-anim {
0% {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes uil-ring-anim {
0% {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes uil-ring-anim {
0% {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-ms-keyframes uil-ring-anim {
0% {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-moz-keyframes uil-ring-anim {
0% {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes uil-ring-anim {
0% {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-o-keyframes uil-ring-anim {
0% {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes uil-ring-anim {
0% {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#loading-text {
color: white;
font-size: 1.5rem;
}
.uil-ring-css {
background: none;
width: 300px;
height: 300px;
transform: scale(.7);
position: absolute;
margin: auto;
}
.uil-ring-css > div {
position: absolute;
width: 300px;
height: 300px;
border: 50px solid white;
border-radius: 50%;
border-bottom-color: transparent;
border-left-color: transparent;
transform: rotate(-45deg);
-moz-animation: uil-ring-anim 1s linear infinite;
-webkit-animation: uil-ring-anim 1s linear infinite;
-o-animation: uil-ring-anim 1s linear infinite;
animation: uil-ring-anim 1s linear infinite
}
body {
height: 100vh;
overflow: hidden;
}
#main-container, footer {
display: none;
}
</style>
</head>
<body class="noselect">
{{{body}}}
@@ -79,6 +245,17 @@
</li>
</ul>
<div id="context-menu-overlay" class="hide"></div>
<div class="initial-load" style="height: 100vh;
width: 100vw;
background: #2d2d2d;
display: flex;
justify-content: center;
align-items: center;">
<div class="uil-ring-css" style="transform:scale(0.7);">
<div></div>
</div>
<p id="loading-text">Loading</p>
</div>
{{/unless}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.0/socket.io.slim.js"></script>