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

ui:find preview better ui

Browse Source
This commit is contained in:
ッ
2025-11-17 11:12:26 +01:00
parent ab8b0ee982
commit d4d23ed46d
1 changed files with 121 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
src/lib/components/FindPreview.svelte
View File

@@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '$lib/components/sheet';
import LikeButton from '$lib/components/LikeButton.svelte'; import LikeButton from '$lib/components/LikeButton.svelte';
import VideoPlayer from '$lib/components/VideoPlayer.svelte'; import VideoPlayer from '$lib/components/VideoPlayer.svelte';
import ProfilePicture from '$lib/components/ProfilePicture.svelte'; import ProfilePicture from '$lib/components/ProfilePicture.svelte';
@@ -36,7 +35,6 @@
let { find, onClose, currentUserId }: Props = $props(); let { find, onClose, currentUserId }: Props = $props();
let showModal = $state(true);
let currentMediaIndex = $state(0); let currentMediaIndex = $state(0);
let isMobile = $state(false); let isMobile = $state(false);
@@ -54,13 +52,6 @@
return () => window.removeEventListener('resize', checkIsMobile); return () => window.removeEventListener('resize', checkIsMobile);
}); });
// Close modal when showModal changes to false
$effect(() => {
if (!showModal) {
onClose();
}
});
function nextMedia() { function nextMedia() {
if (!find?.media) return; if (!find?.media) return;
currentMediaIndex = (currentMediaIndex + 1) % find.media.length; currentMediaIndex = (currentMediaIndex + 1) % find.media.length;
@@ -110,9 +101,9 @@
</script> </script>
{#if find} {#if find}
<Sheet open={showModal} onOpenChange={(open) => (showModal = open)}> <div class="modal-container" class:mobile={isMobile}>
<SheetContent side={isMobile ? 'bottom' : 'right'} class="sheet-content"> <div class="modal-content">
<SheetHeader class="sheet-header"> <div class="modal-header">
<div class="user-section"> <div class="user-section">
<ProfilePicture <ProfilePicture
username={find.user.username} username={find.user.username}
@@ -120,7 +111,7 @@
class="user-avatar" class="user-avatar"
/> />
<div class="user-info"> <div class="user-info">
<SheetTitle class="find-title">{find.title}</SheetTitle> <h2 class="find-title">{find.title}</h2>
<div class="find-meta"> <div class="find-meta">
<span class="username">@{find.user.username}</span> <span class="username">@{find.user.username}</span>
<span class="separator">•</span> <span class="separator">•</span>
@@ -132,9 +123,20 @@
</div> </div>
</div> </div>
</div> </div>
</SheetHeader> <button type="button" class="close-button" onclick={onClose} aria-label="Close">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path
d="M18 6L6 18M6 6L18 18"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
</div>
<div class="sheet-body"> <div class="modal-body">
{#if find.media && find.media.length > 0} {#if find.media && find.media.length > 0}
<div class="media-container"> <div class="media-container">
<div class="media-viewer"> <div class="media-viewer">
@@ -263,37 +265,78 @@
/> />
</div> </div>
</div> </div>
</SheetContent> </div>
</Sheet> </div>
{/if} {/if}
<style> <style>
/* Base styles for sheet content */ .modal-container {
:global(.sheet-content) { position: fixed;
padding: 0 !important; top: 80px;
right: 20px;
width: 40%;
max-width: 600px;
min-width: 500px;
height: calc(100vh - 100px);
backdrop-filter: blur(10px);
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
z-index: 50;
display: flex;
flex-direction: column;
overflow: hidden;
animation: slideIn 0.3s ease-out;
} }
/* Desktop styles (side sheet) */ @keyframes slideIn {
@media (min-width: 768px) { from {
:global(.sheet-content) { opacity: 0;
width: 80vw !important; transform: translateX(20px);
max-width: 600px !important; }
height: 100vh !important; to {
border-radius: 0 !important; opacity: 1;
transform: translateX(0);
} }
} }
/* Mobile styles (bottom sheet) */ .modal-container.mobile {
@media (max-width: 767px) { top: auto;
:global(.sheet-content) { bottom: 0;
height: 50vh !important; left: 0;
border-radius: 16px 16px 0 0 !important; right: 0;
width: 100%;
min-width: 0;
max-width: none;
height: 90vh;
border-radius: 16px 16px 0 0;
animation: slideUp 0.3s ease-out;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
} }
} }
:global(.sheet-header) { .modal-content {
padding: 1rem 1.5rem; display: flex;
border-bottom: 1px solid hsl(var(--border)); flex-direction: column;
height: 100%;
}
.modal-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.5);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -301,7 +344,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0.75rem; gap: 0.75rem;
width: 100%; flex: 1;
min-width: 0;
} }
:global(.user-avatar) { :global(.user-avatar) {
@@ -322,13 +366,13 @@
min-width: 0; min-width: 0;
} }
:global(.find-title) { .find-title {
font-family: 'Washington', serif !important; font-family: 'Washington', serif;
font-size: 1.25rem !important; font-size: 1.25rem;
font-weight: 600 !important; font-weight: 600;
margin: 0 !important; margin: 0;
color: hsl(var(--foreground)) !important; color: hsl(var(--foreground));
line-height: 1.3 !important; line-height: 1.3;
} }
.find-meta { .find-meta {
@@ -359,7 +403,27 @@
text-transform: capitalize; text-transform: capitalize;
} }
.sheet-body { .close-button {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: none;
background: transparent;
color: hsl(var(--muted-foreground));
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
.close-button:hover {
background: hsl(var(--muted) / 0.5);
color: hsl(var(--foreground));
}
.modal-body {
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
@@ -387,8 +451,8 @@
/* Desktop media viewer - maximize available space */ /* Desktop media viewer - maximize available space */
@media (min-width: 768px) { @media (min-width: 768px) {
.sheet-body { .modal-body {
height: calc(100vh - 140px); height: calc(100vh - 180px);
} }
.media-container { .media-container {
@@ -404,8 +468,8 @@
/* Mobile media viewer - maximize available space */ /* Mobile media viewer - maximize available space */
@media (max-width: 767px) { @media (max-width: 767px) {
.sheet-body { .modal-body {
height: calc(80vh - 140px); height: calc(90vh - 180px);
} }
.media-container { .media-container {
@@ -490,6 +554,7 @@
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: rgba(255, 255, 255, 0.5);
} }
.description { .description {
@@ -556,15 +621,16 @@
.comments-section { .comments-section {
flex: 1; flex: 1;
min-height: 0; min-height: 0;
border-top: 1px solid hsl(var(--border)); border-top: 1px solid rgba(0, 0, 0, 0.1);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: rgba(255, 255, 255, 0.5);
} }
/* Desktop comments section */ /* Desktop comments section */
@media (min-width: 768px) { @media (min-width: 768px) {
.comments-section { .comments-section {
height: calc(100vh - 400px); height: calc(100vh - 500px);
min-height: 200px; min-height: 200px;
} }
} }
@@ -572,14 +638,14 @@
/* Mobile comments section */ /* Mobile comments section */
@media (max-width: 767px) { @media (max-width: 767px) {
.comments-section { .comments-section {
height: calc(80vh - 350px); height: calc(90vh - 450px);
min-height: 150px; min-height: 150px;
} }
} }
/* Mobile specific adjustments */ /* Mobile specific adjustments */
@media (max-width: 640px) { @media (max-width: 640px) {
:global(.sheet-header) { .modal-header {
padding: 1rem; padding: 1rem;
} }
@@ -592,8 +658,8 @@
height: 40px; height: 40px;
} }
:global(.find-title) { .find-title {
font-size: 1.125rem !important; font-size: 1.125rem;
} }
.content-section { .content-section {
@@ -610,7 +676,7 @@
} }
.comments-section { .comments-section {
height: calc(80vh - 380px); height: calc(90vh - 480px);
} }
} }
</style> </style>