quoije/yaris-obd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(dashcam): proper mobile row reflow + import status at top with ETA

Browse Source 
- yaris.css: use .dash-row class on all rows; only td:first-child and
  .dash-actions-td visible on mobile (<576px); buttons never overflow
- dash.js: add dash-row class + dash-actions-td wrapper div to dashcam
  file rows; import status moved to card footer at top with spinner + ETA
- local-videos.js: add dash-row class to video rows
- dash.html: import status bar (spinner + ETA + result) in device card
  at top; removed old footer import status from files card

Co-authored-by: Copilot <[email protected]>
This commit is contained in:
Mathieu Moran
2026-08-10 00:46:05 -04:00
co-authored by Copilot
parent 9f0f53a59c
commit ba760a04d6
4 changed files with 94 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/yaris.css
+16 -26
View File
@@ -275,41 +275,31 @@ body {
.dash-col-file { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* Mobile: reflow table rows into flex cards */
/* Mobile: reflow .dash-row into a flex card — thumb + name on left, buttons on right */
@media (max-width: 575.98px) {
/* Hide table header entirely */
/* Hide table header */
#local-video-list thead,
#dashcam-file-list thead { display: none; }
/* Each row becomes a horizontal flex card */
#local-video-list tbody tr,
#dashcam-file-list tbody tr {
display: flex;
align-items: center;
border-bottom: 1px solid var(--bs-border-color);
padding: .25rem .5rem;
gap: .5rem;
}
/* Row becomes flex */
.dash-row { display: flex !important; align-items: center; gap: .5rem;
border-bottom: 1px solid var(--bs-border-color); padding: .25rem .5rem; }
/* Hide all cells except thumb and actions */
#local-video-list tbody td,
#dashcam-file-list tbody td { display: none; }
/* Hide all cells by default */
.dash-row > td { display: none !important; }
/* Show only thumb cell and actions cell */
#local-video-list tbody td:first-child,
#local-video-list tbody .dash-actions-td,
#dashcam-file-list tbody td:first-child,
#dashcam-file-list tbody .dash-actions-td { display: flex; align-items: center; }
/* Show only first cell (thumb or checkbox) and actions */
.dash-row > td:first-child,
.dash-row > .dash-actions-td { display: flex !important; align-items: center; }
/* Thumb cell takes remaining space */
#local-video-list tbody td:first-child,
#dashcam-file-list tbody td:first-child { flex: 1; min-width: 0; }
/* First cell takes remaining space */
.dash-row > td:first-child { flex: 1; min-width: 0; }
/* Actions cell stays at natural width, never shrinks */
.dash-actions-td { flex-shrink: 0; white-space: nowrap; }
/* Actions never shrink */
.dash-row > .dash-actions-td { flex-shrink: 0; }
/* Filename label below thumb */
.dash-thumb-name { display: block !important; font-size: .7rem; }
/* Filename under thumbnail on mobile */
.dash-thumb-name { display: block !important; font-size: .7rem; margin-top: .2rem; }
/* Shrink thumbnail */
.local-video-thumbnail { width: 4.5rem; }