kadet/czydojade
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add loading screen

Browse Source
This commit is contained in:
Kacper Donat 2018-09-30 15:27:52 +02:00
parent 73134a0e01
commit 876ac4d715
3 changed files with 32 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
resources/styles/main.scss
View File

@ -38,6 +38,33 @@ body {
main { main {
flex: 1 1 auto; flex: 1 1 auto;
position: relative;
> * {
transition: opacity .3s ease-in-out;
}
}
main::after {
transition: opacity .3s ease-in-out;
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
content: "";
opacity: 0;
background: url("../images/logo.png") center center no-repeat;
}
main.not-ready {
> * {
opacity: 0;
}
&::after {
opacity: 1 !important;
}
} }
.attribution { .attribution {
@ -71,7 +98,7 @@ body {
@include media-breakpoint-up('md') { @include media-breakpoint-up('md') {
#app { #app {
margin-top: 4rem; padding-top: 4rem;
} }
} }

3
resources/ts/app.ts
View File

@ -65,6 +65,9 @@ Vue.use(Vuex);
updateMessages: 'messages/update', updateMessages: 'messages/update',
updateDepartures: 'departures/update' updateDepartures: 'departures/update'
}) })
},
mounted() {
this.$el.classList.remove('not-ready');
} }
}); });
})(); })();

2
templates/base.html.twig
View File

@ -21,7 +21,7 @@
<title>{% block title %}Czy dojadę?{% endblock %}</title> <title>{% block title %}Czy dojadę?{% endblock %}</title>
</head> </head>
<body> <body>
<main role="main" class="container" id="app"> <main role="main" class="container not-ready" id="app">
{% block body %}{% endblock %} {% block body %}{% endblock %}
</main> </main>
<footer class="container"> <footer class="container">