From 267e8b6151c21f92b75843e9806d407e1d11ae26 Mon Sep 17 00:00:00 2001
From: "Leon Etienne (ubuntu wsl)" <leonetienne@hotmail.de>
Date: Sat, 23 Jan 2021 21:23:56 +0100
Subject: [PATCH] Fixed that horrendous "please wait" blocker... Also updated
 favicon

---
 .../assets/css/modular.css                    |  4 ++
 .../components/PleaseWaitBlocker.vue          | 45 ++++++------
 tubio-frontend-nuxt-app/nuxt.config.js        |  1 +
 tubio-frontend-nuxt-app/pages/index.vue       | 69 ++++++++++---------
 4 files changed, 64 insertions(+), 55 deletions(-)
 create mode 100644 tubio-frontend-nuxt-app/assets/css/modular.css

diff --git a/tubio-frontend-nuxt-app/assets/css/modular.css b/tubio-frontend-nuxt-app/assets/css/modular.css
new file mode 100644
index 0000000..7f97456
--- /dev/null
+++ b/tubio-frontend-nuxt-app/assets/css/modular.css
@@ -0,0 +1,4 @@
+.inherit-all {
+    all: inherit;
+}
+  
\ No newline at end of file
diff --git a/tubio-frontend-nuxt-app/components/PleaseWaitBlocker.vue b/tubio-frontend-nuxt-app/components/PleaseWaitBlocker.vue
index 6ab19ec..b301976 100644
--- a/tubio-frontend-nuxt-app/components/PleaseWaitBlocker.vue
+++ b/tubio-frontend-nuxt-app/components/PleaseWaitBlocker.vue
@@ -1,12 +1,14 @@
 <template>
     <div class="click-blocker flex justify-center md:items-center">
         <div class="box">
-            <h2 class="mt-2">Please wait...</h2>
-        
-            <div class="dots flex w-full justify-center items-center">
-                <div class="dot" />
-                <div class="dot" />
-                <div class="dot" />
+
+            <div class="w-full h-full flex flex-col justify-center items-center">
+              <h2 class="loading-text">Just a second...</h2>
+              <div class="dots flex w-full justify-center items-center mt-24">
+                  <div class="dot" />
+                  <div class="dot" />
+                  <div class="dot" />
+              </div>
             </div>
 
         </div>        
@@ -30,15 +32,10 @@ export default {
 
 .box {
   position: absolute;
-  top: 200px;
-  bottom: 200px;
-  left: 200px;
-  right: 200px;
-  max-height: 70vh;
-  background-color: #586679;
-  opacity: 0.95;
-  border-radius: 5px;
-  border: 2px solid theme("colors.gray-1");
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 60%;
   overflow: hidden;
 
   @media (max-width: theme('screens.xl')) {
@@ -69,8 +66,6 @@ export default {
   }
 
   & .dots {
-    margin-top: 250px;
-
     @media (max-width: theme('screens.md')) {
       margin-top: 50px;
     }
@@ -99,15 +94,15 @@ export default {
       }
 
       @media (max-width: theme('screens.md')) {
-        width: 10px;
-        height: 10px;
+        width: 30px;
+        height: 30px;
 
         &:not(:first-child) {
-          margin-left: 5px;
+          margin-left: 15px;
         }
 
         &:not(:last-child) {
-          margin-right: 5px;
+          margin-right: 15px;
         }
       }
 
@@ -124,6 +119,14 @@ export default {
       }
     }
   }
+
+  & .loading-text {
+    font-size: 36pt;
+
+    @media (max-width: theme('screens.md')) {
+      font-size: 24pt;
+    }
+  }
 }
 
 @keyframes dot-hover {
diff --git a/tubio-frontend-nuxt-app/nuxt.config.js b/tubio-frontend-nuxt-app/nuxt.config.js
index 7dcdacd..eec1078 100644
--- a/tubio-frontend-nuxt-app/nuxt.config.js
+++ b/tubio-frontend-nuxt-app/nuxt.config.js
@@ -33,6 +33,7 @@ export default {
   css: [
     "~/assets/css/reset.css",
     "~/assets/css/main.css",
+    "~/assets/css/modular.css",
     "~/assets/css/fonts/zilla-slab.css"
   ],
 
diff --git a/tubio-frontend-nuxt-app/pages/index.vue b/tubio-frontend-nuxt-app/pages/index.vue
index 8abd993..c541f9c 100644
--- a/tubio-frontend-nuxt-app/pages/index.vue
+++ b/tubio-frontend-nuxt-app/pages/index.vue
@@ -1,41 +1,42 @@
 <template>
   <div>
+    
+    <span class="inherit-all" v-if="!isWaitingForResponse">
+      <div class="hidden md:block">
+        <Spacer height="0" m_height="1em" />
+        <Logo class="logo mt-4" />
+        <Spacer height="2em" m_height="2em" />
+      </div>
+
+      <div class="flex flex-row flex-wrap md:flex-no-wrap  input-flex justify-between md:justify-center">
+        <input class="flex-grow md:mr-4 mb-2 md:mb-0 w-full"
+          type="url"
+          name="video_url"
+          id="video_url"
+          ref="video_url"
+          placeholder="video-url"
+          v-on:keydown="keyMonitor"
+        />
+
+        <div class="w-full md:hidden" />
+
+        <div class="flex-shrink button-submit flex-grow-0">
+          <select name="mode" id="mode" ref="mode" class="dropdown">
+            <option value="video">Video</option>
+            <option value="audio">Audio</option>
+          </select>
+        </div>
+
+        <div class="button flex-shrink button-submit flex-grow-0 ml-3" v-on:click="downloadButtonClicked">
+          <IconArrowRightSquare class="icon-button" />
+        </div>
+
+      </div>
 
-    <div class="hidden md:block">
-      <Spacer height="0" m_height="1em" />
-      <Logo class="logo mt-4" />
       <Spacer height="2em" m_height="2em" />
-    </div>
-
-    <div class="flex flex-row flex-wrap md:flex-no-wrap  input-flex justify-between md:justify-center">
-      <input class="flex-grow md:mr-4 mb-2 md:mb-0 w-full"
-        type="url"
-        name="video_url"
-        id="video_url"
-        ref="video_url"
-        placeholder="video-url"
-        v-on:keydown="keyMonitor"
-      />
-
-      <div class="w-full md:hidden" />
-
-      <div class="flex-shrink button-submit flex-grow-0">
-        <select name="mode" id="mode" ref="mode" class="dropdown">
-          <option value="video">Video</option>
-          <option value="audio">Audio</option>
-        </select>
-      </div>
-
-      <div class="button flex-shrink button-submit flex-grow-0 ml-3" v-on:click="downloadButtonClicked">
-        <IconArrowRightSquare class="icon-button" />
-      </div>
-
-    </div>
-
-    <Spacer height="2em" m_height="2em" />
-    <DownloadBox />
-
-    <PleaseWaitBlocker v-if="isWaitingForResponse" />
+      <DownloadBox />
+    </span>
+    <PleaseWaitBlocker v-else />
 
   </div>
 </template>