From 142e5cf7873812f23d0ac99656b28af04273c5c8 Mon Sep 17 00:00:00 2001 From: Jules Neny Date: Thu, 7 May 2026 00:04:42 +0200 Subject: [PATCH] feat(codev): skip fiche + annuaire table sticky + page QR code --- pages/codev/carto.vue | 134 ++++++++++++++++++++++++++++++++++++------ pages/codev/fiche.vue | 15 +++++ pages/codev/qr.vue | 94 +++++++++++++++++++++++++++++ 3 files changed, 226 insertions(+), 17 deletions(-) create mode 100644 pages/codev/qr.vue diff --git a/pages/codev/carto.vue b/pages/codev/carto.vue index 35b497b..3529ddf 100644 --- a/pages/codev/carto.vue +++ b/pages/codev/carto.vue @@ -9,12 +9,12 @@ {{ fiches.length }} fiche{{ fiches.length !== 1 ? 's' : '' }} - clique sur un nom pour voir le detail

+ [ QR ]
- - +
@@ -81,22 +81,32 @@
-
-
-
{{ f.nom }}
-

{{ f.besoin }}

- Modifier -
-
Aucune fiche. Ajouter la mienne
-
+
-
-
-
{{ f.nom }}
-

{{ f.offre }}

- Modifier +
+ Aucune fiche. Ajouter la mienne
-
Aucune fiche. Ajouter la mienne
+ +
+ + + + + + + + + + + + + + + +
PrénomBesoinCe que j'offre
{{ f.nom }}{{ f.besoin }}{{ f.offre }}
+
+ +

Clique sur une ligne pour modifier la fiche

@@ -141,7 +151,7 @@ const fiches = computed(() => data.value?.list ?? []) const matches = ref([]) const mode = ref<'none' | 'solution' | 'alliance' | 'surprise'>('none') const showLabels = ref(false) -const tab = ref<'carto' | 'besoins' | 'competences'>('carto') +const tab = ref<'carto' | 'annuaire'>('carto') const selectedFiche = ref(null) const isMobileView = typeof window !== 'undefined' ? window.innerWidth < 600 : false @@ -403,6 +413,96 @@ function onSelectFiche(id: number) { .sheet-enter-active, .sheet-leave-active { transition: opacity 0.2s; } .sheet-enter-from, .sheet-leave-to { opacity: 0; } +/* ── QR link ── */ + +.qr-link { + font-size: 0.75rem; + color: #9ca3af; + text-decoration: none; + align-self: flex-end; +} +.qr-link:hover { color: #6b7280; } + +/* ── Annuaire ── */ + +.annuaire-wrap { + display: flex; + flex-direction: column; + gap: 8px; + flex: 1; +} + +.annuaire-scroll { + overflow-x: auto; + -webkit-overflow-scrolling: touch; + border: 1px solid #e5e7eb; + border-radius: 10px; +} + +.annuaire-table { + width: 100%; + border-collapse: collapse; + min-width: 480px; +} + +.annuaire-table thead tr { + background: #f9fafb; + border-bottom: 2px solid #e5e7eb; +} + +.annuaire-table th { + padding: 10px 14px; + text-align: left; + font-size: 0.75rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.05em; + color: #6b7280; + white-space: nowrap; +} + +.annuaire-table td { + padding: 12px 14px; + font-size: 0.875rem; + color: #374151; + vertical-align: top; + border-bottom: 1px solid #f3f4f6; + line-height: 1.5; +} + +.annuaire-row { + cursor: pointer; + transition: background 0.12s; +} + +.annuaire-row:hover { background: #f9fafb; } +.annuaire-row:last-child td { border-bottom: none; } + +.col-nom { + position: sticky; + left: 0; + background: inherit; + z-index: 1; + font-weight: 600; + color: #1a1a2e !important; + white-space: nowrap; + min-width: 80px; + border-right: 1px solid #e5e7eb; +} + +.annuaire-row:hover .col-nom { background: #f9fafb; } +thead tr .col-nom { background: #f9fafb; } + +.col-besoin { min-width: 200px; max-width: 260px; } +.col-offre { min-width: 200px; max-width: 260px; } + +.annuaire-hint { + font-size: 0.75rem; + color: #9ca3af; + text-align: center; + margin: 0; +} + /* ── Mobile ── */ @media (max-width: 600px) { diff --git a/pages/codev/fiche.vue b/pages/codev/fiche.vue index 0ad5d41..d1a36f1 100644 --- a/pages/codev/fiche.vue +++ b/pages/codev/fiche.vue @@ -109,6 +109,10 @@ {{ isEdit ? (loading ? 'Modification...' : 'Enregistrer les modifications') : (loading ? 'Envoi en cours...' : 'Ajouter ma fiche') }} + + Voir la carte sans créer de fiche → + +
@@ -390,6 +394,17 @@ async function submit() { cursor: not-allowed; } +.skip-link { + display: block; + text-align: center; + font-size: 0.825rem; + color: var(--nav-text-muted, #9ca3af); + text-decoration: none; + margin-top: 0.5rem; + padding: 0.5rem; +} +.skip-link:hover { color: var(--nav-text, #1a1a2e); } + /* ── Responsive ── */ @media (max-width: 480px) { diff --git a/pages/codev/qr.vue b/pages/codev/qr.vue new file mode 100644 index 0000000..ebedd8b --- /dev/null +++ b/pages/codev/qr.vue @@ -0,0 +1,94 @@ + + + + +