88 lines
4.8 KiB
HTML
88 lines
4.8 KiB
HTML
<div class="flex flex-col px-2 py-2 -mb-px">
|
|
<!-- Monthly Navigation -->
|
|
<div class="flex justify-between items-center mb-4 px-2 mt-2">
|
|
<button hx-get="{{ url_for('main.dashboard_monthly', month_offset=month_offset - 1) }}"
|
|
hx-target="#dashboard-content"
|
|
class="flex items-center text-primary-600 hover:text-primary-800 font-medium transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
Previous Month
|
|
</button>
|
|
|
|
<h2 class="text-xl font-bold text-gray-800">{{ target_month_date.strftime('%B %Y') }}</h2>
|
|
|
|
<button hx-get="{{ url_for('main.dashboard_monthly', month_offset=month_offset + 1) }}"
|
|
hx-target="#dashboard-content"
|
|
class="flex items-center text-primary-600 hover:text-primary-800 font-medium transition-colors {% if month_offset >= 0 %}opacity-50 pointer-events-none{% endif %}">
|
|
Next Month
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-1" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-7 pl-2 pr-2">
|
|
|
|
<div class="p-2 h-10 text-center font-bold">
|
|
<span class="xl:block lg:block md:block sm:block hidden">Sunday</span>
|
|
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">Sun</span>
|
|
</div>
|
|
<div class="p-2 h-10 text-center font-bold">
|
|
<span class="xl:block lg:block md:block sm:block hidden">Monday</span>
|
|
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">Mon</span>
|
|
</div>
|
|
<div class="p-2 h-10 text-center font-bold">
|
|
<span class="xl:block lg:block md:block sm:block hidden">Tuesday</span>
|
|
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">Tue</span>
|
|
</div>
|
|
<div class="p-2 h-10 text-center font-bold">
|
|
<span class="xl:block lg:block md:block sm:block hidden">Wednesday</span>
|
|
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">Wed</span>
|
|
</div>
|
|
<div class="p-2 h-10 text-center font-bold">
|
|
<span class="xl:block lg:block md:block sm:block hidden">Thursday</span>
|
|
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">Thu</span>
|
|
</div>
|
|
<div class="p-2 h-10 text-center font-bold">
|
|
<span class="xl:block lg:block md:block sm:block hidden">Friday</span>
|
|
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">Fri</span>
|
|
</div>
|
|
<div class="p-2 h-10 text-center font-bold">
|
|
<span class="xl:block lg:block md:block sm:block hidden">Saturday</span>
|
|
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">Sat</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-7 overflow-hidden flex-1 pl-2 pr-2 w-full">
|
|
|
|
{% for day in month %}
|
|
<div
|
|
class="{% if day.is_today %}border-2 border-primary-400 bg-primary-50{% else %}border bg-white{% endif %} flex flex-col min-h-[120px] p-1.5 transition-colors {% if not day.is_in_current_month %}bg-gray-50 opacity-50{% endif %}">
|
|
<div class="text-right w-full mb-1">
|
|
<span
|
|
class="text-xs font-semibold {% if day.is_today %}text-primary-600{% else %}text-gray-500{% endif %}">{{
|
|
day.day }}</span>
|
|
</div>
|
|
|
|
<div class="space-y-1 flex-grow">
|
|
{% for reading in day.readings %}
|
|
<a href="{{ url_for('reading.edit_reading', reading_id=reading.id) }}"
|
|
class="flex flex-col xl:flex-row justify-between items-center px-1 py-1 bg-white border border-gray-100 rounded shadow-sm hover:border-primary-300 hover:bg-primary-50 transition-colors">
|
|
<span class="text-[10px] sm:text-xs font-bold text-gray-800 leading-none mb-0.5 xl:mb-0">{{
|
|
reading.systolic }}/{{ reading.diastolic }}</span>
|
|
<div class="flex items-center gap-0.5">
|
|
<span
|
|
class="text-[9px] sm:text-[10px] font-medium bg-red-50 text-red-600 px-1 rounded leading-none py-0.5"
|
|
title="Heart Rate">{{ reading.heart_rate }}</span>
|
|
</div>
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
</div>
|
|
</div> |