iu/ds-galo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 2 Wiki Activity

feat(ui): open photo on tap for touch and fix narrow-screen panel

Browse Source 
- Touch/pen tap opens the viewer; mouse click still selects, dblclick opens
- Panel and rail emit a single transform utility so the panel actually
  slides in below 1280px (Tailwind v4 utility ordering made the base
  translate-x-full win over the conditional translate-x-0)
- Add touch-action: manipulation to grid cells
This commit is contained in:
iu
2026-10-11 17:58:04 +03:00
parent 9b7d81d8fc
commit ebae341c9a
7 changed files with 187 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
openspec/changes/mobile-tap-open-and-panel/tasks.md
+21
View File
@@ -0,0 +1,21 @@
# Tasks
## 1. Выдвижение панели и рейла на узком экране
- [x] 1.1 В `AppShell.svelte` у `<aside aria-label="Панель">` убрать постоянный `translate-x-full` и эмитить единственный класс трансформации: `panelOpen ? 'translate-x-0' : 'translate-x-full'` (вариант `xl:translate-x-0` сохранить). Проверка: при ширине 390px после нажатия «Панель» computed `translate` равен `0px`, `aside` попадает в пределы вьюпорта.
- [x] 1.2 Тем же принципом нормализовать `<aside aria-label="Альбомы">` (единственный класс вместо постоянного `-translate-x-full`). Проверка: на 390px кнопка «Альбомы» открывает рейл (computed `translate: 0px`).
- [x] 1.3 Проверить отсутствие регрессии на рабочем столе: при ширине >= 1280px обе панели видны статично, разделители ширины работают. Проверка: вьюпорт 1280px — панели видимы, drag разделителя меняет ширину.
## 2. Открытие фото одним касанием на сенсорных экранах
- [x] 2.1 В `PhotoGrid.svelte` фиксировать `pointerType` на `pointerdown` ячейки и добавить хелпер активации: для `touch`/`pen` вызывать `onOpen(i)`, иначе — `onSelect(i, e)`. Проверка: тап по фото на touch-эмуляции открывает маршрут просмотра; клик мышью выделяет и не открывает.
- [x] 2.2 Оставить `ondblclick -> onOpen` для мыши без изменений. Проверка: двойной клик мышью открывает просмотр.
- [x] 2.3 При сенсорной активации не менять `selection`, `cursorIndex` и содержимое панели. Проверка: после тапа `selection` пуст, номер фото в панели не появляется, происходит переход в просмотр.
- [x] 2.4 Добавить ячейке `touch-action: manipulation`, чтобы исключить двойной тап-зум. Проверка: быстрый двойной тап не масштабирует страницу и открывает просмотр.
- [x] 2.5 Проверить, что клавиатурный `Enter` открывает фото, а навигация стрелками и ровинг `tabindex` не изменились. Проверка: Enter на ячейке открывает просмотр; стрелки двигают курсор, ровно одна ячейка tabbable.
## 3. Интеграционная проверка
- [x] 3.1 `npm run check` и `npm run build` во `frontend/` проходят без ошибок. Проверка: обе команды завершаются успешно.
- [x] 3.2 CDP-прогон на вьюпорте 390x844 с touch: (а) «Панель» выдвигает панель, оверлей закрывает; (б) тап по фото открывает просмотр; (в) мышь-клик по фото выделяет без перехода; (г) «Альбомы» открывает рейл. Проверка: все четыре пункта наблюдаемы.
- [x] 3.3 Убедиться, что сценарии в `openspec/specs/ui-workspace/spec.md` синхронизируются при архивации изменения. Проверка: `openspec validate "mobile-tap-open-and-panel" --strict` проходит; при архивации спека содержит новые сценарии.