64 lines
3.7 KiB
HTML
64 lines
3.7 KiB
HTML
{% set distribution = distribution or muscle_distribution %}
|
|
{% set category_name = category_name or 'Muscle Group' %}
|
|
{% set breakdown_id = category_name.lower().replace(' ', '-') %}
|
|
|
|
{% if distribution %}
|
|
<div class="px-4 py-3 bg-white relative" id="{{ breakdown_id }}-breakdown"
|
|
hx-get="{{ url_for('workout.get_workout_distribution', person_id=person_id, workout_id=workout_id, category=category_name) }}"
|
|
hx-trigger="topsetAdded from:body" hx-swap="outerHTML">
|
|
|
|
<!-- Shared Popover Container (managed by Hyperscript) -->
|
|
<div id="popover-{{ breakdown_id }}"
|
|
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="content-{{ breakdown_id }}"></div>
|
|
<button class="absolute top-2 right-2 text-gray-400 hover:text-gray-600"
|
|
_="on click add .hidden to #popover-{{ breakdown_id }}">
|
|
<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]">{{ category_name }} 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 cursor-pointer">
|
|
{% for item in 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 }};" _="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.attribute_name }}</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 #content-{{ breakdown_id }}
|
|
remove .hidden from #popover-{{ breakdown_id }}"
|
|
title="{{ item.attribute_name }}: {{ item.percentage }}%">
|
|
|
|
<!-- Labels (Name & Percentage grouped and centered) -->
|
|
<div
|
|
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.attribute_name }}</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"></div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %} |