From 330e7680fad03ae16d33d55b6ea81d29c30806c2 Mon Sep 17 00:00:00 2001 From: seo Date: Fri, 26 Jun 2026 01:52:52 +0900 Subject: [PATCH] Use two-row mobile usage metrics --- README.md | 4 ++-- monitor.php | 20 +++++++++++++++++--- 2 files changed, 19 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 77d9dc9..040bd78 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ Car는 차량 모뎀/게이트웨이에서 받은 상태를 수집해 DB에 저 - 허용된 차량 명령 TCP 전송 - monitor 화면과 AJAX 상태 갱신 - monitor 화면 WakeLock, 언어, 테마 토글 -- 모바일 폭에 맞춘 사용량/로그 가로 스크롤과 시간 문구 축약 +- 모바일 폭에 맞춘 사용량 2줄 배치, 로그 가로 스크롤, 시간 문구 축약 - 사용량/요금 표시와 보정 metadata - 4.95초 UI timeout과 60초 사용량 정산 분리 - TCP 실패 reason과 마지막 수신 지연 표시 @@ -39,7 +39,7 @@ Car는 차량 모뎀/게이트웨이에서 받은 상태를 수집해 DB에 저 상태 기록 섹션의 경과는 각 로그가 기록된 시각부터 현재까지 흐른 시간입니다. 각 행의 `age_seconds`는 서버 현재시각과 로그 timestamp의 차이로 계산해 내려주며, 화면 갱신마다 상단 조회 주기 경과처럼 계속 증가합니다. -모바일처럼 폭이 좁은 화면에서는 조회 경과와 시동 유지 시간이 한 줄로 유지되도록 초, 필요 시 분 단위를 생략해 표시합니다. 사용량 지표와 상태 기록 테이블은 카드 내부에서 좌우 스크롤되도록 분리해 전체 페이지 레이아웃이 밀리지 않게 합니다. +모바일처럼 폭이 좁은 화면에서는 조회 경과와 시동 유지 시간이 한 줄로 유지되도록 초, 필요 시 분 단위를 생략해 표시합니다. 사용량 지표는 3열 2줄로 카드 안에 배치하고, 상태 기록 테이블은 카드 내부 좌우 스크롤로 분리해 전체 페이지 레이아웃이 밀리지 않게 합니다. 실시간 차량 그림의 도어/트렁크 열림 표시선은 열림 애니메이션 중에도 차량 기준 위치를 유지합니다. 트렁크 표시선은 중앙 정렬 기준을 유지한 상태에서 확대되어 PC와 모바일 모두에서 차체 하단과 맞도록 표시됩니다. diff --git a/monitor.php b/monitor.php index 989a150..b23bba3 100644 --- a/monitor.php +++ b/monitor.php @@ -1117,13 +1117,27 @@ if (isset($_GET['mode']) && $_GET['mode'] === 'usage') { } .usage-main { padding-bottom: 0.25rem; + overflow-x: visible; + overflow-y: visible; } .usage-metrics { - gap: 0.8rem; - min-width: 600px; + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 0.75rem 0.9rem; + min-width: 0; } .usage-meter { - min-width: 600px; + min-width: 0; + } + .usage-metric { + min-width: 0; + text-align: center; + } + .usage-metric:nth-child(3n + 1) { + text-align: left; + } + .usage-metric:nth-child(3n) { + text-align: right; } .usage-metric .label-text { font-size: 0.64rem; } .usage-metric .font-mono { font-size: 0.88rem; }