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

perf: massive reduction in application bundle size

Browse Source 
- Replaced Alpine.js and Turbolinks with lightweight vanilla JS event listeners
- Swapped HTMX CDN import for a custom 15-line native JS polyfill
- Removed Google Fonts ('Inter') in favor of the native system font stack
- Extracted repeated SVGs in list views into a `<defs>` block to shrink HTML
- Reduced dashboard pagination PAGE_SIZE from 50 to 25
- Minified Tailwind CSS output and enabled Gzip/Brotli via Flask-Compress
This commit is contained in:
Peter Stockings
2026-03-10 19:10:47 +11:00
parent a0abf41ff6
commit dcef99c3bf
7 changed files with 153 additions and 2155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
app/templates/dashboard.html
View File

@@ -40,20 +40,24 @@
</div>
</div>
<div x-data="{ open: {{ 'true' if request.method == 'POST' else 'false' }} }" class="relative">
<div class="relative">
<!-- Compact Icon -->
<button @click="open = !open"
class="bg-primary-600 text-white p-3 rounded-full shadow-lg focus:outline-none hover:bg-primary-700">
<button id="filter-btn"
class="bg-primary-600 text-white p-3 rounded-full shadow-lg focus:outline-none hover:bg-primary-700 transition">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
stroke="currentColor" class="w-6 h-6">
<path x-show="!open" stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" />
<path x-show="open" x-cloak stroke-linecap="round" stroke-linejoin="round" d="M18 15l-6-6-6 6" />
<!-- Chevron down icon (default) -->
<path id="filter-icon-closed" class="{{ 'hidden' if request.method == 'POST' else '' }}"
stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" />
<!-- X icon -->
<path id="filter-icon-open" class="{{ '' if request.method == 'POST' else 'hidden' }}"
stroke-linecap="round" stroke-linejoin="round" d="M18 15l-6-6-6 6" />
</svg>
</button>
<!-- Collapsible Filter Form -->
<div x-show="open" x-transition.duration.300ms
class="w-full md:w-1/3 bg-white p-6 rounded-xl shadow-lg border border-gray-200">
<div id="filter-form"
class="{{ '' if request.method == 'POST' else 'hidden' }} transition-all duration-300 w-full md:w-1/3 bg-white p-6 rounded-xl shadow-lg border border-gray-200">
<div class="flex justify-between items-center mb-4">
<h3 class="text-lg font-bold text-gray-800">Filter Readings</h3>
</div>
@@ -84,22 +88,21 @@
</div>
<div class="max-w-5xl mx-auto" x-data="{ activeView: '{{ active_view }}' }">
<div class="max-w-5xl mx-auto">
<!-- Tabs -->
<div class="flex border-b mb-4">
<button @click="activeView = 'list'" hx-get="{{ url_for('main.dashboard_list') }}"
hx-target="#dashboard-content" :class="{'border-primary-600 text-primary-600': activeView === 'list'}"
class="px-4 py-2 text-sm font-medium border-b-2">List View</button>
<button @click="activeView = 'weekly'" hx-get="{{ url_for('main.dashboard_weekly') }}"
hx-target="#dashboard-content" :class="{'border-primary-600 text-primary-600': activeView === 'weekly'}"
class="px-4 py-2 text-sm font-medium border-b-2">Weekly View</button>
<button @click="activeView = 'monthly'" hx-get="{{ url_for('main.dashboard_monthly') }}"
hx-target="#dashboard-content"
:class="{'border-primary-600 text-primary-600': activeView === 'monthly'}"
class="px-4 py-2 text-sm font-medium border-b-2">Monthly View</button>
<button @click="activeView = 'graph'" hx-get="{{ url_for('main.dashboard_graph') }}"
hx-target="#dashboard-content" :class="{'border-primary-600 text-primary-600': activeView === 'graph'}"
class="px-4 py-2 text-sm font-medium border-b-2">Graph View</button>
<div class="flex border-b mb-4" id="dashboard-tabs">
<button hx-get="{{ url_for('main.dashboard_list') }}" hx-target="#dashboard-content"
class="tab-btn px-4 py-2 text-sm font-medium border-b-2 {{ 'border-primary-600 text-primary-600' if active_view == 'list' else '' }}">List
View</button>
<button hx-get="{{ url_for('main.dashboard_weekly') }}" hx-target="#dashboard-content"
class="tab-btn px-4 py-2 text-sm font-medium border-b-2 {{ 'border-primary-600 text-primary-600' if active_view == 'weekly' else '' }}">Weekly
View</button>
<button hx-get="{{ url_for('main.dashboard_monthly') }}" hx-target="#dashboard-content"
class="tab-btn px-4 py-2 text-sm font-medium border-b-2 {{ 'border-primary-600 text-primary-600' if active_view == 'monthly' else '' }}">Monthly
View</button>
<button hx-get="{{ url_for('main.dashboard_graph') }}" hx-target="#dashboard-content"
class="tab-btn px-4 py-2 text-sm font-medium border-b-2 {{ 'border-primary-600 text-primary-600' if active_view == 'graph' else '' }}">Graph
View</button>
</div>
<!-- Dashboard Content Target Area for HTMX -->
@@ -109,4 +112,40 @@
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Filter Form Toggle
const filterBtn = document.getElementById('filter-btn');
const filterForm = document.getElementById('filter-form');
const iconClosed = document.getElementById('filter-icon-closed');
const iconOpen = document.getElementById('filter-icon-open');
if (filterBtn && filterForm) {
filterBtn.addEventListener('click', () => {
const isHidden = filterForm.classList.contains('hidden');
if (isHidden) {
filterForm.classList.remove('hidden');
iconClosed.classList.add('hidden');
iconOpen.classList.remove('hidden');
} else {
filterForm.classList.add('hidden');
iconClosed.classList.remove('hidden');
iconOpen.classList.add('hidden');
}
});
}
// Tabs
const tabBtns = document.querySelectorAll('.tab-btn');
tabBtns.forEach(btn => {
btn.addEventListener('click', () => {
tabBtns.forEach(b => {
b.classList.remove('border-primary-600', 'text-primary-600');
});
btn.classList.add('border-primary-600', 'text-primary-600');
});
});
});
</script>
{% endblock %}