Giorgio Gilestro
6459e8c43d
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).
80 lines
3 KiB
HTML
80 lines
3 KiB
HTML
{% if not portfolios %}
|
|
<div class="empty">no portfolio snapshots yet</div>
|
|
{% else %}
|
|
{% for p in portfolios %}
|
|
{# --- overall block --- #}
|
|
<div class="pf-overall">
|
|
<div class="pf-overall__head">
|
|
<span class="pf-name">{{ p.name }}</span>
|
|
<span class="pf-as-of">
|
|
{% if p.snapshot_at %}{{ p.snapshot_at.strftime("%Y-%m-%d %H:%M UTC") }}{% else %}—{% endif %}
|
|
</span>
|
|
</div>
|
|
<div class="pf-overall__grid">
|
|
<div class="pf-stat">
|
|
<div class="pf-stat-label">Total</div>
|
|
<div class="pf-stat-value">{{ p.total_value | money }} <span class="pf-ccy">{{ p.currency }}</span></div>
|
|
</div>
|
|
<div class="pf-stat">
|
|
<div class="pf-stat-label">Invested</div>
|
|
<div class="pf-stat-value">{{ p.invested | money }}</div>
|
|
</div>
|
|
<div class="pf-stat">
|
|
<div class="pf-stat-label">Cash</div>
|
|
<div class="pf-stat-value">{{ p.cash | money }}</div>
|
|
</div>
|
|
<div class="pf-stat">
|
|
<div class="pf-stat-label">Unrealised P/L</div>
|
|
<div class="pf-stat-value {% if p.unrealized_ppl is none %}neu{% elif p.unrealized_ppl >= 0 %}pos{% else %}neg{% endif %}">
|
|
{{ p.unrealized_ppl | signed }}
|
|
{% if p.total_cost and p.unrealized_ppl is not none %}
|
|
<span class="pf-pct">({{ "%+.2f"|format(p.unrealized_ppl / p.total_cost * 100) }}%)</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="pf-stat">
|
|
<div class="pf-stat-label">Realised P/L</div>
|
|
<div class="pf-stat-value {% if p.realized_ppl is none %}neu{% elif p.realized_ppl >= 0 %}pos{% else %}neg{% endif %}">
|
|
{{ p.realized_ppl | signed }}
|
|
</div>
|
|
</div>
|
|
<div class="pf-stat">
|
|
<div class="pf-stat-label">Positions</div>
|
|
<div class="pf-stat-value">{{ p.positions | length }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# --- per-position table --- #}
|
|
<table class="dense">
|
|
<thead>
|
|
<tr>
|
|
<th>Ticker</th>
|
|
<th>Name</th>
|
|
<th class="num mobile-hide">Qty</th>
|
|
<th class="num mobile-hide">Avg</th>
|
|
<th class="num">Last</th>
|
|
<th class="num">P/L</th>
|
|
<th class="num">%</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for pos in p.positions %}
|
|
<tr>
|
|
<td class="label">{{ pos.ticker }}</td>
|
|
<td>{{ pos.name or "" }}</td>
|
|
<td class="num mobile-hide">{{ pos.quantity | price }}</td>
|
|
<td class="num neu mobile-hide">{{ pos.average_price | price }}</td>
|
|
<td class="num">{{ pos.current_price | price }}</td>
|
|
<td class="num {% if pos.ppl is none %}neu{% elif pos.ppl >= 0 %}pos{% else %}neg{% endif %}">
|
|
{{ pos.ppl | signed }}
|
|
</td>
|
|
<td class="num {% if pos.ppl_pct is none %}neu{% elif pos.ppl_pct >= 0 %}pos{% else %}neg{% endif %}">
|
|
{% if pos.ppl_pct is not none %}{{ "%+.2f"|format(pos.ppl_pct) }}%{% else %}—{% endif %}
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
{% endfor %}
|
|
{% endif %}
|