🚧Refactor mobile view layout in app.component.html

Frontend/src/app/app.component.html

@@ -25,8 +25,9 @@
   </ng-container>
 
   <ng-template #mobileView>
-    <div class="mobile-layout grid grid-cols-3 grid-rows-4  min-h-screen relative">
-      <div class="col-span-3 col-start-1 row-span-3 row-start-1 overflow-y-scroll overflow-hidden p-4 rounded-xl border-black h-full no-scrollbar border overflow-y-scroll m-3" style="background-color: rgba(0, 0, 0, 0.7);">
+    <div class="mobile-layout grid grid-cols-3 grid-rows-[0.1fr,0.1fr,1fr]">
+      <app-other-nav class="absolute top-0 right-0"></app-other-nav>
+            <div class="col-span-3 col-start-1 row-span-3 row-start-2 overflow-y-scroll overflow-hidden p-4 rounded-xl border-black h-full no-scrollbar border overflow-y-scroll m-3" style="background-color: rgba(0, 0, 0, 0.7);">
         <router-outlet></router-outlet>
       </div>
     </div>

Frontend/src/app/components/templates/desktop/search/search.component.html

@@ -1,4 +1,3 @@
-<div *ngIf="screenSize === 'desktop'">
   <app-back-button></app-back-button>
   <h1 class="text-3xl font-bold text-white text-center mb-6">Search Results for "{{ searchQuery }}</h1>
   <app-search-bar></app-search-bar>
@@ -61,92 +60,3 @@ <h2 style="font-weight: bold;" class="py-2">{{ album.albumName }}</h2>
   </div>
 </div>
 </div>
-</div>
-
-
-<div *ngIf="screenSize === 'mobile'" class="mobile-layout">
-  <div [ngClass]="backgroundMoodClasses[this.moodService.getCurrentMood()]" class="min-h-screen" style="overflow: auto;">
-    <!-- Flex container for top elements -->
-    <div class="flex justify-between items-start p-5 fixed top-0 left-0 right-0">
-      <!-- Navbar on the left -->
-      <div class="navbar-container">
-        <app-navbar (selectedNavChange)="onNavChange('else')"></app-navbar>
-      </div>
-      <!-- Profile on the right -->
-      <div class="flex flex-col items-center">
-        <img (click)="profile()"
-             [src]="true ? '../../../../assets/icons/profile-light.png' : '../../../../assets/icons/profile-dark.png'"
-             alt="profile" class="w-12 h-12 hover:cursor-pointer">
-      </div>
-    </div>
-    <!-- Search bar below the top elements -->
-    <div class="mt-[calc(1vh+5rem)] pl-5">
-      <app-search-bar class="col-start-2"></app-search-bar>
-    </div>
-    <div *ngIf="searchQuery">
-
-    <h1 *ngIf="searchQuery !== ''" class="text-2xl font-bold text-gray-800 dark:text-gray-200">Search Results
-      for
-      "{{ searchQuery }}"</h1>
-
-    <div class="top-result dark:text-gray-200" style="float: left; width: 50%;">
-      <h1 class="" style="font-weight: bold; font-size: larger;">Top Result</h1>
-      <div [ngClass]="moodComponentClasses[this.moodService.getCurrentMood()]" class="big-card  my-[1vw] hover:cursor-pointer"
-           style="width: 90%; padding: 2vw; border-radius: 15px;">
-        <ng-container *ngIf="topResult$ | async as topResult">
-          <div (click)="playTrack(topResult.name, topResult.artistName)">
-          <img [src]="topResult.albumImageUrl" alt="Big Image" style="border-radius: 15px;">
-          <h2 style="font-weight: bold;" class="py-2">{{ topResult.name }}</h2>
-          <p class="py-1">{{ topResult.artistName }}</p>
-          </div>
-        </ng-container>
-      </div>
-    </div>
-
-    <div class="songs dark:text-gray-200" style="float: left; width: 50%; position: relative;">
-      <a
-        style="position: absolute; top: 0; right: 0; margin: 10px; padding: 5px 10px; border-radius: 5px;cursor: pointer;">
-        View More
-      </a>
-      <h1 class="py-2" style="font-weight: bold; font-size: larger;">Songs</h1>
-      <div class="songs-container"
-      style="display: flex; flex-direction: column; overflow-y: auto; height:25vw;">
-   <div [ngClass]="moodComponentClasses[this.moodService.getCurrentMood()]"
-        class="song-card hover:cursor-pointer"
-        *ngFor="let song of songs$ | async"
-        style="flex: 0 0 auto; width: 100%; margin-bottom: 20px; display: flex; padding: 5px; border-radius: 10px; box-sizing: border-box; height:15vw; padding: .5vw;"
-        (click)="playTrack(song.name, song.artistName)">
-     <img [src]="song.albumImageUrl" alt="Song Image"
-          style="width: 25%; border-radius: 10px; margin-right: 10px;">
-     <div>
-       <h2 style="font-weight: bold;" class="py-2">{{ song.name }}</h2>
-       <p class="py-1">{{ song.artistName }}</p>
-     </div>
-   </div>
- </div>
-
-    </div>
-    <div class="songs dark:text-gray-200 bg-stone-950 opacity-85" style="float: left; width: 50%; position: relative;">
-      <a
-        style="position: absolute; top: 0; right: 0; margin: 10px; padding: 5px 10px; border-radius: 5px;cursor: pointer;">
-        View More
-      </a>
-      <h1 class="py-2" style="font-weight: bold; font-size: larger;">Albums</h1>
-      <div class="songs-container"
-           style="display: flex; flex-direction: column; overflow-y: auto; height:25vw;">
-        <div [ngClass]="moodComponentClasses[this.moodService.getCurrentMood()]"
-             class="song-card hover:cursor-pointer"
-             *ngFor="let album of albums$ | async"
-             style="flex: 0 0 auto; width: 100%; margin-bottom: 20px; display: flex; padding: 5px; border-radius: 10px; box-sizing: border-box; height:15vw; ; padding: .5vw;">
-          <img [src]="album.albumImageUrl" alt="Song Image"
-               style="width: 25%; border-radius: 10px; margin-right: 10px;">
-          <div>
-            <h2 style="font-weight: bold;" class="py-2">{{ album.albumName }}</h2>
-            <p class="py-1">{{ album.artistName }}</p>
-          </div>
-        </div>
-      </div>
-    </div>
-    </div>
-  </div>
-</div>

Frontend/src/app/components/templates/mobile/mobilehome/mobilehome.component.css

@@ -0,0 +1,4 @@
+.no-scrollbar::-webkit-scrollbar{
+    display: none;
+}
+

Frontend/src/app/components/templates/mobile/mobilehome/mobilehome.component.html

@@ -1,8 +1,11 @@
 <app-moods></app-moods>
 <button id="dropdownDefaultButton" (click)="toggleDropdown()" [ngClass]="this.moodComponentClasses[this.moodService.getCurrentMood()]" data-dropdown-toggle="dropdown" class="w-full justify-between font-medium rounded-lg text-sm px-5 py-2.5 text-center inline-flex items-center" type="button">{{selected}}
-<svg class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
+  <svg *ngIf="isExpanded === true" class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" (click)="toggleExpand()" fill="none" viewBox="0 0 10 6">
     <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
   </svg>
+  <svg *ngIf="isExpanded === false" class="w-2.5 h-2.5 ms-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" (click)="toggleExpand()" fill="none" viewBox="0 0 10 6">
+    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 5 4-4 4 4"/>
+  </svg>
 </button>
 <!-- Styled Dropdown menu to match the button -->
 <div id="dropdown" *ngIf="isDropdownVisible" class="w-full z-10 bg-blue-700 divide-y divide-gray-100 rounded-lg shadow dark:bg-gray-component">
@@ -15,7 +18,7 @@
   </div>
 </div>
 <!-- Cards Container -->
-<div class="px-5 py-2 w-full max-h-96 overflow-y-auto">
+<div *ngIf="isExpanded" class="px-5 py-2 w-full max-h-[17.5vh] overflow-y-auto no-scrollbar">
   <!-- ng-container for iterating over cards and adding View More button as the last card -->
   <ng-container *ngIf="!isLoading; else loadingSkeletons">
     <ng-container *ngFor="let card of getSelectedCardData(); let i = index; let last = last">