From b0141620887d1e13e587c80ef7adfa1c5301c721 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Tue, 13 Aug 2024 17:36:46 +0200
Subject: [PATCH] refactor(web): add tailwind plugin for repeating grid cols
 (#11748)

---
 web/eslint.config.mjs                         |  2 +-
 .../album-page/album-card-group.svelte        |  2 +-
 .../search-bar/search-camera-section.svelte   |  2 +-
 .../search-bar/search-date-section.svelte     |  2 +-
 .../search-bar/search-location-section.svelte |  2 +-
 .../search-bar/search-people-section.svelte   |  2 +-
 web/src/routes/(user)/explore/+page.svelte    | 10 ++--------
 ...tailwind.config.cjs => tailwind.config.js} | 19 ++++++++++++++++++-
 8 files changed, 26 insertions(+), 15 deletions(-)
 rename web/{tailwind.config.cjs => tailwind.config.js} (74%)

diff --git a/web/eslint.config.mjs b/web/eslint.config.mjs
index e7ce7e1388..f4aec0e728 100644
--- a/web/eslint.config.mjs
+++ b/web/eslint.config.mjs
@@ -32,7 +32,7 @@ export default [
       '**/svelte.config.js',
       'eslint.config.mjs',
       'postcss.config.cjs',
-      'tailwind.config.cjs',
+      'tailwind.config.js',
     ],
   },
   ...compat.extends(
diff --git a/web/src/lib/components/album-page/album-card-group.svelte b/web/src/lib/components/album-page/album-card-group.svelte
index 0e731a683c..f899cebd8c 100644
--- a/web/src/lib/components/album-page/album-card-group.svelte
+++ b/web/src/lib/components/album-page/album-card-group.svelte
@@ -50,7 +50,7 @@
 
 <div class="mt-4">
   {#if !isCollapsed}
-    <div class="grid grid-cols-[repeat(auto-fill,minmax(14rem,1fr))] gap-y-4" transition:slide={{ duration: 300 }}>
+    <div class="grid grid-auto-fill-56 gap-y-4" transition:slide={{ duration: 300 }}>
       {#each albums as album, index (album.id)}
         <a
           data-sveltekit-preload-data="hover"
diff --git a/web/src/lib/components/shared-components/search-bar/search-camera-section.svelte b/web/src/lib/components/shared-components/search-bar/search-camera-section.svelte
index 423f6f1bc5..3e7f03e9c2 100644
--- a/web/src/lib/components/shared-components/search-bar/search-camera-section.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-camera-section.svelte
@@ -52,7 +52,7 @@
 <div id="camera-selection">
   <p class="immich-form-label">{$t('camera').toUpperCase()}</p>
 
-  <div class="grid grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-5 mt-1">
+  <div class="grid grid-auto-fit-40 gap-5 mt-1">
     <div class="w-full">
       <Combobox
         label={$t('make')}
diff --git a/web/src/lib/components/shared-components/search-bar/search-date-section.svelte b/web/src/lib/components/shared-components/search-bar/search-date-section.svelte
index 9604157529..6b661b6c03 100644
--- a/web/src/lib/components/shared-components/search-bar/search-date-section.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-date-section.svelte
@@ -12,7 +12,7 @@
   export let filters: SearchDateFilter;
 </script>
 
-<div id="date-range-selection" class="grid grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-5">
+<div id="date-range-selection" class="grid grid-auto-fit-40 gap-5">
   <label class="immich-form-label" for="start-date">
     <span>{$t('start_date').toUpperCase()}</span>
     <DateInput
diff --git a/web/src/lib/components/shared-components/search-bar/search-location-section.svelte b/web/src/lib/components/shared-components/search-bar/search-location-section.svelte
index 4ac59bb374..ce265d0030 100644
--- a/web/src/lib/components/shared-components/search-bar/search-location-section.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-location-section.svelte
@@ -69,7 +69,7 @@
 <div id="location-selection">
   <p class="immich-form-label">{$t('place').toUpperCase()}</p>
 
-  <div class="grid grid-cols-[repeat(auto-fit,minmax(10rem,1fr))] gap-5 mt-1">
+  <div class="grid grid-auto-fit-40 gap-5 mt-1">
     <div class="w-full">
       <Combobox
         label={$t('country')}
diff --git a/web/src/lib/components/shared-components/search-bar/search-people-section.svelte b/web/src/lib/components/shared-components/search-bar/search-people-section.svelte
index b6110c52b8..0c8d32a1ae 100644
--- a/web/src/lib/components/shared-components/search-bar/search-people-section.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-people-section.svelte
@@ -61,7 +61,7 @@
       </div>
 
       <SingleGridRow
-        class="grid grid-cols-[repeat(auto-fill,minmax(5rem,1fr))] -mx-1 gap-1 mt-2 overflow-y-auto immich-scrollbar"
+        class="grid grid-auto-fill-20 -mx-1 gap-1 mt-2 overflow-y-auto immich-scrollbar"
         bind:itemCount={numberOfPeople}
       >
         {#each peopleList as person (person.id)}
diff --git a/web/src/routes/(user)/explore/+page.svelte b/web/src/routes/(user)/explore/+page.svelte
index 591cb6876b..18c9dffdf3 100644
--- a/web/src/routes/(user)/explore/+page.svelte
+++ b/web/src/routes/(user)/explore/+page.svelte
@@ -53,10 +53,7 @@
           draggable="false">{$t('view_all')}</a
         >
       </div>
-      <SingleGridRow
-        class="grid md:grid-cols-[repeat(auto-fill,minmax(7rem,1fr))] grid-cols-[repeat(auto-fill,minmax(5rem,1fr))] gap-x-4"
-        let:itemCount
-      >
+      <SingleGridRow class="grid md:grid-auto-fill-28 grid-auto-fill-20 gap-x-4" let:itemCount>
         {#each people.slice(0, itemCount) as person (person.id)}
           <a href="{AppRoute.PEOPLE}/{person.id}" class="text-center">
             <ImageThumbnail circle shadow url={getPeopleThumbnailUrl(person)} altText={person.name} widthStyle="100%" />
@@ -77,10 +74,7 @@
           draggable="false">{$t('view_all')}</a
         >
       </div>
-      <SingleGridRow
-        class="grid md:grid-cols-[repeat(auto-fill,minmax(9rem,1fr))] grid-cols-[repeat(auto-fill,minmax(7rem,1fr))] gap-x-4"
-        let:itemCount
-      >
+      <SingleGridRow class="grid md:grid-auto-fill-36 grid-auto-fill-28 gap-x-4" let:itemCount>
         {#each places.slice(0, itemCount) as item (item.data.id)}
           <a class="relative" href="{AppRoute.SEARCH}?{getMetadataSearchQuery({ city: item.value })}" draggable="false">
             <div class="flex justify-center overflow-hidden rounded-xl brightness-75 filter">
diff --git a/web/tailwind.config.cjs b/web/tailwind.config.js
similarity index 74%
rename from web/tailwind.config.cjs
rename to web/tailwind.config.js
index d46cd8ad5f..eb1ea78fae 100644
--- a/web/tailwind.config.cjs
+++ b/web/tailwind.config.js
@@ -1,5 +1,7 @@
+import plugin from 'tailwindcss/plugin';
+
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
   content: ['./src/**/*.{html,js,svelte,ts}'],
   darkMode: 'class',
   theme: {
@@ -34,4 +36,19 @@ module.exports = {
       },
     },
   },
+  plugins: [
+    plugin(({ matchUtilities, theme }) => {
+      matchUtilities(
+        {
+          'grid-auto-fit': (value) => ({
+            gridTemplateColumns: `repeat(auto-fit, minmax(min(${value}, 100%), 1fr))`,
+          }),
+          'grid-auto-fill': (value) => ({
+            gridTemplateColumns: `repeat(auto-fill, minmax(min(${value}, 100%), 1fr))`,
+          }),
+        },
+        { values: theme('width') },
+      );
+    }),
+  ],
 };