admin/38156-vm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Standardize colours, icons, shadows, and table styling

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Konrad du Plessis 2026-02-20 01:25:45 +02:00
parent 65862c9a73
commit d858966915
9 changed files with 30 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
core/templates/base.html
View File

@ -14,17 +14,15 @@
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@600;700&display=swap" rel="stylesheet">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
{% block head %}{% endblock %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #0f172a;">
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand heading-font fw-bold" href="{% url 'home' %}">
<span style="color: #10b981;">Fox</span> Fitt
<span style="color: var(--accent-color);">Fox</span> Fitt
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>

2
core/templates/core/create_receipt.html
View File

@ -5,7 +5,7 @@
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="card shadow-lg border-0">
<div class="card shadow-sm border-0">
<div class="card-header text-white py-3" style="background-color: var(--primary-color); border-top-left-radius: 1rem; border-top-right-radius: 1rem;">
<h4 class="mb-0 fw-bold"><i class="fas fa-file-invoice-dollar me-2"></i>Receipt Generator</h4>
</div>

2
core/templates/core/index.html
View File

@ -159,7 +159,7 @@
<!-- This Week Summary -->
<div class="card p-4 mb-4">
<div class="d-flex justify-content-between align-items-center">
<h5 class="mb-0"><i class="bi bi-calendar-week me-2"></i>This Week</h5>
<h5 class="mb-0"><i class="fas fa-calendar-week me-2"></i>This Week</h5>
<a href="{% url 'work_log_list' %}?view=calendar" class="btn btn-sm btn-link text-decoration-none">View Calendar &rarr;</a>
</div>
<div class="d-flex flex-wrap gap-4 mt-3">

2
core/templates/core/loan_list.html
View File

@ -30,7 +30,7 @@
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<thead class="bg-light">
<thead class="table-light">
<tr>
<th class="ps-4">Date Issued</th>
<th>Worker</th>

8
core/templates/core/payroll_dashboard.html
View File

@ -147,7 +147,7 @@
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<thead class="bg-light">
<thead class="table-light">
<tr>
<th class="ps-4">Worker Name</th>
<th>Breakdown</th>
@ -253,7 +253,7 @@
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<thead class="bg-light">
<thead class="table-light">
<tr>
<th class="ps-4">Date</th>
<th>Payslip ID</th>
@ -313,7 +313,7 @@
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<thead class="bg-light">
<thead class="table-light">
<tr>
<th class="ps-4">Date Issued</th>
<th>Worker</th>
@ -1072,7 +1072,7 @@ document.addEventListener('DOMContentLoaded', function() {
modalBody.innerHTML = html;
})
.catch(function(err) {
modalBody.innerHTML = '<div class="text-center py-4 text-danger"><i class="bi bi-exclamation-triangle fs-3"></i><p class="mt-2">Could not load preview.</p></div>';
modalBody.innerHTML = '<div class="text-center py-4 text-danger"><i class="fas fa-exclamation-triangle fs-3"></i><p class="mt-2">Could not load preview.</p></div>';
});
});
});

6
core/templates/core/payslip.html
View File

@ -10,7 +10,7 @@
<button onclick="window.print()" class="btn btn-accent">Print Payslip</button>
</div>
<div class="card border-0 shadow-lg" id="payslip-card">
<div class="card border-0 shadow-sm" id="payslip-card">
<div class="card-body p-5">
<!-- Header -->
<div class="row mb-5 border-bottom pb-4 align-items-center">
@ -44,7 +44,7 @@
<!-- Work Details -->
<h6 class="text-uppercase text-muted fw-bold small mb-3">Work Log Details (Attendance)</h6>
<div class="table-responsive mb-4">
<table class="table table-bordered mb-0">
<table class="table table-hover mb-0">
<thead class="table-light">
<tr>
<th>Date</th>
@ -80,7 +80,7 @@
{% if adjustments %}
<h6 class="text-uppercase text-muted fw-bold small mb-3 mt-4">Adjustments (Bonuses, Deductions, Loans)</h6>
<div class="table-responsive mb-4">
<table class="table table-bordered mb-0">
<table class="table table-hover mb-0">
<thead class="table-light">
<tr>
<th>Date</th>

28
core/templates/core/work_log_list.html
View File

@ -19,15 +19,15 @@
<!-- View Switcher -->
<div class="btn-group me-2 shadow-sm" role="group">
<a href="?view=list&worker={{ selected_worker|default:'' }}&team={{ selected_team|default:'' }}&project={{ selected_project|default:'' }}&payment_status={{ selected_payment_status|default:'' }}" class="btn btn-outline-secondary bg-white {% if view_mode != 'calendar' %}active fw-bold{% endif %}">
<i class="bi bi-list-ul"></i> List
<i class="fas fa-list"></i> List
</a>
<a href="?view=calendar&worker={{ selected_worker|default:'' }}&team={{ selected_team|default:'' }}&project={{ selected_project|default:'' }}&payment_status={{ selected_payment_status|default:'' }}" class="btn btn-outline-secondary bg-white {% if view_mode == 'calendar' %}active fw-bold{% endif %}">
<i class="bi bi-calendar3"></i> Calendar
<i class="fas fa-calendar-alt"></i> Calendar
</a>
</div>
<a href="{% url 'export_work_log_csv' %}?{{ request.GET.urlencode }}" class="btn btn-outline-secondary shadow-sm border-0 bg-white text-dark">
<i class="bi bi-download me-1"></i> Export CSV
<i class="fas fa-download me-1"></i> Export CSV
</a>
<a href="{% url 'log_attendance' %}" class="btn btn-accent shadow-sm">
+ New Entry
@ -93,7 +93,7 @@
<div>
{% if selected_worker or selected_team or selected_project or selected_payment_status and selected_payment_status != 'all' %}
<a href="{% url 'work_log_list' %}?view={{ view_mode }}" class="btn btn-sm btn-link text-decoration-none text-muted p-0">
<i class="bi bi-x-circle"></i> Clear all filters
<i class="fas fa-times-circle"></i> Clear all filters
</a>
{% else %}
<small class="text-muted">Showing all records</small>
@ -135,10 +135,10 @@
<h3 class="mb-0 fw-bold text-dark">{{ month_name }} {{ curr_year }}</h3>
<div class="btn-group shadow-sm">
<a href="?view=calendar&month={{ prev_month }}&year={{ prev_year }}&worker={{ selected_worker|default:'' }}&team={{ selected_team|default:'' }}&project={{ selected_project|default:'' }}&payment_status={{ selected_payment_status|default:'' }}" class="btn btn-light border bg-white">
<i class="bi bi-chevron-left"></i> Previous
<i class="fas fa-chevron-left"></i> Previous
</a>
<a href="?view=calendar&month={{ next_month }}&year={{ next_year }}&worker={{ selected_worker|default:'' }}&team={{ selected_team|default:'' }}&project={{ selected_project|default:'' }}&payment_status={{ selected_payment_status|default:'' }}" class="btn btn-light border bg-white">
Next <i class="bi bi-chevron-right"></i>
Next <i class="fas fa-chevron-right"></i>
</a>
</div>
</div>
@ -146,7 +146,7 @@
<div class="card-body p-0">
<div class="table-responsive">
<table class="table table-bordered mb-0 calendar-table" style="table-layout: fixed;">
<thead class="bg-light text-center text-uppercase text-muted small">
<thead class="table-light text-center text-uppercase text-muted small">
<tr>
<th style="width: 14.28%">Mon</th>
<th style="width: 14.28%">Tue</th>
@ -176,7 +176,7 @@
<div class="fw-bold text-truncate">{{ record.project_name }}</div>
{% if record.type == 'WORK' and record.team_name %}
<div class="text-muted small text-truncate" style="font-size: 0.7rem;">
<i class="bi bi-people-fill me-1"></i>{{ record.team_name }}
<i class="fas fa-users me-1"></i>{{ record.team_name }}
</div>
{% endif %}
<div class="text-muted text-truncate">
@ -218,7 +218,7 @@
{% if records %}
<div class="table-responsive">
<table class="table table-hover align-middle mb-0">
<thead class="bg-light">
<thead class="table-light">
<tr>
<th class="ps-4">Date</th>
<th>Description / Project</th>
@ -241,7 +241,7 @@
{{ record.project_name }}
</span>
{% if record.team_name %}
<small class="text-muted ms-1"><i class="bi bi-people-fill"></i> {{ record.team_name }}</small>
<small class="text-muted ms-1"><i class="fas fa-users"></i> {{ record.team_name }}</small>
{% endif %}
{% else %}
<span class="badge bg-danger bg-opacity-10 text-danger border border-danger border-opacity-25 px-2 py-1">
@ -282,7 +282,7 @@
{% if record.paid_record %}
<a href="{% url 'payslip_detail' record.paid_record.id %}" class="text-decoration-none">
<span class="badge bg-success bg-opacity-10 text-success border border-success border-opacity-25">
<i class="bi bi-check-circle-fill"></i> Paid (Slip #{{ record.paid_record.id }})
<i class="fas fa-check-circle"></i> Paid (Slip #{{ record.paid_record.id }})
</span>
</a>
{% else %}
@ -298,7 +298,7 @@
<td class="pe-4 text-end">
<div class="dropdown">
<button class="btn btn-sm btn-outline-light text-dark border-0" type="button" data-bs-toggle="dropdown">
<i class="bi bi-three-dots-vertical"></i>
<i class="fas fa-ellipsis-v"></i>
</button>
<ul class="dropdown-content dropdown-menu dropdown-menu-end">
{% if record.type == 'WORK' %}
@ -330,7 +330,7 @@
</div>
{% else %}
<div class="text-center py-5">
<i class="bi bi-search display-1 text-muted opacity-25 mb-3 d-block"></i>
<i class="fas fa-search display-1 text-muted opacity-25 mb-3 d-block"></i>
<h4 class="text-muted">No records found matching filters.</h4>
<p class="text-muted mb-4">Try adjusting your filters or record a new entry.</p>
<a href="{% url 'log_attendance' %}" class="btn btn-primary">Log Attendance</a>
@ -445,7 +445,7 @@ document.addEventListener('DOMContentLoaded', function() {
// Build detail HTML with date grouping for multi-select
let html = '<div class="table-responsive"><table class="table table-hover align-middle mb-0">';
html += '<thead class="bg-light"><tr>';
html += '<thead class="table-light"><tr>';
if (sorted.length > 1) html += '<th class="ps-4">Date</th>';
html += '<th class="' + (sorted.length === 1 ? 'ps-4' : '') + '">Description / Project</th><th>Workers</th><th>Amount</th><th>Supervisor</th><th>Notes</th></tr></thead><tbody>';

2
core/templates/registration/login.html
View File

@ -8,7 +8,7 @@
<div class="card shadow-sm border-0">
<div class="card-body p-5">
<div class="text-center mb-4">
<h2 class="fw-bold heading-font"><span style="color: #10b981;">Fox</span> Fitt</h2>
<h2 class="fw-bold heading-font"><span style="color: var(--accent-color);">Fox</span> Fitt</h2>
<p class="text-muted">Sign in to manage work & payroll</p>
</div>

4
static/css/custom.css
View File

@ -1,5 +1,6 @@
:root {
--primary-color: #1e293b;
--primary-dark: #0f172a;
--accent-color: #10b981;
--bg-color: #f1f5f9;
--text-main: #334155;
@ -22,13 +23,14 @@ h1, h2, h3, .heading-font {
}
.navbar {
background-color: var(--primary-dark);
position: sticky;
top: 0;
z-index: 1000;
}
.dashboard-header {
background: linear-gradient(135deg, var(--primary-color) 0%, #334155 100%);
background: linear-gradient(135deg, var(--primary-color) 0%, var(--text-main) 100%);
color: var(--white);
padding: 4rem 2rem;
margin-bottom: -4rem;