ijuanes/GestionTablets
ijuanes/GestionTablets
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(ui): add responsive CSS for mobile accessibility

Browse source 
- 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 2026-06-20 01:20:39 +01:00
parent 531b3a9048
commit 927c323a6e
7 changed files with 547 additions and 139 deletions
Download patch file Download diff file Expand all files Collapse all files

56
templates/non_loanable_devices.html
View file

@ -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 %}