zias/serengo
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix:styling for mobile createfind

Browse Source
This commit is contained in:
ッ
2025-11-17 10:57:47 +01:00
parent 1f0e8141be
commit dabc732f4b
1 changed files with 81 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
src/lib/components/CreateFindModal.svelte
View File

@@ -179,9 +179,9 @@
{#if isOpen} {#if isOpen}
<Sheet open={showModal} onOpenChange={(open) => (showModal = open)}> <Sheet open={showModal} onOpenChange={(open) => (showModal = open)}>
<SheetContent side={isMobile ? 'bottom' : 'right'} class="create-find-sheet"> <SheetContent side={isMobile ? 'bottom' : 'right'} class="sheet-content">
<SheetHeader> <SheetHeader class="sheet-header">
<SheetTitle>Create Find</SheetTitle> <SheetTitle class="sheet-title">Create Find</SheetTitle>
</SheetHeader> </SheetHeader>
<form <form
@@ -191,7 +191,7 @@
}} }}
class="form" class="form"
> >
<div class="form-content"> <div class="sheet-body">
<div class="field"> <div class="field">
<Label for="title">What did you find?</Label> <Label for="title">What did you find?</Label>
<Input name="title" placeholder="Amazing coffee shop..." required bind:value={title} /> <Input name="title" placeholder="Amazing coffee shop..." required bind:value={title} />
@@ -334,7 +334,7 @@
{/if} {/if}
</div> </div>
<div class="actions"> <div class="sheet-footer">
<Button variant="ghost" type="button" onclick={closeModal} disabled={isSubmitting}> <Button variant="ghost" type="button" onclick={closeModal} disabled={isSubmitting}>
Cancel Cancel
</Button> </Button>
@@ -348,34 +348,57 @@
{/if} {/if}
<style> <style>
:global(.create-find-sheet) { /* Base styles for sheet content */
:global(.sheet-content) {
padding: 0 !important; padding: 0 !important;
width: 100%;
max-width: 500px;
height: 100vh;
border-radius: 0;
} }
@media (max-width: 767px) { /* Desktop styles (side sheet) */
:global(.create-find-sheet) { @media (min-width: 768px) {
height: 90vh; :global(.sheet-content) {
border-radius: 12px 12px 0 0; width: 80vw !important;
max-width: 600px !important;
height: 100vh !important;
border-radius: 0 !important;
} }
} }
/* Mobile styles (bottom sheet) */
@media (max-width: 767px) {
:global(.sheet-content) {
height: 90vh !important;
border-radius: 16px 16px 0 0 !important;
}
}
:global(.sheet-header) {
padding: 1rem 1.5rem;
border-bottom: 1px solid hsl(var(--border));
flex-shrink: 0;
}
:global(.sheet-title) {
font-family: 'Washington', serif !important;
font-size: 1.5rem !important;
font-weight: 600 !important;
margin: 0 !important;
color: hsl(var(--foreground)) !important;
}
.form { .form {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.form-content { .sheet-body {
flex: 1; flex: 1;
padding: 1.5rem; padding: 1.5rem;
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1.5rem; gap: 1.5rem;
min-height: 0;
} }
.field { .field {
@@ -397,7 +420,7 @@
} }
textarea { textarea {
min-height: 80px; min-height: 100px;
padding: 0.75rem; padding: 0.75rem;
border: 1px solid hsl(var(--border)); border: 1px solid hsl(var(--border));
border-radius: 8px; border-radius: 8px;
@@ -407,6 +430,7 @@
resize: vertical; resize: vertical;
outline: none; outline: none;
transition: border-color 0.2s ease; transition: border-color 0.2s ease;
line-height: 1.5;
} }
textarea:focus { textarea:focus {
@@ -448,13 +472,14 @@
} }
.privacy-toggle:hover { .privacy-toggle:hover {
background: hsl(var(--muted)); background: hsl(var(--muted) / 0.5);
} }
.privacy-toggle input[type='checkbox'] { .privacy-toggle input[type='checkbox'] {
width: 16px; width: 18px;
height: 16px; height: 18px;
accent-color: hsl(var(--primary)); accent-color: hsl(var(--primary));
cursor: pointer;
} }
.file-upload { .file-upload {
@@ -485,7 +510,7 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 2rem; padding: 2rem 1rem;
text-align: center; text-align: center;
gap: 0.5rem; gap: 0.5rem;
color: hsl(var(--muted-foreground)); color: hsl(var(--muted-foreground));
@@ -493,6 +518,7 @@
.file-content span { .file-content span {
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500;
} }
.file-selected { .file-selected {
@@ -500,7 +526,7 @@
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
padding: 0.75rem; padding: 0.75rem;
background: hsl(var(--muted)); background: hsl(var(--muted) / 0.5);
border: 1px solid hsl(var(--border)); border: 1px solid hsl(var(--border));
border-radius: 8px; border-radius: 8px;
font-size: 0.875rem; font-size: 0.875rem;
@@ -516,24 +542,26 @@
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
color: hsl(var(--foreground));
} }
.actions { .sheet-footer {
display: flex; display: flex;
gap: 1rem; gap: 0.75rem;
padding: 1.5rem; padding: 1.5rem;
border-top: 1px solid hsl(var(--border)); border-top: 1px solid hsl(var(--border));
background: hsl(var(--background)); background: hsl(var(--background));
flex-shrink: 0;
} }
.actions :global(button) { .sheet-footer :global(button) {
flex: 1; flex: 1;
} }
.location-section { .location-section {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 0.75rem;
} }
.location-header { .location-header {
@@ -544,18 +572,19 @@
.toggle-button { .toggle-button {
font-size: 0.75rem; font-size: 0.75rem;
padding: 0.25rem 0.5rem; padding: 0.375rem 0.75rem;
height: auto; height: auto;
background: transparent; background: hsl(var(--secondary));
border: 1px solid hsl(var(--border)); border: 1px solid hsl(var(--border));
border-radius: 6px; border-radius: 6px;
color: hsl(var(--foreground)); color: hsl(var(--secondary-foreground));
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
font-weight: 500;
} }
.toggle-button:hover { .toggle-button:hover {
background: hsl(var(--muted)); background: hsl(var(--secondary) / 0.8);
} }
.coordinates-display { .coordinates-display {
@@ -567,7 +596,7 @@
.coordinates-info { .coordinates-info {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 0.75rem;
padding: 0.75rem; padding: 0.75rem;
background: hsl(var(--muted) / 0.5); background: hsl(var(--muted) / 0.5);
border: 1px solid hsl(var(--border)); border: 1px solid hsl(var(--border));
@@ -578,38 +607,49 @@
.coordinate { .coordinate {
color: hsl(var(--muted-foreground)); color: hsl(var(--muted-foreground));
font-family: monospace; font-family: monospace;
font-size: 0.8125rem;
} }
.edit-coords-button { .edit-coords-button {
margin-left: auto; margin-left: auto;
font-size: 0.75rem; font-size: 0.75rem;
padding: 0.25rem 0.5rem; padding: 0.375rem 0.75rem;
height: auto; height: auto;
background: transparent; background: hsl(var(--secondary));
border: 1px solid hsl(var(--border)); border: 1px solid hsl(var(--border));
border-radius: 6px; border-radius: 6px;
color: hsl(var(--foreground)); color: hsl(var(--secondary-foreground));
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: all 0.2s ease;
font-weight: 500;
} }
.edit-coords-button:hover { .edit-coords-button:hover {
background: hsl(var(--muted)); background: hsl(var(--secondary) / 0.8);
} }
/* Mobile specific adjustments */
@media (max-width: 640px) { @media (max-width: 640px) {
.form-content { :global(.sheet-header) {
padding: 1rem; padding: 1rem;
gap: 1rem;
} }
.actions { :global(.sheet-title) {
padding: 1rem; font-size: 1.25rem !important;
flex-direction: column;
} }
.actions :global(button) { .sheet-body {
flex: none; padding: 1rem;
gap: 1.25rem;
}
.sheet-footer {
padding: 1rem;
gap: 0.5rem;
}
.file-content {
padding: 1.5rem 1rem;
} }
} }
</style> </style>