feat(ui): add responsive CSS for mobile accessibility
- Add mobile-first responsive CSS to base.html - Wrap all tables in .table-container for horizontal scrolling on mobile - Add breakpoints for phones (576px), tablets (768px), desktops (992px, 1200px) - Improve mobile navigation (vertical stack) and form layouts (full-width) - Add print styles for clean printing - Update project_management.html editor for mobile - Document all changes in docs/RESPONSIVE_CSS.md No backend or JavaScript changes - pure CSS solution. For 5 internal technical users, this is simpler and more appropriate than HTMX or SPA approaches. Solves mobile accessibility issue with minimal changes.
This commit is contained in:
ijuanes
parent
531b3a9048
commit
927c323a6e
7 changed files with 547 additions and 139 deletions
|
|
@ -123,7 +123,178 @@
|
|||
textarea {
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
/* ============================================
|
||||
RESPONSIVE DESIGN - Mobile First
|
||||
Added for internal technical staff mobile access
|
||||
============================================ */
|
||||
|
||||
/* Mobile-first base styles */
|
||||
.container {
|
||||
max-width: 100%;
|
||||
padding: 1rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Navigation - stack vertically on mobile */
|
||||
.nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
.nav a {
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Tables - responsive with horizontal scroll */
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
table {
|
||||
min-width: 600px;
|
||||
width: 100%;
|
||||
}
|
||||
th, td {
|
||||
padding: 0.75rem;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Forms - full width on mobile */
|
||||
form {
|
||||
max-width: 100%;
|
||||
}
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="password"],
|
||||
input[type="number"],
|
||||
textarea,
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Buttons - full width on mobile */
|
||||
.btn {
|
||||
padding: 0.75rem 1.5rem;
|
||||
width: 100%;
|
||||
margin-bottom: 0.5rem;
|
||||
display: block;
|
||||
}
|
||||
.btn:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Cards for mobile display */
|
||||
.tablet-card,
|
||||
.user-card,
|
||||
.loan-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
||||
border: 1px solid #e0e0e0;
|
||||
}
|
||||
|
||||
/* Flash messages */
|
||||
.flash-message {
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Section spacing */
|
||||
.section {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
/* ============================================
|
||||
BREAKPOINTS - Tablet and Desktop
|
||||
============================================ */
|
||||
|
||||
/* Small devices (landscape phones, 576px and up) */
|
||||
@media (min-width: 576px) {
|
||||
.container {
|
||||
max-width: 540px;
|
||||
}
|
||||
.nav {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.nav a {
|
||||
flex: 1 1 auto;
|
||||
min-width: 120px;
|
||||
}
|
||||
.btn {
|
||||
width: auto;
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
.btn:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Medium devices (tablets, 768px and up) */
|
||||
@media (min-width: 768px) {
|
||||
body {
|
||||
padding: 1rem;
|
||||
}
|
||||
.container {
|
||||
max-width: 720px;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
table {
|
||||
min-width: auto;
|
||||
}
|
||||
.table-container {
|
||||
overflow-x: visible;
|
||||
}
|
||||
}
|
||||
|
||||
/* Large devices (desktops, 992px and up) */
|
||||
@media (min-width: 992px) {
|
||||
.container {
|
||||
max-width: 960px;
|
||||
}
|
||||
.nav {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
/* Extra large devices (large desktops, 1200px and up) */
|
||||
@media (min-width: 1200px) {
|
||||
.container {
|
||||
max-width: 1140px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Print styles */
|
||||
@media print {
|
||||
.nav,
|
||||
.btn,
|
||||
.flash-message {
|
||||
display: none !important;
|
||||
}
|
||||
body {
|
||||
background: white;
|
||||
padding: 0;
|
||||
}
|
||||
.container {
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
|
|
|||
|
|
@ -4,30 +4,32 @@
|
|||
<div class="section">
|
||||
<h2>Loan History</h2>
|
||||
{% if loans %}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tablet</th>
|
||||
<th>Serial Number</th>
|
||||
<th>Borrower</th>
|
||||
<th>Loan Date</th>
|
||||
<th>Return Date</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for loan in loans %}
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>{{ loan.brand }} {{ loan.model }}</td>
|
||||
<td>{{ loan.serial_number }}</td>
|
||||
<td>{{ loan.name }}</td>
|
||||
<td>{{ loan.loan_date }}</td>
|
||||
<td>{{ loan.return_date or '-' }}</td>
|
||||
<td>{{ loan.status }}</td>
|
||||
<th>Tablet</th>
|
||||
<th>Serial Number</th>
|
||||
<th>Borrower</th>
|
||||
<th>Loan Date</th>
|
||||
<th>Return Date</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for loan in loans %}
|
||||
<tr>
|
||||
<td>{{ loan.brand }} {{ loan.model }}</td>
|
||||
<td>{{ loan.serial_number }}</td>
|
||||
<td>{{ loan.name }}</td>
|
||||
<td>{{ loan.loan_date }}</td>
|
||||
<td>{{ loan.return_date or '-' }}</td>
|
||||
<td>{{ loan.status }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<p>No loan history available.</p>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -4,26 +4,28 @@
|
|||
<div class="section">
|
||||
<h2>Available Tablets</h2>
|
||||
{% if available_tablets %}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Brand</th>
|
||||
<th>Model</th>
|
||||
<th>Serial Number</th>
|
||||
<th>Notes</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for tablet in available_tablets %}
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>{{ tablet.brand }}</td>
|
||||
<td>{{ tablet.model }}</td>
|
||||
<td>{{ tablet.serial_number }}</td>
|
||||
<td>{{ tablet.notes or '-' }}</td>
|
||||
<th>Brand</th>
|
||||
<th>Model</th>
|
||||
<th>Serial Number</th>
|
||||
<th>Notes</th>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for tablet in available_tablets %}
|
||||
<tr>
|
||||
<td>{{ tablet.brand }}</td>
|
||||
<td>{{ tablet.model }}</td>
|
||||
<td>{{ tablet.serial_number }}</td>
|
||||
<td>{{ tablet.notes or '-' }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<p>No available tablets.</p>
|
||||
{% endif %}
|
||||
|
|
@ -32,30 +34,32 @@
|
|||
<div class="section">
|
||||
<h2>Active Loans</h2>
|
||||
{% if active_loans %}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tablet</th>
|
||||
<th>Serial Number</th>
|
||||
<th>Borrower</th>
|
||||
<th>Loan Date</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for loan in active_loans %}
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>{{ loan.brand }} {{ loan.model }}</td>
|
||||
<td>{{ loan.serial_number }}</td>
|
||||
<td>{{ loan.name }}</td>
|
||||
<td>{{ loan.loan_date }}</td>
|
||||
<td>
|
||||
<a href="/return_tablet/{{ loan.id }}" class="btn btn-danger">Return</a>
|
||||
</td>
|
||||
<th>Tablet</th>
|
||||
<th>Serial Number</th>
|
||||
<th>Borrower</th>
|
||||
<th>Loan Date</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for loan in active_loans %}
|
||||
<tr>
|
||||
<td>{{ loan.brand }} {{ loan.model }}</td>
|
||||
<td>{{ loan.serial_number }}</td>
|
||||
<td>{{ loan.name }}</td>
|
||||
<td>{{ loan.loan_date }}</td>
|
||||
<td>
|
||||
<a href="/return_tablet/{{ loan.id }}" class="btn btn-danger">Return</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<p>No active loans.</p>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -7,35 +7,37 @@
|
|||
<a href="/add_non_loanable_device" class="btn">Add Non-Loanable Device</a>
|
||||
|
||||
{% if devices %}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Type</th>
|
||||
<th>Brand</th>
|
||||
<th>Model</th>
|
||||
<th>Serial Number</th>
|
||||
<th>Location</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for device in devices %}
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<td>{{ device.device_type }}</td>
|
||||
<td>{{ device.brand }}</td>
|
||||
<td>{{ device.model }}</td>
|
||||
<td>{{ device.serial_number }}</td>
|
||||
<td>{{ device.location or '-' }}</td>
|
||||
<td>{{ device.status }}</td>
|
||||
<td>
|
||||
<a href="/edit_non_loanable_device/{{ device.id }}" class="btn">Edit</a>
|
||||
<a href="/delete_non_loanable_device/{{ device.id }}" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this device?')">Delete</a>
|
||||
</td>
|
||||
<th>Type</th>
|
||||
<th>Brand</th>
|
||||
<th>Model</th>
|
||||
<th>Serial Number</th>
|
||||
<th>Location</th>
|
||||
<th>Status</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for device in devices %}
|
||||
<tr>
|
||||
<td>{{ device.device_type }}</td>
|
||||
<td>{{ device.brand }}</td>
|
||||
<td>{{ device.model }}</td>
|
||||
<td>{{ device.serial_number }}</td>
|
||||
<td>{{ device.location or '-' }}</td>
|
||||
<td>{{ device.status }}</td>
|
||||
<td>
|
||||
<a href="/edit_non_loanable_device/{{ device.id }}" class="btn">Edit</a>
|
||||
<a href="/delete_non_loanable_device/{{ device.id }}" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this device?')">Delete</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<p>No non-loanable devices registered.</p>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -186,11 +186,28 @@
|
|||
border: 1px solid #ddd;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
|
||||
/* ============================================
|
||||
RESPONSIVE DESIGN FOR PROJECT MANAGEMENT
|
||||
============================================ */
|
||||
@media (max-width: 768px) {
|
||||
.editor-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
.markdown-editor,
|
||||
.markdown-preview {
|
||||
height: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.editor-controls {
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.editor-controls button {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -33,30 +33,32 @@
|
|||
{% if active_loans %}
|
||||
<div class="loans-section current-loans">
|
||||
<h4>Current Loans</h4>
|
||||
<table class="loans-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tablet</th>
|
||||
<th>Serial Number</th>
|
||||
<th>Loan Date</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for loan in active_loans %}
|
||||
<tr class="loan-row status-{{ loan.status }}">
|
||||
<td>{{ loan.brand }} {{ loan.model }}</td>
|
||||
<td>{{ loan.serial_number }}</td>
|
||||
<td>{{ loan.loan_date }}</td>
|
||||
<td>
|
||||
<span class="status-badge status-{{ loan.status }}">
|
||||
{{ loan.status }}
|
||||
</span>
|
||||
</td>
|
||||
<div class="table-container">
|
||||
<table class="loans-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tablet</th>
|
||||
<th>Serial Number</th>
|
||||
<th>Loan Date</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for loan in active_loans %}
|
||||
<tr class="loan-row status-{{ loan.status }}">
|
||||
<td>{{ loan.brand }} {{ loan.model }}</td>
|
||||
<td>{{ loan.serial_number }}</td>
|
||||
<td>{{ loan.loan_date }}</td>
|
||||
<td>
|
||||
<span class="status-badge status-{{ loan.status }}">
|
||||
{{ loan.status }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
|
@ -68,32 +70,34 @@
|
|||
</button>
|
||||
</h4>
|
||||
<div class="past-loans-content" style="display: none;">
|
||||
<table class="loans-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tablet</th>
|
||||
<th>Serial Number</th>
|
||||
<th>Loan Date</th>
|
||||
<th>Return Date</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for loan in returned_loans %}
|
||||
<tr class="loan-row status-{{ loan.status }}">
|
||||
<td>{{ loan.brand }} {{ loan.model }}</td>
|
||||
<td>{{ loan.serial_number }}</td>
|
||||
<td>{{ loan.loan_date }}</td>
|
||||
<td>{{ loan.return_date or '-' }}</td>
|
||||
<td>
|
||||
<span class="status-badge status-{{ loan.status }}">
|
||||
{{ loan.status }}
|
||||
</span>
|
||||
</td>
|
||||
<div class="table-container">
|
||||
<table class="loans-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Tablet</th>
|
||||
<th>Serial Number</th>
|
||||
<th>Loan Date</th>
|
||||
<th>Return Date</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for loan in returned_loans %}
|
||||
<tr class="loan-row status-{{ loan.status }}">
|
||||
<td>{{ loan.brand }} {{ loan.model }}</td>
|
||||
<td>{{ loan.serial_number }}</td>
|
||||
<td>{{ loan.loan_date }}</td>
|
||||
<td>{{ loan.return_date or '-' }}</td>
|
||||
<td>
|
||||
<span class="status-badge status-{{ loan.status }}">
|
||||
{{ loan.status }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue