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.
45 lines
1.9 KiB
HTML
45 lines
1.9 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block content %}
|
|
<div class="section">
|
|
<h2>Non-Loanable Devices Inventory</h2>
|
|
<p>These devices are tracked in inventory but cannot be loaned to users.</p>
|
|
<a href="/add_non_loanable_device" class="btn">Add Non-Loanable Device</a>
|
|
|
|
{% if devices %}
|
|
<div class="table-container">
|
|
<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 %}
|
|
<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 %}
|
|
</div>
|
|
{% endblock %}
|