add loading screen

2018-09-30 15:27:52 +02:00 · 2018-09-30 15:27:52 +02:00 · 876ac4d715
commit 876ac4d715
parent 73134a0e01
3 changed files with 32 additions and 2 deletions
--- a/resources/styles/main.scss
+++ b/resources/styles/main.scss
@ -38,6 +38,33 @@ body {

  main {
    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 {
@ -71,7 +98,7 @@ body {

@include media-breakpoint-up('md') {
  #app {
-    margin-top: 4rem;
+    padding-top: 4rem;
  }
 }

--- a/resources/ts/app.ts
+++ b/resources/ts/app.ts
@ -65,6 +65,9 @@ Vue.use(Vuex);
                updateMessages:   'messages/update',
                updateDepartures: 'departures/update'
            })
+        },
+        mounted() {
+            this.$el.classList.remove('not-ready');
        }
    });
 })();
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@ -21,7 +21,7 @@
        <title>{% block title %}Czy dojadę?{% endblock %}</title>
    </head>
    <body>
-        <main role="main" class="container" id="app">
+        <main role="main" class="container not-ready" id="app">
            {% block body %}{% endblock %}
        </main>
        <footer class="container">