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.
67 lines
No EOL
2.4 KiB
HTML
67 lines
No EOL
2.4 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<div class="section">
|
|
<h2>Available Tablets</h2>
|
|
{% if available_tablets %}
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Brand</th>
|
|
<th>Model</th>
|
|
<th>Serial Number</th>
|
|
<th>Notes</th>
|
|
</tr>
|
|
</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 %}
|
|
</div>
|
|
|
|
<div class="section">
|
|
<h2>Active Loans</h2>
|
|
{% if active_loans %}
|
|
<div class="table-container">
|
|
<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 %}
|
|
<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 %}
|
|
</div>
|
|
{% endblock %} |