From c99d51336cc76afc96d70f6e6bc53d090f741c9e Mon Sep 17 00:00:00 2001 From: Peter Stockings Date: Fri, 2 Oct 2026 14:45:52 +1000 Subject: [PATCH] Replace large personal record cards with compact badges --- app/static/style.css | 15 ++++++++++----- app/templates/activity.html | 2 +- app/templates/dashboard.html | 4 ++-- 3 files changed, 13 insertions(+), 8 deletions(-) diff --git a/app/static/style.css b/app/static/style.css index 790128b..f2dd876 100644 --- a/app/static/style.css +++ b/app/static/style.css @@ -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; } diff --git a/app/templates/activity.html b/app/templates/activity.html index 72efce2..566a2f2 100644 --- a/app/templates/activity.html +++ b/app/templates/activity.html @@ -10,7 +10,7 @@
{{ activity.sport|upper }} · {{ activity.started_at|localdate(activity.owner.timezone, '%A, %d %B %Y') }}

{{ activity.title }}

By {% if public_view %}{{ activity.owner.display_name }}{% else %}{{ activity.owner.display_name }}{% endif %}·{{ activity.started_at|localdate(activity.owner.timezone, '%H:%M') }}·{{ '{:,}'.format(analysis.summary.samples) }} recorded samples

{{ 'Shared via link' if public_view else activity.visibility|title }}{% if owner_view %}{% endif %}
{% if owner_view %}

{% endif %} {% if efforts %} -

Best efforts on this run

Estimated · elapsed time
{% for effort in efforts %}
{{ effort.label }} {% if effort.pr %}★ PR{% endif %}{{ effort.seconds|duration }}{{ '%.2f'|format(effort.start_m/1000) }}–{{ '%.2f'|format(effort.end_m/1000) }} km into the run
{% endfor %}

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.

+

Best efforts on this run

Estimated · elapsed time
{% for effort in efforts %}{{ effort.label }}{{ effort.seconds|duration }}{% if effort.pr %}★ PR{% endif %}{% endfor %}
{% endif %}
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html index 45e19e4..e79bc5b 100644 --- a/app/templates/dashboard.html +++ b/app/templates/dashboard.html @@ -21,9 +21,9 @@
TOTAL ASCENT
{{ '{:,.0f}'.format(stats.elevation) }}m

Elevation gain

Across {{ stats.count }} recorded activities

{% if personal %} -
YOUR FASTEST DISTANCES

Personal records

Estimated · elapsed time
+
YOUR FASTEST DISTANCES

Personal records

Estimated · elapsed time

Fastest stretches within your runs, including stops. PR badges mark records set at the time of the run; your first effort establishes a record.

-
{% for record in record_book.records %}{{ record.label }}{{ record.seconds|duration }}{{ record.activity.started_at|localdate(profile.timezone) }} · {{ record.activity.title }}{% else %}

Import a run with recorded distance and timestamps to establish your first record.

{% endfor %}
+
{% for record in record_book.records %}{{ record.label }}{{ record.seconds|duration }}{% else %}

Import a run with recorded distance and timestamps to establish your first record.

{% endfor %}
{% endif %}
SESSION HISTORY

{{ 'Your activities' if personal else 'Shared activities' }}

{{ stats.count }} activities
{% include '_activities.html' %}
{% endblock %}