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>
%sveltekit.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>
</body>
</html>

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

@ -13,7 +13,7 @@
bind:ref
data-slot="avatar-fallback"
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
)}
{...restProps}

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

@ -13,7 +13,8 @@
bind:ref
data-slot="avatar"
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
)}
{...restProps}

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

@ -7,7 +7,7 @@
export const buttonVariants = tv({
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-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',
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',
ghost: 'text-text hover:bg-surface shadow-xs'
ghost: 'text-text hover:bg-surface'
},
size: {
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
}),
'text-text',
isActive && 'bg-surface-1',
isActive && 'bg-surface',
className
)}
children={children || Fallback}

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

@ -17,7 +17,7 @@
class={cn(
buttonVariants({ variant: 'ghost' }),
'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
'data-[selected]:bg-surface data-[selected]:hover:bg-surface-1 data-[selected]:rounded-none data-[selected]:opacity-100',
// 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',
title: 'text-text',
description: 'text-subtext text-xs',
actionButton: 'bg-blue',
actionButton: 'bg-accent',
cancelButton: 'bg-red',
closeButton: 'bg-green'
}

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

@ -47,9 +47,9 @@
}
</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
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 -->
<a href="/" class="flex items-center gap-2 text-2xl font-bold tracking-wider select-none">
@ -58,7 +58,7 @@
</a>
<!-- 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="/">
<House />
Home
@ -81,6 +81,7 @@
<Avatar.Root {...props}>
{#if userState.user?.profilePictureId}
<Avatar.Image
class="hover:brightness-125"
src={`/file/${userState.user.profilePictureId}`}
alt={`${userState.user?.username}'s avatar`}
/>

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

@ -294,7 +294,7 @@
{/if}
</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()}
</div>

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

@ -74,7 +74,7 @@
}
</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.List class="w-full">
<Tabs.Trigger value="login">Log In</Tabs.Trigger>