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

Phase 1: Responsive tables and Tailwind CSS standardization

Browse source 
- Added responsive table styles with mobile card layouts to base.html
- Converted all templates from Bootstrap/plain CSS to Tailwind CSS
- Implemented responsive tables with horizontal scroll on desktop
- Added mobile card layouts for better readability on small screens
- Standardized form layouts with Tailwind responsive grid
- Updated all 15 templates for consistent styling:
  * base.html (responsive table CSS)
  * index.html (responsive tables + mobile cards)
  * students.html (Bootstrap -> Tailwind)
  * student_detail.html (Bootstrap -> Tailwind)
  * add_student.html (Bootstrap -> Tailwind)
  * edit_student.html (Bootstrap -> Tailwind)
  * import_students.html (Bootstrap -> Tailwind)
  * loan_tablet.html (Bootstrap -> Tailwind)
  * history.html (plain CSS -> Tailwind)
  * non_loanable_devices.html (plain CSS -> Tailwind)
  * add_non_loanable_device.html (plain CSS -> Tailwind)
  * edit_non_loanable_device.html (plain CSS -> Tailwind)
  * add_tablet.html (plain CSS -> Tailwind)
  * add_user.html (plain CSS -> Tailwind)
  * project_management.html (plain CSS -> Tailwind)
This commit is contained in:
ijuanes 2026-06-24 15:53:55 +01:00
parent 1b28021134
commit 06da5bdf2f
15 changed files with 1766 additions and 1229 deletions
Download patch file Download diff file Expand all files Collapse all files

88
templates/base.html
View file

@ -125,6 +125,94 @@
background-color: #374151;
color: #e0e0e0;
}
/* Responsive Table Styles */
.table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: 0.5rem;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.table-responsive {
width: 100%;
border-collapse: collapse;
background-color: white;
}
.table-responsive thead {
background-color: #f9fafb;
}
.table-responsive th {
padding: 0.75rem 1rem;
text-align: left;
font-size: 0.75rem;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
border-bottom: 2px solid #e5e7eb;
}
.table-responsive td {
padding: 0.75rem 1rem;
font-size: 0.875rem;
color: #374151;
border-bottom: 1px solid #e5e7eb;
white-space: nowrap;
}
.table-responsive tbody tr:hover {
background-color: #f9fafb;
}
/* Mobile Card Layout */
@media (max-width: 640px) {
.table-card-mobile {
display: none;
}
.mobile-cards {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.mobile-card {
background-color: white;
border-radius: 0.5rem;
padding: 1rem;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
}
.mobile-card .card-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.25rem 0;
border-bottom: 1px solid #f3f4f6;
}
.mobile-card .card-row:last-child {
border-bottom: none;
}
.mobile-card .card-label {
font-size: 0.75rem;
font-weight: 600;
color: #6b7280;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.mobile-card .card-value {
font-size: 0.875rem;
color: #374151;
text-align: right;
}
}
</style>
<!-- Tailwind config for custom corporate colors -->