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

Improve styling of app

Browse Source
This commit is contained in:
Peter Stockings
2026-03-09 21:50:53 +11:00
parent ab23bf6a9e
commit de66dc5fd8
9 changed files with 708 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
app/templates/_layout.html
View File

@@ -5,17 +5,17 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}BP Tracker{% endblock %}</title>
<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='images/favicon-32x32.png') }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='images/favicon-32x32.png') }}">
<link rel="icon" type="image/svg+xml" sizes="any" href="{{ url_for('static', filename='images/favicon.svg') }}">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="/static/css/tailwind.css" rel="stylesheet">
<script src="/static/js/alpine.min.js" defer></script>
<script src="/static/js/turbolinks.min.js"></script>
</head>
<body class="bg-gray-100 text-gray-800">
<nav class="flex items-center justify-between flex-wrap p-6 fixed w-full z-10 top-0" x-data="{ isOpen: false }"
@keydown.escape="isOpen = false" @click.away="isOpen = false"
:class="{ 'shadow-lg bg-indigo-900' : isOpen , 'bg-gray-800' : !isOpen}">
<body class="bg-gray-50 text-gray-800 font-sans antialiased">
<nav class="flex items-center justify-between flex-wrap p-6 fixed w-full z-10 top-0 transition-colors duration-300 shadow-md"
x-data="{ isOpen: false }" @keydown.escape="isOpen = false" @click.away="isOpen = false"
:class="{ 'bg-primary-900' : isOpen , 'bg-primary-800' : !isOpen}">
<!--Logo etc-->
<div class="flex items-center flex-shrink-0 text-white mr-6">
<a class="text-white no-underline hover:text-white hover:no-underline" href="/">
@@ -45,7 +45,7 @@
{% if request.path == url_for('main.dashboard') %}
text-white
{% else %}
text-gray-600 hover:text-gray-200 hover:text-underline
text-primary-200 hover:text-white font-medium transition-colors
{% endif %}" href="{{ url_for('main.dashboard') }}">Dashboard
</a>
</li>
@@ -54,12 +54,12 @@
{% if request.path == url_for('data.manage_data') %}
text-white
{% else %}
text-gray-600 hover:text-gray-200 hover:text-underline
text-primary-200 hover:text-white font-medium transition-colors
{% endif %}" href="{{ url_for('data.manage_data') }}">Data
</a>
</li>
<li class="mr-3">
<a class="flex items-center gap-2 text-gray-600 no-underline hover:text-gray-200 hover:text-underline py-2 px-4"
<a class="flex items-center gap-2 text-primary-200 no-underline hover:text-white font-medium transition-colors py-2 px-4"
href="{{ url_for('user.profile') }}">
{% if current_user.profile and current_user.profile.profile_pic %}
<img src="{{ url_for('user.profile_image', user_id=current_user.id) }}" alt="Profile Picture"
@@ -67,7 +67,7 @@
{% else %}
<!-- Default SVG Icon -->
<div
class="w-8 h-8 bg-gray-300 rounded-full flex items-center justify-center border-2 border-white">
class="w-8 h-8 bg-primary-100 rounded-full flex items-center justify-center border-2 border-white">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="w-5 h-5 text-gray-600"
viewBox="0 0 24 24">
<path
@@ -79,7 +79,7 @@
{% if request.path == url_for('user.profile') %}
text-white
{% else %}
text-gray-600 hover:text-gray-200 hover:text-underline
text-primary-200 hover:text-white font-medium transition-colors
{% endif %}">Profile</span>
</a>
</li>
@@ -88,7 +88,7 @@
{% if request.path == url_for('auth.logout') %}
text-white
{% else %}
text-gray-600 hover:text-gray-200 hover:text-underline
text-primary-200 hover:text-white font-medium transition-colors
{% endif %}" href="{{ url_for('auth.logout') }}">Logout
</a>
</li>
@@ -98,7 +98,7 @@
{% if request.path == url_for('auth.login') %}
text-white
{% else %}
text-gray-600 hover:text-gray-200 hover:text-underline
text-primary-200 hover:text-white font-medium transition-colors
{% endif %}" href="{{ url_for('auth.login') }}">Login
</a>
</li>
@@ -107,7 +107,7 @@
{% if request.path == url_for('auth.signup') %}
text-white
{% else %}
text-gray-600 hover:text-gray-200 hover:text-underline
text-primary-200 hover:text-white font-medium transition-colors
{% endif %}" href="{{ url_for('auth.signup') }}">Signup
</a>
</li>
@@ -118,12 +118,13 @@
{% with messages = get_flashed_messages(with_categories=True) %}
{% if messages %}
<div class="container mx-auto mt-4 space-y-4">
<div class="fixed top-24 right-4 z-50 space-y-4">
{% for category, message in messages %}
<div class="flex items-center justify-between p-4 rounded-lg shadow text-white bg-{{ 'red' if category == 'danger' else 'green' }}-500"
<div class="flex items-center justify-between p-4 rounded-xl shadow-xl text-white bg-{{ 'red' if category == 'danger' else 'primary' }}-500 min-w-[300px]"
x-data="{ visible: true }" x-show="visible" x-transition.duration.300ms>
<span>{{ message }}</span>
<button @click="visible = false" class="text-xl font-bold">&times;</button>
<span class="font-medium">{{ message }}</span>
<button @click="visible = false"
class="text-2xl font-bold ml-4 hover:text-gray-200 transition-colors">&times;</button>
</div>
{% endfor %}
</div>