louis/gigafibre-fsm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ops/mobile): Network GPON tient sur mobile (onglets défilants + arbre enroulé + boutons tactiles)

Browse Source 
NetworkPage débordait de ~118px à 375px. Deux causes corrigées :

- Barre d'onglets (4 onglets = 435px) non bornée dans une rangée flex → ne
  déclenchait pas le défilement natif de Quasar. Ajout global `.q-tabs { max-width:100% }`
  en mobile (app.scss) : Quasar réactive son scroll (aucun effet là où déjà borné).
- Arbre GPON : en-têtes OLT/slot/port en flex non-enroulé (nom·IP·adresse·nb
  clients·SNMP·slots·éditer) → débordement. `flex-wrap:wrap` + neutralisation du
  `margin-left:auto` des compteurs sur mobile.
- Boutons d'action de l'arbre (éditer OLT, ajouter port, éditer lieu) étaient
  révélés au survol (opacity:0) → invisibles au tactile. Toujours visibles < 600px.

Vérifié à 375px : docScrollW 493→375, en-têtes enroulées, crayon éditer visible.
Portée strictement mobile (@media max-width:599px) — desktop inchangé.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
louispaulb 2026-07-04 20:56:11 -04:00
parent 68063a9f69
commit 5a35f64a9d
2 changed files with 11 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/ops/src/css/app.scss
View File

@ -254,6 +254,9 @@ body {
champs à largeur fixe inline (style="width:NNNpx" : recherches, dates, nombres) bornés à l'espace dispo. */
.q-field[style*="width"] { max-width: 100% !important; }
.q-menu .q-list { max-width: 100% !important; }
/* Barres d'onglets (q-tabs) non bornées dans une rangée flex : on les cadre à l'écran
pour que Quasar réactive son défilement natif au lieu de déborder (ex. NetworkPage : 4 onglets = 435px). */
.q-tabs { max-width: 100% !important; }
/* Cibles tactiles : boutons icône denses ≥ 32px (confort au doigt). */
.q-btn--round.q-btn--dense { min-height: 32px; min-width: 32px; }
/* Utilitaires opt-in pour rangées/en-têtes denses : wrap + troncature 1 ligne sur mobile (à poser au cas par cas). */

8
apps/ops/src/pages/NetworkPage.vue
View File

@ -1569,6 +1569,14 @@ onMounted(() => {
.net-olt-slots { color: var(--ops-text-muted); font-size: 12px; font-weight: 400; }
.net-olt-edit-btn { opacity: 0; transition: opacity .15s; }
/* Mobile — arbre GPON : les en-têtes (OLT/slot/port) empilent trop d'infos sur une ligne (nom·IP·adresse·nb clients·SNMP·slots·éditer) → on enroule.
Les boutons d'action révélés au survol (opacity:0) sont inaccessibles au doigt → toujours visibles sur tactile. */
@media (max-width: 599px) {
.net-olt-header, .net-slot-header, .net-port-header { flex-wrap: wrap; }
.net-olt-count, .net-slot-count, .net-port-count { margin-left: 0; }
.net-olt-edit-btn, .net-port-add-btn, .net-loc-edit-btn { opacity: 1; }
}
.net-snmp-badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; font-weight: 400; padding: 1px 8px;