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

fix(ops): device detail modal responsive on mobile

Browse Source 
Le panneau de détail (DetailModal) était un panneau droit fixe 600px/90vw
et la carte réseau d'EquipmentDetail (.topo-row = 4 nœuds fixes 90px + 3
liens ≈528px) débordait/rognait sur mobile (nœud « Internet » coupé, IP/
onglets tronqués). DetailModal : sur <sm → dialogue maximisé pleine
largeur (position bottom) au lieu du panneau droit ; desktop inchangé
(600px droite). EquipmentDetail @<600px : nœuds topo flex (largeur auto),
liens 18px, dv-grid 2 col, dv-row2 en colonne, diag-grid 1 col.

Vérifié live (C-LPB4, EQP-0000011366) : 375px → carte pleine largeur, 0
débordement horizontal (docScrollW=375), 4 nœuds topo visibles
(Internet→OLT→Modem→17 app.), 0 élément > viewport, 0 erreur ; 1280px →
panneau droit 600px inchangé.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
louispaulb 2026-07-04 22:41:15 -04:00
parent d4a5644e37
commit c193bcbf1f
2 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
apps/ops/src/components/shared/DetailModal.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<q-dialog :model-value="open" @update:model-value="$emit('update:open', $event)" position="right" full-height> <q-dialog :model-value="open" @update:model-value="$emit('update:open', $event)"
<q-card style="width:600px;max-width:90vw" class="column no-wrap"> :position="$q.screen.lt.sm ? 'bottom' : 'right'" :maximized="$q.screen.lt.sm" full-height>
<q-card :style="$q.screen.lt.sm ? 'width:100%;max-width:100%' : 'width:600px;max-width:90vw'" class="column no-wrap">
<!-- Header --> <!-- Header -->
<q-card-section class="row items-center q-pb-sm" style="border-bottom:1px solid var(--ops-border, #e2e8f0)"> <q-card-section class="row items-center q-pb-sm" style="border-bottom:1px solid var(--ops-border, #e2e8f0)">
<div class="col"> <div class="col">
@ -58,8 +59,11 @@
<script setup> <script setup>
import { computed } from 'vue' import { computed } from 'vue'
import { useQuasar } from 'quasar'
import { erpLink } from 'src/composables/useFormatters' import { erpLink } from 'src/composables/useFormatters'
const $q = useQuasar()
import InvoiceDetail from './detail-sections/InvoiceDetail.vue' import InvoiceDetail from './detail-sections/InvoiceDetail.vue'
import IssueDetail from './detail-sections/IssueDetail.vue' import IssueDetail from './detail-sections/IssueDetail.vue'
import PaymentDetail from './detail-sections/PaymentDetail.vue' import PaymentDetail from './detail-sections/PaymentDetail.vue'

13
apps/ops/src/components/shared/detail-sections/EquipmentDetail.vue
View File

@ -950,4 +950,17 @@ onUnmounted(() => stopWanLive())
.adv-signal-fill { height: 100%; border-radius: 3px; transition: width 0.3s; } .adv-signal-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.adv-clients-table td:first-child { white-space: nowrap; } .adv-clients-table td:first-child { white-space: nowrap; }
.adv-inactive-row { opacity: 0.5; font-style: italic; } .adv-inactive-row { opacity: 0.5; font-style: italic; }
/* Mobile (agents terrain) : la carte réseau et les grilles doivent tenir dans
l'écran plutôt que déborder/rogner (nœuds topo à largeur fixe = cause du clip). */
@media (max-width: 600px) {
.topo-summary { padding: 10px; }
.topo-row { gap: 2px; }
.topo-node { width: auto; flex: 1 1 0; min-width: 0; }
.topo-cap, .topo-sub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo-link { max-width: 18px; }
.dv-grid { grid-template-columns: repeat(2, 1fr); }
.dv-row2 { flex-direction: column; }
.diag-grid { grid-template-columns: 1fr; }
}
</style> </style>