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

46
templates/history.html
View file

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