handle page resize: to resize track component columns

+ revert banner-height from 23rem to 18rem
+ change font to Google Sans

src/assets/scss/Global/index.scss

@@ -1,6 +1,6 @@
 @import "./app-grid.scss", "./controls.scss", "./inputs.scss",
-"./scrollbars.scss", "./state.scss", "./variants.scss", "./basic.scss",
-"./search-tabheaders.scss";
+  "./scrollbars.scss", "./state.scss", "./variants.scss", "./basic.scss",
+  "./search-tabheaders.scss";
 
 :root {
   --separator: #ffffff46;
@@ -23,9 +23,9 @@ html.loading * {
 body {
   background-color: $body;
   color: $white;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
-  Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-family: "SFCompactDisplay" !important;
+  font-family: "SFCompactDisplay", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol";
   font-size: 1rem;
   image-rendering: -webkit-optimize-contrast;
   width: calc(100vw - 1rem);
@@ -40,4 +40,4 @@ body {
   a {
     cursor: default !important;
   }
-}
+}

src/assets/scss/_variables.scss

@@ -13,7 +13,7 @@ $medium: 0.75rem;
 $large: 1.5rem;
 $larger: 2rem;
 
-$banner-height: 23rem;
+$banner-height: 18rem;
 
 // apple human design guideline colors
 $black: #181a1c;

src/assets/scss/index.scss

@@ -10,5 +10,6 @@
 
 @font-face {
     font-family: "SFCompactDisplay";
-    src: url("../sf-compact.woff") format("woff");
+    src: url("../googlesans.ttf");
 }
+

src/components/PlaylistView/Header.vue

@@ -21,7 +21,7 @@
           {{ formatSeconds(info.duration, true) }}
         </div>
         <div class="title ellip">{{ info.name }}</div>
-        <div class="type">Playlist</div>
+        <div class="type">PLAYLIST</div>
       </div>
     </div>
     <div class="last-updated" :class="{ lightbg: !info.image }">
@@ -77,12 +77,12 @@ function editPlaylist() {
     left: 0;
     width: 100%;
     height: 100%;
-    background-image: linear-gradient(
-      20deg,
-      rgba(0, 0, 0, 0.25) 40%,
-      rgba(0, 0, 0, 0.1),
-      rgba(0, 0, 0, 0.1) 70%
-    );
+    // background-image: linear-gradient(
+    //   rgba(0, 0, 0, 0.514),
+    //   rgba(0, 0, 0, 0.651)
+    // );
+    background-color: $black;
+    opacity: 0.5;
   }
 
   .last-updated {
@@ -141,12 +141,14 @@ function editPlaylist() {
     }
 
     .type {
+      font-size: small;
+      font-weight: bold;
       color: rgba(255, 255, 255, 0.692);
     }
 
     .title {
-      font-size: 2.5rem;
-      font-weight: 900;
+      font-size: 4rem;
+      font-weight: 1000;
       text-transform: capitalize;
       cursor: text;
     }

src/components/shared/SongItem.vue

@@ -26,7 +26,11 @@
         ></div>
       </div>
       <div v-tooltip class="song-title">
-        <div class="title ellip" @click.pre@dblclick.prevent="emitUpdate" ref="artisttitle">
+        <div
+          class="title ellip"
+          @click.pre@dblclick.prevent="emitUpdate"
+          ref="artisttitle"
+        >
           {{ track.title }}
         </div>
         <div class="isSmallArtists" style="display: none">
@@ -41,6 +45,7 @@
       <ArtistName :artists="track.artist" :albumartist="track.albumartist" />
     </div>
     <router-link
+      v-if="!no_album"
       class="song-album ellip"
       v-tooltip
       :to="{
@@ -52,9 +57,7 @@
     >
       {{ track.album }}
     </router-link>
-    <div class="song-duration">
-      <div class="text ellip">{{ formatSeconds(track.duration) }}</div>
-    </div>
+    <div class="song-duration">{{ formatSeconds(track.duration) }}</div>
     <div
       class="options-icon circular"
       :class="{ options_button_clicked }"
@@ -67,7 +70,7 @@
 </template>
 
 <script setup lang="ts">
-import { onUpdated, ref } from "vue";
+import { ref } from "vue";
 
 import { showTrackContextMenu as showContext } from "@/composables/context";
 import { paths } from "@/config";
@@ -89,6 +92,7 @@ const props = defineProps<{
   index: number | string;
   isCurrent: Boolean;
   isCurrentPlaying: Boolean;
+  no_album?: Boolean;
 }>();
 
 const emit = defineEmits<{
@@ -107,7 +111,7 @@ function showMenu(e: Event) {
 <style lang="scss">
 .songlist-item {
   display: grid;
-  grid-template-columns: 1.5rem 2fr 1fr 1.5fr 2rem 2.5rem;
+  grid-template-columns: 1.5rem 2fr 1fr 1.5fr 2.5rem 2.5rem;
   align-items: center;
   justify-content: flex-start;
   height: 3.75rem;
@@ -178,10 +182,6 @@ function showMenu(e: Event) {
   .song-duration {
     font-size: small;
     text-align: left;
-
-    .ellip {
-      word-break: keep-all !important;
-    }
   }
 
   .options-icon {

src/layouts/HeaderAndVList.vue

@@ -12,7 +12,7 @@
         ref="scrollable"
         :class="{
           isSmall: isSmall,
-          isMedium: isMedium,
+          isMedium: isMedium || on_album_page,
         }"
       >
         <div class="header rounded" style="height: 64px" v-if="!no_header">
@@ -29,6 +29,7 @@
           v-for="t in tracks"
           :key="t.data.trackid"
           :track="t.data"
+          :no_album="on_album_page"
           :index="
             on_album_page
               ? t.data.track
@@ -58,16 +59,16 @@ import useQStore from "@/stores/queue";
 
 import SongItem from "@/components/shared/SongItem.vue";
 
+const emit = defineEmits<{
+  (e: "playFromPage", index: number): void;
+}>();
+
 const props = defineProps<{
   tracks: Track[];
   on_album_page?: boolean;
   no_header?: boolean;
 }>();
 
-const emit = defineEmits<{
-  (e: "playFromPage", index: number): void;
-}>();
-
 const queue = useQStore();
 const source = computed(() => props.tracks);
 
@@ -121,8 +122,9 @@ function handleScroll(e: Event) {
   }
 
   .scrollable.isSmall {
+    // hide album and artists columns
     .songlist-item {
-      grid-template-columns: 1.5rem 2fr 2rem 2.5rem;
+      grid-template-columns: 1.5rem 2fr 2.5rem 2.5rem;
     }
 
     .song-artists,
@@ -139,8 +141,9 @@ function handleScroll(e: Event) {
   }
 
   .scrollable.isMedium {
+    // hide album column
     .songlist-item {
-      grid-template-columns: 1.5rem 2fr 1fr 2rem 2.5rem;
+      grid-template-columns: 1.5rem 1.5fr 1fr 2.5rem 2.5rem;
     }
 
     .song-album {

src/views/PlaylistList.vue

@@ -24,7 +24,7 @@ const pStore = usePStore();
   scrollbar-color: $gray2 transparent;
 
   .grid {
-    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(9.25rem, 1fr));
     gap: 1rem;
   }
 }