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

100
templates/user_loans.html
View file

@ -33,30 +33,32 @@
{% if active_loans %}
<div class="loans-section current-loans">
<h4>Current Loans</h4>
<table class="loans-table">
<thead>
<tr>
<th>Tablet</th>
<th>Serial Number</th>
<th>Loan Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{% for loan in active_loans %}
<tr class="loan-row status-{{ loan.status }}">
<td>{{ loan.brand }} {{ loan.model }}</td>
<td>{{ loan.serial_number }}</td>
<td>{{ loan.loan_date }}</td>
<td>
<span class="status-badge status-{{ loan.status }}">
{{ loan.status }}
</span>
</td>
<div class="table-container">
<table class="loans-table">
<thead>
<tr>
<th>Tablet</th>
<th>Serial Number</th>
<th>Loan Date</th>
<th>Status</th>
</tr>
{% endfor %}
</tbody>
</table>
</thead>
<tbody>
{% for loan in active_loans %}
<tr class="loan-row status-{{ loan.status }}">
<td>{{ loan.brand }} {{ loan.model }}</td>
<td>{{ loan.serial_number }}</td>
<td>{{ loan.loan_date }}</td>
<td>
<span class="status-badge status-{{ loan.status }}">
{{ loan.status }}
</span>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
{% endif %}
@ -68,32 +70,34 @@
</button>
</h4>
<div class="past-loans-content" style="display: none;">
<table class="loans-table">
<thead>
<tr>
<th>Tablet</th>
<th>Serial Number</th>
<th>Loan Date</th>
<th>Return Date</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{% for loan in returned_loans %}
<tr class="loan-row status-{{ loan.status }}">
<td>{{ loan.brand }} {{ loan.model }}</td>
<td>{{ loan.serial_number }}</td>
<td>{{ loan.loan_date }}</td>
<td>{{ loan.return_date or '-' }}</td>
<td>
<span class="status-badge status-{{ loan.status }}">
{{ loan.status }}
</span>
</td>
<div class="table-container">
<table class="loans-table">
<thead>
<tr>
<th>Tablet</th>
<th>Serial Number</th>
<th>Loan Date</th>
<th>Return Date</th>
<th>Status</th>
</tr>
{% endfor %}
</tbody>
</table>
</thead>
<tbody>
{% for loan in returned_loans %}
<tr class="loan-row status-{{ loan.status }}">
<td>{{ loan.brand }} {{ loan.model }}</td>
<td>{{ loan.serial_number }}</td>
<td>{{ loan.loan_date }}</td>
<td>{{ loan.return_date or '-' }}</td>
<td>
<span class="status-badge status-{{ loan.status }}">
{{ loan.status }}
</span>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
{% endif %}