fix: some styles

This commit is contained in:
2025-12-15 10:10:08 +01:00
parent 2122511959
commit 92457f90e8
7 changed files with 69 additions and 6 deletions

View File

@@ -279,7 +279,6 @@
width: 40%; width: 40%;
max-width: 600px; max-width: 600px;
min-width: 500px; min-width: 500px;
height: calc(100vh - 100px);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-radius: 12px; border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

View File

@@ -459,7 +459,6 @@
width: 40%; width: 40%;
max-width: 600px; max-width: 600px;
min-width: 500px; min-width: 500px;
height: calc(100vh - 100px);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-radius: 12px; border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

View File

@@ -254,6 +254,7 @@
<style> <style>
.find-card { .find-card {
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
margin-top: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }

View File

@@ -1,6 +1,8 @@
<script lang="ts"> <script lang="ts">
import FindsList from '../finds/FindsList.svelte'; import FindsList from '../finds/FindsList.svelte';
import { Button } from '$lib/components/button'; import { Button } from '$lib/components/button';
import { goto } from '$app/navigation';
import EditFindModal from '../finds/EditFindModal.svelte';
interface Find { interface Find {
id: string; id: string;
@@ -16,6 +18,8 @@
likeCount?: number; likeCount?: number;
isLikedByUser?: boolean; isLikedByUser?: boolean;
isFromFriend?: boolean; isFromFriend?: boolean;
latitude?: string;
longitude?: string;
media?: Array<{ media?: Array<{
id: string; id: string;
type: string; type: string;
@@ -47,6 +51,8 @@
let { isOpen, location, currentUserId, onClose, onCreateFind }: Props = $props(); let { isOpen, location, currentUserId, onClose, onCreateFind }: Props = $props();
let isMobile = $state(false); let isMobile = $state(false);
let showEditModal = $state(false);
let findToEdit = $state<Find | null>(null);
$effect(() => { $effect(() => {
if (typeof window === 'undefined') return; if (typeof window === 'undefined') return;
@@ -64,6 +70,35 @@
function handleCreateFind() { function handleCreateFind() {
onCreateFind?.(); onCreateFind?.();
} }
function handleFindExplore(findId: string) {
goto(`/finds/${findId}`);
}
function handleFindEdit(findData: any) {
const find = location?.finds?.find((f) => f.id === findData.id);
if (find) {
findToEdit = find;
showEditModal = true;
}
}
function handleEditModalClose() {
showEditModal = false;
findToEdit = null;
}
function handleFindUpdated() {
showEditModal = false;
findToEdit = null;
window.location.reload();
}
function handleFindDeleted() {
showEditModal = false;
findToEdit = null;
window.location.reload();
}
</script> </script>
{#if isOpen && location} {#if isOpen && location}
@@ -94,12 +129,17 @@
<FindsList <FindsList
finds={location.finds.map((find) => ({ finds={location.finds.map((find) => ({
id: find.id, id: find.id,
locationId: find.locationId,
title: find.title, title: find.title,
description: find.description, description: find.description,
category: find.category, category: find.category,
locationName: find.locationName, locationName: find.locationName,
latitude: find.latitude,
longitude: find.longitude,
isPublic: find.isPublic, isPublic: find.isPublic,
userId: find.userId, userId: find.userId,
username: find.username,
profilePictureUrl: find.profilePictureUrl,
user: { user: {
username: find.username, username: find.username,
profilePictureUrl: find.profilePictureUrl profilePictureUrl: find.profilePictureUrl
@@ -110,6 +150,8 @@
}))} }))}
hideTitle={true} hideTitle={true}
{currentUserId} {currentUserId}
onFindExplore={handleFindExplore}
onEdit={handleFindEdit}
/> />
{:else} {:else}
<div class="empty-state"> <div class="empty-state">
@@ -147,6 +189,32 @@
</div> </div>
{/if} {/if}
{#if showEditModal && findToEdit}
<EditFindModal
isOpen={showEditModal}
find={{
id: findToEdit.id,
title: findToEdit.title,
description: findToEdit.description || null,
latitude: findToEdit.latitude || location?.latitude || '0',
longitude: findToEdit.longitude || location?.longitude || '0',
locationName: findToEdit.locationName || null,
category: findToEdit.category || null,
isPublic: findToEdit.isPublic ?? 1,
media: (findToEdit.media || []).map((m) => ({
id: m.id,
type: m.type,
url: m.url,
thumbnailUrl: m.thumbnailUrl || null,
orderIndex: m.orderIndex ?? null
}))
}}
onClose={handleEditModalClose}
onFindUpdated={handleFindUpdated}
onFindDeleted={handleFindDeleted}
/>
{/if}
<style> <style>
.modal-container { .modal-container {
position: fixed; position: fixed;
@@ -155,7 +223,6 @@
width: 40%; width: 40%;
max-width: 600px; max-width: 600px;
min-width: 500px; min-width: 500px;
height: calc(100vh - 100px);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-radius: 12px; border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

View File

@@ -560,7 +560,6 @@
width: 40%; width: 40%;
max-width: 600px; max-width: 600px;
min-width: 500px; min-width: 500px;
height: calc(100vh - 100px);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-radius: 12px; border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

View File

@@ -321,7 +321,6 @@
width: 40%; width: 40%;
max-width: 1000px; max-width: 1000px;
min-width: 500px; min-width: 500px;
height: calc(100vh - 100px);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-radius: 12px; border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);

View File

@@ -457,7 +457,6 @@
width: 40%; width: 40%;
max-width: 1000px; max-width: 1000px;
min-width: 500px; min-width: 500px;
height: calc(100vh - 100px);
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-radius: 12px; border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);