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

mobile: per-view ≤480px rules across the CSS bundle

Browse source 
Adds the @media (max-width: 480px) blocks specified in the design:

- dashboard.css: indicator table hides the 'mobile-hide'-tagged
  columns (Label, Ccy, 1y, anchor, as-of), keeping Symbol / Price /
  1d / 1m. Cell padding + font shrink. Group-tab buttons get a
  bigger touch target.
- panels.css: header padding tightens, scroll-body max-height drops
  to 60vh so log/news stay above the fold in the stacked layout.
- portfolio.css: overall grid keeps 2 cols (already at 640px) with
  tighter gap; action buttons wrap; composer input goes full-width.
- log-chat.css: chat bubbles edge-to-edge, input row stacks, font-
  size:14px on form fields to avoid iOS Safari zoom-on-focus.
- news.css: row collapses to age | (title / source) — source moves
  under the title. Tag filter strip wraps.
- settings.css: form rows stack (label above input). Import picker
  becomes single-column. Buttons full-width.
- auth.css: card padding tightens to free up vertical space when the
  iOS keyboard is up. font-size:14px on inputs.
- public.css: hero headline clamp() lower bound drops to 22px; CTAs
  stack full-width; pricing tier-grid stacks.

indicators.html: tagged the secondary cells with .mobile-hide rather
than relying on positional nth-child — the anchor column is
conditional and would have shifted positions.

336 tests still pass.
This commit is contained in:
Giorgio Gilestro 2026-05-28 18:43:36 +02:00
parent 2b3ea33884
commit b6da1983d3
9 changed files with 253 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

20
app/templates/partials/indicators.html
View file

@ -20,11 +20,11 @@
<table class="dense">
<thead>
<tr>
<th>Symbol</th><th>Label</th>
<th class="num">Price</th><th>Ccy</th>
<th class="num">1d</th><th class="num">1m</th><th class="num">1y</th>
{% if has_anchor %}<th class="num">anchor</th>{% endif %}
<th>as-of</th>
<th>Symbol</th><th class="mobile-hide">Label</th>
<th class="num">Price</th><th class="mobile-hide">Ccy</th>
<th class="num">1d</th><th class="num">1m</th><th class="num mobile-hide">1y</th>
{% if has_anchor %}<th class="num mobile-hide">anchor</th>{% endif %}
<th class="mobile-hide">as-of</th>
</tr>
</thead>
<tbody>
@ -46,22 +46,22 @@
<td class="label has-tip" title="{{ q.symbol }}{% if tip %} — {{ tip }}{% endif %}">
{{ short_sym }}
</td>
<td {% if tip %}title="{{ tip }}"{% endif %}>{{ q.label or "" }}</td>
<td class="mobile-hide" {% if tip %}title="{{ tip }}"{% endif %}>{{ q.label or "" }}</td>
<td class="num">{{ q.price | price }}</td>
<td class="neu">{{ q.currency or "" }}</td>
<td class="neu mobile-hide">{{ q.currency or "" }}</td>
{% for k in ["1d","1m","1y"] %}
{% set v = q.changes.get(k) if q.changes else None %}
<td class="num {% if v is none %}neu{% elif v >= 0 %}pos{% else %}neg{% endif %}">
<td class="num {% if k == '1y' %}mobile-hide {% endif %}{% if v is none %}neu{% elif v >= 0 %}pos{% else %}neg{% endif %}">
{% if v is none %}—{% else %}{{ "%+.2f"|format(v) }}%{% endif %}
</td>
{% endfor %}
{% if has_anchor %}
{% set va = q.changes.get('anchor') if q.changes else None %}
<td class="num {% if va is none %}neu{% elif va >= 0 %}pos{% else %}neg{% endif %}">
<td class="num mobile-hide {% if va is none %}neu{% elif va >= 0 %}pos{% else %}neg{% endif %}">
{% if va is none %}—{% else %}{{ "%+.2f"|format(va) }}%{% endif %}
</td>
{% endif %}
<td class="neu">{{ q.as_of or "" }}</td>
<td class="neu mobile-hide">{{ q.as_of or "" }}</td>
</tr>
{% endif %}
{% endfor %}