build playlist view

src/assets/css/_variables.scss

@@ -1,2 +1,10 @@
+// colors
+
 $card-dark: #131313b2;
-$red: #df4646;
+$red: #df4646;
+$blue: #00a8ff;
+$green: rgb(67, 148, 67);
+
+// sizes
+$small: .5em;
+

src/assets/icons/clock.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0001 1.66666C5.40508 1.66666 1.66675 5.405 1.66675 10C1.66675 14.595 5.40508 18.3333 10.0001 18.3333C14.5951 18.3333 18.3334 14.595 18.3334 10C18.3334 5.405 14.5951 1.66666 10.0001 1.66666ZM10.0001 16.6667C6.32425 16.6667 3.33341 13.6758 3.33341 10C3.33341 6.32416 6.32425 3.33333 10.0001 3.33333C13.6759 3.33333 16.6667 6.32416 16.6667 10C16.6667 13.6758 13.6759 16.6667 10.0001 16.6667Z" fill="white"/>
+<path d="M10.8334 5.83334H9.16675V10.345L11.9109 13.0892L13.0892 11.9108L10.8334 9.655V5.83334Z" fill="white"/>
+</svg>

src/assets/icons/play.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 10C20 12.6522 18.9464 15.1957 17.0711 17.0711C15.1957 18.9464 12.6522 20 10 20C7.34784 20 4.8043 18.9464 2.92893 17.0711C1.05357 15.1957 0 12.6522 0 10C0 7.34784 1.05357 4.8043 2.92893 2.92893C4.8043 1.05357 7.34784 0 10 0C12.6522 0 15.1957 1.05357 17.0711 2.92893C18.9464 4.8043 20 7.34784 20 10ZM8.4875 6.36625C8.39404 6.29971 8.28408 6.26018 8.16965 6.25198C8.05522 6.24379 7.94074 6.26724 7.83876 6.31978C7.73678 6.37233 7.65122 6.45192 7.59147 6.54986C7.53172 6.64779 7.50007 6.76028 7.5 6.875V13.125C7.50007 13.2397 7.53172 13.3522 7.59147 13.4501C7.65122 13.5481 7.73678 13.6277 7.83876 13.6802C7.94074 13.7328 8.05522 13.7562 8.16965 13.748C8.28408 13.7398 8.39404 13.7003 8.4875 13.6337L12.8625 10.5087C12.9435 10.4509 13.0096 10.3746 13.0551 10.2861C13.1007 10.1976 13.1245 10.0995 13.1245 10C13.1245 9.90047 13.1007 9.80237 13.0551 9.71388C13.0096 9.62539 12.9435 9.54906 12.8625 9.49125L8.4875 6.36625Z" fill="white"/>
+</svg>

src/components/PlaylistView/Header.vue

@@ -1,31 +1,167 @@
 <template>
   <div class="p-header rounded">
-    <div class="album-art rounded"></div>
-    <div></div>
+    <div class="info rounded">
+      <p class="name">Because I Got High Radio</p>
+      <p class="text">
+        The best music to fade to while doing my thing. Featuring artists like Wiz Khalifa, Lil Wayne, Ne-Yo, Ace Of Base, ...
+      </p>
+      <div class="lower">
+        <div class="statistics">
+          <div class="count s-item"><p>45 Tracks</p></div>
+          <div class="duration s-item"><p>3 Hrs 45 Min</p></div>
+        </div>
+        <hr />
+        <div class="btns">
+          <div class="play s-item"><p>Play Now</p></div>
+        </div>
+      </div>
+      <!--  -->
+      <div class="albums">
+        <div class="item third image"></div>
+        <div class="item second image"></div>
+        <div class="item first image"></div>
+      </div>
+    </div>
+    <div class="banner rounded"></div>
   </div>
 </template>
 
-<script>
-export default {
-
-}
-</script>
-
 <style lang="scss">
 .p-header {
-  display: flex;
-  padding: 0.5rem;
-  background-color: $card-dark;
-  height: calc(100% - 1rem);
-}
-
-.p-header > * {
-  // border: solid;
-}
-
-.p-header .album-art {
-  width: 15rem;
+  display: grid;
+  grid-template-columns: 1fr .75fr;
   height: 15rem;
-  background: $red;
+  margin-bottom: 1em;
+  background: rgb(42, 46, 54);
+}
+
+.p-header hr {
+  border: none;
+}
+
+.p-header .info {
+  background-color: rgb(1, 5, 17);
+  padding: 0.5rem;
+  margin: 0.5rem 0 0.5rem 0.5rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.p-header .info .name {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  font-size: 2rem;
+  font-weight: bold;
+  margin: 0;
+}
+
+.p-header .info .text {
+  margin: 0.5rem 1em 0.5rem 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  height: 4em;
+}
+
+.p-header .banner {
+  margin: 0.5rem;
+  background-color: $blue;
+  background: url(../../assets/images/girl5.jpg);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.p-header .info .statistics {
+  display: flex;
+}
+
+.p-header .info .count {
+  background: url(../../assets/icons/album.svg);
+}
+
+.p-header .info .duration {
+  background-image: url(../../assets/icons/clock.svg);
+}
+
+.p-header .info .s-item {
+  background-size: 1.2rem;
+  background-position: 10% 50%;
+  width: 9rem;
+  display: flex;
+  align-items: center;
+  font-weight: lighter;
+  margin-right: $small;
+  height: 2rem;
+  border: solid 1px rgba(255, 255, 255, 0.445);
+  border-radius: $small;
+  background-repeat: no-repeat;
+}
+
+.p-header .info .lower p {
+  margin-left: 2.5rem;
+}
+
+.p-header .info .btns {
+  height: 2.5rem;
+}
+
+.p-header .info .btns .play {
+  width: 8rem;
+  height: 100%;
+  background-color: $green;
+  border: none;
+  background-image: url(../../assets/icons/play.svg);
+}
+
+.p-header .info .albums {
+  position: relative;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 0.5rem;
+  // border: solid;
+  position: absolute;
+  bottom: -.5em;
+  right: -1em;
+}
+
+.p-header .info .albums .item {
+  height: 5em;
+  width: 5em;
+  background-color: $blue;
+  border-radius: $small;
+}
+
+.p-header .info .albums .first {
+  position: absolute;
+  transform: rotate(-30deg);
+  right: .5em;
+  bottom: 0em;
+  background-color: $red;
+  background-image: url(../../assets/images/girl2.jpg);
+}
+
+.p-header .info .albums .second {
+  position: absolute;
+  transform: rotate(10deg);
+  right: 4em;
+  bottom: -1em !important;
+  background-color: $green;
+  background-image: url(../../assets/images/tk.jpg);
+  z-index: 1;
+}
+
+.p-header .info .albums .third {
+  position: absolute;
+  transform: rotate(-10deg);
+  bottom: -1em;
+  right: 9em;
+  background-color: $green;
+  background-image: url(../../assets/images/girl3.jpg);
+  z-index: 2;
 }
 </style>

src/views/PlaylistView.vue

@@ -1,13 +1,18 @@
 <template>
   <Header />
+  <div class="p-bg rounded">
+    <SongList />
+  </div>
 </template>
 
 <script>
 import Header from "@/components/PlaylistView/Header.vue";
+import SongList from "@/components/FolderView/SongList.vue";
 
 export default {
   components: {
     Header,
+    SongList,
   },
   setup() {
     return {};
@@ -15,5 +20,11 @@ export default {
 };
 </script>
 
-<style>
+<style lang="scss">
+.p-bg {
+  background: $card-dark;
+  padding: 20px;
+  height: calc(100% - 16em);
+  padding: 0;
+}
 </style>