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

Fix critical mobile responsiveness issues

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Konrad du Plessis 2026-02-20 01:07:10 +02:00
parent 81db5f244f
commit 1979338dca
5 changed files with 40 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -49,16 +49,16 @@
{% for form in items %}
<div class="item-row row g-2 align-items-center mb-2">
{{ form.id }}
<div class="col-7">
<div class="col-12 col-md-7">
{{ form.product }}
</div>
<div class="col-4">
<div class="col-10 col-md-4">
<div class="input-group">
<span class="input-group-text bg-light border-end-0">R</span>
{{ form.amount }}
</div>
</div>
<div class="col-1 text-center">
<div class="col-2 col-md-1 text-center">
{% if items.can_delete %}
<div class="form-check d-none">
{{ form.DELETE }}
@ -122,16 +122,16 @@
<!-- Empty Form Template for JS -->
<div id="empty-form" class="d-none">
<div class="item-row row g-2 align-items-center mb-2">
<div class="col-7">
<div class="col-12 col-md-7">
{{ items.empty_form.product }}
</div>
<div class="col-4">
<div class="col-10 col-md-4">
<div class="input-group">
<span class="input-group-text bg-light border-end-0">R</span>
{{ items.empty_form.amount }}
</div>
</div>
<div class="col-1 text-center">
<div class="col-2 col-md-1 text-center">
<div class="form-check d-none">
{{ items.empty_form.DELETE }}
</div>

15
core/templates/core/log_attendance.html
View File

@ -19,14 +19,14 @@
{% csrf_token %}
<div class="row mb-4">
<div class="col-md-3">
<div class="col-md-6 col-lg-3">
<label class="form-label fw-bold">Start Date</label>
{{ form.date }}
{% if form.date.errors %}
<div class="text-danger mt-1 small">{{ form.date.errors }}</div>
{% endif %}
</div>
<div class="col-md-3">
<div class="col-md-6 col-lg-3">
<label class="form-label fw-bold">End Date (Optional)</label>
{{ form.end_date }}
<div class="mt-2">
@ -40,14 +40,14 @@
</div>
</div>
</div>
<div class="col-md-3">
<div class="col-md-6 col-lg-3">
<label class="form-label fw-bold">Project</label>
{{ form.project }}
{% if form.project.errors %}
<div class="text-danger mt-1 small">{{ form.project.errors }}</div>
{% endif %}
</div>
<div class="col-md-3">
<div class="col-md-6 col-lg-3">
<label class="form-label fw-bold">Team (Optional)</label>
{{ form.team }}
{% if form.team.errors %}
@ -164,7 +164,12 @@
transition: all 0.2s ease-in-out;
}
.mt-n4 {
margin-top: -3rem !important;
margin-top: -1.5rem !important;
}
@media (min-width: 768px) {
.mt-n4 {
margin-top: -3rem !important;
}
}
</style>

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

@ -9,8 +9,8 @@
{% block content %}
<div class="container py-5">
<div class="d-flex justify-content-between align-items-center mb-4">
<h1 class="h2 fw-bold text-dark">Payroll Dashboard</h1>
<div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-4">
<h1 class="h2 fw-bold text-dark mb-0">Payroll Dashboard</h1>
<div>
<button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addAdjustmentModal">
+ Add Adjustment
@ -118,7 +118,7 @@
</div>
<!-- Filter Tabs -->
<ul class="nav nav-pills mb-4">
<ul class="nav nav-pills mb-4 flex-nowrap overflow-auto pb-1">
<li class="nav-item">
<a class="nav-link {% if active_tab == 'pending' %}active{% endif %}" href="?status=pending">Pending Payments</a>
</li>
@ -191,7 +191,7 @@
</td>
<td class="text-end pe-4">
{% if item.total_payable > 0 or item.has_pending_advances %}
<div class="d-flex gap-1 justify-content-end">
<div class="d-grid d-md-flex gap-1 justify-content-md-end">
{% if item.ot_hours_unpriced > 0 %}
<button type="button" class="btn btn-sm btn-warning text-dark price-ot-btn"
data-worker-id="{{ item.worker.id }}" data-worker-name="{{ item.worker.name }}">
@ -448,8 +448,8 @@
<div class="modal-body">
<div class="mb-3">
<label class="form-label">Workers</label>
<div class="mb-2 d-flex gap-2 align-items-center">
<select id="adjTeamFilter" class="form-select form-select-sm" style="max-width: 200px;">
<div class="mb-2 d-flex flex-wrap gap-2 align-items-center">
<select id="adjTeamFilter" class="form-select form-select-sm" style="max-width: 300px;">
<option value="">Filter by team...</option>
{% for team in all_teams %}
<option value="{{ team.id }}">{{ team.name }}</option>

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

@ -10,12 +10,12 @@
{% block content %}
<div class="dashboard-header pb-5">
<div class="container">
<div class="d-flex justify-content-between align-items-center mb-4">
<div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
<div>
<h1 class="display-5 mb-2">Work Log History</h1>
<p class="lead opacity-75">Filter and review historical daily work logs and adjustments.</p>
<p class="lead opacity-75 mb-0">Filter and review historical daily work logs and adjustments.</p>
</div>
<div class="d-flex gap-2 align-items-center">
<div class="d-flex flex-wrap gap-2 align-items-center">
<!-- 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 %}">
@ -342,7 +342,10 @@
</div>
<style>
.mt-n4 { margin-top: -1.5rem !important; }
.mt-n4 { margin-top: -0.75rem !important; }
@media (min-width: 768px) {
.mt-n4 { margin-top: -1.5rem !important; }
}
.bg-accent { background-color: var(--bs-accent); }
.btn-accent { background-color: #ffde59; color: #000; border: none; font-weight: 600; }
.btn-accent:hover { background-color: #e6c850; }
@ -360,6 +363,13 @@
.cal-day--has-logs { cursor: pointer; transition: background-color 0.15s; }
.cal-day--has-logs:hover { background-color: rgba(13, 110, 253, 0.04) !important; }
.cal-day--selected { background-color: rgba(13, 110, 253, 0.08) !important; box-shadow: inset 0 0 0 2px var(--bs-primary); }
/* Calendar mobile: compact cells */
@media (max-width: 767.98px) {
.calendar-table td { height: 80px !important; padding: 4px !important; }
.calendar-table .calendar-events { max-height: 50px !important; }
.calendar-table .calendar-events .mb-1 { font-size: 0.65rem !important; padding: 2px !important; }
}
</style>
<script>

6
static/css/custom.css
View File

@ -43,8 +43,10 @@ h1, h2, h3, .heading-font {
transition: transform 0.2s ease-in-out;
}
.card:hover {
transform: translateY(-5px);
@media (hover: hover) {
.card:hover {
transform: translateY(-5px);
}
}
.stat-card {