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

feat: add tailwind responsive classes

Browse Source
This commit is contained in:
Ilia Mashkov
2026-02-06 14:48:44 +03:00
parent a26bcbecff
commit fedf3f88e7
14 changed files with 106 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/entities/Breadcrumb/ui/BreadcrumbHeader/BreadcrumbHeader.svelte
View File

@@ -19,29 +19,29 @@ import { scrollBreadcrumbsStore } from '../../model';
backdrop-blur-lg bg-white/20
border-b border-gray-300/50
shadow-[0_1px_3px_rgba(0,0,0,0.04)]
h-12
h-10 sm:h-12
"
>
<div class="max-w-8xl mx-auto px-6 h-full flex items-center gap-4">
<h1 class={cn('font-[Barlow] font-extralight')}>
<div class="max-w-8xl mx-auto px-4 sm:px-6 h-full flex items-center gap-2 sm:gap-4">
<h1 class={cn('font-[Barlow] font-extralight text-sm sm:text-base')}>
GLYPHDIFF
</h1>
<div class="h-4 w-px bg-gray-300/60"></div>
<div class="h-3.5 sm:h-4 w-px bg-gray-300/60 hidden sm:block"></div>
<nav class="flex items-center gap-3 overflow-x-auto scrollbar-hide flex-1">
<nav class="flex items-center gap-2 sm:gap-3 overflow-x-auto scrollbar-hide flex-1">
{#each scrollBreadcrumbsStore.items as item, idx (item.index)}
<div
in:fly={{ duration: 300, y: -10, x: 100, opacity: 0 }}
out:fly={{ duration: 300, y: 10, x: 100, opacity: 0 }}
class="flex items-center gap-3 whitespace-nowrap shrink-0"
class="flex items-center gap-2 sm:gap-3 whitespace-nowrap shrink-0"
>
<span class="font-mono text-[9px] text-gray-400 tracking-wider">
<span class="font-mono text-[8px] sm:text-[9px] text-gray-400 tracking-wider">
{String(item.index).padStart(2, '0')}
</span>
{@render item.title({
className: 'text-[10px] md:text-[10px] font-bold uppercase tracking-tight leading-[0.95] text-gray-900',
className: 'text-[9px] sm:text-[10px] font-bold uppercase tracking-tight leading-[0.95] text-gray-900',
})}
{#if idx < scrollBreadcrumbsStore.items.length - 1}
@@ -55,9 +55,9 @@ import { scrollBreadcrumbsStore } from '../../model';
{/each}
</nav>
<div class="flex items-center gap-2 opacity-50 ml-auto">
<div class="w-px h-2.5 bg-gray-300/60"></div>
<span class="font-mono text-[8px] text-gray-400 tracking-wider">
<div class="flex items-center gap-1.5 sm:gap-2 opacity-50 ml-auto">
<div class="w-px h-2 sm:h-2.5 bg-gray-300/60 hidden sm:block"></div>
<span class="font-mono text-[7px] sm:text-[8px] text-gray-400 tracking-wider">
[{scrollBreadcrumbsStore.items.length}]
</span>
</div>

12
src/entities/Font/ui/FontVirtualList/FontVirtualList.svelte
View File

@@ -86,14 +86,14 @@ function handleNearBottom(lastVisibleIndex: number) {
{#key isLoading}
<div class="relative w-full h-full" transition:fade={{ duration: 300 }}>
{#if isLoading}
<div class="flex flex-col gap-4 p-4">
<div class="flex flex-col gap-3 sm:gap-4 p-3 sm:p-4">
{#each Array(5) as _, i}
<div class="flex flex-col gap-2 p-4 border rounded-xl border-gray-200/50 bg-white/40">
<div class="flex items-center justify-between mb-4">
<Skeleton class="h-8 w-1/3" />
<Skeleton class="h-8 w-8 rounded-full" />
<div class="flex flex-col gap-1.5 sm:gap-2 p-3 sm:p-4 border rounded-lg sm:rounded-xl border-gray-200/50 bg-white/40">
<div class="flex items-center justify-between mb-3 sm:mb-4">
<Skeleton class="h-6 sm:h-8 w-1/3" />
<Skeleton class="h-6 sm:h-8 w-6 sm:w-8 rounded-full" />
</div>
<Skeleton class="h-32 w-full" />
<Skeleton class="h-24 sm:h-32 w-full" />
</div>
{/each}
</div>