fix(web): лента миниатюр следует за текущим фото в просмотре
При переходе стрелками влево/вправо активная миниатюра нижней ленты уходила за край и оставалась невидимой. Теперь лента прокручивается к текущему фото, удерживая его плитку в поле зрения.
This commit is contained in:
@@ -124,6 +124,24 @@
|
|||||||
return () => document.removeEventListener('fullscreenchange', onFs);
|
return () => document.removeEventListener('fullscreenchange', onFs);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$effect(() => {
|
||||||
|
// Лента миниатюр следует за текущим фото: активная плитка всегда в поле зрения.
|
||||||
|
const i = index;
|
||||||
|
const count = photos.length;
|
||||||
|
const strip = bottomEl;
|
||||||
|
if (!strip || !count) return;
|
||||||
|
const cell = strip.querySelectorAll<HTMLElement>('[data-strip-cell]')[i];
|
||||||
|
if (!cell) return;
|
||||||
|
const pad = 8;
|
||||||
|
const cellRect = cell.getBoundingClientRect();
|
||||||
|
const stripRect = strip.getBoundingClientRect();
|
||||||
|
if (cellRect.left < stripRect.left + pad) {
|
||||||
|
strip.scrollLeft -= stripRect.left + pad - cellRect.left;
|
||||||
|
} else if (cellRect.right > stripRect.right - pad) {
|
||||||
|
strip.scrollLeft += cellRect.right - (stripRect.right - pad);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
const topClass = $derived(
|
const topClass = $derived(
|
||||||
`pointer-events-none absolute inset-x-0 top-0 z-30 flex items-center justify-between gap-1 bg-transparent px-2 py-0.5 transition-transform duration-200 ${isFullscreen && !showTop ? '-translate-y-full' : 'translate-y-0'}`
|
`pointer-events-none absolute inset-x-0 top-0 z-30 flex items-center justify-between gap-1 bg-transparent px-2 py-0.5 transition-transform duration-200 ${isFullscreen && !showTop ? '-translate-y-full' : 'translate-y-0'}`
|
||||||
);
|
);
|
||||||
@@ -554,6 +572,7 @@
|
|||||||
{#each photos as photo, i (photo.id)}
|
{#each photos as photo, i (photo.id)}
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
|
data-strip-cell
|
||||||
class="group h-16 w-16 shrink-0 overflow-hidden rounded border {i === index
|
class="group h-16 w-16 shrink-0 overflow-hidden rounded border {i === index
|
||||||
? 'border-primary'
|
? 'border-primary'
|
||||||
: 'border-border'}"
|
: 'border-border'}"
|
||||||
|
|||||||
@@ -58,7 +58,9 @@ SHALL отображаться вне каркаса, но в общей тем
|
|||||||
лентой миниатюр снизу и панелью метаданных и комментариев. Тот же режим SHALL
|
лентой миниатюр снизу и панелью метаданных и комментариев. Тот же режим SHALL
|
||||||
использоваться на публичных share-страницах. Миниатюры нижней ленты SHALL давать обратную связь
|
использоваться на публичных share-страницах. Миниатюры нижней ленты SHALL давать обратную связь
|
||||||
при наведении указателя: изображение SHALL плавно увеличиваться внутри плитки; тот же эффект SHALL
|
при наведении указателя: изображение SHALL плавно увеличиваться внутри плитки; тот же эффект SHALL
|
||||||
применяться при фокусе с клавиатуры.
|
применяться при фокусе с клавиатуры. Лента SHALL следовать за текущим фото: при переходе
|
||||||
|
стрелками или выбором в ленте активная миниатюра SHALL оставаться в поле зрения, а лента —
|
||||||
|
прокручиваться к ней.
|
||||||
|
|
||||||
#### Scenario: Открытие фото
|
#### Scenario: Открытие фото
|
||||||
- **WHEN** пользователь выбирает фото в сетке
|
- **WHEN** пользователь выбирает фото в сетке
|
||||||
@@ -76,6 +78,10 @@ SHALL отображаться вне каркаса, но в общей тем
|
|||||||
- **WHEN** пользователь наводит указатель на миниатюру в нижней ленте
|
- **WHEN** пользователь наводит указатель на миниатюру в нижней ленте
|
||||||
- **THEN** изображение миниатюры плавно увеличивается внутри плитки
|
- **THEN** изображение миниатюры плавно увеличивается внутри плитки
|
||||||
|
|
||||||
|
#### Scenario: Лента следует за фото
|
||||||
|
- **WHEN** пользователь листает фото стрелками влево/вправо
|
||||||
|
- **THEN** лента миниатюр прокручивается так, что активная миниатюра остаётся в поле зрения
|
||||||
|
|
||||||
### Requirement: Плотность сетки
|
### Requirement: Плотность сетки
|
||||||
|
|
||||||
Сетка SHALL давать пользователю управлять размером миниатюр: сдвиг регулятора вправо SHALL
|
Сетка SHALL давать пользователю управлять размером миниатюр: сдвиг регулятора вправо SHALL
|
||||||
|
|||||||
Reference in New Issue
Block a user