Roukmoute/Classeo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Conversion CSS mobile-first des layouts et pages admin

Browse Source 
L'ensemble du frontend utilisait un mix de @media (max-width) desktop-first
et @media (min-width) mobile-first, en contradiction avec la spec UX qui
impose une stratégie mobile-first radicale (78% des parents/élèves sur mobile).

Cette conversion uniformise les 8 fichiers restants vers @media (min-width)
avec les breakpoints de la spec UX (sm: 640px, md: 768px) pour garantir
une expérience progressive enhancement cohérente.
This commit is contained in:
Mathias STRASSER
2026-02-12 14:21:57 +01:00
parent 44ebe5e511
commit 2e225eb466
11 changed files with 259 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/routes/+page.svelte
View File

@@ -112,7 +112,7 @@
}
h1 {
font-size: 2.5rem;
font-size: 1.75rem;
font-weight: 700;
color: #1e293b;
margin: 0 0 1rem;
@@ -123,7 +123,7 @@
}
.tagline {
font-size: 1.25rem;
font-size: 1rem;
color: #64748b;
margin: 0 0 2rem;
line-height: 1.6;
@@ -155,7 +155,7 @@
.features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
gap: 1rem;
margin-top: 2rem;
}
@@ -192,17 +192,17 @@
}
}
@media (max-width: 640px) {
@media (min-width: 640px) {
h1 {
font-size: 1.75rem;
font-size: 2.5rem;
}
.tagline {
font-size: 1rem;
font-size: 1.25rem;
}
.features {
gap: 1rem;
gap: 2rem;
}
}
</style>

29
frontend/src/routes/admin/+layout.svelte
View File

@@ -97,7 +97,10 @@
display: flex;
justify-content: space-between;
align-items: center;
height: 64px;
flex-wrap: wrap;
height: auto;
padding: 0.75rem 0;
gap: 0.75rem;
}
.logo-button {
@@ -116,6 +119,9 @@
.header-nav {
display: flex;
align-items: center;
width: 100%;
justify-content: flex-end;
flex-wrap: wrap;
gap: 0.5rem;
}
@@ -192,7 +198,7 @@
.admin-main {
flex: 1;
padding: 1.5rem;
padding: 1rem;
}
.main-content {
@@ -206,23 +212,22 @@
}
}
@media (max-width: 768px) {
@media (min-width: 768px) {
.header-content {
flex-wrap: wrap;
height: auto;
padding: 0.75rem 0;
gap: 0.75rem;
flex-wrap: nowrap;
height: 64px;
padding: 0;
gap: 0;
}
.header-nav {
width: 100%;
justify-content: flex-end;
flex-wrap: wrap;
gap: 0.5rem;
width: auto;
flex-wrap: nowrap;
justify-content: flex-start;
}
.admin-main {
padding: 1rem;
padding: 1.5rem;
}
}
</style>

8
frontend/src/routes/admin/+page.svelte
View File

@@ -91,6 +91,7 @@
.stats-row {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
@@ -104,6 +105,7 @@
border: 1px solid var(--border-subtle, #e2e8f0);
border-radius: 0.75rem;
min-width: 100px;
flex: 1;
}
.stat-value {
@@ -159,13 +161,13 @@
text-align: center;
}
@media (max-width: 640px) {
@media (min-width: 640px) {
.stats-row {
flex-wrap: wrap;
flex-wrap: nowrap;
}
.stat-card {
flex: 1;
flex: 0 1 auto;
}
}
</style>

6
frontend/src/routes/admin/classes/[id]/+page.svelte
View File

@@ -398,13 +398,13 @@
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (max-width: 480px) {
@media (min-width: 640px) {
.form-row {
grid-template-columns: 1fr;
grid-template-columns: 1fr 1fr;
}
}

22
frontend/src/routes/admin/pedagogy/+page.svelte
View File

@@ -298,6 +298,7 @@
.page-header {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
@@ -357,8 +358,11 @@
/* Current mode banner */
.current-mode-banner {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 1rem;
text-align: center;
padding: 1.25rem 1.5rem;
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
border-radius: 0.75rem;
@@ -379,7 +383,7 @@
}
.banner-detail {
text-align: right;
text-align: center;
}
.detail-number {
@@ -407,7 +411,7 @@
.modes-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-template-columns: 1fr;
gap: 1rem;
}
@@ -636,23 +640,23 @@
}
}
@media (max-width: 768px) {
@media (min-width: 768px) {
.page-header {
flex-direction: column;
flex-direction: row;
}
.modes-grid {
grid-template-columns: 1fr;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.current-mode-banner {
flex-direction: column;
gap: 1rem;
text-align: center;
flex-direction: row;
gap: 0;
text-align: left;
}
.banner-detail {
text-align: center;
text-align: right;
}
}
</style>

27
frontend/src/routes/admin/users/+page.svelte
View File

@@ -996,7 +996,8 @@
/* Filters */
.filters-bar {
display: flex;
align-items: flex-end;
flex-direction: column;
align-items: stretch;
gap: 1rem;
margin-bottom: 1.5rem;
padding: 1rem;
@@ -1025,7 +1026,8 @@
border: 1px solid #d1d5db;
border-radius: 0.375rem;
font-size: 0.875rem;
min-width: 180px;
min-width: auto;
width: 100%;
background: white;
}
@@ -1126,6 +1128,11 @@
background: #f9fafb;
}
.users-table th:nth-child(5),
.users-table td:nth-child(5) {
display: none;
}
.user-name-cell {
white-space: nowrap;
}
@@ -1264,7 +1271,7 @@
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-columns: 1fr;
gap: 1rem;
}
@@ -1392,24 +1399,24 @@
font-style: italic;
}
@media (max-width: 768px) {
@media (min-width: 768px) {
.filters-bar {
flex-direction: column;
align-items: stretch;
flex-direction: row;
align-items: flex-end;
}
.filter-group select {
min-width: auto;
width: 100%;
min-width: 180px;
width: auto;
}
.form-row {
grid-template-columns: 1fr;
grid-template-columns: 1fr 1fr;
}
.users-table th:nth-child(5),
.users-table td:nth-child(5) {
display: none;
display: table-cell;
}
}
</style>

32
frontend/src/routes/dashboard/+layout.svelte
View File

@@ -91,7 +91,10 @@
display: flex;
justify-content: space-between;
align-items: center;
height: 64px;
flex-wrap: wrap;
height: auto;
padding: 0.75rem 0;
gap: 0.75rem;
}
.logo-button {
@@ -110,7 +113,10 @@
.header-nav {
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
justify-content: flex-end;
flex-wrap: wrap;
gap: 0.5rem;
}
.nav-link {
@@ -186,7 +192,7 @@
.dashboard-main {
flex: 1;
padding: 1.5rem;
padding: 1rem;
}
.main-content {
@@ -200,23 +206,23 @@
}
}
@media (max-width: 768px) {
@media (min-width: 768px) {
.header-content {
flex-wrap: wrap;
height: auto;
padding: 0.75rem 0;
gap: 0.75rem;
flex-wrap: nowrap;
height: 64px;
padding: 0;
gap: 0;
}
.header-nav {
width: 100%;
justify-content: flex-end;
flex-wrap: wrap;
gap: 0.5rem;
width: auto;
flex-wrap: nowrap;
gap: 1rem;
justify-content: flex-start;
}
.dashboard-main {
padding: 1rem;
padding: 1.5rem;
}
}
</style>

28
frontend/src/routes/settings/+layout.svelte
View File

@@ -72,7 +72,10 @@
display: flex;
justify-content: space-between;
align-items: center;
height: 64px;
flex-wrap: wrap;
height: auto;
padding: 0.75rem 0;
gap: 0.75rem;
}
.logo-button {
@@ -91,7 +94,10 @@
.header-nav {
display: flex;
align-items: center;
gap: 1rem;
width: 100%;
justify-content: flex-end;
flex-wrap: wrap;
gap: 0.5rem;
}
.nav-link {
@@ -158,19 +164,19 @@
}
}
@media (max-width: 768px) {
@media (min-width: 768px) {
.header-content {
flex-wrap: wrap;
height: auto;
padding: 0.75rem 0;
gap: 0.75rem;
flex-wrap: nowrap;
height: 64px;
padding: 0;
gap: 0;
}
.header-nav {
width: 100%;
justify-content: flex-end;
flex-wrap: wrap;
gap: 0.5rem;
width: auto;
flex-wrap: nowrap;
gap: 1rem;
justify-content: flex-start;
}
}
</style>