minor changes to the albums explorer

2026-06-05 13:03:02 +00:00 · 2021-12-11 23:32:11 +03:00
parent 24741640ea
commit 9caeab9626
7 changed files with 330 additions and 2 deletions
@@ -0,0 +1,161 @@
+<template>
+  <div class="top-artists">
+    <div class="heading">TOP ARTISTS</div>
+    <div class="items">
+      <div class="item rounded" v-for="artist in artists" :key="artist">
+        <div class="image"></div>
+        <div class="info">
+          <div class="name ellip">{{ artist.name }}</div>
+          <div class="artist ellip">{{ artist.album_count }} Albums</div>
+          <div class="separator"></div>
+          <div class="top">
+            <div class="play-icon"></div>
+            <div class="text ellip">{{ artist.top_track }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  setup() {
+    const artists = [
+      {
+        name: "Sting",
+        album_count: "12",
+        top_track: "Alien in Newyork",
+      },
+      {
+        name: "Juice Wrld",
+        album_count: "4",
+        top_track: "Girl Of My Dreams",
+      },
+      {
+        name: "Lil Peep",
+        album_count: "6",
+        top_track: "Haunt U",
+      },
+    ];
+
+    return {
+      artists,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+.top-artists {
+  height: 14rem;
+  border-radius: $small;
+  background-color: $card-dark;
+  padding: $small;
+
+  .heading {
+    margin: $small 0 1.5em $small;
+  }
+
+  .items {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: $small;
+
+    .item {
+      height: 10rem;
+      width: 100%;
+      max-width: 25rem;
+      background-color: rgb(7, 6, 6);
+      display: grid;
+      align-items: center;
+      grid-template-columns: 7.5rem 1fr;
+      padding: $small;
+      cursor: pointer;
+      transition: all 0.2s ease-in-out;
+
+      &:hover {
+        transform: translateY(-.5em);
+      }
+
+      .image {
+        height: 7rem;
+        width: 7rem;
+        background-image: url(../../assets/images/girl1.jpg);
+        border-radius: 50%;
+      }
+
+      .info .name {
+        font-size: 1.5rem;
+        font-weight: bold;
+      }
+
+      .info .artist {
+        font-size: small;
+        color: rgba(255, 255, 255, 0.699);
+      }
+
+      .info .top {
+        height: 2.5rem;
+        background-color: rgb(51, 129, 20);
+        border-radius: $small;
+        margin-left: auto;
+        display: grid;
+        grid-template-columns: 2.5rem 1fr;
+        align-items: center;
+        transition: all 0.2s ease-in-out;
+        user-select: none;
+
+        .play-icon {
+          margin: 0 0 0 $small;
+          height: 1.2rem;
+          width: 1.2rem;
+          background-image: url(../../assets/icons/play.svg);
+          background-size: 96%;
+          background-repeat: no-repeat;
+          background-position: center;
+          transition: all 0.2s ease-in-out;
+        }
+
+        .text {
+          color: white;
+        }
+
+        &:hover {
+          background-color: rgb(0, 134, 89);
+          transition: all 0.2s ease-in-out;
+
+          .play-icon {
+            transform: scale(1.2);
+            transition: all 0.2s ease-in-out;
+          }
+        }
+
+        &:active {
+          transform: scale(0.95);
+          transition: all 0.1s ease-in-out;
+        }
+      }
+      &:first-child {
+        background-color: rgb(177, 116, 2);
+
+        .image {
+          background-image: url(../../assets/images/girl2.jpg);
+        }
+      }
+
+      &:nth-child(2){
+        background-color: rgb(0, 74, 117);
+
+        .image {
+          background-image: url(../../assets/images/girl3.jpg);
+        }
+      }
+
+      &:nth-child(3){
+        background-color: rgb(161, 106, 106);
+      }
+    }
+  }
+}
+</style>