From 5ee1a611bc7611942e0655930decdb31783f08b9 Mon Sep 17 00:00:00 2001 From: Florian <45694132+flo-bit@users.noreply.github.com> Date: Tue, 12 May 2026 02:19:25 +0200 Subject: [PATCH] small fixes --- .../_base/BaseCard/BaseEditingCard.svelte | 31 +++-- src/lib/layout/EditableGrid.svelte | 21 ---- src/lib/website/EditableProfile.svelte | 117 ++++++++++++------ src/lib/website/EditableWebsite.svelte | 13 +- src/lib/website/MobileSelectionBar.svelte | 2 +- src/lib/website/context.ts | 1 + 6 files changed, 109 insertions(+), 76 deletions(-) diff --git a/src/lib/cards/_base/BaseCard/BaseEditingCard.svelte b/src/lib/cards/_base/BaseCard/BaseEditingCard.svelte index a796395..b9ef3c4 100644 --- a/src/lib/cards/_base/BaseCard/BaseEditingCard.svelte +++ b/src/lib/cards/_base/BaseCard/BaseEditingCard.svelte @@ -11,6 +11,7 @@ getCanEdit, getIsCoarse, getIsMobile, + getIsRealMobile, getSelectedCardId, getSelectCard, getToggleCardSettings @@ -61,6 +62,7 @@ let canEdit = getCanEdit(); let isMobile = getIsMobile(); + let isRealMobile = getIsRealMobile(); let isCoarse = getIsCoarse(); let selectedCardId = getSelectedCardId(); @@ -68,7 +70,6 @@ let toggleCardSettings = getToggleCardSettings(); let isSelected = $derived(selectedCardId?.() === item.id); - // Track pointer down position so we only select on click, not on drag let overlayDownX = 0; let overlayDownY = 0; function handleOverlayPointerDown(e: PointerEvent) { @@ -78,9 +79,11 @@ function handleOverlayPointerUp(e: PointerEvent) { const dx = Math.abs(e.clientX - overlayDownX); const dy = Math.abs(e.clientY - overlayDownY); - if (dx < 5 && dy < 5) { - selectCard?.(item.id); - } + if (dx >= 5 || dy >= 5) return; + // Defer to next frame so the synthetic click from this tap fires while + // the overlay is still mounted — otherwise the click falls through to + // whatever inner button is now exposed (file picker, popover trigger, …). + requestAnimationFrame(() => selectCard?.(item.id)); } let colorPopoverOpen = $state(false); @@ -204,7 +207,7 @@ showOutline={isResizing || isSelected} class={[ 'scale-100 starting:scale-0 starting:opacity-0', - isSelected ? 'outline-accent-500 z-10' : '' + isSelected ? 'outline-accent-500 z-10 touch-none' : '' ]} {...rest} > @@ -213,13 +216,16 @@ select text / trigger inner content. Click (no drag) selects the card. -->
{/if} - {@render children?.()} +
+ {@render children?.()} +
{#if cardDef.canHaveLabel}
+ + diff --git a/src/lib/layout/EditableGrid.svelte b/src/lib/layout/EditableGrid.svelte index 3b61fd1..d5245a0 100644 --- a/src/lib/layout/EditableGrid.svelte +++ b/src/lib/layout/EditableGrid.svelte @@ -274,15 +274,6 @@ }; }); - // For touch: register non-passive touchstart to prevent scroll when touching selected card - $effect(() => { - if (!container || !selectedCardId) return; - container.addEventListener('touchstart', handleTouchStart, { passive: false }); - return () => { - container?.removeEventListener('touchstart', handleTouchStart); - }; - }); - // For touch: register non-passive touchmove to prevent scroll during active drag $effect(() => { if (phase !== 'active' || !container) return; @@ -302,18 +293,6 @@ } } - function handleTouchStart(e: TouchEvent) { - // On touch, prevent scrolling when touching the selected card - // This must happen on touchstart (not pointerdown) to claim the gesture - const cardEl = (e.target as HTMLElement)?.closest?.('.card') as HTMLElement | null; - if (cardEl && cardEl.id === selectedCardId) { - const item = items.find((i) => i.id === cardEl.id); - if (item && !item.cardData?.locked) { - e.preventDefault(); - } - } - } - // --- File drop handlers --- function hasImageFile(dt: DataTransfer): boolean { diff --git a/src/lib/website/EditableProfile.svelte b/src/lib/website/EditableProfile.svelte index f62fe6f..f06f23a 100644 --- a/src/lib/website/EditableProfile.svelte +++ b/src/lib/website/EditableProfile.svelte @@ -13,6 +13,12 @@ let fileInput: HTMLInputElement; let isHoveringAvatar = $state(false); + function hideProfile() { + data.publication.preferences ??= {}; + data.publication.preferences.hideProfileSection = true; + data = { ...data }; + } + async function handleAvatarChange(event: Event) { const target = event.target as HTMLInputElement; const file = target.files?.[0]; @@ -65,55 +71,86 @@ ]} > - + + + +
(); let showingMobileView = $state(false); - let isMobile = $derived(showingMobileView || (innerWidth.current ?? 1000) < 1024); + let isRealMobile = $derived((innerWidth.current ?? 1000) < 1024); + let isMobile = $derived(showingMobileView || isRealMobile); let showMobileWarning = $state((innerWidth.current ?? 1000) < 1024); setIsMobile(() => isMobile); + setIsRealMobile(() => isRealMobile); // svelte-ignore state_referenced_locally let editedOn = $state(data.publication.preferences?.editedOn ?? 0); @@ -141,17 +144,15 @@ $effect(() => { if (!selectedCard) { cardSettingsOpen = false; - } else if (!isMobile) { - cardSettingsOpen = true; } }); setToggleCardSettings((id: string) => { if (selectedCardId === id) { - selectedCardId = null; + cardSettingsOpen = !cardSettingsOpen; } else { selectedCardId = id; - if (!isMobile) cardSettingsOpen = true; + cardSettingsOpen = true; } }); @@ -528,7 +529,7 @@ (cardSettingsOpen = true)} ondeselect={() => (selectedCardId = null)} /> diff --git a/src/lib/website/MobileSelectionBar.svelte b/src/lib/website/MobileSelectionBar.svelte index e9feae7..a98b5eb 100644 --- a/src/lib/website/MobileSelectionBar.svelte +++ b/src/lib/website/MobileSelectionBar.svelte @@ -18,7 +18,7 @@ {#if visible && (dev || (user.isLoggedIn && user.profile?.did === data.did))} -
+
diff --git a/src/lib/website/context.ts b/src/lib/website/context.ts index 7e4bcd7..66c7c97 100644 --- a/src/lib/website/context.ts +++ b/src/lib/website/context.ts @@ -4,6 +4,7 @@ import { createContext } from 'svelte'; export const [getDidContext, setDidContext] = createContext(); export const [getHandleContext, setHandleContext] = createContext(); export const [getIsMobile, setIsMobile] = createContext<() => boolean>(); +export const [getIsRealMobile, setIsRealMobile] = createContext<() => boolean>(); export const [getCanEdit, setCanEdit] = createContext<() => boolean>(); export const [getAdditionalUserData, setAdditionalUserData] = createContext>(); -- 2.51.2