feat(media): ?tab= suivi par watch, sous-onglets retirés, Publications ; Signaler en pied d'À propos

La nav XL porte Recherche média / Publications ; /media relit route.query.tab à
chaque changement (un lien /media → /media?tab=projets changeait l'URL sans
changer la page). B10 M5.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01EBu7CSLy7PJgL4HJaV5oHP
This commit is contained in:
Jules Neny
2026-10-02 17:02:10 +02:00
co-authored by Claude Opus 5.5
parent 79424d29cf
commit 358c2954c3
3 changed files with 26 additions and 41 deletions
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<div class="media-tab-projets" style="padding: 1.5rem; overflow-y: auto;">
<div style="max-width: 70ch; margin-bottom: 1.5rem;">
<h2 style="font-weight: 700; font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--nav-text);">PFE engagés</h2>
<h2 style="font-weight: 700; font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--nav-text);">Publications</h2>
<p style="font-size: 0.9rem; line-height: 1.6; color: var(--nav-text);">
Mutualiser le savoir. Voici les PFE engagés publiés en ligne dont nous avons connaissance.
Partage-nous le lien de ton travail si tu veux participer à cette initiative.
+18
View File
@@ -185,6 +185,12 @@
</div>
</section>
<!-- B10-M5 : Signaler a quitté la barre d'ordinateur ; il reste ici, dans le menu et dans chaque fiche -->
<p class="section-text apropos-pied">
Une fiche fausse, un lien mort, un contenu à retirer ?
<NuxtLink to="/signaler">Signaler un problème</NuxtLink>
</p>
</div>
</div>
</template>
@@ -270,6 +276,18 @@ function copyApiUrl() {
margin: 0 0 1rem;
}
.apropos-pied {
padding-top: var(--space-md);
border-top: 1px solid var(--border);
}
.apropos-pied a {
color: var(--text);
font-weight: var(--fw-semibold);
text-decoration: underline;
text-underline-offset: 3px;
}
.section-intro {
color: var(--nav-text-muted);
margin-bottom: 1.25rem;
+7 -40
View File
@@ -1,56 +1,23 @@
<template>
<!-- B10-M5 : plus de sous-onglets ici, la nav XL porte « Recherche média » et « Publications » (?tab=projets) -->
<div class="media-page" style="background: var(--nav-bg);">
<nav class="subtabs" style="display:flex; gap:0; border-bottom: 1px solid var(--nav-bg-alt); background: var(--nav-surface); padding: 0 1rem;">
<button
:class="['subtab-btn', { active: tab === 'visuel' }]"
@click="tab = 'visuel'"
>
📚 bibliothèque des pensées écologiques
</button>
<button
:class="['subtab-btn', { active: tab === 'projets' }]"
@click="tab = 'projets'"
>
📐 Projets
</button>
</nav>
<MediaTabVisuel v-if="tab === 'visuel'" />
<MediaTabProjets v-else-if="tab === 'projets'" />
<MediaTabProjets v-else />
</div>
</template>
<script setup lang="ts">
const route = useRoute()
const router = useRouter()
const tab = ref<'visuel' | 'projets'>(
(['visuel', 'projets'].includes(route.query.tab as string)
? route.query.tab as 'visuel' | 'projets'
: 'visuel')
)
watch(tab, (newTab) => {
router.replace({ query: { ...route.query, tab: newTab } })
// Lu à chaque changement de ?tab= (un lien /media → /media?tab=projets ne remonte pas la page).
const tab = ref<'visuel' | 'projets'>(route.query.tab === 'projets' ? 'projets' : 'visuel')
watch(() => route.query.tab, (t) => {
tab.value = t === 'projets' ? 'projets' : 'visuel'
})
useHead({ title: 'AEP - Media' })
useHead(() => ({ title: tab.value === 'projets' ? 'AEP - Publications' : 'AEP - Recherche média' }))
</script>
<style scoped>
.media-page { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.subtabs { display: flex; gap: 0; flex-shrink: 0; }
.subtab-btn {
padding: 10px 18px;
font-size: 0.85rem;
font-weight: 500;
background: none;
border: none;
border-bottom: 2px solid transparent;
cursor: pointer;
color: var(--nav-text-muted);
transition: color 0.15s, border-color 0.15s;
}
.subtab-btn:hover { color: var(--nav-text); }
.subtab-btn.active { color: var(--nav-primary-solid); border-bottom-color: var(--nav-primary-solid); font-weight: 600; }
</style>