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

Add popover for details on muscle distribution in a workout

Browse Source
This commit is contained in:
Peter Stockings
2026-01-31 00:19:02 +11:00
parent 5d2f3986bd
commit 8b276804b9
2 changed files with 34 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/css/tailwind.css
View File

File diff suppressed because one or more lines are too long

52
templates/partials/workout_breakdown.html
View File

@@ -1,42 +1,56 @@
{% if muscle_distribution %}
<div class="px-4 py-3 bg-white" id="muscle-breakdown"
<div class="px-4 py-3 bg-white relative" id="muscle-breakdown"
hx-get="{{ url_for('workout.get_workout_muscle_distribution', person_id=person_id, workout_id=workout_id) }}"
hx-trigger="topsetAdded from:body" hx-swap="outerHTML">
<!-- Shared Popover Container (managed by Hyperscript) -->
<div id="breakdown-popover"
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-30 hidden bg-white border border-gray-200 shadow-2xl rounded-xl p-4 min-w-[200px] animate-in fade-in zoom-in duration-200"
_="on click from elsewhere add .hidden to me">
<div id="popover-content"></div>
<button class="absolute top-2 right-2 text-gray-400 hover:text-gray-600"
_="on click add .hidden to #breakdown-popover">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<div class="flex items-center justify-between mb-2">
<h4 class="text-[9px] font-black text-gray-400 uppercase tracking-[0.25em]">Muscle Distribution</h4>
<h4 class="text-[9px] font-black text-gray-400 uppercase tracking-[0.25em]">Session Muscle Distribution</h4>
</div>
<!-- Sleek Performance Bar -->
<div class="w-full h-8 flex overflow-hidden rounded-lg bg-gray-100 shadow-inner p-0.5">
<div class="w-full h-8 flex overflow-hidden rounded-lg bg-gray-100 shadow-inner p-0.5 cursor-pointer">
{% for item in muscle_distribution %}
<div class="h-full transition-all duration-700 ease-in-out flex items-center justify-center relative group first:rounded-l-md last:rounded-r-md"
style="width: {{ item.percentage }}%; background-color: {{ item.color }};">
style="width: {{ item.percentage }}%; background-color: {{ item.color }};" _="on click
halt the event
put '<div class=\'flex flex-col gap-1\'>
<div class=\'flex items-center gap-2\'>
<div class=\'w-3 h-3 rounded-full\' style=\'background-color: {{ item.color }}\'></div>
<span class=\'font-black text-sm uppercase\'>{{ item.muscle_group }}</span>
</div>
<div class=\'text-2xl font-black text-gray-900\'>{{ item.percentage }}%</div>
<div class=\'text-[10px] font-bold text-gray-400 uppercase tracking-wider\'>{{ item.count }} Sets Targeted</div>
</div>' into #popover-content
remove .hidden from #breakdown-popover" title="{{ item.muscle_group }}: {{ item.percentage }}%">
<!-- Labels with optimized typography -->
<!-- Labels (Name & Percentage grouped and centered) -->
<div
class="flex items-center justify-center gap-1 leading-none text-white pointer-events-none px-1 overflow-hidden">
{% if item.percentage > 15 %}
class="flex items-center justify-center gap-1.5 leading-none text-white pointer-events-none px-1 overflow-hidden">
{% if item.percentage > 18 %}
<span class="text-[9px] font-black uppercase tracking-tighter truncate drop-shadow-sm">{{
item.muscle_group }}</span>
<span class="text-[9px] font-bold opacity-90 whitespace-nowrap">{{ item.percentage }}%</span>
<span class="text-[9px] font-bold opacity-90 whitespace-nowrap drop-shadow-sm">{{ item.percentage
}}%</span>
{% elif item.percentage > 8 %}
<span class="text-[9px] font-black drop-shadow-sm">{{ item.percentage }}%</span>
{% endif %}
</div>
<!-- Enhanced Hover State -->
<div class="absolute inset-0 bg-white/15 opacity-0 group-hover:opacity-100 transition-opacity cursor-help">
</div>
<!-- Precision Tooltip -->
<div
class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-gray-900/95 backdrop-blur-sm text-white text-[9px] font-black rounded opacity-0 group-hover:opacity-100 transition-all transform translate-y-1 group-hover:translate-y-0 whitespace-nowrap z-20 pointer-events-none shadow-lg border border-white/5 uppercase tracking-wider">
{{ item.muscle_group }} <span class="mx-1 opacity-40">•</span> {{ item.percentage }}%
<div
class="absolute top-full left-1/2 -translate-x-1/2 -mt-1 border-4 border-transparent border-t-gray-900/95">
</div>
</div>
<div class="absolute inset-0 bg-white/15 opacity-0 group-hover:opacity-100 transition-opacity"></div>
</div>
{% endfor %}
</div>