glyphdiff.com/frontend-svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/comparison-slider #19

Merged
ilia merged 129 commits from feature/comparison-slider into main 2026-02-02 09:23:46 +00:00
Conversation 0 Commits 129 Files Changed 106 +24 -30
1 changed files with 24 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 142e4f0a19 - Show all commits

54
src/routes/Page.svelte
View File

@@ -11,6 +11,7 @@ import { cn } from '$shared/shadcn/utils/shadcn-utils';
import { Section } from '$shared/ui'; import { Section } from '$shared/ui';
import ComparisonSlider from '$widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte'; import ComparisonSlider from '$widgets/ComparisonSlider/ui/ComparisonSlider/ComparisonSlider.svelte';
import { FontSearch } from '$widgets/FontSearch'; import { FontSearch } from '$widgets/FontSearch';
import { SampleList } from '$widgets/SampleList';
import LineSquiggleIcon from '@lucide/svelte/icons/line-squiggle'; import LineSquiggleIcon from '@lucide/svelte/icons/line-squiggle';
import ScanEyeIcon from '@lucide/svelte/icons/scan-eye'; import ScanEyeIcon from '@lucide/svelte/icons/scan-eye';
@@ -34,10 +35,7 @@ $effect(() => {
<div <div
class={cn( class={cn(
'flex flex-col transition-all duration-700 ease-[cubic-bezier(0.23,1,0.32,1)] mx-40', 'flex flex-col transition-all duration-700 ease-[cubic-bezier(0.23,1,0.32,1)] mx-40',
'will-change-[flex-grow] transform-gpu', 'will-change-[flex-grow] transform-gpu grow-0 justify-start',
isEmptyScreen
? 'grow justify-center'
: 'animate-search',
)} )}
> >
<div <div
@@ -50,33 +48,29 @@ $effect(() => {
</div> </div>
{/key} {/key}
{#if displayedFontsStore.fonts.length > 1} <Section class="my-12 gap-8" index={1}>
<Section class="my-12 gap-8" index={1}> {#snippet icon({ className })}
{#snippet icon({ className })} <ScanEyeIcon class={className} />
<ScanEyeIcon class={className} /> {/snippet}
{/snippet} {#snippet title({ className })}
{#snippet title({ className })} <h1 class={className}>
<h1 class={className}> Optical<br>Comparator
Optical<br>Comparator </h1>
</h1> {/snippet}
{/snippet} <ComparisonSlider />
<ComparisonSlider /> </Section>
</Section>
{/if}
{#if displayedFontsStore.hasAnyFonts} <Section class="my-12 gap-8" index={2}>
<Section class="my-12 gap-8" index={2}> {#snippet icon({ className })}
{#snippet icon({ className })} <LineSquiggleIcon class={className} />
<LineSquiggleIcon class={className} /> {/snippet}
{/snippet} {#snippet title({ className })}
{#snippet title({ className })} <h2 class={className}>
<h2 class={className}> Sample<br>Set
Sample<br>Set </h2>
</h2> {/snippet}
{/snippet} <SampleList />
<FontDisplay /> </Section>
</Section>
{/if}
</div> </div>
<style> <style>