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;
}

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

@ -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 {

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

@ -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"
],

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

@ -1,41 +1,42 @@
<template>
<div>
<div class="hidden md:block">
<Spacer height="0" m_height="1em" />
<Logo class="logo mt-4" />
<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>
<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>