mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-20 06:55:06 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

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

Browse source
This commit is contained in:
Corentin THOMASSET 2024-02-12 10:30:41 +01:00 • committed by GitHub
parent dc0461595f
commit 10e56b35bb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 39 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

94
src/pages/Home.page.vue
View file

@ -13,76 +13,60 @@ 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 href="https://github.com/CorentinTh/it-tools"
href="https://github.com/CorentinTh/it-tools" rel="noopener"
rel="noopener" target="_blank"
target="_blank" :aria-label="$t('home.follow.githubRepository')"
:aria-label="$t('home.follow.githubRepository')" >GitHub</a>
>GitHub</a> {{ $t('home.follow.p2') }}
{{ $t('home.follow.p2') }} <a
<a href="https://twitter.com/ittoolsdottech"
href="https://twitter.com/ittoolsdottech" rel="noopener"
rel="noopener" target="_blank"
target="_blank" :aria-label="$t('home.follow.twitterAccount')"
:aria-label="$t('home.follow.twitterAccount')" >Twitter</a>.
>Twitter</a>. {{ $t('home.follow.thankYou') }}
{{ $t('home.follow.thankYou') }} <n-icon :component="Heart" />
<n-icon :component="Heart" /> </ColoredCard>
</ColoredCard> </div>
</n-gi>
</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;