diff options
| -rw-r--r-- | locales/en.yml | 3 | ||||
| -rw-r--r-- | src/components/ToolCard.vue | 65 | ||||
| -rw-r--r-- | src/pages/Home.page.vue | 104 |
3 files changed, 74 insertions, 98 deletions
diff --git a/locales/en.yml b/locales/en.yml index 385e019..3bd750b 100644 --- a/locales/en.yml +++ b/locales/en.yml @@ -1,4 +1,5 @@ home: categories: newestTools: Newest tools - + allTheTools: All the tools + yourFavoriteTools: Your favorite tools diff --git a/src/components/ToolCard.vue b/src/components/ToolCard.vue index 00f2246..5442ba5 100644 --- a/src/components/ToolCard.vue +++ b/src/components/ToolCard.vue @@ -1,19 +1,16 @@ <script setup lang="ts"> import { useThemeVars } from 'naive-ui'; import FavoriteButton from './FavoriteButton.vue'; -import { useAppTheme } from '@/ui/theme/themes'; import type { Tool } from '@/tools/tools.types'; const props = defineProps<{ tool: Tool & { category: string } }>(); const { tool } = toRefs(props); const theme = useThemeVars(); - -const appTheme = useAppTheme(); </script> <template> <router-link :to="tool.path"> - <c-card class="tool-card"> + <c-card class="tool-card" shadow> <div flex items-center justify-between> <n-icon class="icon" size="40" :component="tool.icon" /> <div flex items-center gap-8px> @@ -32,15 +29,14 @@ const appTheme = useAppTheme(); <FavoriteButton :tool="tool" /> </div> </div> - <n-h3 class="title"> - <n-ellipsis>{{ tool.name }}</n-ellipsis> + <n-h3 class="title" truncate> + {{ tool.name }} </n-h3> <div class="description"> - <n-ellipsis :line-clamp="2" :tooltip="false" style="min-height: 44.78px"> + <div line-clamp-2 style="min-height: 44.78px"> {{ tool.description }} - <br> - </n-ellipsis> + </div> </div> </c-card> </router-link> @@ -52,16 +48,14 @@ a { } .tool-card { - transition: border-color ease 0.5s; border-width: 2px !important; color: transparent; - - &:hover { - border-color: v-bind('appTheme.primary.colorHover'); - } + position: relative; + border-radius: 15px; + border: none; .icon { - opacity: 0.6; + opacity: 0.4; color: v-bind('theme.textColorBase'); } @@ -74,5 +68,46 @@ a { color: v-bind('theme.textColorBase'); margin: 5px 0; } + + &::after { + --mask-radius: 20em; + + border-radius: 15px; + content: ''; + position: absolute; + inset: 0; + pointer-events: none; + user-select: none; + display: block; + height: calc(100% - 4px) ; + width: calc(100% - 4px) ; + background: #18a05818; + top: 0; + left: 0; + opacity: 1; + border: 2px solid transparent; + transition: all 0.2s ease-in-out; + + -webkit-mask: radial-gradient( + var(--mask-radius) var(--mask-radius) at 45px 45px, + #000 1%, + transparent 50% + ); + + mask: radial-gradient( + var(--mask-radius) var(--mask-radius) at 45px 45px, + #000 1%, + transparent 50% + ); + + will-change: mask; + } + + &:hover { + &::after { + --mask-radius: 50em; + border: 2px solid #18a058; + } + } } </style> diff --git a/src/pages/Home.page.vue b/src/pages/Home.page.vue index 5c7c3c4..dd2c687 100644 --- a/src/pages/Home.page.vue +++ b/src/pages/Home.page.vue @@ -1,99 +1,39 @@ <script setup lang="ts"> -import { Heart } from '@vicons/tabler'; import { useHead } from '@vueuse/head'; -import ColoredCard from '../components/ColoredCard.vue'; -import ToolCard from '../components/ToolCard.vue'; import { useToolStore } from '@/tools/tools.store'; -import { config } from '@/config'; const toolStore = useToolStore(); useHead({ title: 'IT Tools - Handy online tools for developers' }); -const { t } = useI18n(); </script> <template> - <div class="home-page"> - <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="You like it-tools?" :icon="Heart"> - Give us a star on - <a - href="https://github.com/CorentinTh/it-tools" - rel="noopener" - target="_blank" - aria-label="IT-Tools' GitHub repository" - >GitHub</a> - or follow us on - <a - href="https://twitter.com/ittoolsdottech" - rel="noopener" - target="_blank" - aria-label="IT-Tools' Twitter account" - >Twitter</a>! Thank you - <n-icon :component="Heart" /> - </ColoredCard> - </n-gi> - </n-grid> + <div class="home-page" m-auto mt-50px max-w-1800px> + <div my-8 /> - <transition name="height"> - <div v-if="toolStore.favoriteTools.length > 0"> - <n-h3>Your favorite tools</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> - </div> - </transition> + <div v-if="toolStore.favoriteTools.length > 0"> + <div mb-2 mt-6 text-lg font-semibold> + {{ $t('home.categories.yourFavoriteTools') }} + </div> + <div grid-cols="1 sm:2 md:2 lg:3 xl:4" grid gap-12px> + <tool-card v-for="tool in toolStore.favoriteTools" :key="tool.name" :tool="tool" /> + </div> + </div> - <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> + <div v-if="toolStore.newTools.length > 0"> + <div mb-2 mt-6 text-lg font-semibold> + {{ $t('home.categories.newestTools') }} </div> + <div grid-cols="1 sm:2 md:2 lg:3 xl:4" grid gap-12px> + <tool-card v-for="tool in toolStore.newTools" :key="tool.name" :tool="tool" /> + </div> + </div> - <n-h3>All the tools</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> + <div mb-2 mt-6 text-lg font-semibold> + {{ $t('home.categories.allTheTools') }} + </div> + <div grid-cols="1 sm:2 md:2 lg:3 xl:4" grid gap-12px> + <tool-card v-for="tool in toolStore.tools" :key="tool.name" :tool="tool" /> </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; - overflow: hidden; - max-height: 500px; -} - -.height-enter-from, -.height-leave-to { - max-height: 42px; - overflow: hidden; - opacity: 0; - margin-bottom: 0; -} -</style> |