public-repos/it-tools
5
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refactor(home): removed n-grid to prevent layout shift

Browse Source
This commit is contained in:
Corentin Thomasset 2024-02-12 10:25:57 +01:00
parent dc0461595f
commit f7c5f5bc1d
No known key found for this signature in database
GPG Key ID: DBD997E935996158
1 changed files with 39 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/pages/Home.page.vue
View File

@ -13,10 +13,9 @@ const { t } = useI18n();
</script> </script>
<template> <template>
<div class="home-page"> <div class="pt-50px">
<div class="grid-wrapper"> <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"> <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">
<n-gi>
<ColoredCard :title="$t('home.follow.title')" :icon="Heart"> <ColoredCard :title="$t('home.follow.title')" :icon="Heart">
{{ $t('home.follow.p1') }} {{ $t('home.follow.p1') }}
<a <a
@ -35,54 +34,39 @@ const { t } = useI18n();
{{ $t('home.follow.thankYou') }} {{ $t('home.follow.thankYou') }}
<n-icon :component="Heart" /> <n-icon :component="Heart" />
</ColoredCard> </ColoredCard>
</n-gi> </div>
</n-grid>
<transition name="height"> <transition name="height">
<div v-if="toolStore.favoriteTools.length > 0"> <div v-if="toolStore.favoriteTools.length > 0">
<n-h3>{{ $t('home.categories.favoriteTools') }}</n-h3> <h3 class="mb-5px mt-25px font-500 text-neutral-400">
<n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8"> {{ $t('home.categories.favoriteTools') }}
<n-gi v-for="tool in toolStore.favoriteTools" :key="tool.name"> </h3>
<ToolCard :tool="tool" /> <div class="grid grid-cols-1 gap-12px lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 xl:grid-cols-4">
</n-gi> <ToolCard v-for="tool in toolStore.favoriteTools" :key="tool.name" :tool="tool" />
</n-grid> </div>
</div> </div>
</transition> </transition>
<div v-if="toolStore.newTools.length > 0"> <div v-if="toolStore.newTools.length > 0">
<n-h3>{{ t('home.categories.newestTools') }}</n-h3> <h3 class="mb-5px mt-25px font-500 text-neutral-400">
<n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8"> {{ t('home.categories.newestTools') }}
<n-gi v-for="tool in toolStore.newTools" :key="tool.name"> </h3>
<ToolCard :tool="tool" /> <div class="grid grid-cols-1 gap-12px lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 xl:grid-cols-4">
</n-gi> <ToolCard v-for="tool in toolStore.newTools" :key="tool.name" :tool="tool" />
</n-grid> </div>
</div> </div>
<n-h3>{{ $t('home.categories.allTools') }}</n-h3> <h3 class="mb-5px mt-25px font-500 text-neutral-400">
<n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8"> {{ $t('home.categories.allTools') }}
<n-gi v-for="tool in toolStore.tools" :key="tool.name"> </h3>
<transition> <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 :tool="tool" /> <ToolCard v-for="tool in toolStore.tools" :key="tool.name" :tool="tool" />
</transition> </div>
</n-gi>
</n-grid>
</div> </div>
</div> </div>
</template> </template>
<style scoped lang="less"> <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-enter-active,
.height-leave-active { .height-leave-active {
transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;