trev/trevstack
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 9 Activity

fix: better mobile support

Browse Source
This commit is contained in:
trev 2025-05-13 10:07:35 -04:00
parent d91c90a5c2
commit 06dc437033
10 changed files with 15 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/app.html
View File

@ -8,7 +8,7 @@
<title>TrevStack</title> <title>TrevStack</title>
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="tap" class="bg-crust text-text min-h-screen"> <body data-sveltekit-preload-data="tap" class="bg-crust text-text min-h-dvh">
<div style="display: contents">%sveltekit.body%</div> <div style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </html>

2
client/src/lib/ui/avatar/avatar-fallback.svelte
View File

@ -13,7 +13,7 @@
bind:ref bind:ref
data-slot="avatar-fallback" data-slot="avatar-fallback"
class={cn( class={cn(
'bg-surface outline-surface-2 flex size-full items-center justify-center rounded-full text-sm transition-all select-none', 'bg-surface flex size-full items-center justify-center rounded-full text-sm transition-all select-none',
className className
)} )}
{...restProps} {...restProps}

3
client/src/lib/ui/avatar/avatar.svelte
View File

@ -13,7 +13,8 @@
bind:ref bind:ref
data-slot="avatar" data-slot="avatar"
class={cn( class={cn(
'outline-surface-1 relative flex size-9 shrink-0 overflow-hidden rounded-full outline outline-offset-2', 'outline-surface-1 relative flex size-9 shrink-0 overflow-hidden rounded-full shadow-xs outline outline-offset-2',
className className
)} )}
{...restProps} {...restProps}

4
client/src/lib/ui/button/button.svelte
View File

@ -7,7 +7,7 @@
export const buttonVariants = tv({ export const buttonVariants = tv({
base: cn( base: cn(
'inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap shadow-xs transition-all', 'inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all',
// Focus // Focus
'focus-visible:outline-accent focus-visible:outline-2 focus-visible:outline-offset-2', 'focus-visible:outline-accent focus-visible:outline-2 focus-visible:outline-offset-2',
@ -24,7 +24,7 @@
red: 'text-crust bg-red hover:bg-red/90 shadow-xs', red: 'text-crust bg-red hover:bg-red/90 shadow-xs',
outline: 'text-text border-surface-1 hover:bg-surface border bg-transparent shadow-xs', outline: 'text-text border-surface-1 hover:bg-surface border bg-transparent shadow-xs',
input: 'text-text border-surface-1 hover:border-overlay border bg-transparent shadow-xs', input: 'text-text border-surface-1 hover:border-overlay border bg-transparent shadow-xs',
ghost: 'text-text hover:bg-surface shadow-xs' ghost: 'text-text hover:bg-surface'
}, },
size: { size: {
default: 'h-9 px-4 py-2 has-[>svg]:px-3', default: 'h-9 px-4 py-2 has-[>svg]:px-3',

2
client/src/lib/ui/pagination/pagination-link.svelte
View File

@ -33,7 +33,7 @@
size size
}), }),
'text-text', 'text-text',
isActive && 'bg-surface-1', isActive && 'bg-surface',
className className
)} )}
children={children || Fallback} children={children || Fallback}

2
client/src/lib/ui/range-calendar/range-calendar-day.svelte
View File

@ -17,7 +17,7 @@
class={cn( class={cn(
buttonVariants({ variant: 'ghost' }), buttonVariants({ variant: 'ghost' }),
'size-9 p-0 font-normal', 'size-9 p-0 font-normal',
'[&[data-today]:not([data-selected])]:bg-blue [&[data-today]:not([data-selected])]:text-crust [&[data-today]:not([data-selected])]:rounded-md', '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-crust [&[data-today]:not([data-selected])]:rounded-md',
// Selected // Selected
'data-[selected]:bg-surface data-[selected]:hover:bg-surface-1 data-[selected]:rounded-none data-[selected]:opacity-100', 'data-[selected]:bg-surface data-[selected]:hover:bg-surface-1 data-[selected]:rounded-none data-[selected]:opacity-100',
// Selection Start // Selection Start

2
client/src/lib/ui/sonner/sonner.svelte
View File

@ -12,7 +12,7 @@
'bg-based text-sm flex gap-2 px-4 border border-surface-1 p-2 rounded-md items-center text-text w-full min-h-12', 'bg-based text-sm flex gap-2 px-4 border border-surface-1 p-2 rounded-md items-center text-text w-full min-h-12',
title: 'text-text', title: 'text-text',
description: 'text-subtext text-xs', description: 'text-subtext text-xs',
actionButton: 'bg-blue', actionButton: 'bg-accent',
cancelButton: 'bg-red', cancelButton: 'bg-red',
closeButton: 'bg-green' closeButton: 'bg-green'
} }

7
client/src/routes/(app)/+layout.svelte
View File

@ -47,9 +47,9 @@
} }
</script> </script>
<div class="flex min-h-screen flex-col justify-between gap-2"> <div class="flex min-h-dvh flex-col justify-between gap-2">
<header <header
class="bg-mantle border-surface text-text flex h-14 w-full items-center justify-between border-b px-4 py-4 lg:px-10" class="bg-mantle border-surface text-text sticky top-0 z-50 flex h-14 w-full items-center justify-between border-b px-4 py-4 lg:px-10"
> >
<!-- Left --> <!-- Left -->
<a href="/" class="flex items-center gap-2 text-2xl font-bold tracking-wider select-none"> <a href="/" class="flex items-center gap-2 text-2xl font-bold tracking-wider select-none">
@ -58,7 +58,7 @@
</a> </a>
<!-- Center --> <!-- Center -->
<div class="bg-crust hidden items-center gap-3 rounded-md p-1 lg:flex"> <div class="bg-crust hidden items-center gap-2 rounded-md p-1 lg:flex">
<Button variant="ghost" class="hover:bg-based" href="/"> <Button variant="ghost" class="hover:bg-based" href="/">
<House /> <House />
Home Home
@ -81,6 +81,7 @@
<Avatar.Root {...props}> <Avatar.Root {...props}>
{#if userState.user?.profilePictureId} {#if userState.user?.profilePictureId}
<Avatar.Image <Avatar.Image
class="hover:brightness-125"
src={`/file/${userState.user.profilePictureId}`} src={`/file/${userState.user.profilePictureId}`}
alt={`${userState.user?.username}'s avatar`} alt={`${userState.user?.username}'s avatar`}
/> />

2
client/src/routes/(app)/items/+page.svelte
View File

@ -294,7 +294,7 @@
{/if} {/if}
</div> </div>
<div class="mx-4 mt-2 mb-4 flex justify-end sm:mt-1"> <div class="mx-4 my-2 flex justify-end">
{@render createModal()} {@render createModal()}
</div> </div>

2
client/src/routes/auth/+page.svelte
View File

@ -74,7 +74,7 @@
} }
</script> </script>
<div class="flex h-screen flex-col items-center justify-center"> <div class="flex h-dvh flex-col items-center justify-center">
<Tabs.Root bind:value={tabValue} class="min-w-full px-2 sm:min-w-sm"> <Tabs.Root bind:value={tabValue} class="min-w-full px-2 sm:min-w-sm">
<Tabs.List class="w-full"> <Tabs.List class="w-full">
<Tabs.Trigger value="login">Log In</Tabs.Trigger> <Tabs.Trigger value="login">Log In</Tabs.Trigger>