From 68b6a49638ee9086bc80b42e84ac201f40f70097 Mon Sep 17 00:00:00 2001
From: viktorstrate <viktorstrate@gmail.com>
Date: Sun, 26 Sep 2021 13:42:00 +0200
Subject: [PATCH] Fix timeline ordering (#531) + layout fixes for AlbumBox

---
 api/graphql/resolvers/timeline.go           | 3 ++-
 ui/src/components/albumGallery/AlbumBox.tsx | 8 +++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/api/graphql/resolvers/timeline.go b/api/graphql/resolvers/timeline.go
index 86746168..a26f7dd0 100644
--- a/api/graphql/resolvers/timeline.go
+++ b/api/graphql/resolvers/timeline.go
@@ -20,7 +20,8 @@ func (r *queryResolver) MyTimeline(ctx context.Context, paginate *models.Paginat
 		Order("YEAR(media.date_shot) DESC").
 		Order("MONTH(media.date_shot) DESC").
 		Order("DAY(media.date_shot) DESC").
-		Order("albums.title ASC")
+		Order("albums.title ASC").
+		Order("TIME(media.date_shot) DESC")
 
 	if fromDate != nil {
 		query = query.Where("media.date_shot < ?", fromDate)
diff --git a/ui/src/components/albumGallery/AlbumBox.tsx b/ui/src/components/albumGallery/AlbumBox.tsx
index 32db6c8a..f0dd946d 100644
--- a/ui/src/components/albumGallery/AlbumBox.tsx
+++ b/ui/src/components/albumGallery/AlbumBox.tsx
@@ -25,7 +25,7 @@ const AlbumBoxImage = ({ src, ...props }: AlbumBoxImageProps) => {
   let placeholder = null
   if (!loaded) {
     placeholder = (
-      <div className="bg-gray-100 animate-pulse w-full h-full rounded-lg absolute"></div>
+      <div className="bg-gray-100 animate-pulse w-full h-full rounded-lg absolute top-0"></div>
     )
   }
 
@@ -44,7 +44,7 @@ type AlbumBoxProps = {
 
 export const AlbumBox = ({ album, customLink, ...props }: AlbumBoxProps) => {
   const wrapperClasses =
-    'inline-block text-center text-gray-900 mx-3 my-2 xs:h-60'
+    'inline-block text-center text-gray-900 mx-3 my-2 xs:h-60 xs:w-[220px]'
 
   if (album) {
     return (
@@ -54,7 +54,9 @@ export const AlbumBox = ({ album, customLink, ...props }: AlbumBoxProps) => {
         {...props}
       >
         <AlbumBoxImage src={album.thumbnail?.thumbnail?.url} />
-        <p>{album.title}</p>
+        <p className="whitespace-nowrap overflow-hidden overflow-ellipsis">
+          {album.title}
+        </p>
       </Link>
     )
   }