From 8d4772866d53ec01d93e901c51f9dcf2d9c5c82c Mon Sep 17 00:00:00 2001
From: Laurence Ho <bluegray.he@aol.com>
Date: Mon, 22 Jul 2024 12:16:22 +1200
Subject: [PATCH] Update skeleton

---
 server/src/aggregations/albums.ts |  5 ++++-
 src/components/Carousel.vue       |  7 +++++++
 src/pages/AlbumList.vue           |  2 +-
 src/pages/SkeletonAlbumList.vue   | 32 ++++++++++++++++++++++---------
 4 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/server/src/aggregations/albums.ts b/server/src/aggregations/albums.ts
index 8493ad8e..3533c541 100644
--- a/server/src/aggregations/albums.ts
+++ b/server/src/aggregations/albums.ts
@@ -40,7 +40,10 @@ export const handler: Handler = async (event: DynamoDBStreamEvent, _context, cal
 
   const publicAlbums = albumList.filter((album) => album.isPrivate === false);
   const albumsHavePlace = publicAlbums.filter((album) => album.place != null);
-  const featuredAlbums = publicAlbums.filter((album) => album.isFeatured);
+  const featuredAlbums = publicAlbums
+    .filter((album) => album.isFeatured)
+    .sort((a, b) => a.year.localeCompare(b.year)) // Sort by year
+    .sort((a, b) => a.albumName.localeCompare(b.albumName)); // Then sort by album name
   const albumsByYear = countAlbumsByYear(albumList);
   const albumsByYearExcludePrivate = countAlbumsByYear(publicAlbums);
 
diff --git a/src/components/Carousel.vue b/src/components/Carousel.vue
index b1a32eb4..c5eb80d1 100644
--- a/src/components/Carousel.vue
+++ b/src/components/Carousel.vue
@@ -154,6 +154,13 @@ onUnmounted(() => {
   margin-right: calc((1rem) / 2 * -1);
 }
 
+@media (max-width: 600px) {
+  .embla {
+    --slide-height: 12rem;
+    --slide-spacing: 0.8rem;
+  }
+}
+
 .absolute-left-centre {
   top: 35% !important;
 }
diff --git a/src/pages/AlbumList.vue b/src/pages/AlbumList.vue
index e01248d1..97244220 100644
--- a/src/pages/AlbumList.vue
+++ b/src/pages/AlbumList.vue
@@ -87,7 +87,7 @@
       <div v-if="albumStyle === 'grid'" class="q-col-gutter-md row">
         <Album v-for="album in chunkAlbumList" :key="album.id" :album-item="album" :album-style="albumStyle" />
       </div>
-      <div v-else :class="`row ${$q.screen.lt.xl ? 'justify-center' : ''}`">
+      <div v-else :class="`row ${$q.screen.lt.lg ? 'justify-center' : ''}`">
         <Album v-for="album in chunkAlbumList" :key="album.id" :album-item="album" :album-style="albumStyle" />
       </div>
     </template>
diff --git a/src/pages/SkeletonAlbumList.vue b/src/pages/SkeletonAlbumList.vue
index ed5c19e8..80cf689d 100644
--- a/src/pages/SkeletonAlbumList.vue
+++ b/src/pages/SkeletonAlbumList.vue
@@ -1,19 +1,33 @@
 <template>
   <div class="flex justify-between q-py-md" data-test-id="skeleton-album-list">
-    <div class="flex">
-      <q-skeleton type="QRange" :width="$q.screen.lt.md ? '50px' : '150px'" class="q-mr-md q-mb-sm" />
-      <q-skeleton type="QRange" :width="$q.screen.lt.md ? '50px' : '150px'" class="q-mr-md q-mb-sm" />
-      <q-skeleton type="QRange" :width="$q.screen.lt.md ? '200px' : '300px'" class="q-mr-md q-mb-sm" />
+    <div :class="`flex ${$q.screen.lt.sm ? 'justify-between full-width' : ''}`">
+      <div class="flex">
+        <q-skeleton type="QRange" :width="$q.screen.lt.md ? '50px' : '150px'" class="q-mr-md q-mb-sm" />
+        <q-skeleton type="QRange" :width="$q.screen.lt.md ? '50px' : '150px'" class="q-mr-md q-mb-sm" />
+      </div>
+      <q-skeleton
+        type="QRange"
+        :width="$q.screen.lt.md ? '200px' : $q.screen.lt.sm ? '100px' : '300px'"
+        class="q-mr-md q-mb-sm"
+      />
     </div>
-    <q-skeleton type="QRange" width="300px" class="q-ml-auto" />
+    <q-skeleton
+      type="QRange"
+      :width="`${$q.screen.lt.md ? '200px' : $q.screen.lt.sm ? '100%' : '300px'}`"
+      class="q-ml-auto q-ml-xs-none"
+    />
   </div>
-  <q-skeleton type="rect" width="300px" class="q-mr-md q-mb-sm" />
-  <div class="justify-center row">
-    <div v-for="n in 10" :key="n" class="col-xl-6 col-lg-7 col-md-8 col-sm-10 col-xs-12 q-pa-xs">
+  <q-skeleton type="rect" :width="`${$q.screen.lt.sm ? '100%' : '300px'}`" class="q-mr-md q-mb-sm" />
+  <div class="flex overflow-hidden no-wrap q-pt-md q-mb-xl-xl q-mb-lg-lg q-mb-md">
+    <q-skeleton :size="`${$q.screen.lt.sm ? 11 : 14}rem`" class="q-mr-md" />
+    <q-skeleton :size="`${$q.screen.lt.sm ? 11 : 14}rem`" />
+  </div>
+  <div :class="`row ${$q.screen.lt.lg ? 'justify-center' : ''}`">
+    <div v-for="n in 10" :key="n" class="col-xl-6 col-lg-6 col-md-8 col-sm-10 col-xs-12 q-pa-xs">
       <q-card flat bordered>
         <q-item>
           <q-item-section avatar>
-            <q-skeleton size="90px" />
+            <q-skeleton :size="`${$q.screen.lt.sm ? 80 : 100}px`" />
           </q-item-section>
 
           <q-item-section>