giorgio/read.markets
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mobile: wrap tabs, trim portfolio + markets bar columns

Browse source 
Three pieces of phone-side feedback:

1. Indicator group tabs wrap onto multiple rows instead of
   horizontal-scrolling — every group is visible at a glance. Each
   button keeps its own bottom border so wrapped rows stay
   visually delimited; the container's bottom border is removed.

2. Portfolio holdings table hides Qty and Avg columns on mobile via
   the mobile-hide class (same mechanism as the indicator table).
   Remaining columns are the actionable ones: Ticker, Name, Last,
   P/L, %.

3. Markets bar at the bottom compacts to one row per chip —
   dot + code + change% only. The state word ("open" / "closed")
   is implied by the dot colour; the index label, price, and
   until-time are dropped on mobile. Grid columns drop their 220px
   floor so the full set fits the viewport without horizontal
   scroll (previously the bar scrolled within itself).
This commit is contained in:
Giorgio Gilestro 2026-05-28 19:10:58 +02:00
parent 8ec4ea1c72
commit 6459e8c43d
3 changed files with 53 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

16
app/static/css/dashboard.css
View file

@ -248,11 +248,19 @@
identifying anchor. */
.dense td.label { font-weight: 600; }
/* Group-tabs strip already has overflow-x:auto; widen the tap
targets so swipe-scrolling on a touchscreen feels natural. */
/* Group tabs: wrap onto multiple rows instead of horizontal
scrolling so the user can see every group at a glance. The
border-bottom moves to each row so wrapped rows are still
visually delimited. */
.group-tabs {
flex-wrap: wrap;
overflow-x: visible;
border-bottom: 0;
}
.group-tabs button {
padding: 8px 14px;
font-size: 11.5px;
padding: 6px 10px;
font-size: 11px;
border-bottom: 1px solid var(--border);
white-space: nowrap;
}