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

84
templates/index.html
View file

@ -4,26 +4,28 @@
<div class="section">
<h2>Available Tablets</h2>
{% if available_tablets %}
<table>
<thead>
<tr>
<th>Brand</th>
<th>Model</th>
<th>Serial Number</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
{% for tablet in available_tablets %}
<div class="table-container">
<table>
<thead>
<tr>
<td>{{ tablet.brand }}</td>
<td>{{ tablet.model }}</td>
<td>{{ tablet.serial_number }}</td>
<td>{{ tablet.notes or '-' }}</td>
<th>Brand</th>
<th>Model</th>
<th>Serial Number</th>
<th>Notes</th>
</tr>
{% endfor %}
</tbody>
</table>
</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 %}
@ -32,30 +34,32 @@
<div class="section">
<h2>Active Loans</h2>
{% if active_loans %}
<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 %}
<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>
<a href="/return_tablet/{{ loan.id }}" class="btn btn-danger">Return</a>
</td>
<th>Tablet</th>
<th>Serial Number</th>
<th>Borrower</th>
<th>Loan Date</th>
<th>Actions</th>
</tr>
{% endfor %}
</tbody>
</table>
</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 %}