Styled DownloadEntry and fixed responsiveness
This commit is contained in:
Leon Etienne (ubuntu wsl)
parent
e2338f423c
commit
189dc71c32
@ -1,14 +1,44 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="download-box">
|
<div class="download-box">
|
||||||
<h2 class="no-dls-yet mt-2">No downloads yet...</h2>
|
<h2 v-if="false" class="no-dls-yet mt-2">No downloads yet...</h2>
|
||||||
|
|
||||||
|
<DownloadEntry />
|
||||||
|
<DownloadEntry />
|
||||||
|
<DownloadEntry />
|
||||||
|
<DownloadEntry />
|
||||||
|
<DownloadEntry />
|
||||||
|
<DownloadEntry />
|
||||||
|
<DownloadEntry />
|
||||||
|
<DownloadEntry />
|
||||||
|
<DownloadEntry />
|
||||||
|
<DownloadEntry />
|
||||||
|
<DownloadEntry />
|
||||||
|
<DownloadEntry />
|
||||||
|
<DownloadEntry />
|
||||||
|
<DownloadEntry />
|
||||||
|
<DownloadEntry />
|
||||||
|
<DownloadEntry />
|
||||||
|
<DownloadEntry />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import DownloadEntry from "~/components/DownloadEntry";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
DownloadEntry,
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.download-box {
|
.download-box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 600px;
|
min-height: 600px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
padding: 20px;
|
||||||
background-color: #fff5;
|
background-color: #fff5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
266
tubio-frontend-nuxt-app/components/DownloadEntry.vue
Normal file
266
tubio-frontend-nuxt-app/components/DownloadEntry.vue
Normal file
@ -0,0 +1,266 @@
|
|||||||
|
<template>
|
||||||
|
<div class="frame mb-6 pt-2 pb-4">
|
||||||
|
|
||||||
|
<div class="flex flex-col">
|
||||||
|
|
||||||
|
<div class="flex items-end justify-between w-full md:w-auto">
|
||||||
|
<div class="timestamp">
|
||||||
|
20.09.2020
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="button-remove">
|
||||||
|
<IconX />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col-reverse md:flex-row w-full mt-2">
|
||||||
|
|
||||||
|
<div class="flex flex-col">
|
||||||
|
<a href="www.youtube.de" title="To the original source">
|
||||||
|
<div class="thumbnail flex-shrink-0">
|
||||||
|
<div class="thumbnail__vignette" />
|
||||||
|
<div class="thumbnail__duration">29:30</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Progressbar -->
|
||||||
|
<div v-if="false">
|
||||||
|
<div class="status--progressbar flex w-full mt-3">
|
||||||
|
<div class="status--progressbar__good items-stretch"></div>
|
||||||
|
</div>
|
||||||
|
<div class="status--progressbar__text">
|
||||||
|
69%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Ready -->
|
||||||
|
<a v-if="true" href="" title="download">
|
||||||
|
<div class="status--ready mt-3 button flex justify-center w-full">
|
||||||
|
<div>
|
||||||
|
<IconDownload />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Queued -->
|
||||||
|
<div v-if="false">
|
||||||
|
<div class="status--queued mt-3">
|
||||||
|
Queued
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Failed -->
|
||||||
|
<div v-if="false">
|
||||||
|
<div class="status--failed mt-3">
|
||||||
|
Failed!
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex flex-col md:ml-4 overflow-x-hidden">
|
||||||
|
<h1 class="title pr">Versengold - Thekenmädchen (Offizielles Video) Versengold - Thekenmädchen (Offizielles Video) Versengold - Thekenmädchen (Offizielles Video)</h1>
|
||||||
|
|
||||||
|
<div class="relative my-4">
|
||||||
|
<p class="description p-2">
|
||||||
|
Thekenmädchen - Die zweite Single aus dem neuen Album "NORDLICHT". Album-Release: 28.06.2019
|
||||||
|
Hier das Album vorbestellen: https://Versengold.lnk.to/Nordlicht
|
||||||
|
Hier gehts zur Fanbox: https://Versengold.lnk.to/Nordlicht_Box
|
||||||
|
|
||||||
|
Hol dir den Song "Thekenmädchen" jetzt hier: https://Versengold.lnk.to/Thekenmaedchen
|
||||||
|
|
||||||
|
Mehr Informationen unter:
|
||||||
|
Webseite: http://www.versengold.com/
|
||||||
|
Facebook: https://www.facebook.com/Versengold
|
||||||
|
</p>
|
||||||
|
<div class="description__decobox description__decobox--left" />
|
||||||
|
<div class="description__decobox description__decobox--right" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import IconDownload from "~/components/Icons/download.vue";
|
||||||
|
import IconX from "~/components/Icons/x.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
IconDownload,
|
||||||
|
IconX
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.frame {
|
||||||
|
width: 100%;
|
||||||
|
border-bottom: 2px solid theme("colors.gray-1");
|
||||||
|
|
||||||
|
& .timestamp {
|
||||||
|
font-family: ZillaSlab, serif;
|
||||||
|
font-size: 12pt;
|
||||||
|
color: theme("colors.text-gray-1");
|
||||||
|
}
|
||||||
|
|
||||||
|
& .thumbnail {
|
||||||
|
background-image: url("https://i.ytimg.com/vi/wgfNsek8xkc/hqdefault.jpg?sqp=-oaymwEZCNACELwBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLBrNQptU-Ni4VWrrsCm689gPnm2ww");
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
width: 150px;
|
||||||
|
height: calc(150px * (9 / 16));
|
||||||
|
position: relative;
|
||||||
|
transition: transform 0.2s;
|
||||||
|
cursor: pointer;
|
||||||
|
scrollbar-width: none;
|
||||||
|
|
||||||
|
@media (max-width: theme('screens.md')) {
|
||||||
|
width: 100%;
|
||||||
|
height: 130px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
&__vignette {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
left: 0;
|
||||||
|
box-shadow: 0 0 15px 2px #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__duration {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 3px;
|
||||||
|
right: 3px;
|
||||||
|
text-align: right;
|
||||||
|
font-size: 12pt;
|
||||||
|
color: theme("colors.text-gray-1");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& .title {
|
||||||
|
color: theme("colors.text-gray-1");
|
||||||
|
font-size: 22pt;
|
||||||
|
max-height: 1.05em;
|
||||||
|
overflow-x: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
transition: transform 20s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
overflow: visible;
|
||||||
|
transform: translateX(-200%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& .description {
|
||||||
|
color: theme("colors.text-gray-1");
|
||||||
|
font-size: 14pt;
|
||||||
|
height: 100px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: scroll;
|
||||||
|
position: relative;
|
||||||
|
background-color: #0003;
|
||||||
|
|
||||||
|
@media (max-width: theme('screens.md')) {
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__decobox {
|
||||||
|
position: absolute;
|
||||||
|
|
||||||
|
&--left {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-top: 2px solid theme("colors.gray-1");
|
||||||
|
border-left: 2px solid theme("colors.gray-1");
|
||||||
|
}
|
||||||
|
|
||||||
|
&--right {
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
border-bottom: 2px solid theme("colors.gray-1");
|
||||||
|
border-right: 2px solid theme("colors.gray-1");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& .status {
|
||||||
|
&--progressbar {
|
||||||
|
background-color: #900;
|
||||||
|
height: 5px;
|
||||||
|
|
||||||
|
&__good {
|
||||||
|
background-color: #0b0;
|
||||||
|
width: 50%; // Download progress
|
||||||
|
}
|
||||||
|
|
||||||
|
&__text {
|
||||||
|
font-size: 24pt;
|
||||||
|
color: theme("colors.text-gray-1");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--ready {
|
||||||
|
height: 45px;
|
||||||
|
background-color: theme("colors.text-gray-1");
|
||||||
|
transition:
|
||||||
|
background-color 0.2s,
|
||||||
|
border 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: theme("colors.purple-1");
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
& svg {
|
||||||
|
height: 35px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&--queued {
|
||||||
|
font-family: ZillaSlab, serif;
|
||||||
|
font-size: 24pt;
|
||||||
|
color: theme("colors.text-gray-1");
|
||||||
|
}
|
||||||
|
|
||||||
|
&--failed {
|
||||||
|
font-family: ZillaSlab, serif;
|
||||||
|
font-size: 24pt;
|
||||||
|
color: theme("colors.text-error-1");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
& .button-remove {
|
||||||
|
width: 35px;
|
||||||
|
height: 35px;
|
||||||
|
fill: theme("colors.gray-0");
|
||||||
|
stroke: theme("colors.gray-0");
|
||||||
|
cursor: pointer;
|
||||||
|
transition:
|
||||||
|
background-color 0.2s,
|
||||||
|
border-radius 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #d40;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar,
|
||||||
|
& *::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
6
tubio-frontend-nuxt-app/components/Icons/download.vue
Normal file
6
tubio-frontend-nuxt-app/components/Icons/download.vue
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<template>
|
||||||
|
<svg viewBox="0 0 16 16" class="bi bi-download" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
|
||||||
|
<path fill-rule="evenodd" d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
5
tubio-frontend-nuxt-app/components/Icons/x.vue
Normal file
5
tubio-frontend-nuxt-app/components/Icons/x.vue
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<template>
|
||||||
|
<svg viewBox="0 0 16 16" class="bi bi-x" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path fill-rule="evenodd" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
|
||||||
|
</svg>
|
||||||
|
</template>
|
||||||
@ -22,7 +22,7 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="css" scoped>
|
<style lang="scss" scoped>
|
||||||
.main-column {
|
.main-column {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
padding: 0 20% 50px 20%;
|
padding: 0 20% 50px 20%;
|
||||||
@ -30,6 +30,18 @@ export default {
|
|||||||
box-shadow: 0 0 50px 50px #0005;
|
box-shadow: 0 0 50px 50px #0005;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
|
||||||
|
@media (max-width: theme('screens.fhd')) {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 20px;
|
||||||
|
padding: 0 200px 50px 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: theme('screens.xl')) {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 20px;
|
||||||
|
padding: 0 100px 50px 100px;
|
||||||
|
}
|
||||||
|
|
||||||
@media (max-width: theme('screens.md')) {
|
@media (max-width: theme('screens.md')) {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
<div>
|
<div>
|
||||||
|
|
||||||
<div class="hidden md:block">
|
<div class="hidden md:block">
|
||||||
<Spacer height="5em" m_height="1em" />
|
<Spacer height="2em" m_height="1em" />
|
||||||
<Logo class="logo mt-4" />
|
<Logo class="logo mt-4" />
|
||||||
<Spacer height="2em" m_height="2em" />
|
<Spacer height="2em" m_height="2em" />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -10,13 +10,17 @@ module.exports = {
|
|||||||
'black': '#000',
|
'black': '#000',
|
||||||
'white': '#fff',
|
'white': '#fff',
|
||||||
|
|
||||||
|
'gray-0': '#333',
|
||||||
|
'gray-1': '#888',
|
||||||
|
|
||||||
'purple-0': '#04254e',
|
'purple-0': '#04254e',
|
||||||
'purple-1': '#5954a4',
|
'purple-1': '#5954a4',
|
||||||
'purple-2': '#8a54a2',
|
'purple-2': '#8a54a2',
|
||||||
'purple-3': '#8ad5eb',
|
'purple-3': '#8ad5eb',
|
||||||
'purple-3-1': '#bee7f4',
|
'purple-3-1': '#bee7f4',
|
||||||
|
|
||||||
'text-gray-1': '#bbb'
|
'text-gray-1': '#bbb',
|
||||||
|
'text-error-1': '#d40'
|
||||||
},
|
},
|
||||||
|
|
||||||
screens: {
|
screens: {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user