Fix minor mobile responsiveness issues

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Konrad du Plessis 2026-02-20 01:10:40 +02:00
parent 1979338dca
commit a9f353fa6a
5 changed files with 20 additions and 4 deletions

View File

@ -8,6 +8,9 @@
.resource-hidden { display: none !important; }
.quick-action-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; border-radius: 0.5rem; font-weight: 500; font-size: 0.875rem; transition: all 0.15s; text-decoration: none; }
.quick-action-btn:hover { transform: translateX(3px); }
@media (max-width: 767.98px) {
.dashboard-header .display-5 { font-size: 1.75rem; }
}
</style>
<div class="dashboard-header">
<div class="container">
@ -159,7 +162,7 @@
<h5 class="mb-0"><i class="bi bi-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 gap-4 mt-3">
<div class="d-flex flex-wrap gap-4 mt-3">
<div class="text-center">
<div class="fs-3 fw-bold text-primary">{{ week_worker_days }}</div>
<div class="text-muted small">Worker-Days</div>

View File

@ -14,7 +14,7 @@
<!-- Filters -->
<div class="card shadow-sm border-0 mb-4">
<div class="card-body p-2">
<ul class="nav nav-pills nav-fill">
<ul class="nav nav-pills nav-fill flex-nowrap overflow-auto">
<li class="nav-item">
<a class="nav-link {% if filter_status == 'active' %}active{% endif %}" href="?status=active">Outstanding Loans</a>
</li>

View File

@ -5,6 +5,12 @@
{% block head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.7/dist/chart.umd.min.js"></script>
<style>
@media (max-width: 767.98px) {
#payrollTotalsChart, #projectCostsChart { height: 160px !important; }
#otHistoryChart { height: 100px !important; }
}
</style>
{% endblock %}
{% block content %}

View File

@ -5,8 +5,8 @@
{% block content %}
<div class="container py-5">
<div class="d-print-none mb-4">
<a href="{% url 'payroll_dashboard' %}?status=paid" class="btn btn-outline-secondary me-2">← Back to Payment History</a>
<div class="d-print-none mb-4 d-grid gap-2 d-md-flex">
<a href="{% url 'payroll_dashboard' %}?status=paid" class="btn btn-outline-secondary">← Back to Payment History</a>
<button onclick="window.print()" class="btn btn-primary">Print Payslip</button>
</div>

View File

@ -86,4 +86,11 @@ h1, h2, h3, .heading-font {
.sidebar-link.active {
background-color: var(--primary-color);
color: var(--white);
}
@media (max-width: 767.98px) {
.form-switch .form-check-input {
width: 3em;
height: 1.5em;
}
}