thm/test-card
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

style: transitions

Browse source
This commit is contained in:
Tomáš Mládek 2025-09-26 22:36:20 +02:00
parent 766ab74624
commit f6f096d933
1 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/routes/(pages)/+page.svelte
View file

@ -4,6 +4,7 @@
import { version } from '../../../package.json'; import { version } from '../../../package.json';
import { i18n } from '$lib/i18n'; import { i18n } from '$lib/i18n';
import type { Snapshot } from '@sveltejs/kit'; import type { Snapshot } from '@sveltejs/kit';
import { fade } from 'svelte/transition';
const buildDate = import.meta.env.VITE_BUILD_DATE || '???'; const buildDate = import.meta.env.VITE_BUILD_DATE || '???';
let search = $state(''); let search = $state('');
@ -214,9 +215,14 @@
<div class="tests"> <div class="tests">
{#each nonEmptyCategories as category} {#each nonEmptyCategories as category}
{#if tests.filter((test) => test.categories.includes(category.id)).length > 0} {#if tests.filter((test) => test.categories.includes(category.id)).length > 0}
<h2>{$i18n.t(category.label)}</h2> <h2 transition:fade={{ duration: 200 }}>{$i18n.t(category.label)}</h2>
{#each filteredTests.filter((test) => test.categories.includes(category.id) && filteredCategories.every( (f) => test.categories.includes(f) )) as test} {#each filteredTests.filter((test) => test.categories.includes(category.id) && filteredCategories.every( (f) => test.categories.includes(f) )) as test}
<a class="test" href={test.id} class:disabled={test.disabled}> <a
class="test"
href={test.id}
class:disabled={test.disabled}
transition:fade={{ duration: 200 }}
>
<i class="ti {test.icon}"></i> <i class="ti {test.icon}"></i>
<div class="label"> <div class="label">
<span class="name">{$i18n.t(test.label)}</span> <span class="name">{$i18n.t(test.label)}</span>
@ -286,7 +292,9 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
opacity: 0.66; opacity: 0.5;
transition: opacity 0.2s ease-in-out;
&.active { &.active {
opacity: 1; opacity: 1;