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

refactor(home): lightened tool cards (#882)

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

67
src/components/ToolCard.vue
View file

@ -1,78 +1,41 @@
<script setup lang="ts"> <script setup lang="ts">
import { useThemeVars } from 'naive-ui'; import { useThemeVars } from 'naive-ui';
import FavoriteButton from './FavoriteButton.vue'; import FavoriteButton from './FavoriteButton.vue';
import { useAppTheme } from '@/ui/theme/themes';
import type { Tool } from '@/tools/tools.types'; import type { Tool } from '@/tools/tools.types';
const props = defineProps<{ tool: Tool & { category: string } }>(); const props = defineProps<{ tool: Tool & { category: string } }>();
const { tool } = toRefs(props); const { tool } = toRefs(props);
const theme = useThemeVars(); const theme = useThemeVars();
const appTheme = useAppTheme();
</script> </script>
<template> <template>
<router-link :to="tool.path"> <router-link :to="tool.path" class="decoration-none">
<c-card class="tool-card"> <c-card class="h-full transition transition-duration-0.5s !border-2px !hover:border-primary">
<div flex items-center justify-between> <div flex items-center justify-between>
<n-icon class="icon" size="40" :component="tool.icon" /> <n-icon class="text-neutral-400 dark:text-neutral-600" size="40" :component="tool.icon" />
<div flex items-center gap-8px> <div flex items-center gap-8px>
<n-tag <div
v-if="tool.isNew" v-if="tool.isNew"
size="small" class="rounded-full px-8px py-3px text-xs text-white dark:text-neutral-800"
class="badge-new" :style="{
round 'background-color': theme.primaryColor,
type="success" }"
:bordered="false"
:color="{ color: theme.primaryColor, textColor: theme.tagColor }"
> >
{{ $t('toolCard.new') }} {{ $t('toolCard.new') }}
</n-tag> </div>
<FavoriteButton :tool="tool" /> <FavoriteButton :tool="tool" />
</div> </div>
</div> </div>
<n-h3 class="title">
<n-ellipsis>{{ tool.name }}</n-ellipsis>
</n-h3>
<div class="description"> <div class="truncat my-5px text-lg text-black dark:text-white">
<n-ellipsis :line-clamp="2" :tooltip="false" style="min-height: 44.78px"> {{ tool.name }}
</div>
<div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">
{{ tool.description }} {{ tool.description }}
<br>&nbsp;
</n-ellipsis>
</div> </div>
</c-card> </c-card>
</router-link> </router-link>
</template> </template>
<style lang="less" scoped>
a {
text-decoration: none;
}
.tool-card {
transition: border-color ease 0.5s;
border-width: 2px !important;
color: transparent;
&:hover {
border-color: v-bind('appTheme.primary.colorHover');
}
.icon {
opacity: 0.6;
color: v-bind('theme.textColorBase');
}
.title {
margin: 5px 0;
}
.description {
opacity: 0.6;
color: v-bind('theme.textColorBase');
margin: 5px 0;
}
}
</style>