seo/car
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compact car monitor durations by card width

Browse Source
This commit is contained in:
seo
2026-06-26 01:56:09 +09:00
parent 330e7680fa
commit f87b25bc50
2 changed files with 16 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
monitor.php
+14 -7
View File
@@ -1916,9 +1916,9 @@ if (isset($_GET['mode']) && $_GET['mode'] === 'usage') {
freshnessEl.className = isReceiveBad || isStale ? 'font-mono small mt-1 text-warning' : 'font-mono small mt-1 text-muted';
const ageEl = document.getElementById('age-seconds');
if (age > 60) ageEl.className = 'font-mono fw-bold text-danger';
else if (age > 30) ageEl.className = 'font-mono fw-bold text-warning';
else ageEl.className = 'font-mono fw-bold text-muted';
if (age > 60) ageEl.className = 'font-mono fw-bold text-danger duration-line';
else if (age > 30) ageEl.className = 'font-mono fw-bold text-warning duration-line';
else ageEl.className = 'font-mono fw-bold text-muted duration-line';
const voltage = parseFloat(data.battery_voltage || 0);
const batteryEl = document.getElementById('val-battery');
@@ -2143,15 +2143,22 @@ if (isset($_GET['mode']) && $_GET['mode'] === 'usage') {
return '+' + Math.floor(sec / 3600) + t('hourShort');
}
function compactDurationMode() {
function compactDurationMode(context = 'state') {
const width = window.innerWidth || document.documentElement.clientWidth || 1024;
if (width <= 380) return 'tight';
if (width <= 575) return 'compact';
const target = document.getElementById(context === 'age' ? 'age-seconds' : 'val-state-timer');
const card = target ? target.closest('.glass-card') : null;
const boxWidth = card
? card.getBoundingClientRect().width
: (target ? target.getBoundingClientRect().width : 0);
const limitWidth = boxWidth || width;
if (limitWidth <= 160 || width <= 380) return 'tight';
if (limitWidth <= 230 || width <= 575) return 'compact';
return 'full';
}
function formatResponsiveDuration(sec, context = 'state') {
const mode = compactDurationMode();
const mode = compactDurationMode(context);
if (mode === 'full') {
return context === 'age' ? formatAgeUnits(sec) : formatDuration(sec);
}