peterstockings/Stride
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace large personal record cards with compact badges

Browse Source
This commit is contained in:
Peter Stockings
2026-10-02 14:45:52 +10:00
parent 5830976e31
commit c99d51336c
3 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/static/style.css
+10 -5
View File
@@ -27,11 +27,16 @@ body{font-family:"Segoe UI",Arial,sans-serif}h1{font-weight:650;letter-spacing:-
.sidebar .sidebar-bottom{margin-top:auto}
.records-panel { margin-bottom: 24px; }
.records-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.record-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid #394246; border-radius: 8px; color: inherit; text-decoration: none; }
.record-card > span { color: #a0aaac; font-size: 13px; }
.record-card > strong { font-size: 27px; }
.record-card > small { color: #a0aaac; overflow-wrap: anywhere; }
.compact-records { padding: 16px 20px; }
.compact-records .section-head { margin-bottom: 12px; }
.compact-records .section-head h2 { font-size: 16px; }
.record-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.record-badge { display: inline-flex; align-items: center; gap: 9px; padding: 8px 11px; border: 1px solid #394246; border-radius: 6px; color: #c5cccc; background: #202629; font-size: 12px; text-decoration: none; }
.record-badge strong { font-size: 15px; color: #eeeae4; font-variant-numeric: tabular-nums; }
.record-badge.is-pr { border-color: #886b34; background: #30291e; }
.badge-award { color: #f3cb78; font-size: 11px; font-weight: 600; }
a.record-badge:hover { border-color: #f3cb78; background: #3a3020; }
a.record-badge:focus-visible { outline: 2px solid #f3cb78; outline-offset: 3px; }
.run-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.run-badges:empty { display: none; }
.pr-badge { display: inline-block; border: 1px solid #886b34; border-radius: 4px; padding: 3px 6px; color: #f3cb78; background: #3a3020; font-size: 11px; font-weight: 600; }
app/templates/activity.html
+1 -1
View File
@@ -10,7 +10,7 @@
<div class="page-heading"><div><span class="eyebrow">{{ activity.sport|upper }} · {{ activity.started_at|localdate(activity.owner.timezone, '%A, %d %B %Y') }}</span><h1>{{ activity.title }}</h1><p>By {% if public_view %}{{ activity.owner.display_name }}{% else %}<a href="{{ url_for('web.profile',username=activity.owner.username) }}">{{ activity.owner.display_name }}</a>{% endif %}<span class="dot-separator">·</span>{{ activity.started_at|localdate(activity.owner.timezone, '%H:%M') }}<span class="dot-separator">·</span>{{ '{:,}'.format(analysis.summary.samples) }} recorded samples</p></div><div class="activity-actions"><span class="pill {{ 'public' if public_view else activity.visibility }}">{{ 'Shared via link' if public_view else activity.visibility|title }}</span>{% if owner_view %}<button type="button" class="button secondary copy-link-button" id="copy-run-link" aria-label="Copy public link to this run" title="Copy public link — anyone with the link can view this run" data-url="{{ url_for('web.share_activity', activity_id=activity.id) }}" data-csrf="{{ csrf_token() }}"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m10 13 4-4m-6 6-1 1a4 4 0 0 1-6-6l4-4a4 4 0 0 1 6 0m2 2 1-1a4 4 0 0 1 6 6l-4 4a4 4 0 0 1-6 0"/></svg></button>{% endif %}</div></div>
{% if owner_view %}<div class="share-feedback"><p id="share-status" role="status" aria-live="polite"></p><label id="share-fallback" hidden>Copy this public link<input id="share-link-value" readonly aria-label="Public run link"></label></div>{% endif %}
{% if efforts %}
<section class="panel records-panel"><div class="section-head"><h2>Best efforts on this run</h2><span class="subtle-label">Estimated · elapsed time</span></div><div class="records-grid">{% for effort in efforts %}<article class="record-card"><span>{{ effort.label }} {% if effort.pr %}<span class="pr-badge">★ PR</span>{% endif %}</span><strong>{{ effort.seconds|duration }}</strong><small>{{ '%.2f'|format(effort.start_m/1000) }}–{{ '%.2f'|format(effort.end_m/1000) }} km into the run</small></article>{% endfor %}</div><p class="field-help">Based on recorded distance and timestamps, with interpolated boundaries. Stops count toward elapsed time. Missing or reset data breaks an effort. PR means a record set at the time of this run, including your first recorded effort.</p></section>
<section class="panel records-panel compact-records"><div class="section-head"><h2>Best efforts on this run</h2><span class="subtle-label">Estimated · elapsed time</span></div><div class="record-badges">{% for effort in efforts %}<span class="record-badge {{ 'is-pr' if effort.pr }}" title="{{ '%.2f'|format(effort.start_m/1000) }}–{{ '%.2f'|format(effort.end_m/1000) }} km into the run"><span>{{ effort.label }}</span><strong>{{ effort.seconds|duration }}</strong>{% if effort.pr %}<span class="badge-award">★ PR</span>{% endif %}</span>{% endfor %}</div></section>
{% endif %}
<nav class="activity-nav" aria-label="Activity sections"><a href="#route-section">Route & speed</a><a href="#performance">Performance</a><a href="#terrain">Terrain & effort</a><a href="#splits">Laps & splits</a><a href="#method">About the numbers</a></nav>
<div class="stats-grid">
app/templates/dashboard.html
+2 -2
View File
@@ -21,9 +21,9 @@
<section class="milestone-card"><span class="eyebrow">TOTAL ASCENT</span><div class="milestone-number">{{ '{:,.0f}'.format(stats.elevation) }}<small>m</small></div><h3>Elevation gain</h3><div class="elevation-profile" aria-hidden="true"><svg viewBox="0 0 300 70"><path d="m0 65 30-15 15 8 35-35 20 15 35-32 25 32 20-12 25 28 20-12 30 23 25-10"/></svg></div><p>Across {{ stats.count }} recorded activities</p></section>
</div>
{% if personal %}
<section class="panel records-panel"><div class="section-head"><div><span class="eyebrow">YOUR FASTEST DISTANCES</span><h2>Personal records</h2></div><span class="subtle-label">Estimated · elapsed time</span></div>
<section class="panel records-panel compact-records"><div class="section-head"><div><span class="eyebrow">YOUR FASTEST DISTANCES</span><h2>Personal records</h2></div><span class="subtle-label">Estimated · elapsed time</span></div>
<p class="section-description">Fastest stretches within your runs, including stops. PR badges mark records set at the time of the run; your first effort establishes a record.</p>
<div class="records-grid">{% for record in record_book.records %}<a class="record-card" href="{{ url_for('web.activity', activity_id=record.activity.id) }}"><span>{{ record.label }}</span><strong>{{ record.seconds|duration }}</strong><small>{{ record.activity.started_at|localdate(profile.timezone) }} · {{ record.activity.title }}</small></a>{% else %}<p class="field-help">Import a run with recorded distance and timestamps to establish your first record.</p>{% endfor %}</div></section>
<div class="record-badges">{% for record in record_book.records %}<a class="record-badge is-pr" href="{{ url_for('web.activity', activity_id=record.activity.id) }}" title="{{ record.activity.started_at|localdate(profile.timezone) }} · {{ record.activity.title }}"><span class="badge-award" aria-hidden="true">★</span><span>{{ record.label }}</span><strong>{{ record.seconds|duration }}</strong></a>{% else %}<p class="field-help">Import a run with recorded distance and timestamps to establish your first record.</p>{% endfor %}</div></section>
{% endif %}
<section class="panel activities-panel" id="history"><div class="section-head"><div><span class="eyebrow">SESSION HISTORY</span><h2>{{ 'Your activities' if personal else 'Shared activities' }}</h2></div><span class="subtle-label">{{ stats.count }} activities</span></div>{% include '_activities.html' %}</section>
{% endblock %}