Fade in logo after a delay

d89a47b0 · JC Brand · cfcab801 · d89a47b0 · d89a47b0 · d89a47b0
Commit d89a47b0 authored Sep 07, 2018 by JC Brand
Show whitespace changes
Inline Side-by-side

Showing with 22 additions and 2 deletions

css/converse.css css/converse.css +13 -1

fullscreen.html fullscreen.html +5 -1

sass/_core.scss sass/_core.scss +4 -0

No files found.
--- a/css/converse.css
+++ b/css/converse.css
@@ -8633,7 +8633,19 @@ body.reset {
 .converse-brand {
  display: flex;
-  justify-content: space-between; }
+  justify-content: space-between;
+  -webkit-animation-name: fadein;
+  -moz-animation-name: fadein;
+  animation-name: fadein;
+  -webkit-animation-fill-mode: forwards;
+  -moz-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  -webkit-animation-duration: 750ms;
+  -moz-animation-duration: 750ms;
+  animation-duration: 750ms;
+  -webkit-animation-timing-function: ease;
+  -moz-animation-timing-function: ease;
+  animation-timing-function: ease; }
 .converse-brand__padding {
  position: relative;

--- a/fullscreen.html
+++ b/fullscreen.html
@@ -12,7 +12,7 @@
    <script src="dist/converse.js"></script>
 </head>
 <body class="reset">
-    <div class="content">
+    <div class="converse-content" style="display:none">
        <div class="inner-content converse-brand row">
            <div class="converse-brand__padding"></div>
            <div class="converse-brand__heading">
@@ -60,6 +60,10 @@
        bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
        message_archiving: 'always',
        view_mode: 'fullscreen'
+    }).then(function () {
+        setTimeout(function () {
+            document.querySelector('.converse-content').style = '';
+        }, 1000);
    });
 </script>
 </body>

--- a/sass/_core.scss
+++ b/sass/_core.scss
@@ -43,6 +43,10 @@ body.reset {
 .converse-brand {
    display: flex;
    justify-content: space-between;
+    @include animation-name(fadein);
+    @include animation-fill-mode(forwards);
+    @include animation-duration(750ms);
+    @include animation-timing-function(ease);
 }
 .converse-brand__padding {