admin user and ui panel
This commit is contained in:
s.esmaeili
@@ -1,27 +1,38 @@
|
||||
<!--
|
||||
Editorial hero for the home screen. Replaces the legacy swiper banner with a
|
||||
self-contained, dependency-free slider: no swiper CSS to fight, no autoplay
|
||||
jitter, and it keeps working when a slide has no artwork.
|
||||
Editorial hero for the home screen. Self-contained, dependency-free slider:
|
||||
no swiper CSS to fight, no autoplay jitter, and it keeps working when a
|
||||
slide has no artwork.
|
||||
|
||||
Swipe support: the app sets `direction: rtl !important` on #app (see
|
||||
src/App.vue), so — same fix as GallerySlider.vue — the track is an isolated
|
||||
`direction: ltr` subtree (.showcase__track). Inside it, index 0 is first and
|
||||
a positive translateX moves right, plain LTR arithmetic, regardless of the
|
||||
page's own direction. The drag gesture itself is still read in screen space
|
||||
(dragging left = next slide) so it feels natural to an RTL user; only the
|
||||
track's internal layout/maths is pinned to LTR.
|
||||
-->
|
||||
<template>
|
||||
<section class="showcase" v-if="slides.length">
|
||||
<div class="showcase__frame">
|
||||
<transition-group name="showcase-fade" tag="div" class="showcase__stage">
|
||||
<article v-for="(slide, i) in slides" :key="slide.key" v-show="i === index" class="showcase__slide">
|
||||
<img v-if="slide.image" :src="slide.image" alt="" class="showcase__art" />
|
||||
<div class="showcase__scrim" aria-hidden="true"></div>
|
||||
|
||||
<div class="showcase__copy">
|
||||
<span class="showcase__eyebrow">{{ slide.eyebrow }}</span>
|
||||
<h2 class="showcase__title">{{ slide.title }}</h2>
|
||||
<p class="showcase__sub">{{ slide.subtitle }}</p>
|
||||
<button type="button" class="showcase__cta" @click="emit('select', slide)">
|
||||
{{ slide.cta }}
|
||||
<Icon icon="vuesax-linear:arrow-left-2" size="17" />
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
ref="root"
|
||||
class="showcase__frame"
|
||||
:class="{ 'is-dragging': dragging }"
|
||||
@pointerdown="onPointerDown"
|
||||
@pointermove="onPointerMove"
|
||||
@pointerup="onPointerUp"
|
||||
@pointercancel="onPointerCancel"
|
||||
>
|
||||
<div class="showcase__track" :style="trackStyle">
|
||||
<article
|
||||
v-for="(slide, i) in slides"
|
||||
:key="slide.key"
|
||||
class="showcase__slide"
|
||||
:class="{ 'is-active': i === index }"
|
||||
@click="onSlideClick(slide)"
|
||||
>
|
||||
<img v-if="slide.image" :src="slide.image" alt="" class="showcase__art" draggable="false" />
|
||||
</article>
|
||||
</transition-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="showcase__dots" v-if="slides.length > 1">
|
||||
@@ -39,8 +50,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
import Icon from '../icon/Icon.vue'
|
||||
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
|
||||
|
||||
export interface ShowcaseSlide {
|
||||
key: string
|
||||
@@ -50,6 +60,9 @@ export interface ShowcaseSlide {
|
||||
cta: string
|
||||
image?: string
|
||||
categoryId?: string
|
||||
/** Admin-uploaded slide's own destination (manage/Const.vue), when it has
|
||||
* one. Takes priority over `categoryId` in the click handler. */
|
||||
link?: string
|
||||
}
|
||||
|
||||
const props = defineProps<{ slides: ShowcaseSlide[] }>()
|
||||
@@ -75,6 +88,98 @@ onMounted(restart)
|
||||
onBeforeUnmount(() => {
|
||||
if (timer) clearInterval(timer)
|
||||
})
|
||||
|
||||
// ── Drag / swipe ─────────────────────────────────────────────
|
||||
const root = ref<HTMLElement | null>(null)
|
||||
const dragging = ref(false)
|
||||
const dragX = ref(0)
|
||||
let pointerId: number | null = null
|
||||
let startX = 0
|
||||
let startY = 0
|
||||
let trackWidth = 0
|
||||
let isSwipe = false
|
||||
|
||||
const DRAG_COMMIT_RATIO = 0.18
|
||||
const TAP_MAX_PX = 6
|
||||
|
||||
function onPointerDown(e: PointerEvent) {
|
||||
if (props.slides.length < 2 || pointerId !== null) return
|
||||
const el = root.value
|
||||
if (!el) return
|
||||
pointerId = e.pointerId
|
||||
startX = e.clientX
|
||||
startY = e.clientY
|
||||
trackWidth = el.getBoundingClientRect().width || 1
|
||||
dragX.value = 0
|
||||
dragging.value = true
|
||||
isSwipe = false
|
||||
el.setPointerCapture?.(e.pointerId)
|
||||
}
|
||||
|
||||
function onPointerMove(e: PointerEvent) {
|
||||
if (!dragging.value || e.pointerId !== pointerId) return
|
||||
const dx = e.clientX - startX
|
||||
const dy = e.clientY - startY
|
||||
if (!isSwipe && Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > TAP_MAX_PX) isSwipe = true
|
||||
if (isSwipe) dragX.value = dx
|
||||
}
|
||||
|
||||
function endDrag() {
|
||||
if (!dragging.value) return
|
||||
const dx = dragX.value
|
||||
const ratio = dx / trackWidth
|
||||
|
||||
dragging.value = false
|
||||
pointerId = null
|
||||
dragX.value = 0
|
||||
|
||||
// Screen-space drag direction: dragging left (negative dx) is "next slide",
|
||||
// matching what the gesture means to the person doing it.
|
||||
if (ratio <= -DRAG_COMMIT_RATIO && index.value < props.slides.length - 1) index.value++
|
||||
else if (ratio >= DRAG_COMMIT_RATIO && index.value > 0) index.value--
|
||||
|
||||
if (isSwipe) restart()
|
||||
isSwipe = false
|
||||
}
|
||||
|
||||
function onPointerUp(e: PointerEvent) {
|
||||
if (e.pointerId !== pointerId) return
|
||||
endDrag()
|
||||
}
|
||||
|
||||
function onPointerCancel(e: PointerEvent) {
|
||||
if (e.pointerId !== pointerId) return
|
||||
dragging.value = false
|
||||
pointerId = null
|
||||
dragX.value = 0
|
||||
isSwipe = false
|
||||
}
|
||||
|
||||
function onSlideClick(slide: ShowcaseSlide) {
|
||||
// A drag also fires a trailing click on release; only treat it as a tap
|
||||
// (i.e. open the slide) when the gesture never turned into a swipe.
|
||||
if (isSwipe) return
|
||||
emit('select', slide)
|
||||
}
|
||||
|
||||
const trackStyle = computed(() => {
|
||||
const base = -index.value * 100
|
||||
const dragPercent = trackWidth ? (dragX.value / trackWidth) * 100 : 0
|
||||
return {
|
||||
transform: `translate3d(${base + dragPercent}%, 0, 0)`,
|
||||
transition: dragging.value ? 'none' : undefined,
|
||||
}
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
if (pointerId !== null && root.value) {
|
||||
try {
|
||||
root.value.releasePointerCapture(pointerId)
|
||||
} catch {
|
||||
/* element may already be detached */
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
@@ -82,90 +187,80 @@ onBeforeUnmount(() => {
|
||||
position: relative;
|
||||
border-radius: 22px;
|
||||
overflow: hidden;
|
||||
background: @ink;
|
||||
// Neutral rather than @ink: this only shows before artwork loads, and a
|
||||
// dark fill read as an unwanted border wherever it was visible at all.
|
||||
background: @hairlineSoft;
|
||||
box-shadow: 0 26px 50px -34px rgba(20, 22, 26, 0.85);
|
||||
aspect-ratio: 320 / 208;
|
||||
touch-action: pan-y;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
// Forces its own compositing layer so `overflow: hidden` actually clips the
|
||||
// translated track on Safari/iOS — without this, a sliver of the next
|
||||
// slide peeks past the rounded edge because the browser composites the
|
||||
// transformed child (.showcase__track) on a layer that ignores the
|
||||
// parent's clip until it's promoted the same way.
|
||||
transform: translateZ(0);
|
||||
-webkit-transform: translateZ(0);
|
||||
}
|
||||
|
||||
.showcase__stage {
|
||||
position: relative;
|
||||
display: block;
|
||||
aspect-ratio: 320 / 208;
|
||||
// Isolated from the page's `direction: rtl` — see the file header. Everything
|
||||
// under this node uses plain LTR layout and LTR-signed transforms.
|
||||
.showcase__track {
|
||||
direction: ltr;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
// A gentle, slightly-overshooting ease — softer settle than a linear/
|
||||
// ease-out curve, which is what makes the swipe feel "alive" rather than
|
||||
// mechanical. Slowed down a touch from the old 0.42s so the motion reads
|
||||
// as a deliberate glide instead of a snap.
|
||||
transition: transform 0.56s cubic-bezier(0.16, 0.86, 0.3, 1);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.showcase__frame.is-dragging .showcase__track {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.showcase__slide {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
position: relative;
|
||||
flex: 0 0 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
// Clips its own image's scale-in (.showcase__art below) to this slide's own
|
||||
// box, so the 1.06x zoom never bleeds into the neighbouring slide.
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.showcase__art {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
// A plain block filling the slide, NOT an absolutely-positioned box.
|
||||
// `position: absolute` + `inset` made the image's own box a second,
|
||||
// independently-rounded measurement of the same area the frame already
|
||||
// sizes via `aspect-ratio`; on real devices the two disagreed by a
|
||||
// fraction of a pixel and the frame's dark background showed through as a
|
||||
// hairline border around the artwork. Sizing it as ordinary in-flow
|
||||
// content removes that second measurement entirely.
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
opacity: 0.5;
|
||||
transform: scale(1.04);
|
||||
-webkit-user-drag: none;
|
||||
user-select: none;
|
||||
// Never settles below 1x: the "breathe in" flourish now runs from a larger
|
||||
// scale down to exactly 1, so the image is always at least as big as the
|
||||
// slide and can never reveal what sits behind it.
|
||||
transform: scale(1.06);
|
||||
transition: transform 0.56s cubic-bezier(0.16, 0.86, 0.3, 1);
|
||||
}
|
||||
|
||||
.showcase__scrim {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background:
|
||||
linear-gradient(255deg, rgba(122, 27, 51, 0.55) 0%, rgba(122, 27, 51, 0) 52%),
|
||||
linear-gradient(to left, rgba(20, 22, 26, 0.2) 0%, rgba(20, 22, 26, 0.92) 72%);
|
||||
.showcase__slide.is-active .showcase__art {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.showcase__copy {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: 22px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.showcase__eyebrow {
|
||||
font-size: 10.5px;
|
||||
letter-spacing: 1.6px;
|
||||
color: rgba(255, 255, 255, 0.62);
|
||||
padding-bottom: 9px;
|
||||
}
|
||||
|
||||
.showcase__title {
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
line-height: 1.35;
|
||||
color: #fff;
|
||||
margin: 0 0 7px;
|
||||
}
|
||||
|
||||
.showcase__sub {
|
||||
font-size: 12.5px;
|
||||
line-height: 1.85;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin: 0 0 16px;
|
||||
max-width: 30ch;
|
||||
}
|
||||
|
||||
.showcase__cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
padding: 9px 16px;
|
||||
border-radius: 999px;
|
||||
background: #fff;
|
||||
color: @ink;
|
||||
font-size: 12.5px;
|
||||
font-weight: 700;
|
||||
font-family: inherit;
|
||||
transition: transform 0.18s ease, background 0.18s ease;
|
||||
}
|
||||
.showcase__cta:active {
|
||||
transform: scale(0.97);
|
||||
.showcase__frame.is-dragging .showcase__art {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.showcase__dots {
|
||||
@@ -183,19 +278,10 @@ onBeforeUnmount(() => {
|
||||
cursor: pointer;
|
||||
border-radius: 999px;
|
||||
background: @hairline;
|
||||
transition: all 0.25s ease;
|
||||
transition: width 0.42s cubic-bezier(0.16, 0.86, 0.3, 1), background 0.3s ease;
|
||||
}
|
||||
.showcase__dot.is-active {
|
||||
width: 20px;
|
||||
background: @wine;
|
||||
}
|
||||
|
||||
.showcase-fade-enter-active,
|
||||
.showcase-fade-leave-active {
|
||||
transition: opacity 0.55s ease;
|
||||
}
|
||||
.showcase-fade-enter-from,
|
||||
.showcase-fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user