Redesign BP tracker with lightweight views and unobtrusive save confirmations
This commit is contained in:
@@ -1,72 +1,9 @@
|
||||
{% extends "_layout.html" %}
|
||||
{% block content %}
|
||||
<div class="max-w-4xl mx-auto p-4 relative">
|
||||
<!-- Cancel Button (Top-Left) -->
|
||||
<a href="{{ request.referrer if request.referrer else url_for('main.dashboard') }}"
|
||||
class="absolute top-5 left-4 flex items-center text-gray-600 hover:text-gray-800">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 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>
|
||||
<span>Back</span>
|
||||
</a>
|
||||
<h1 class="text-2xl font-bold mb-4 text-center">Profile Settings</h1>
|
||||
|
||||
<div class="bg-white p-6 rounded-lg shadow-md mb-6">
|
||||
|
||||
<div class="flex items-center justify-center mb-4">
|
||||
<img src="{{ url_for('user.profile_image', user_id=current_user.id) }}" alt="Profile Picture"
|
||||
class="w-32 h-32 rounded-full border object-cover shadow">
|
||||
</div>
|
||||
|
||||
|
||||
<form method="POST" enctype="multipart/form-data">
|
||||
{{ form.hidden_tag() }}
|
||||
|
||||
<div class="mb-4">
|
||||
{{ form.name.label(class="block text-sm font-medium text-gray-700") }}
|
||||
{{ form.name(class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500") }}
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
{{ form.email.label(class="block text-sm font-medium text-gray-700") }}
|
||||
{{ form.email(class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500") }}
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
{{ form.profile_pic.label(class="block text-sm font-medium text-gray-700") }}
|
||||
{{ form.profile_pic(class="w-full p-2 border rounded focus:outline-none focus:ring-2
|
||||
focus:ring-blue-500")
|
||||
}}
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
{{ form.systolic_threshold.label(class="block text-sm font-medium text-gray-700") }}
|
||||
{{ form.systolic_threshold(class="w-full p-2 border rounded focus:outline-none focus:ring-2
|
||||
focus:ring-blue-500") }}
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
{{ form.diastolic_threshold.label(class="block text-sm font-medium text-gray-700") }}
|
||||
{{ form.diastolic_threshold(class="w-full p-2 border rounded focus:outline-none focus:ring-2
|
||||
focus:ring-blue-500") }}
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
{{ form.timezone.label(class="block text-sm font-medium text-gray-700") }}
|
||||
{{ form.timezone(class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500")
|
||||
}}
|
||||
</div>
|
||||
|
||||
<div class="mb-4 flex items-center">
|
||||
{{ form.dark_mode }}
|
||||
{{ form.dark_mode.label(class="ml-2 text-sm font-medium text-gray-700") }}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{{ form.submit(class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700") }}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% extends '_layout.html' %}
|
||||
{% from 'components.html' import field %}
|
||||
{% block title %}Settings · BP Tracker{% endblock %}
|
||||
{% block content %}<div class="form-page settings-page"><div class="page-heading"><div><p class="eyebrow">MAKE IT YOURS</p><h1>Settings</h1><p class="muted">Your profile, display and personal thresholds.</p></div></div><form method="post" enctype="multipart/form-data" class="card entry-form" novalidate>{{ form.hidden_tag() }}
|
||||
{% if form.errors %}<div class="notice notice-error" role="alert">Please check the highlighted fields.</div>{% endif %}
|
||||
<fieldset><legend>Profile</legend>{% if profile.profile_pic %}<img class="profile-photo" src="{{ url_for('user.profile_image', user_id=current_user.id) }}" width="64" height="64" alt="Your profile picture">{% endif %}{{ field(form.name, autocomplete='name') }}{{ field(form.email, autocomplete='email') }}{{ field(form.profile_pic) }}</fieldset>
|
||||
<fieldset><legend>Personal thresholds</legend><p class="muted small">Readings at or above either value are labelled in History. These are your saved reference values.</p><div class="two-columns">{{ field(form.systolic_threshold, true) }}{{ field(form.diastolic_threshold, true) }}</div></fieldset>
|
||||
<fieldset><legend>Display</legend>{{ field(form.timezone) }}<div class="checkbox-field">{{ form.dark_mode }}{{ form.dark_mode.label }}</div></fieldset>
|
||||
<div class="form-actions"><button class="button primary" type="submit">Save settings</button><a href="{{ url_for('main.dashboard') }}">Back to overview</a></div></form></div>{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user