leonetienne/Tubio
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed that horrendous "please wait" blocker... Also updated favicon

Browse Source
This commit is contained in:
Leon Etienne (ubuntu wsl) 2021-01-23 21:23:56 +01:00
parent 486064cef3
commit 267e8b6151
4 changed files with 64 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
tubio-frontend-nuxt-app/assets/css/modular.css Normal file
View File

@ -0,0 +1,4 @@
.inherit-all {
all: inherit;
}

37
tubio-frontend-nuxt-app/components/PleaseWaitBlocker.vue
View File

@ -1,13 +1,15 @@
<template> <template>
<div class="click-blocker flex justify-center md:items-center"> <div class="click-blocker flex justify-center md:items-center">
<div class="box"> <div class="box">
<h2 class="mt-2">Please wait...</h2>
<div class="dots flex w-full justify-center items-center"> <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 class="dot" />
<div class="dot" /> <div class="dot" />
</div> </div>
</div>
</div> </div>
</div> </div>
@ -30,15 +32,10 @@ export default {
.box { .box {
position: absolute; position: absolute;
top: 200px; top: 0;
bottom: 200px; left: 0;
left: 200px; right: 0;
right: 200px; height: 60%;
max-height: 70vh;
background-color: #586679;
opacity: 0.95;
border-radius: 5px;
border: 2px solid theme("colors.gray-1");
overflow: hidden; overflow: hidden;
@media (max-width: theme('screens.xl')) { @media (max-width: theme('screens.xl')) {
@ -69,8 +66,6 @@ export default {
} }
& .dots { & .dots {
margin-top: 250px;
@media (max-width: theme('screens.md')) { @media (max-width: theme('screens.md')) {
margin-top: 50px; margin-top: 50px;
} }
@ -99,15 +94,15 @@ export default {
} }
@media (max-width: theme('screens.md')) { @media (max-width: theme('screens.md')) {
width: 10px; width: 30px;
height: 10px; height: 30px;
&:not(:first-child) { &:not(:first-child) {
margin-left: 5px; margin-left: 15px;
} }
&:not(:last-child) { &: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 { @keyframes dot-hover {

1
tubio-frontend-nuxt-app/nuxt.config.js
View File

@ -33,6 +33,7 @@ export default {
css: [ css: [
"~/assets/css/reset.css", "~/assets/css/reset.css",
"~/assets/css/main.css", "~/assets/css/main.css",
"~/assets/css/modular.css",
"~/assets/css/fonts/zilla-slab.css" "~/assets/css/fonts/zilla-slab.css"
], ],

5
tubio-frontend-nuxt-app/pages/index.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<div> <div>
<span class="inherit-all" v-if="!isWaitingForResponse">
<div class="hidden md:block"> <div class="hidden md:block">
<Spacer height="0" m_height="1em" /> <Spacer height="0" m_height="1em" />
<Logo class="logo mt-4" /> <Logo class="logo mt-4" />
@ -34,8 +35,8 @@
<Spacer height="2em" m_height="2em" /> <Spacer height="2em" m_height="2em" />
<DownloadBox /> <DownloadBox />
</span>
<PleaseWaitBlocker v-if="isWaitingForResponse" /> <PleaseWaitBlocker v-else />
</div> </div>
</template> </template>