From 0bdade44e3495e06b7230b418510f4845dc59fe8 Mon Sep 17 00:00:00 2001 From: dal4segno Date: Mon, 21 Sep 2026 11:30:22 +0900 Subject: [PATCH] fix: improve mobile navigation and calculator usability --- UPDATES.md | 6 +- offline/OfflineApp.svelte | 20 +++++- src/lib/components/AnalysisResultView.svelte | 5 +- src/lib/components/AnalyticsConsent.svelte | 14 ++-- src/lib/components/SongPicker.svelte | 3 + src/lib/styles/layout-tokens.css | 9 +++ src/routes/+layout.svelte | 18 ++++- src/routes/analysis/+page.svelte | 51 ++++++++++++- src/routes/cards/+page.svelte | 2 +- src/routes/combination/+page.svelte | 23 +++++- src/routes/data/+page.svelte | 76 ++++++++++++++++++-- 11 files changed, 205 insertions(+), 22 deletions(-) diff --git a/UPDATES.md b/UPDATES.md index e720022..ff9096c 100644 --- a/UPDATES.md +++ b/UPDATES.md @@ -1,9 +1,13 @@ --- -updatedAt: 2026-09-21T01:10:33Z +updatedAt: 2026-09-21T02:28:48Z --- ## 2026년 9월 21일 +### 모바일 화면 사용성 개선 + +`IMPROVED` 전체 메뉴 버튼으로 모든 메뉴에 접근할 수 있습니다. 배치 분석·조합 탐색의 입력 항목 설명과 선택한 곡명·카드명을 좁은 화면에서도 확인할 수 있으며, 개화 버튼과 입력 영역을 넓혔습니다. 보드에 확대·축소·화면 맞춤 버튼을 추가하고, 연결 카드 선택 창은 화면 높이에 맞춰 목록 끝까지 스크롤할 수 있도록 개선했습니다. 분석 그래프의 작은 구간 대신 누를 수 있는 액티브 발동 목록도 제공합니다. 분석 설정 버튼은 본문을 가리지 않도록 페이지 아래로 옮겼습니다. + ### 초록 보드 간편 활성화 확장 `IMPROVED` 모든 멤버의 초록 보드를 3칸·5칸·7칸 중 선택해 활성화할 수 있습니다. 5칸은 기존 세로 3칸의 가운데 양옆을, 7칸은 그 아래 2칸을 추가합니다. 이미 활성화한 다른 노드는 유지됩니다. 모든 멤버 간편 설정의 3칸·5칸·7칸 버튼에서 적용 범위를 작은 보드 그림으로 확인할 수 있습니다. diff --git a/offline/OfflineApp.svelte b/offline/OfflineApp.svelte index a10c7eb..9ba1f69 100644 --- a/offline/OfflineApp.svelte +++ b/offline/OfflineApp.svelte @@ -43,6 +43,8 @@ let currentPath = pathFromHash(); let CurrentPage = routes.get(currentPath) ?? HomePage; let eventNow = Date.now(); + let menuOpen = false; + $: if (currentPath) menuOpen = false; $: showEventTab = Boolean(activeEventAt(events, eventNow)); setOfflinePage(currentPath); @@ -86,7 +88,8 @@
홀로도리 계산기 -
-
+

그래프를 좌우로 밀면 전체 시간대를 확인할 수 있습니다.

+ +
초당 노트 @@ -172,6 +174,7 @@ diff --git a/src/lib/components/SongPicker.svelte b/src/lib/components/SongPicker.svelte index 558eb4f..22c103b 100644 --- a/src/lib/components/SongPicker.svelte +++ b/src/lib/components/SongPicker.svelte @@ -11,6 +11,7 @@ let sort: SongSort = 'title'; $: options = songOptions(charts, difficulty, query, sort); + $: selectedTitle = charts.find((chart) => chart.songId === value)?.title; function selectSong(event: Event) { const nextValue = (event.currentTarget as HTMLSelectElement).value; @@ -48,6 +49,7 @@ {/if} + {#if selectedTitle}

선택한 악곡: {selectedTitle}

{/if} {#if query.trim()}

{options.length > 0 @@ -59,6 +61,7 @@ diff --git a/src/routes/cards/+page.svelte b/src/routes/cards/+page.svelte index 4d8686c..717d593 100644 --- a/src/routes/cards/+page.svelte +++ b/src/routes/cards/+page.svelte @@ -1753,7 +1753,7 @@ } .description { - display: none; + display: block; } .total { diff --git a/src/routes/combination/+page.svelte b/src/routes/combination/+page.svelte index 3378a8f..18685c6 100644 --- a/src/routes/combination/+page.svelte +++ b/src/routes/combination/+page.svelte @@ -1320,8 +1320,10 @@ {#each candidateCards as card}{/each} + {#if selectedId && cardById.get(selectedId)}{cardLabel(cardById.get(selectedId)!)}{/if}

+ 개화 (0~5)
{fixedAwakenings[slot]} @@ -1329,6 +1331,7 @@
+ 빈도 감소 고정
{#each REDUCTION_LOCK_OPTIONS as reduction} @@ -1336,6 +1339,8 @@
+ 파란 노드 전체 + 기수 보너스 덮어쓰기 (0~900)
+
+ + {Math.round(boardZoom * 100)}% + + +
+

보드의 빈 곳을 드래그하면 이동합니다. +·− 버튼으로 확대·축소하고, 보드 바깥을 쓸어 페이지를 이동하세요.