jules/nav-carte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(taff): 3 corrections UI — modal z-index, axes flex, cards layout

Browse Source 
- Modal z-index 1501→10001 (au-dessus du header 9999)
- Axes modal: grid→flex avec flex-basis 130px (plus de wrap PRATIQUES PRO)
- Cartes: layout restructuré — tag / nom / axes / desc 3 lignes / footer séparé

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jules Neny
2026-05-07 00:48:56 +02:00
parent f0696a8fb3
commit 0378f2bd72
2 changed files with 181 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
pages/trouver-du-taf.vue
View File

@@ -148,7 +148,7 @@
<Transition name="taff-backdrop">
<div
v-if="modalPlateforme"
class="fixed inset-0 z-[1500]"
class="fixed inset-0 z-[10000]"
style="background: rgba(26,34,56,0.55);"
@click="closeModal"
aria-hidden="true"
@@ -157,7 +157,7 @@
<Transition name="taff-modal">
<div
v-if="modalPlateforme"
class="fixed z-[1501] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col"
class="fixed z-[10001] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col"
style="width: min(760px, 92vw); max-height: 90vh; background: var(--nav-bg); border-radius: 16px; box-shadow: 0 16px 64px rgba(26,34,56,0.28); overflow: hidden;"
role="dialog"
aria-modal="true"
@@ -457,8 +457,8 @@ const parsedDescription = computed(() => {
/* Modal body helpers */
.modal-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--nav-text-muted); margin-bottom: 0.75rem; }
.modal-axes { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.5rem; }
.modal-axe { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-radius: 8px; }
.modal-axes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.modal-axe { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; border-radius: 8px; flex: 1 1 130px; min-width: 130px; }
.modal-meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.modal-meta-item { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.875rem; border-radius: 8px; background: var(--nav-bg-alt); }
.modal-meta-key { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--nav-text-muted); }