927c323a6e
- 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.
37 lines
No EOL
1.3 KiB
HTML
37 lines
No EOL
1.3 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<div class="section">
|
|
<h2>Loan History</h2>
|
|
{% if loans %}
|
|
<div class="table-container">
|
|
<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 %}
|
|
<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 %}
|
|
</div>
|
|
{% endblock %} |