ui: carousel swipe, org peek, deadline banner fixes
- Carousel: touch swipe support (40px threshold) - OrganisationsBlock: 1.5 cards on mobile to hint at more content - DeadlineBanner: left-aligned text, shrink-0 close button Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -21,6 +21,16 @@
|
|||||||
let index = $state(0);
|
let index = $state(0);
|
||||||
let paused = $state(false);
|
let paused = $state(false);
|
||||||
let timer: ReturnType<typeof setInterval> | null = null;
|
let timer: ReturnType<typeof setInterval> | null = null;
|
||||||
|
let touchStartX = 0;
|
||||||
|
|
||||||
|
function onTouchStart(e: TouchEvent) {
|
||||||
|
touchStartX = e.touches[0].clientX;
|
||||||
|
}
|
||||||
|
function onTouchEnd(e: TouchEvent) {
|
||||||
|
const dx = e.changedTouches[0].clientX - touchStartX;
|
||||||
|
if (Math.abs(dx) < 40) return;
|
||||||
|
if (dx < 0) next(); else prev();
|
||||||
|
}
|
||||||
|
|
||||||
function prev() {
|
function prev() {
|
||||||
if (count > 0) index = (index - 1 + count) % count;
|
if (count > 0) index = (index - 1 + count) % count;
|
||||||
@@ -67,7 +77,7 @@
|
|||||||
</button>
|
</button>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<div class="grid flex-1 min-w-0">
|
<div class="grid flex-1 min-w-0" ontouchstart={onTouchStart} ontouchend={onTouchEnd}>
|
||||||
{#each { length: count } as _, i}
|
{#each { length: count } as _, i}
|
||||||
<div
|
<div
|
||||||
class="col-start-1 row-start-1 transition-opacity duration-300 {i === index
|
class="col-start-1 row-start-1 transition-opacity duration-300 {i === index
|
||||||
|
|||||||
@@ -154,7 +154,7 @@
|
|||||||
: undefined}
|
: undefined}
|
||||||
{@const logoField = organisationLogoField(o)}
|
{@const logoField = organisationLogoField(o)}
|
||||||
<div
|
<div
|
||||||
class="shrink-0 snap-start w-[calc((100%-1rem)/2)] lg:w-[calc((100%-2rem)/3)]"
|
class="shrink-0 snap-start w-[calc((100%-0.5rem)/1.5)] sm:w-[calc((100%-1rem)/2)] lg:w-[calc((100%-2rem)/3)]"
|
||||||
>
|
>
|
||||||
{@render defaultCard(o, linkUrl, logoField, orgIndex)}
|
{@render defaultCard(o, linkUrl, logoField, orgIndex)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user