feat(aep): têtes d'onglet S / M / XL (slides 16-18 du deck du 23/09) + lien mobile recherche-média
- utils/echelles.ts : texte des slides 15 à 18, mot pour mot, source unique (la future nav S / M / XL lira ce fichier). - EchelleTete.vue : badge d'échelle, titre, sept mots, phrase, ligne « Chaque section est ouverte aux contributions » vers /proposer. - Placée en tête du texte existant, sans le remplacer : Outils (S), popup Écosystème Entraide (M), page Codev (M), popup média (XL). Réseaux AEP et Jobs attendent les arbitrages n° 1 et 2 (table R §6). - /proposer?categorie=<id> présélectionne l'onglet. - Menu mobile : « recherche-média » pointait sur /rag (301), pointe sur /media, état actif comme les autres liens. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Jules
Claude Opus 5.5
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<section class="echelle-tete" :class="{ 'echelle-tete--compact': compact }" :aria-label="`Échelle ${e.id} : ${e.titre}`">
|
||||
<p class="echelle-tete__kicker">
|
||||
<span class="echelle-tete__badge" aria-hidden="true">{{ e.id }}</span>
|
||||
<span class="echelle-tete__titre">{{ e.titre }}<span v-if="e.sousTitre" class="echelle-tete__sous-titre">{{ ' ' + e.sousTitre }}</span></span>
|
||||
</p>
|
||||
<ul class="echelle-tete__mots">
|
||||
<li v-for="m in e.mots" :key="m">{{ m }}</li>
|
||||
</ul>
|
||||
<p class="echelle-tete__phrase">{{ e.phrase }}</p>
|
||||
<slot />
|
||||
<p v-if="contribuer" class="echelle-tete__contribuer">
|
||||
<span>{{ ECHELLES_CADRE_COURT }}</span>
|
||||
<NuxtLink :to="`/proposer?categorie=${e.categorieProposer}`" @click="$emit('navigate')">Proposer une ressource →</NuxtLink>
|
||||
</p>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ECHELLES, type EchelleId } from '~/utils/echelles'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
echelle: EchelleId
|
||||
/** Variante resserrée, pour une popup ou un en-tête centré. */
|
||||
compact?: boolean
|
||||
/** Affiche la ligne « on pose l'infrastructure, le collectif nourrit ». */
|
||||
contribuer?: boolean
|
||||
}>(), { compact: false, contribuer: true })
|
||||
|
||||
defineEmits<{ navigate: [] }>()
|
||||
|
||||
const e = computed(() => ECHELLES[props.echelle])
|
||||
const ECHELLES_CADRE_COURT = 'Chaque section est ouverte aux contributions.'
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.echelle-tete {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
margin: 0 0 var(--space-md);
|
||||
}
|
||||
|
||||
.echelle-tete__kicker {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: var(--space-sm);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.echelle-tete__badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 2rem;
|
||||
padding: 0.1rem 0.5rem;
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--accent);
|
||||
color: var(--on-accent);
|
||||
font-weight: var(--fw-bold);
|
||||
font-size: var(--fs-sm);
|
||||
letter-spacing: 0.04em;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.echelle-tete__titre {
|
||||
font-size: var(--fs-lg);
|
||||
font-weight: var(--fw-bold);
|
||||
color: var(--text);
|
||||
line-height: var(--lh-tight);
|
||||
}
|
||||
|
||||
.echelle-tete__sous-titre {
|
||||
font-weight: var(--fw-regular);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.echelle-tete__mots {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.15rem 0;
|
||||
font-size: var(--fs-sm);
|
||||
color: var(--text);
|
||||
line-height: var(--lh-base);
|
||||
}
|
||||
.echelle-tete__mots li:not(:last-child)::after {
|
||||
content: '·';
|
||||
margin: 0 0.5rem;
|
||||
color: var(--accent);
|
||||
font-weight: var(--fw-bold);
|
||||
}
|
||||
|
||||
.echelle-tete__phrase {
|
||||
margin: 0;
|
||||
font-size: var(--fs-sm);
|
||||
font-style: italic;
|
||||
color: var(--text-muted);
|
||||
line-height: var(--lh-base);
|
||||
}
|
||||
|
||||
.echelle-tete__contribuer {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem 0.75rem;
|
||||
font-size: var(--fs-xs);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.echelle-tete__contribuer a {
|
||||
color: var(--link);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 2px;
|
||||
}
|
||||
.echelle-tete__contribuer a:hover { color: var(--link-hover); }
|
||||
|
||||
.echelle-tete--compact { text-align: left; }
|
||||
.echelle-tete--compact .echelle-tete__titre { font-size: var(--fs-base); }
|
||||
</style>
|
||||
@@ -275,6 +275,7 @@
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex-1 overflow-y-auto px-5 py-4" style="color:var(--nav-text);font-size:0.875rem;line-height:1.6;">
|
||||
<EchelleTete echelle="XL" compact @navigate="ragInfoOpen = false" />
|
||||
<p class="mb-3">Une bibliothèque parlante des pensées écologiques, organisée pour aider à créer une pensée complexe et nuancée, à soutenir l'écriture de nouveaux récits, des alternatives concrètes et des projets collectifs.</p>
|
||||
<p class="mb-4" style="color:var(--nav-text-muted);font-size:0.8rem;">Projet open source, ouvert à toutes et à tous - <a href="https://bonpote.com/la-carte-des-pensees-ecologiques/" target="_blank" rel="noopener" style="text-decoration:underline;">article + carte FRACAS Bonpote V2</a>.</p>
|
||||
<div class="flex flex-col gap-3">
|
||||
|
||||
@@ -32,6 +32,7 @@
|
||||
|
||||
<div class="mission-body">
|
||||
<h2 id="mission-title" class="mission-title">{{ title }}</h2>
|
||||
<EchelleTete v-if="echelle" :echelle="echelle" compact @navigate="close" />
|
||||
<slot>
|
||||
<p class="mission-text">
|
||||
L'architecture est l'une des professions les plus complexes qui soit ; elle croise droit, technique, esthétique, économie, social, écologie — tout à la fois, tout simultanément, souvent sans filet. Paradoxalement, c'est aussi l'une des moins structurées sur le plan de l'entraide : peu de transmission horizontale, beaucoup d'isolement, une culture du chacun-pour-soi héritée d'une formation qui prépare à la compétition plus qu'à la coopération. On sort de l'école seul·e. On s'installe seul·e. On réinvente ce que d'autres ont déjà traversé.
|
||||
@@ -52,11 +53,15 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { EchelleId } from '~/utils/echelles'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
modelValue: boolean
|
||||
title?: string
|
||||
ctaLabel?: string
|
||||
storageKey?: string
|
||||
/** Tête d'échelle du deck (S / M / XL) affichée sous le titre. Absente sur /agences tant que l'arbitrage n° 1 n'est pas rendu. */
|
||||
echelle?: EchelleId
|
||||
}>(), {
|
||||
title: "L'écosystème d'entraide architecte",
|
||||
ctaLabel: 'Explorer la carte',
|
||||
|
||||
Reference in New Issue
Block a user