Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(home):-prettier-tool-card-list #253

Open
wants to merge 2 commits into
base: developing/2.0.0
Choose a base branch
from
Open

refactor(home):-prettier-tool-card-list #253

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e0c7771
refactor(home): prettier tool card list
CorentinTh Sep 5, 2023
e9e0884
Merge branch 'main' into card-hover
CorentinTh Sep 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion locales/en.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
home:
categories:
newestTools: Newest tools

allTheTools: All the tools
yourFavoriteTools: Your favorite tools
65 changes: 50 additions & 15 deletions src/components/ToolCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Expand All @@ -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');
}

Expand All @@ -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>
104 changes: 22 additions & 82 deletions src/pages/Home.page.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>