From 10e56b35bb1bb96549be6ea2ad120525ed373e01 Mon Sep 17 00:00:00 2001
From: Corentin THOMASSET <corentin.thomasset74@gmail.com>
Date: Mon, 12 Feb 2024 10:30:41 +0100
Subject: [PATCH] refactor(home): removed n-grid to prevent layout shift (#881)

---
 src/pages/Home.page.vue | 94 +++++++++++++++++------------------------
 1 file changed, 39 insertions(+), 55 deletions(-)

diff --git a/src/pages/Home.page.vue b/src/pages/Home.page.vue
index 859418ef..dfd12b60 100644
--- a/src/pages/Home.page.vue
+++ b/src/pages/Home.page.vue
@@ -13,76 +13,60 @@ const { t } = useI18n();
 </script>
 
 <template>
-  <div class="home-page">
+  <div class="pt-50px">
     <div class="grid-wrapper">
-      <n-grid v-if="config.showBanner" x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-        <n-gi>
-          <ColoredCard :title="$t('home.follow.title')" :icon="Heart">
-            {{ $t('home.follow.p1') }}
-            <a
-              href="https://github.com/CorentinTh/it-tools"
-              rel="noopener"
-              target="_blank"
-              :aria-label="$t('home.follow.githubRepository')"
-            >GitHub</a>
-            {{ $t('home.follow.p2') }}
-            <a
-              href="https://twitter.com/ittoolsdottech"
-              rel="noopener"
-              target="_blank"
-              :aria-label="$t('home.follow.twitterAccount')"
-            >Twitter</a>.
-            {{ $t('home.follow.thankYou') }}
-            <n-icon :component="Heart" />
-          </ColoredCard>
-        </n-gi>
-      </n-grid>
+      <div v-if="config.showBanner" class="grid grid-cols-1 gap-12px lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 xl:grid-cols-4">
+        <ColoredCard :title="$t('home.follow.title')" :icon="Heart">
+          {{ $t('home.follow.p1') }}
+          <a
+            href="https://github.com/CorentinTh/it-tools"
+            rel="noopener"
+            target="_blank"
+            :aria-label="$t('home.follow.githubRepository')"
+          >GitHub</a>
+          {{ $t('home.follow.p2') }}
+          <a
+            href="https://twitter.com/ittoolsdottech"
+            rel="noopener"
+            target="_blank"
+            :aria-label="$t('home.follow.twitterAccount')"
+          >Twitter</a>.
+          {{ $t('home.follow.thankYou') }}
+          <n-icon :component="Heart" />
+        </ColoredCard>
+      </div>
 
       <transition name="height">
         <div v-if="toolStore.favoriteTools.length > 0">
-          <n-h3>{{ $t('home.categories.favoriteTools') }}</n-h3>
-          <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-            <n-gi v-for="tool in toolStore.favoriteTools" :key="tool.name">
-              <ToolCard :tool="tool" />
-            </n-gi>
-          </n-grid>
+          <h3 class="mb-5px mt-25px font-500 text-neutral-400">
+            {{ $t('home.categories.favoriteTools') }}
+          </h3>
+          <div class="grid grid-cols-1 gap-12px lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 xl:grid-cols-4">
+            <ToolCard v-for="tool in toolStore.favoriteTools" :key="tool.name" :tool="tool" />
+          </div>
         </div>
       </transition>
 
       <div v-if="toolStore.newTools.length > 0">
-        <n-h3>{{ t('home.categories.newestTools') }}</n-h3>
-        <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-          <n-gi v-for="tool in toolStore.newTools" :key="tool.name">
-            <ToolCard :tool="tool" />
-          </n-gi>
-        </n-grid>
+        <h3 class="mb-5px mt-25px font-500 text-neutral-400">
+          {{ t('home.categories.newestTools') }}
+        </h3>
+        <div class="grid grid-cols-1 gap-12px lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 xl:grid-cols-4">
+          <ToolCard v-for="tool in toolStore.newTools" :key="tool.name" :tool="tool" />
+        </div>
       </div>
 
-      <n-h3>{{ $t('home.categories.allTools') }}</n-h3>
-      <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-        <n-gi v-for="tool in toolStore.tools" :key="tool.name">
-          <transition>
-            <ToolCard :tool="tool" />
-          </transition>
-        </n-gi>
-      </n-grid>
+      <h3 class="mb-5px mt-25px font-500 text-neutral-400">
+        {{ $t('home.categories.allTools') }}
+      </h3>
+      <div class="grid grid-cols-1 gap-12px lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 xl:grid-cols-4">
+        <ToolCard v-for="tool in toolStore.tools" :key="tool.name" :tool="tool" />
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped lang="less">
-.home-page {
-  padding-top: 50px;
-}
-
-.n-h3 {
-  margin-bottom: 10px;
-}
-
-::v-deep(.n-grid) {
-  margin-bottom: 30px;
-}
-
 .height-enter-active,
 .height-leave-active {
   transition: all 0.5s ease-in-out;