From 3376874ba08926594a7cd7f3f9066b761d2ea141 Mon Sep 17 00:00:00 2001 From: Dries Peeters Date: Thu, 4 Sep 2025 09:52:09 +0200 Subject: [PATCH] feat(ui): unify page headers across app; add Buy Me a Coffee link MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Create and use shared page_header macro for consistent info headers - Apply new header styling to: - Dashboard, Projects, Clients, Invoices (removed filter dropdown), Reports, Timer (manual) - System Info, Admin Users (list + form) - Profile, Edit Profile - Tasks (list, my tasks, overdue) - Analytics (desktop + mobile) - About, Help - Add shared header/badge utilities in base.css for consistent spacing and badges - Align summary cards and table/button styles with admin dashboard - Footer: add “Buy me a coffee” link (https://buymeacoffee.com/DryTrix) --- app/static/base.css | 17 + app/templates/_components.html | 35 ++ app/templates/analytics/dashboard.html | 29 +- app/templates/analytics/mobile_dashboard.html | 27 +- app/templates/auth/edit_profile.html | 15 +- app/templates/auth/profile.html | 18 +- app/templates/base.html | 7 +- app/templates/main/dashboard.html | 39 +- app/templates/tasks/list.html | 22 +- app/templates/tasks/my_tasks.html | 32 +- app/templates/tasks/overdue.html | 15 +- templates/admin/system_info.html | 58 +- templates/admin/user_form.html | 27 +- templates/admin/users.html | 29 +- templates/clients/list.html | 25 +- templates/invoices/list.html | 524 +++++++++--------- templates/main/about.html | 8 +- templates/main/help.html | 8 +- templates/projects/list.html | 25 +- templates/reports/index.html | 17 +- templates/timer/manual_entry.html | 18 +- 21 files changed, 508 insertions(+), 487 deletions(-) create mode 100644 app/templates/_components.html diff --git a/app/static/base.css b/app/static/base.css index c1d02c5..cf9d638 100644 --- a/app/static/base.css +++ b/app/static/base.css @@ -1031,3 +1031,20 @@ h6 { font-size: 1rem; } .summary-value { font-size: 18px; } } +/* Shared page header utilities to align with admin dashboard */ +.page-header { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: 1.5rem; +} + +.page-header .h3 { margin: 0; } + +/* Consistent badge sizing used next to page titles */ +.badge.fs-6 { + line-height: 1; + padding: 0.5rem 0.75rem; + border-radius: 9999px; +} + diff --git a/app/templates/_components.html b/app/templates/_components.html new file mode 100644 index 0000000..5107377 --- /dev/null +++ b/app/templates/_components.html @@ -0,0 +1,35 @@ +{% macro page_header(icon_class, title_text, subtitle_text=None, actions_html=None) %} +
+
+
+

{% if icon_class %}{% endif %}{{ title_text }}

+ {% if subtitle_text %} +

{{ subtitle_text }}

+ {% endif %} +
+
+ {{ actions_html|safe if actions_html }} +
+
+
+{% endmacro %} + +{% macro summary_card(icon_class, icon_color, label, value) %} +
+
+
+
+
+ +
+
+
+
{{ label }}
+
{{ value }}
+
+
+
+
+{% endmacro %} + + diff --git a/app/templates/analytics/dashboard.html b/app/templates/analytics/dashboard.html index c549124..879e104 100644 --- a/app/templates/analytics/dashboard.html +++ b/app/templates/analytics/dashboard.html @@ -4,24 +4,21 @@ {% block content %}
+ {% from "_components.html" import page_header %}
-
-

- Analytics Dashboard -

-
- - -
-
+ {% set actions %} + + + {% endset %} + {{ page_header('fas fa-chart-line', 'Analytics Dashboard', 'Key metrics and insights', actions) }}
diff --git a/app/templates/analytics/mobile_dashboard.html b/app/templates/analytics/mobile_dashboard.html index a31bd66..a364322 100644 --- a/app/templates/analytics/mobile_dashboard.html +++ b/app/templates/analytics/mobile_dashboard.html @@ -4,23 +4,20 @@ {% block content %}
+ {% from "_components.html" import page_header %}
-
-

- Analytics -

-
- - -
-
+ {% set actions %} + + + {% endset %} + {{ page_header('fas fa-chart-line', 'Analytics', 'Mobile insights overview', actions) }}
diff --git a/app/templates/auth/edit_profile.html b/app/templates/auth/edit_profile.html index ed8ec2e..9c1f512 100644 --- a/app/templates/auth/edit_profile.html +++ b/app/templates/auth/edit_profile.html @@ -3,12 +3,21 @@ {% block title %}Edit Profile - {{ app_name }}{% endblock %} {% block content %} +{% from "_components.html" import page_header %} +
+
+ {% set actions %} + + Back to Profile + + {% endset %} + {{ page_header('fas fa-user-cog', 'Edit Profile', 'Update your personal information', actions) }} +
+
-
- Edit Profile -
+
Profile Details
diff --git a/app/templates/auth/profile.html b/app/templates/auth/profile.html index 1de4bdb..b75785c 100644 --- a/app/templates/auth/profile.html +++ b/app/templates/auth/profile.html @@ -3,15 +3,21 @@ {% block title %}Profile - {{ app_name }}{% endblock %} {% block content %} +{% from "_components.html" import page_header %} +
+
+ {% set actions %} + + Edit Profile + + {% endset %} + {{ page_header('fas fa-user-circle', 'Your Profile', 'Manage your account details', actions) }} +
+
-
- Your Profile - - Edit Profile - -
+
Profile Details
Username
diff --git a/app/templates/base.html b/app/templates/base.html index d97395d..35b1463 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -173,10 +173,15 @@

-
+
{{ app_version }} About Help + + + Buy me a coffee + +
diff --git a/app/templates/main/dashboard.html b/app/templates/main/dashboard.html index ac1d08d..89721ce 100644 --- a/app/templates/main/dashboard.html +++ b/app/templates/main/dashboard.html @@ -3,40 +3,25 @@ {% block title %}Dashboard - {{ app_name }}{% endblock %} {% block content %} +{% from "_components.html" import page_header %}
- -
+ +
-
-
-
-
-
- {% if settings and settings.has_logo() %} - Company Logo - {% else %} - DryTrix Logo - {% endif %} -

Welcome back, {{ current_user.display_name }}!

-
-

Track your productivity and manage your time effectively with DryTrix TimeTracker

-
-
-
-
-
{{ today_hours|round(1) }}
- Hours Today -
-
-
-
-
-
+ {% set actions %} + + Log Time + + + Reports + + {% endset %} + {{ page_header('fas fa-tachometer-alt', 'Dashboard', 'Welcome back, ' ~ current_user.display_name ~ ' • ' ~ (today_hours|round(1)) ~ 'h today', actions) }}
diff --git a/app/templates/tasks/list.html b/app/templates/tasks/list.html index 1e0c5e5..7973a39 100644 --- a/app/templates/tasks/list.html +++ b/app/templates/tasks/list.html @@ -4,24 +4,16 @@ {% block content %}
- + {% from "_components.html" import page_header %}
-
-
-

- - Tasks -

- {{ tasks|length }} total -
-
- - New Task - -
-
+ {% set actions %} + + New Task + + {% endset %} + {{ page_header('fas fa-tasks', 'Tasks', 'Plan and track work • ' ~ (tasks|length) ~ ' total', actions) }}
diff --git a/app/templates/tasks/my_tasks.html b/app/templates/tasks/my_tasks.html index baa10a6..25b0330 100644 --- a/app/templates/tasks/my_tasks.html +++ b/app/templates/tasks/my_tasks.html @@ -4,34 +4,16 @@ {% block content %}
- + {% from "_components.html" import page_header %}
-
-
-

- - My Tasks -

- {{ tasks|length }} total -
-
-
- - -
- - New Task - -
-
+ {% set actions %} + + New Task + + {% endset %} + {{ page_header('fas fa-user', 'My Tasks', 'Tasks assigned to or created by you • ' ~ (tasks|length) ~ ' total', actions) }}
diff --git a/app/templates/tasks/overdue.html b/app/templates/tasks/overdue.html index b1fc15c..793996e 100644 --- a/app/templates/tasks/overdue.html +++ b/app/templates/tasks/overdue.html @@ -4,14 +4,13 @@ {% block content %}
-
-

Overdue Tasks

- -
+ {% from "_components.html" import page_header %} + {% set actions %} + + Back to Tasks + + {% endset %} + {{ page_header('fas fa-exclamation-triangle', 'Overdue Tasks', 'Requires immediate attention • ' ~ (tasks|length) ~ ' items', actions) }}