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

feat(ComparisonSlider): add selected fonts name for mobile controls and labels everywhere

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-18 17:00:25 +03:00
parent 5fa79e06e9
commit 55b27973a2
1 changed files with 21 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/widgets/ComparisonSlider/ui/ComparisonSlider/components/Controls.svelte
View File

@@ -11,6 +11,7 @@ import { getFontUrl } from '$entities/Font/lib';
import type { ResponsiveManager } from '$shared/lib';
import { cn } from '$shared/shadcn/utils/shadcn-utils';
import { SidebarMenu } from '$shared/ui';
import { Label } from '$shared/ui';
import Drawer from '$shared/ui/Drawer/Drawer.svelte';
import { comparisonStore } from '$widgets/ComparisonSlider/model';
import { getContext } from 'svelte';
@@ -71,19 +72,29 @@ $effect(() => {
{#if responsive.isMobile}
<Drawer>
{#snippet trigger({ onClick })}
<div class={cn('absolute bottom-2 inset-x-0 z-50')}>
<div class={cn('absolute bottom-0.5 left-1/2 -translate-x-1/2 z-50')}>
<ToggleMenuButton bind:isActive={visible} {onClick} />
</div>
{/snippet}
{#snippet content({ className })}
<div class="w-full pt-4 grid grid-cols-[1fr_min-content_1fr] gap-2 items-center justify-center">
<div class="uppercase text-indigo-500 ml-auto font-semibold tracking-tight text-[0.825rem] whitespace-nowrap">
{fontB?.name ?? 'typeface_01'}
</div>
<div class="w-px h-2.5 bg-gray-400/50"></div>
<div class="uppercase text-neutral-950 mr-auto font-semibold tracking-tight text-[0.825rem] whitespace-nowrap">
{fontA?.name ?? 'typeface_02'}
</div>
</div>
<div class={cn(className, 'flex flex-col gap-2 h-[60vh]')}>
<Label class="mb-2" text="Available Fonts" align="center" />
<div class="h-full overflow-hidden">
<FontList />
</div>
<Label class="mb-2" text="Typography Controls" align="center" />
<div class="relative flex w-auto border-b border-gray-400/50 px-2 ml-4 mr-8 lg:mr-10 flex-shrink-0">
</div>
<div class="mr-4 sm:mr-6 flex-shrink-0">
<div class="mx-4 flex-shrink-0">
<TypographyControls />
</div>
</div>
@@ -92,7 +103,7 @@ $effect(() => {
{:else}
<SidebarMenu
class={cn(
'w-96 flex flex-col h-full pl-4 lg:pl-6 py-4 sm:py-6 sm:pt-12 gap-4 sm:gap-6 pointer-events-auto overflow-hidden',
'w-96 flex flex-col h-full pl-4 lg:pl-6 py-4 sm:py-6 sm:pt-12 gap-0 sm:gap-0 pointer-events-auto overflow-hidden',
'relative h-full transition-all duration-700 ease-out',
className,
)}
@@ -102,15 +113,17 @@ $effect(() => {
>
{#snippet action()}
<!-- Always-visible mode switch -->
<div class={cn('absolute top-4 left-0 z-50', visible && 'w-full')}>
<div class={cn('absolute top-2 left-0 z-50', visible && 'w-full')}>
<ToggleMenuButton bind:isActive={visible} onClick={handleToggle} />
</div>
{/snippet}
<div class="h-2/3 overflow-hidden">
<Label class="mb-2 mr-4 lg:mr-6" text="Available Fonts" align="left" />
<div class="mb-2 h-2/3 overflow-hidden">
<FontList />
</div>
<Label class="mb-2 mr-4 lg:mr-6" text="Typography Controls" align="left" />
<div class="relative flex w-auto border-b border-gray-400/50 px-2 ml-4 mr-8 lg:mr-10"></div>
<div class="mr-4 sm:mr-6">
<TypographyControls />
</div>