style playing

lineupjs · sgratzl · Jun 15, 2020 · Sep 7, 2018 · Sep 7, 2018 · Sep 7, 2018
commit b9fd621f13b67850034e7d4b15652c741395aa79
diff --git a/src/index.html b/src/index.html
@@ -80,7 +80,8 @@
 
   <main class="main-wrapper" data-state="initial">
     <div class="lu-c"></div>
-    <div class="container valign-wrapper">
+    <div class="lu-blocker"></div>
+    <div class="container chooser valign-wrapper">
       <div class="row" style="flex: 1 1 auto;">
         <div class="center-align col s12" id="dropper">
           <div class="carousel">

diff --git a/src/index.ts b/src/index.ts
@@ -53,6 +53,8 @@ function build(builder: Promise<IDataset>, session?: ISession | null) {
     if (location.hash !== next) {
       location.assign(next);
     }
+    return new Promise<any>((resolve) => setTimeout(resolve, 1000));
+  }).then(() => {
     uploader.dataset.state = 'ready';
   }).catch((error) => {
     uploader.dataset.state = 'initial';

diff --git a/src/styles/_app.scss b/src/styles/_app.scss
@@ -10,6 +10,10 @@ body {
   flex-direction: column;
 }
 
+.nav-wrapper {
+  z-index: 200;
+}
+
 .main-wrapper {
   flex: 1 0 auto;
   position: relative;
@@ -19,7 +23,23 @@ body {
   > div {
     flex: 1 1 auto;
     opacity: 1;
-    transition: opacity 0.5s ease;
+    transition: opacity 0.5s ease, background 0.5s ease;
+  }
+
+  .lu-blocker {
+    opacity: 0;
+    z-index: 100;
+    visibility: hidden;
+    background: rgba(255, 255, 255, 0.9);
+    position: absolute;
+    top: 3px;
+    left: 0;
+    right: 0;
+    bottom: 3px;
+  }
+
+  .chooser {
+    z-index: 101;
   }
 
   &[data-state=initial] {
@@ -36,6 +56,11 @@ body {
     .lu {
       visibility: visible;
     }
+
+    .lu-blocker {
+      visibility: visible;
+      opacity: 1;
+    }
   }
 
   &[data-state=ready] {