mikaby/timeline-games
0
0
Fork 0
Code Issues Pull requests 2 Projects Releases Packages Wiki Activity Actions

feat(ui): сворачиваемые секции сайдбара в портретном режиме (#26) #27

Merged
mikaby merged 2 commits from :feat/portrait-collapsible-sections-issue26 into main 2026-06-16 21:06:57 +03:00
Conversation 14 Commits 2 Files changed 12 +422 -74
LLM-Agent commented 2026-06-16 20:18:21 +03:00
Contributor
Copy link

Summary

  • На экранах ≤640px секции сайдбара можно сворачивать: Теги, Год, Сводка статистики
  • Вся панель под SiteNav скрывается кнопкой «Показать/Скрыть панель» — галерея получает больше места
  • На десктопе поведение без изменений

Test plan

  • npm test — 84/84
  • npm run build — OK
  • Проверить на телефоне в портрете: / и /stats

Closes #26

## Summary - На экранах ≤640px секции сайдбара можно сворачивать: **Теги**, **Год**, **Сводка статистики** - Вся панель под SiteNav скрывается кнопкой «Показать/Скрыть панель» — галерея получает больше места - На десктопе поведение без изменений ## Test plan - [x] npm test — 84/84 - [x] npm run build — OK - [ ] Проверить на телефоне в портрете: / и /stats Closes #26
На экранах ≤640px: теги и годы сворачиваются отдельно, сводка статистики — одним блоком,
вся панель скрывается кнопкой «Показать/Скрыть панель».
mikaby commented 2026-06-16 20:53:54 +03:00
Owner
Copy link

Разместить скролл бары в sidebar-panel-body и в _gallery_91vgb_1 ph-scrollbar в одном месте справа. У sidebar-panel-body справа есть отступ родительский от aria-label="Навигация по годам". Когда в портретном режиме - выглядит некрасиво, скролл у sidebar-panel-body находится левее, глубже как бы.

Разместить скролл бары в sidebar-panel-body и в _gallery_91vgb_1 ph-scrollbar в одном месте справа. У sidebar-panel-body справа есть отступ родительский от aria-label="Навигация по годам". Когда в портретном режиме - выглядит некрасиво, скролл у sidebar-panel-body находится левее, глубже как бы.
В portrait .body расширяется в правый padding .chrome — скроллбар
в одной колонке с .gallery.ph-scrollbar.
LLM-Agent commented 2026-06-16 20:57:30 +03:00
Author
Contributor
Copy link

Готово — скроллбары выровнены в портрете.

Что было: у #sidebar-panel-body скроллбар сидел внутри правого padding у .chrome (0.75rem), поэтому визуально уезжал левее, чем у .gallery.ph-scrollbar.

Что сделала: в @media (max-width: 640px) блок .body расширяется на ширину правого padding (width/margin-right через --chrome-pad), скроллбар встаёт у правого края панели — в одной колонке с галереей. Контент по-прежнему с отступом.

Коммит 11df9d8 в ветке PR. npm test 84/84, npm run build OK.

Проверь на телефоне / и /stats в портрете — если ок, можно мержить.

Готово — скроллбары выровнены в портрете. **Что было:** у `#sidebar-panel-body` скроллбар сидел внутри правого `padding` у `.chrome` (0.75rem), поэтому визуально уезжал левее, чем у `.gallery.ph-scrollbar`. **Что сделала:** в `@media (max-width: 640px)` блок `.body` расширяется на ширину правого padding (`width/margin-right` через `--chrome-pad`), скроллбар встаёт у правого края панели — в одной колонке с галереей. Контент по-прежнему с отступом. Коммит `11df9d8` в ветке PR. `npm test` 84/84, `npm run build` OK. Проверь на телефоне `/` и `/stats` в портрете — если ок, можно мержить.
mikaby commented 2026-06-16 20:58:35 +03:00
Owner
Copy link

Задеплой ветку, разницы сейчас не вижу.

Задеплой ветку, разницы сейчас не вижу.
LLM-Agent commented 2026-06-16 21:02:26 +03:00
Author
Contributor
Copy link

Задеплоила ветку feat/portrait-collapsible-sections-issue26 на https://games.mikaby.ru

Коммит: 11df9d8
Bundle: index-Bu1pHCkd.js + index-Bkf9zOzU.css (раньше на проде был старый index-BDDVHr4-.css)

Что смотреть на телефоне в портрете (ширина ≤640px):

  • под SiteNav — кнопка «Показать/Скрыть панель» (вся панель фильтров)
  • секции Теги, Год, Сводка статистики — сворачиваются по заголовку
  • на десктопе без изменений

Если всё ещё старый вид — жёсткое обновление (Ctrl+F5 / очистить кэш для сайта). Тесты: 84/84, build OK.

Задеплоила ветку `feat/portrait-collapsible-sections-issue26` на https://games.mikaby.ru **Коммит:** 11df9d8 **Bundle:** `index-Bu1pHCkd.js` + `index-Bkf9zOzU.css` (раньше на проде был старый `index-BDDVHr4-.css`) Что смотреть на телефоне в **портрете** (ширина ≤640px): - под SiteNav — кнопка **«Показать/Скрыть панель»** (вся панель фильтров) - секции **Теги**, **Год**, **Сводка статистики** — сворачиваются по заголовку - на десктопе без изменений Если всё ещё старый вид — жёсткое обновление (Ctrl+F5 / очистить кэш для сайта). Тесты: 84/84, build OK.
LLM-Agent commented 2026-06-16 21:02:30 +03:00
Author
Contributor
Copy link

Задеплоила ветку feat/portrait-collapsible-sections-issue26 @ 11df9d8 — предыдущий билд был от 17:18, до фикса скроллбара.

Сейчас на https://games.mikaby.ru: bundle index-Bkf9zOzU.css, в нём portrait-правило для .body (расширение в правый padding .chrome).

Проверь в портрете ≤640px на / и /stats: скроллбар сайдбара должен быть в одной колонке с галереей. Если кэш мешает — жёсткое обновление (Ctrl+Shift+R / очистка кэша).

- Задеплоила ветку **feat/portrait-collapsible-sections-issue26** @ `11df9d8` — предыдущий билд был от 17:18, до фикса скроллбара. **Сейчас на https://games.mikaby.ru:** bundle `index-Bkf9zOzU.css`, в нём portrait-правило для `.body` (расширение в правый padding `.chrome`). Проверь в портрете ≤640px на / и /stats: скроллбар сайдбара должен быть в одной колонке с галереей. Если кэш мешает — жёсткое обновление (Ctrl+Shift+R / очистка кэша).
mikaby commented 2026-06-16 21:04:31 +03:00
Owner
Copy link

Супер! Уже намного лучше! Теперь хотелось бы чтобы у aria-label="Навигация и сводка статистики" был паддинг боттом 0. Чтобы скролл был прижат к нижней границе.

Супер! Уже намного лучше! Теперь хотелось бы чтобы у aria-label="Навигация и сводка статистики" был паддинг боттом 0. Чтобы скролл был прижат к нижней границе.
LLM-Agent commented 2026-06-16 21:04:37 +03:00
Author
Contributor
Copy link

Ветка задеплоена на https://games.mikaby.ru

  • Коммит: 11df9d8 (feat/portrait-collapsible-sections-issue26)
  • npm test 84/84, npm run build OK
  • Бандл: index-Bkf9zOzU.css — правка скроллбара в бандле есть

Как проверить: портрет ≤640px, «Показать панель», прокрутка в сайдбаре и в галерее — скроллбары должны быть в одной колонке справа.

Если всё ещё старая вёрстка — жёсткое обновление (кэш index.html в браузере).

Ветка задеплоена на https://games.mikaby.ru - Коммит: 11df9d8 (feat/portrait-collapsible-sections-issue26) - npm test 84/84, npm run build OK - Бандл: index-Bkf9zOzU.css — правка скроллбара в бандле есть Как проверить: портрет ≤640px, «Показать панель», прокрутка в сайдбаре и в галерее — скроллбары должны быть в одной колонке справа. Если всё ещё старая вёрстка — жёсткое обновление (кэш index.html в браузере).
LLM-Agent commented 2026-06-16 21:06:28 +03:00
Author
Contributor
Copy link

Перезадеплоила ветку feat/portrait-collapsible-sections-issue26 @ 11df9d8 — контейнер перезапущен 18:05 MSK.

Bundle на https://games.mikaby.ru: index-Bkf9zOzU.css + index-Bu1pHCkd.js (в CSS есть portrait-правило для выравнивания скроллбара .body с галереей).

Что проверить в портрете ≤640px на / и /stats:

  • скроллбар сайдбара и галереи в одной колонке справа
  • кнопка «Показать/Скрыть панель» под SiteNav
  • сворачиваемые секции Теги / Год / Сводка

Если вид старый — жёсткое обновление (Ctrl+Shift+R) или очистка кэша для games.mikaby.ru.

Тесты: 84/84, build OK.

Перезадеплоила ветку **feat/portrait-collapsible-sections-issue26** @ `11df9d8` — контейнер перезапущен 18:05 MSK. **Bundle на https://games.mikaby.ru:** `index-Bkf9zOzU.css` + `index-Bu1pHCkd.js` (в CSS есть portrait-правило для выравнивания скроллбара `.body` с галереей). **Что проверить в портрете ≤640px** на `/` и `/stats`: - скроллбар сайдбара и галереи в одной колонке справа - кнопка «Показать/Скрыть панель» под SiteNav - сворачиваемые секции Теги / Год / Сводка Если вид старый — жёсткое обновление (Ctrl+Shift+R) или очистка кэша для games.mikaby.ru. Тесты: 84/84, build OK.
mikaby merged commit 6a7705c97c into main 2026-06-16 21:06:57 +03:00
LLM-Agent commented 2026-06-16 21:08:06 +03:00
Author
Contributor
Copy link

Задеплоила ветку feat/portrait-collapsible-sections-issue26 (коммит 11df9d8) на https://games.mikaby.ru

Сборка: index-Bkf9zOzU.css / index-Bu1pHCkd.js (16.06 ~18:01 UTC)

Сделай жёсткое обновление (Ctrl+Shift+R) или открой в приватном окне — старый бандл мог закешироваться.

Что проверить в портрете ≤640px:

  1. Открой «Показать панель» — скроллбар у #sidebar-panel-body должен быть у правого края панели, в одной колонке с галереей.
  2. Скроллбар внутри списка годов (.yearList) — отдельный, он по-прежнему чуть левее из-за вложенного padding — это не тот скролл, о котором шла речь.

Если после hard refresh всё ещё не видно разницы — скинь скрин, посмотрю точнее.

Задеплоила ветку `feat/portrait-collapsible-sections-issue26` (коммит `11df9d8`) на https://games.mikaby.ru **Сборка:** `index-Bkf9zOzU.css` / `index-Bu1pHCkd.js` (16.06 ~18:01 UTC) Сделай жёсткое обновление (Ctrl+Shift+R) или открой в приватном окне — старый бандл мог закешироваться. **Что проверить в портрете ≤640px:** 1. Открой «Показать панель» — скроллбар у `#sidebar-panel-body` должен быть у правого края панели, в одной колонке с галереей. 2. Скроллбар внутри списка годов (`.yearList`) — отдельный, он по-прежнему чуть левее из-за вложенного padding — это не тот скролл, о котором шла речь. Если после hard refresh всё ещё не видно разницы — скинь скрин, посмотрю точнее.
LLM-Agent commented 2026-06-16 21:09:00 +03:00
Author
Contributor
Copy link

✅ Задеплоено на homelab для проверки в портрете.

  • Ветка: feat/portrait-collapsible-sections-issue26 @ 11df9d8
  • URL: https://games.mikaby.ru
  • npm test: 84/84, build OK

Проверь на телефоне: / и /stats — сворачивание секций сайдбара и кнопка «Показать/Скрыть панель».

✅ **Задеплоено на homelab** для проверки в портрете. - Ветка: `feat/portrait-collapsible-sections-issue26` @ `11df9d8` - URL: https://games.mikaby.ru - npm test: 84/84, build OK Проверь на телефоне: / и /stats — сворачивание секций сайдбара и кнопка «Показать/Скрыть панель».
LLM-Agent commented 2026-06-16 21:11:03 +03:00
Author
Contributor
Copy link

Готово — в портрете (≤640px) у .chrome (aside с aria-label «Навигация и сводка статистики») теперь padding-bottom: 0, скролл панели прижат к нижней границе.

Коммит: ba795ca — src/styles/sidebarChrome.module.css

Проверки: npm test 84/84, build OK. Посмотри на телефоне /stats в портрете — должно совпасть с тем, что ты описал.

Готово — в портрете (≤640px) у `.chrome` (aside с aria-label «Навигация и сводка статистики») теперь `padding-bottom: 0`, скролл панели прижат к нижней границе. Коммит: `ba795ca` — `src/styles/sidebarChrome.module.css` Проверки: npm test 84/84, build OK. Посмотри на телефоне `/stats` в портрете — должно совпасть с тем, что ты описал.
LLM-Agent commented 2026-06-16 21:11:18 +03:00
Author
Contributor
Copy link

Деплой на homelab

Ветка feat/portrait-collapsible-sections-issue26 задеплоена на превью.
Коммит 11df9d8
URL https://games.mikaby.ru
Контейнер timeline-games — перезапущен, healthcheck OK
Сборка npm ci → npm test → npm run build
Бандл index-Bu1pHCkd.js, index-Bkf9zOzU.css

Примечание: git fetch по HTTPS редиректит на Authelia, поэтому собрана локальная копия (уже на нужной ветке).

Для проверки на телефоне (портрет ≤640px):

  • / — сворачиваемые секции Теги / Год / Сводка + кнопка «Показать/Скрыть панель»
  • /stats — то же поведение

Готов к ревью и merge после мобильной проверки.

## Деплой на homelab Ветка **feat/portrait-collapsible-sections-issue26** задеплоена на превью. | | | |---|---| | Коммит | `11df9d8` | | URL | https://games.mikaby.ru | | Контейнер | timeline-games — перезапущен, healthcheck OK | | Сборка | npm ci → npm test → npm run build | | Бандл | index-Bu1pHCkd.js, index-Bkf9zOzU.css | **Примечание:** git fetch по HTTPS редиректит на Authelia, поэтому собрана локальная копия (уже на нужной ветке). **Для проверки на телефоне (портрет ≤640px):** - / — сворачиваемые секции Теги / Год / Сводка + кнопка «Показать/Скрыть панель» - /stats — то же поведение Готов к ревью и merge после мобильной проверки.
LLM-Agent commented 2026-06-16 21:12:11 +03:00
Author
Contributor
Copy link

Перезадеплоила ветку feat/portrait-collapsible-sections-issue26 @ ba795ca на https://games.mikaby.ru

Новый bundle: index-CZi5xiDv.css + index-D6dH1Ld8.js (раньше на сервере был index-Bkf9zOzU.css — если видишь старый, жёсткое обновление / очистка кэша).

Коммиты в деплое:

  • 11df9d8 — скроллбар sidebar-panel-body в одной колонке с галереей
  • ba795ca — убран нижний padding сайдбара в портрете

Проверь в портрете ≤640px на / и /stats: скроллбары выровнены справа, секции сворачиваются, кнопка «Показать/Скрыть панель».

npm test 84/84, build OK.

Перезадеплоила ветку **feat/portrait-collapsible-sections-issue26** @ ba795ca на https://games.mikaby.ru **Новый bundle:** index-CZi5xiDv.css + index-D6dH1Ld8.js (раньше на сервере был index-Bkf9zOzU.css — если видишь старый, жёсткое обновление / очистка кэша). **Коммиты в деплое:** - 11df9d8 — скроллбар sidebar-panel-body в одной колонке с галереей - ba795ca — убран нижний padding сайдбара в портрете **Проверь в портрете ≤640px** на / и /stats: скроллбары выровнены справа, секции сворачиваются, кнопка «Показать/Скрыть панель». npm test 84/84, build OK.
LLM-Agent commented 2026-06-16 21:12:39 +03:00
Author
Contributor
Copy link

Перезадеплоил ветку с обновлённым фиксом (ba795ca).

Почему могло не быть видно: предыдущий деплой (17:18) был до коммита 11df9d8 (17:57) — на проде оставалась старая сборка.

Что изменилось сейчас: вместо отрицательного margin у .body — padding-right: 0 у .chrome в портрете; скроллбар #sidebar-panel-body прижат к правому краю панели, контент с отступом через padding-right на .body. SiteNav и кнопка «Показать панель» — margin-right: var(--chrome-pad).

Сборка: index-CZi5xiDv.css на https://games.mikaby.ru

Проверь в портрете ≤640px на / (раскрой панель, прокрути список годов) — скроллбар сайдбара должен быть в одной вертикали с галереей. Жёсткое обновление (Ctrl+Shift+R) если кэш.

Перезадеплоил ветку с обновлённым фиксом (**ba795ca**). **Почему могло не быть видно:** предыдущий деплой (17:18) был **до** коммита 11df9d8 (17:57) — на проде оставалась старая сборка. **Что изменилось сейчас:** вместо отрицательного margin у `.body` — `padding-right: 0` у `.chrome` в портрете; скроллбар `#sidebar-panel-body` прижат к правому краю панели, контент с отступом через `padding-right` на `.body`. SiteNav и кнопка «Показать панель» — `margin-right: var(--chrome-pad)`. Сборка: `index-CZi5xiDv.css` на https://games.mikaby.ru Проверь в портрете ≤640px на `/` (раскрой панель, прокрути список годов) — скроллбар сайдбара должен быть в одной вертикали с галереей. Жёсткое обновление (Ctrl+Shift+R) если кэш.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
mikaby/timeline-games!27
No description provided.