From 189dc71c3249aae2c2a6a45e9ed2cfd8ddfca686 Mon Sep 17 00:00:00 2001
From: "Leon Etienne (ubuntu wsl)" <leonetienne@hotmail.de>
Date: Wed, 30 Sep 2020 02:20:11 +0200
Subject: [PATCH] Styled DownloadEntry and fixed responsiveness

---
 .../components/DownloadBox.vue                |  32 ++-
 .../components/DownloadEntry.vue              | 266 ++++++++++++++++++
 .../components/Icons/download.vue             |   6 +
 .../components/Icons/x.vue                    |   5 +
 tubio-frontend-nuxt-app/layouts/default.vue   |  14 +-
 tubio-frontend-nuxt-app/pages/index.vue       |   2 +-
 tubio-frontend-nuxt-app/tailwind.config.js    |   6 +-
 7 files changed, 327 insertions(+), 4 deletions(-)
 create mode 100644 tubio-frontend-nuxt-app/components/DownloadEntry.vue
 create mode 100644 tubio-frontend-nuxt-app/components/Icons/download.vue
 create mode 100644 tubio-frontend-nuxt-app/components/Icons/x.vue

diff --git a/tubio-frontend-nuxt-app/components/DownloadBox.vue b/tubio-frontend-nuxt-app/components/DownloadBox.vue
index 2904440..78844de 100644
--- a/tubio-frontend-nuxt-app/components/DownloadBox.vue
+++ b/tubio-frontend-nuxt-app/components/DownloadBox.vue
@@ -1,14 +1,44 @@
 <template>
     <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>
 </template>
 
+<script>
+import DownloadEntry from "~/components/DownloadEntry";
+
+export default {
+    components: {
+      DownloadEntry,
+  }
+  
+}
+</script>
+
 <style lang="scss" scoped>
 .download-box {
   width: 100%;
   min-height: 600px;
   border-radius: 5px;
+  padding: 20px;
   background-color: #fff5;
 }
 
diff --git a/tubio-frontend-nuxt-app/components/DownloadEntry.vue b/tubio-frontend-nuxt-app/components/DownloadEntry.vue
new file mode 100644
index 0000000..02935a5
--- /dev/null
+++ b/tubio-frontend-nuxt-app/components/DownloadEntry.vue
@@ -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>
diff --git a/tubio-frontend-nuxt-app/components/Icons/download.vue b/tubio-frontend-nuxt-app/components/Icons/download.vue
new file mode 100644
index 0000000..973ea0a
--- /dev/null
+++ b/tubio-frontend-nuxt-app/components/Icons/download.vue
@@ -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>
diff --git a/tubio-frontend-nuxt-app/components/Icons/x.vue b/tubio-frontend-nuxt-app/components/Icons/x.vue
new file mode 100644
index 0000000..d4b06a8
--- /dev/null
+++ b/tubio-frontend-nuxt-app/components/Icons/x.vue
@@ -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>
diff --git a/tubio-frontend-nuxt-app/layouts/default.vue b/tubio-frontend-nuxt-app/layouts/default.vue
index e22ed4a..78c1986 100644
--- a/tubio-frontend-nuxt-app/layouts/default.vue
+++ b/tubio-frontend-nuxt-app/layouts/default.vue
@@ -22,7 +22,7 @@ export default {
 };
 </script>
 
-<style lang="css" scoped>
+<style lang="scss" scoped>
 .main-column {
   width: 80%;
   padding: 0 20% 50px 20%;
@@ -30,6 +30,18 @@ export default {
   box-shadow: 0 0 50px 50px #0005;
   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')) {
     width: 100%;
     padding: 0 20px;
diff --git a/tubio-frontend-nuxt-app/pages/index.vue b/tubio-frontend-nuxt-app/pages/index.vue
index a690989..f52030d 100644
--- a/tubio-frontend-nuxt-app/pages/index.vue
+++ b/tubio-frontend-nuxt-app/pages/index.vue
@@ -2,7 +2,7 @@
   <div>
 
     <div class="hidden md:block">
-      <Spacer height="5em" m_height="1em" />
+      <Spacer height="2em" m_height="1em" />
       <Logo class="logo mt-4" />
       <Spacer height="2em" m_height="2em" />
     </div>
diff --git a/tubio-frontend-nuxt-app/tailwind.config.js b/tubio-frontend-nuxt-app/tailwind.config.js
index ba637c5..29399f9 100644
--- a/tubio-frontend-nuxt-app/tailwind.config.js
+++ b/tubio-frontend-nuxt-app/tailwind.config.js
@@ -10,13 +10,17 @@ module.exports = {
       'black': '#000',
       'white': '#fff',
 
+      'gray-0': '#333',
+      'gray-1': '#888',
+      
       'purple-0': '#04254e',
       'purple-1': '#5954a4',
       'purple-2': '#8a54a2',
       'purple-3': '#8ad5eb',
       'purple-3-1': '#bee7f4',
 
-      'text-gray-1': '#bbb'
+      'text-gray-1': '#bbb',
+      'text-error-1': '#d40'
     },
 
     screens: {