From 2b7ad4a03aa991a4da913756dbd855db6bf67fad Mon Sep 17 00:00:00 2001 From: IK Date: Mon, 7 Sep 2026 08:52:15 +0700 Subject: [PATCH] feat: improve record filters on mobile --- apps/web/src/pages/records.astro | 10 +++++----- apps/web/src/styles/global.css | 2 ++ docs/ROADMAP.md | 9 ++++----- docs/UI_UX_AUDIT.md | 4 ++-- 4 files changed, 13 insertions(+), 12 deletions(-) diff --git a/apps/web/src/pages/records.astro b/apps/web/src/pages/records.astro index 236b1c6..1f6b60d 100644 --- a/apps/web/src/pages/records.astro +++ b/apps/web/src/pages/records.astro @@ -1,17 +1,17 @@ --- import Layout from "../layouts/Layout.astro"; -import { api, kg, type ImportRun, type OfficialRecord } from "../lib/api"; +import { api, kg, type DictionaryItem, type ImportRun, type OfficialRecord } from "../lib/api"; const params = Astro.url.searchParams; const fish = params.get("fish") ?? ""; const waterbody = params.get("waterbody") ?? ""; -let records: OfficialRecord[] = [], runs: ImportRun[] = [], unavailable = false; -try { [records, runs] = await Promise.all([api(`/api/v1/records?fish=${fish}&waterbody=${waterbody}`), api("/api/v1/imports?limit=1")]); } catch { unavailable = true; } +let records: OfficialRecord[] = [], runs: ImportRun[] = [], fishes: DictionaryItem[] = [], waterbodies: DictionaryItem[] = [], unavailable = false; +try { [records, runs, fishes, waterbodies] = await Promise.all([api(`/api/v1/records?${new URLSearchParams({ fish, waterbody })}`), api("/api/v1/imports?limit=1"), api("/api/v1/fishes"), api("/api/v1/waterbodies")]); } catch { unavailable = true; } const last = runs[0]; ---
Публичные данные RF4

Официальные
рекорды

{last ? `Импорт: ${last.status}` : "Импорт ещё не запускался"}{last?.finished_at && {new Date(last.finished_at).toLocaleString("ru-RU")} · {last.rows_seen} строк}
-
+
{(fish || waterbody) && Сбросить}
Официальный источник

Последние записи

{records.length} показано
- {unavailable ?

Источник временно недоступен

: records.length ?
РыбаВесВодоёмПриманкаИгрокДата
{records.map(record =>
{record.fish}{kg(record.weight_g)}{record.waterbody}{record.bait ?? "—"}{record.player_name ?? "—"}
)}
:

Рекорды ещё не импортированы

Запустите python -m app.cli import-records. Пустой результат не подменяется демоданными.

} + {unavailable ?

Источник временно недоступен

: records.length ?
РыбаВесВодоёмПриманкаИгрокДата
{records.map(record =>
{record.fish}{kg(record.weight_g)}{record.waterbody}{record.bait ?? "—"}{record.player_name ?? "—"}
)}
:

Рекорды ещё не импортированы

Для выбранных условий записей пока нет.

}

Источник: официальный сайт Russian Fishing 4. Координаты в официальных таблицах отсутствуют.

 diff --git a/apps/web/src/styles/global.css b/apps/web/src/styles/global.css index 5bb920e..5e41a35 100644 --- a/apps/web/src/styles/global.css +++ b/apps/web/src/styles/global.css @@ -22,3 +22,5 @@ footer{min-height:118px;background:var(--deep);color:#dbe4df;padding:28px max(32 @media(max-width:720px){.float-gauge{width:100px}} @media(prefers-reduced-motion:no-preference){.pulse-orb span{animation:ripple-pulse 2.4s ease-out infinite}.float-gauge__bob{animation:bob 2.8s ease-in-out infinite}}@keyframes ripple-pulse{50%{box-shadow:0 0 0 15px #c9f45b08}}@keyframes bob{50%{translate:0 -3px}} .report-form fieldset{border:0;padding:0;margin:0}.report-form legend{width:100%;margin-bottom:18px;font:400 24px Georgia,serif}.report-form legend span,.optional-fields summary span{float:right;font:11px Inter,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:#7c8c89}.field-help{color:#657572;font-size:12px}.optional-fields{margin:26px 0;border-block:1px solid #d6dfd7;padding:18px 0}.optional-fields summary{cursor:pointer;font:400 20px Georgia,serif}.optional-fields[open] summary{margin-bottom:20px}.report-form input:user-invalid,.report-form select:user-invalid{border-color:#b84c3c} +.record-filters select{display:block;width:100%;height:46px;margin-top:7px;padding:0 13px;border:1px solid #ffffff29;border-radius:9px;background:#ffffff0c;color:#fff}.record-filters option{color:var(--ink)}.record-filters>a{align-self:end;height:48px;display:grid;place-items:center;padding:0 12px;color:#dce5e2;font-size:13px} +@media(max-width:720px){.record-row:not(.record-head)>*{display:grid;grid-template-columns:88px 1fr;text-align:left!important;gap:8px}.record-row:not(.record-head)>*:before{content:attr(data-label);font:700 9px Inter,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:#82908e}.record-row{grid-template-columns:1fr}.record-filters>a{height:auto;padding:8px}} diff --git a/docs/ROADMAP.md b/docs/ROADMAP.md index 833a9ef..e2f96b4 100644 --- a/docs/ROADMAP.md +++ b/docs/ROADMAP.md @@ -76,7 +76,7 @@ - [x] Дополнить визуальный язык авторскими рыболовными SVG-иконками и шкалой активности в форме поплавка; анимации учитывают `prefers-reduced-motion`. - [x] Сократить мобильный путь до результатов и улучшить фильтры: компактный hero, основные фильтры перед глазами, раскрываемые период/сортировка, строка условий и сброс (пакет B UI/UX-аудита). - [x] Упростить форму улова, добавить помощь форматов, валидацию и сохранение значений при ошибке (пакет C UI/UX-аудита). -- [ ] Заменить slug-фильтры и улучшить мобильное представление рекордов/detail (пакет D UI/UX-аудита). +- [x] Заменить slug-фильтры справочниками, добавить сброс и самодостаточные мобильные строки рекордов (пакет D UI/UX-аудита; detail уже адаптивен). - [ ] Выполнить accessibility/admin safety пакет с axe/Lighthouse (пакет E UI/UX-аудита). - [ ] Добавить smoke-проверку административной очереди внешних источников на desktop/mobile без публикации реальных записей. - [ ] Обновить README: архитектура, все переменные окружения, импорт, модерация, backup/restore, эксплуатация логов и известные ограничения. @@ -119,10 +119,9 @@ Технический production-контур, health/readiness, backup/restore и безопасные логи готовы. Следующие пункты выполняются строго по одному: -1. UI/UX-пакет D: фильтры и мобильное представление рекордов/detail; -2. accessibility/admin safety и Lighthouse; -3. мониторинг, DNS/TLS и проверка production-профиля на целевом сервере; -4. финальное обновление README, лицензия кода и политика данных. +1. accessibility/admin safety и Lighthouse; +2. мониторинг, DNS/TLS и проверка production-профиля на целевом сервере; +3. финальное обновление README, лицензия кода и политика данных. После каждого пункта необходимо: diff --git a/docs/UI_UX_AUDIT.md b/docs/UI_UX_AUDIT.md index ebe33e9..0d6a8a2 100644 --- a/docs/UI_UX_AUDIT.md +++ b/docs/UI_UX_AUDIT.md @@ -71,8 +71,8 @@ ### Пакет D — рекорды и detail точки -- [ ] Заменить slug-input фильтрами из справочников и добавить сброс. -- [ ] Сделать мобильную выдачу рекордов самодостаточной: подписи значений или доступная таблица. +- [x] Заменить slug-input фильтрами из справочников и добавить сброс. +- [x] Сделать мобильную выдачу рекордов самодостаточной с подписями значений. - [ ] Убрать CLI-команду из публичного empty state. - [ ] Добавить к уловам detail-страницы дату/свежесть и происхождение, если API их отдаёт. - [ ] Устранить дублирование карточки и sidebar на малой выборке.