From 68d8f2f5744d36ac7ce8f8f6a0ffa17735eb4908 Mon Sep 17 00:00:00 2001
From: viktorstrate <viktorstrate@gmail.com>
Date: Mon, 24 May 2021 00:02:19 +0200
Subject: [PATCH] Style timeline

---
 ui/src/components/albumGallery/AlbumBox.tsx     |  5 +++--
 .../timelineGallery/TimelineGallery.tsx         | 17 ++++++++++++-----
 .../timelineGallery/TimelineGroupAlbum.tsx      | 14 +++++++-------
 .../timelineGallery/TimelineGroupDate.tsx       |  8 ++++----
 ui/tailwind.config.js                           |  2 +-
 5 files changed, 27 insertions(+), 19 deletions(-)

diff --git a/ui/src/components/albumGallery/AlbumBox.tsx b/ui/src/components/albumGallery/AlbumBox.tsx
index 6bb0d864..32db6c8a 100644
--- a/ui/src/components/albumGallery/AlbumBox.tsx
+++ b/ui/src/components/albumGallery/AlbumBox.tsx
@@ -30,7 +30,7 @@ const AlbumBoxImage = ({ src, ...props }: AlbumBoxImageProps) => {
   }
 
   return (
-    <div className="w-[220px] h-[220px] relative rounded-lg">
+    <div className="xs:w-[220px] xs:h-[220px] relative rounded-lg">
       {image}
       {placeholder}
     </div>
@@ -43,7 +43,8 @@ type AlbumBoxProps = {
 }
 
 export const AlbumBox = ({ album, customLink, ...props }: AlbumBoxProps) => {
-  const wrapperClasses = 'inline-block text-center text-gray-900 mx-3 my-2 h-60'
+  const wrapperClasses =
+    'inline-block text-center text-gray-900 mx-3 my-2 xs:h-60'
 
   if (album) {
     return (
diff --git a/ui/src/components/timelineGallery/TimelineGallery.tsx b/ui/src/components/timelineGallery/TimelineGallery.tsx
index d226c047..f03f1cae 100644
--- a/ui/src/components/timelineGallery/TimelineGallery.tsx
+++ b/ui/src/components/timelineGallery/TimelineGallery.tsx
@@ -172,11 +172,18 @@ const TimelineGallery = () => {
 
   return (
     <>
-      <FavoritesCheckbox
-        onlyFavorites={onlyFavorites}
-        setOnlyFavorites={setOnlyFavorites}
-      />
-      <GalleryWrapper ref={containerElem}>{timelineGroups}</GalleryWrapper>
+      <div className="mb-2">
+        <FavoritesCheckbox
+          onlyFavorites={onlyFavorites}
+          setOnlyFavorites={setOnlyFavorites}
+        />
+      </div>
+      <div
+        className="-mx-3 flex flex-wrap overflow-x-hidden"
+        ref={containerElem}
+      >
+        {timelineGroups}
+      </div>
       <PaginateLoader
         active={!finishedLoadingMore && !loading}
         text={t('general.loading.paginate.media', 'Loading more media')}
diff --git a/ui/src/components/timelineGallery/TimelineGroupAlbum.tsx b/ui/src/components/timelineGallery/TimelineGroupAlbum.tsx
index 211fce72..0845bc73 100644
--- a/ui/src/components/timelineGallery/TimelineGroupAlbum.tsx
+++ b/ui/src/components/timelineGallery/TimelineGroupAlbum.tsx
@@ -130,15 +130,15 @@ const TimelineGroupAlbum = ({
   }
 
   return (
-    <GroupAlbumWrapper>
-      <AlbumTitle>
-        <Link to={`/album/${album.id}`}>{album.title}</Link>
-      </AlbumTitle>
-      <MediaWrapper>
+    <div className="mx-2">
+      <Link to={`/album/${album.id}`} className="hover:underline">
+        {album.title}
+      </Link>
+      <div className="flex flex-wrap items-center h-[210px] relative -mx-1 pr-4 overflow-hidden">
         {mediaElms}
         {itemsBubble}
-      </MediaWrapper>
-    </GroupAlbumWrapper>
+      </div>
+    </div>
   )
 }
 
diff --git a/ui/src/components/timelineGallery/TimelineGroupDate.tsx b/ui/src/components/timelineGallery/TimelineGroupDate.tsx
index 9925575a..18bd128f 100644
--- a/ui/src/components/timelineGallery/TimelineGroupDate.tsx
+++ b/ui/src/components/timelineGallery/TimelineGroupDate.tsx
@@ -60,10 +60,10 @@ const TimelineGroupDate = ({
   const formattedDate = dateFormatter.format(new Date(group.date))
 
   return (
-    <GroupDateWrapper>
-      <DateTitle>{formattedDate}</DateTitle>
-      <GroupAlbumWrapper>{albumGroupElms}</GroupAlbumWrapper>
-    </GroupDateWrapper>
+    <div className="mx-3 mb-2">
+      <div className="text-xl m-0 -mb-2">{formattedDate}</div>
+      <div className="flex wrap -mx-2 my-0">{albumGroupElms}</div>
+    </div>
   )
 }
 
diff --git a/ui/tailwind.config.js b/ui/tailwind.config.js
index 5c072cd0..8aab9ac0 100644
--- a/ui/tailwind.config.js
+++ b/ui/tailwind.config.js
@@ -4,7 +4,7 @@ module.exports = {
   darkMode: false, // or 'media' or 'class'
   theme: {
     extend: {
-      screen: {
+      screens: {
         xs: '480px',
       },
       boxShadow: {