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): prettier tool card list

Browse source
This commit is contained in:
Corentin Thomasset 2023-09-05 08:52:08 +02:00
parent 233d5565f6
commit e0c7771e8f
No known key found for this signature in database
GPG key ID: DBD997E935996158
3 changed files with 75 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

3
locales/en.yml
View file

@ -1,4 +1,5 @@
home:
categories:
newestTools: Newest tools
allTheTools: All the tools
yourFavoriteTools: Your favorite tools

65
src/components/ToolCard.vue
View file

@ -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>&nbsp;
</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>

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

@ -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 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>
</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>
<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>