Merge pull request #27 from hurry-harry/hf-stats-mobile-design

Add mobile-friendly design for the Stats page

src/app/_shared/pipes/single-ep.pipe.ts

@@ -3,7 +3,7 @@ import { Pipe, PipeTransform } from "@angular/core";
 @Pipe({ name: "singleEP", standalone: true })
 export class SingleEpPipe implements PipeTransform {
   transform(value: string): string {
-    if (value === "Single") 
+    if (value === "Single" || value === "Ep") 
       return "Single/EP"
 
     return value;

src/app/components/home-card/home-card.component.scss

@@ -6,7 +6,7 @@
   height: 200px;
   border-radius: 25px;
   padding: 0.5rem;
-  margin: 1rem;
+  margin: 0.5rem;
   display: flex;
   flex-wrap: wrap;
   color: $taeyeon-white;
@@ -20,4 +20,10 @@
     width: 64px;
     height: 64px;
   }
+
+  @media (max-width: 768px) {
+    width: calc(100% - 20px);
+    min-height: auto !important;
+    height: auto;
+  }
 }

src/app/components/home/home.component.scss

@@ -1,7 +1,11 @@
 .card-container {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   align-content: center;
   justify-content: center;
   padding-top: 3rem;
+  margin: auto;
+  width: 100%;
+  max-width: 930px;
 }

src/app/components/nav-bar/nav-bar.component.scss

@@ -2,7 +2,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.5rem 1rem;
+  padding: 1.5rem 1rem 0.5rem;
 }
 
 .profile-pic {

src/app/components/stats/stats.component.html

@@ -7,7 +7,7 @@ <h1>Your Music Favorites</h1>
   </div>
   <div class="container__mode-tabs">
     @for (mode of topItemModeSelection; track mode) {
-      <button class="btn" [ngClass]="{ 'btn--selected': topItemMode === mode }" (click)="changeItemMode(mode)">{{mode}}</button>
+      <button class="btn container__mode-tabs--mobile" [ngClass]="{ 'btn--selected': topItemMode === mode }" (click)="changeItemMode(mode)">{{mode}}</button>
     } @empty {
       empty mode
     }

src/app/components/stats/stats.component.scss

@@ -2,7 +2,7 @@
 
 .container {
   margin: 0px auto;
-  padding: 0px 20px;
+  padding: 0px 10px;
 
   @media only screen and (max-width: 600px) {
     width: 335px;
@@ -42,7 +42,13 @@
   &__mode-tabs {
     width: 100%;
     text-align: center;
-    padding: 20px 0px
+    padding: 20px 0px;
+
+    @media (max-width: 768px) {
+      &--mobile {
+        width: auto !important;
+      }
+    }
   }
 
   &__artist {
@@ -118,4 +124,69 @@
       font-size: large;
     }
   }
+
+  @media (max-width: 768px) {
+    &__track {
+      width: 100%;
+      width: 100% !important;
+      padding: 10px 20px !important;
+      margin: 4px auto !important;
+      min-height: 64px;
+
+      &__index {
+        padding: 0px;
+        min-width: 38px;
+        margin: auto 0px;
+        font-size: 18px;
+      }
+
+      &__album-cover {
+        border-radius: 10px;
+        max-width: 40px;
+        max-height: 40px;
+        margin: auto 0px;
+      }
+
+      &__text-container {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding: 8px 10px;
+        font-size: 12px;
+
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+
+        &__text {
+          font-weight: bold;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          overflow: hidden;
+        }
+      }
+    }
+
+    &__artist {
+      width: calc(40% - 20px);
+      height: 145px;
+      margin: 10px;
+      padding: 10px;
+      text-align: center;
+      overflow: hidden;
+
+      &__profile-picture {
+        border-radius: 10px;
+        width: 50px;
+        height: 60px;
+        margin: 10px 15px 0px;
+        object-fit: cover;
+      }
+
+      &__name {
+        margin-top: 15px;
+        font-size: 12px;
+      }
+    }
+  }
 }

src/app/components/stats/stats.component.ts

@@ -52,10 +52,13 @@ export class StatsComponent implements OnInit {
     this.updateTopItems();
   }
 
-  appendTopItems(response: SpotifyBaseResponse): void {
+  appendTopItems(response: SpotifyBaseResponse, isRemoveDuplicateFirstIndex: boolean = false): void {
     if (this.topItemMode == this.topItemModeSelection[0]) {
       this.topArtists.push(...(response as ArtistsResponse).items);
     } else {
+      if (isRemoveDuplicateFirstIndex)
+        (response as TracksResponse).items.shift();
+
       this.topTracks.push(...(response as TracksResponse).items);
     }
   }
@@ -86,7 +89,7 @@ export class StatsComponent implements OnInit {
         this.isLoading = false;
       })
     ).subscribe((response: SpotifyBaseResponse) => {
-      this.appendTopItems(response);
+      this.appendTopItems(response, true);
     });
   }