feat(ui): hover zoom on viewer thumbnail strip
- Thumbnails scale their image on pointer hover and keyboard focus - Tile size and strip layout stay unchanged
This commit is contained in:
@@ -443,7 +443,7 @@
|
|||||||
{#each photos as photo, i (photo.id)}
|
{#each photos as photo, i (photo.id)}
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="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'}"
|
||||||
onclick={() => onIndexChange(i)}
|
onclick={() => onIndexChange(i)}
|
||||||
@@ -454,7 +454,7 @@
|
|||||||
<img
|
<img
|
||||||
src={photo.thumb_url}
|
src={photo.thumb_url}
|
||||||
alt=""
|
alt=""
|
||||||
class="h-full w-full object-cover"
|
class="h-full w-full object-cover transition-transform duration-200 group-hover:scale-105 group-focus-visible:scale-105"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
/>
|
/>
|
||||||
{:else}
|
{:else}
|
||||||
|
|||||||
@@ -0,0 +1,2 @@
|
|||||||
|
schema: spec-driven
|
||||||
|
created: 2026-10-11
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
# Proposal
|
||||||
|
|
||||||
|
## Why
|
||||||
|
|
||||||
|
Нижняя лента миниатюр в просмотре фото не даёт визуальной обратной связи при наведении, из-за чего
|
||||||
|
навигация по ленте ощущается менее отзывчивой, чем в сетке и на обложках альбомов.
|
||||||
|
|
||||||
|
## What Changes
|
||||||
|
|
||||||
|
- Добавить эффект наведения на миниатюры нижней ленты в режиме просмотра: изображение плавно
|
||||||
|
увеличивается внутри плитки (`scale`), как в сетке.
|
||||||
|
- Продублировать эффект при фокусе с клавиатуры (`focus-visible`), чтобы поведение было доступным.
|
||||||
|
|
||||||
|
## Capabilities
|
||||||
|
|
||||||
|
### New Capabilities
|
||||||
|
<!-- нет новых возможностей -->
|
||||||
|
|
||||||
|
### Modified Capabilities
|
||||||
|
- `ui-workspace`: режим просмотра фото — добавляется сценарий наведения на миниатюру ленты.
|
||||||
|
|
||||||
|
## Impact
|
||||||
|
|
||||||
|
- `frontend/src/lib/components/Viewer.svelte` — классы плитки и изображения в блоке «Лента миниатюр».
|
||||||
|
- Затрагивает и публичный просмотр (share-страницы используют тот же `Viewer.svelte`).
|
||||||
|
- Раскладка ленты и клавиатурная навигация не меняются.
|
||||||
@@ -0,0 +1,26 @@
|
|||||||
|
# Spec Delta
|
||||||
|
|
||||||
|
## MODIFIED Requirements
|
||||||
|
|
||||||
|
### Requirement: Режим просмотра фотографии
|
||||||
|
Просмотр фото SHALL быть отдельным маршрутом внутри каркаса с крупным изображением,
|
||||||
|
лентой миниатюр снизу и панелью метаданных и комментариев. Тот же режим SHALL
|
||||||
|
использоваться на публичных share-страницах. Миниатюры нижней ленты SHALL давать обратную связь
|
||||||
|
при наведении указателя: изображение SHALL плавно увеличиваться внутри плитки; тот же эффект SHALL
|
||||||
|
применяться при фокусе с клавиатуры.
|
||||||
|
|
||||||
|
#### Scenario: Открытие фото
|
||||||
|
- **WHEN** пользователь выбирает фото в сетке
|
||||||
|
- **THEN** открывается маршрут фото в каркасе, рейл и панель остаются доступны, адрес отражает фото
|
||||||
|
|
||||||
|
#### Scenario: Навигация в просмотре
|
||||||
|
- **WHEN** пользователь использует стрелки влево/вправо или ленту миниатюр
|
||||||
|
- **THEN** показывается соседнее фото, адрес обновляется
|
||||||
|
|
||||||
|
#### Scenario: Публичный просмотр
|
||||||
|
- **WHEN** посетитель share-ссылки открывает фото
|
||||||
|
- **THEN** используется тот же режим просмотра без рейла и панели
|
||||||
|
|
||||||
|
#### Scenario: Наведение на миниатюру
|
||||||
|
- **WHEN** пользователь наводит указатель на миниатюру в нижней ленте
|
||||||
|
- **THEN** изображение миниатюры плавно увеличивается внутри плитки
|
||||||
@@ -0,0 +1,12 @@
|
|||||||
|
# Tasks
|
||||||
|
|
||||||
|
## 1. Эффект наведения на миниатюры нижней ленты
|
||||||
|
|
||||||
|
- [x] 1.1 В `Viewer.svelte` в блоке «Лента миниатюр» добавить плитке класс `group`, а изображению — `transition-transform duration-200 group-hover:scale-105 group-focus-visible:scale-105`. Проверка: наведение указателя плавно увеличивает картинку внутри плитки, клавиатурный фокус даёт тот же эффект.
|
||||||
|
- [x] 1.2 Убедиться, что раскладка ленты не меняется: плитка остаётся `h-16 w-16`, overflow скрывает выход за границы, соседние миниатюры не смещаются. Проверка: при наведении координаты соседних плиток не меняются.
|
||||||
|
- [x] 1.3 Проверить, что выбор миниатюры по клику по-прежнему меняет фото и текущая миниатюра сохраняет `border-primary`. Проверка: клик по другой миниатюре переключает просмотр, рамка текущей — primary.
|
||||||
|
|
||||||
|
## 2. Интеграционная проверка
|
||||||
|
|
||||||
|
- [x] 2.1 `npm run check` и `npm run build` во `frontend/` проходят без ошибок. Проверка: обе команды успешны.
|
||||||
|
- [x] 2.2 CDP-проверка в режиме просмотра: hover на миниатюре даёт ненулевой `scale` на изображении, а раскладка ленты неизменна. Проверка: computed `transform`/`scale` изображения меняется при наведении, `getBoundingClientRect` плитки постоянен.
|
||||||
Reference in New Issue
Block a user