gitea_admin/wondif_vue
1
0
Fork 0
generated from gitea_admin/default
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ajout de dev front

Browse Source
This commit is contained in:
Julie
2026-04-03 12:06:43 +02:00
parent bc6ad43ea5
commit 3f3f939267
47 changed files with 1302 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
app/components/Chiffres.vue Normal file
View File

@@ -0,0 +1,104 @@
<template>
<section class="chiffres_cont">
<DsHeading as="h1" tone="default" textcase="uppercase">
DES CHIFRES PARTOUT EN ÎLE-DE-FRANCE EN 2025
</DsHeading>
<div class="chiffres_list">
<div class="chiffres_item">
<div class="chiffres_nombre">14</div>
<div class="chiffres_descriptioin">Concerts dans le Val-de-Marne</div>
</div>
<div class="chiffres_item">
<div class="chiffres_nombre">6 831</div>
<div class="chiffres_descriptioin">Spectateurs dans les Yvelines</div>
</div>
<div class="chiffres_item">
<div class="chiffres_nombre">9</div>
<div class="chiffres_descriptioin">Villes en Seine-et-Marne</div>
</div>
<div class="chiffres_item">
<div class="chiffres_nombre">10</div>
<div class="chiffres_descriptioin">Concerts en Hauts-de-Seine</div>
</div>
<div class="chiffres_item">
<div class="chiffres_nombre">2 456</div>
<div class="chiffres_descriptioin">Spectateurs en Seine-Saint-Denis</div>
</div>
<div class="chiffres_item">
<div class="chiffres_nombre">7 419</div>
<div class="chiffres_descriptioin">Spectateurs dans l'Essonne</div>
</div>
<div class="chiffres_item">
<div class="chiffres_nombre">6</div>
<div class="chiffres_descriptioin">Concerts en Vald'Oise</div>
</div>
</div>
</section>
</template>
<script setup>
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
</script>
<style lang="scss">
.chiffres_cont {
display: flex;
flex-direction: column;
align-items: center;
@media (max-width: 599px) {
padding-left: 10px;
padding-right: 10px;
}
font-family: var(--font-roboto);
margin-top: 30px;
margin-bottom: 50px;
.chiffres_list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
row-gap: 50px;
column-gap: 50px;
margin-top: 60px;
.chiffres_item {
max-width: 180px;
display: flex;
flex-direction: column;
align-items: center;
row-gap: 15px;
text-align: center;
.chiffres_nombre {
color: var(--c-brand_rouge);
font-weight: var(--fw-extrabold);
font-size: 50px;
@media (max-width: 899px) {
font-size: 45px;
}
@media (max-width: 599px) {
font-size: 40px;
}
}
.chiffres_descriptioin {
font-weight: var(--fw-regular);
font-size: 25px;
@media (max-width: 899px) {
font-size: 23px;
}
@media (max-width: 599px) {
font-size: 21px;
}
}
}
}
}
</style>

41
app/components/header/HeaderNav.vue
View File

@@ -30,7 +30,9 @@
</div>
<nav class="header_nav_cont" aria-label="Primary navigation">
<!-- Desktop nav -->
<!-- ================ -->
<!-- 🖥️ Desktop nav -->
<!-- ================ -->
<ul class="header_nav header_nav--desktop">
<li class="header_nav_item" :class="{ 'is-active': isOrchestre }">
L'Orchestre
@@ -59,17 +61,18 @@
<li class="header_nav_item" :class="{ 'is-active': isMediation }">
Action culturelle
<ul class="header_nav_sub_menu">
<li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/petite-enfance">Petite enfance</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/petite-enfance">Ateliers 0-3 ans</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/scolaires">Scolaires</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/social">Champ social</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/insertion-pro">Insertion professionnelle</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/amateurs">Pratiques amateurs</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/chantons">Chantons avec l'Orchestre</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/amateurs">Académie d'orchestre</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/insertion-pro">Partenariat Grandes Écoles</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/social">Actions à l'hopital</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/mediation/ressources-pedagogiques">Ressources pédagogiques</NuxtLink></li>
</ul>
</li>
<li class="header_nav_item" :class="{ 'is-active': isMecenat }">
Mécénat
<li class="header_nav_item nav_focus_black" :class="{ 'is-active': isMecenat }">
Nous soutenir
<ul class="header_nav_sub_menu decalage_gauche">
<li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/soutenir">Nous soutenir</NuxtLink></li>
<li class="header_nav_sub_menu_item"><NuxtLink to="/mecenat/entreprises">Entreprises</NuxtLink></li>
@@ -105,8 +108,9 @@
</li>
</ul>
<!-- ================ -->
<!-- Mobile nav -->
<!-- ================ -->
<div class="header_nav--mobile">
<button
class="header_burger"
@@ -121,8 +125,9 @@
<BurgerIcon :burger-color="burgerColor" />
</button>
</div>
<!-- ================ -->
<!-- Mobile icons -->
<!-- ================ -->
<div class="header_nav header_nav--mobile-icons">
<div class="header_nav_item">
<NuxtLink to="/concerts/agenda">
@@ -148,8 +153,9 @@
</NuxtLink>
</div>
</div>
<!-- Mobile drawer -->
<!-- ================ -->
<!-- 📱 Mobile drawer -->
<!-- ================ -->
<div
id="mobile-menu"
class="header_drawer"
@@ -195,21 +201,22 @@
>
Action culturelle
<ul class="header_drawer_sub_menu">
<li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/petite-enfance">Petite enfance</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/petite-enfance">Ateliers 0-3 ans</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/scolaires">Scolaires</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/social">Champ social</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/insertion-pro">Insertion professionnelle</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/amateurs">Pratiques amateurs</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/chantons">Chantons avec l'Orchestre</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/amateurs">Académie d'orchestre</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/insertion-pro">Partenariat Grandes Écoles</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/social">Actions à l'hopital</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/mediation/ressources-pedagogiques">Ressources pédagogiques</NuxtLink></li>
</ul>
</li>
<li
class="header_drawer_link"
class="header_drawer_link nav_focus_invert"
:class="{ 'is-open': activeDrawer === 'mecenat' }"
@click="toggleDrawer('mecenat')"
>
Mécénat
Nous soutenir
<ul class="header_drawer_sub_menu">
<li class="header_drawer_sub_menu_item"><NuxtLink to="/mecenat/soutenir">Nous soutenir</NuxtLink></li>
<li class="header_drawer_sub_menu_item"><NuxtLink to="/mecenat/entreprises">Entreprises</NuxtLink></li>

8
app/components/header/HeaderWrapper.vue
View File

@@ -6,14 +6,6 @@
<template>
<header>
<div class="bg-orbs" aria-hidden="true">
<!-- <span class="orb orb--1" /> -->
<!-- <span class="orb orb--2" /> -->
<!-- <span class="orb orb--3" /> -->
<!-- <span class="orb orb--4" /> -->
<!-- <span class="orb orb--5" /> -->
<!-- <span class="orb orb--6" /> -->
</div>
<div class="header_layout" :class="`header--${theme}`">
<slot />
</div>

73
app/components/section/Decalage.vue
View File

@@ -19,7 +19,7 @@
<slot name="button" />
</div>
<div v-if="ensavoirplusTarget" class="decalage_button">
<DsButton :textColor="buttonTone" :borderColor="buttonTone" @click="toggleTarget(ensavoirplusTarget)">En savoir +</DsButton>
<DsButton :textColor="buttonTone" :borderColor="buttonTone" @click="toggleTarget(ensavoirplusTarget, ensavoirplusGroup)">En savoir +</DsButton>
</div>
</div>
</div>
@@ -27,42 +27,52 @@
</template>
<script setup>
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
import DsText from '@root/design-system/primitives/DsText.vue'
import DsButton from '@root/design-system/primitives/DsButton.vue'
import DsHeading from '@root/design-system/primitives/DsHeading.vue'
import DsText from '@root/design-system/primitives/DsText.vue'
import DsButton from '@root/design-system/primitives/DsButton.vue'
defineProps({
tone: { type: String, default: 'default' },
titleTone: { type: String, default: 'default' },
buttonTone: { type: String, default: 'default' },
position: { type: String, default: 'left' },
ensavoirplusTarget: { type: String, default: '' }
ensavoirplusTarget: { type: String, default: '' },
ensavoirplusGroup: { type: String, default: '' }
})
function toggleTarget(ensavoirplusTarget) {
document.getElementById(ensavoirplusTarget).classList.toggle("decalage_ensavoirplus--hidden");
function toggleTarget(ensavoirplusTarget, ensavoirplusGroup) {
const target = document.getElementById(ensavoirplusTarget)
if (!target) return
const isHidden = target.classList.contains('decalage_ensavoirplus--hidden')
if (ensavoirplusGroup) {
document
.querySelectorAll(`[data-ensavoirplus-group="${ensavoirplusGroup}"]`)
.forEach((element) => {
if (element.id !== ensavoirplusTarget) {
element.classList.add('decalage_ensavoirplus--hidden')
}
})
}
target.classList.toggle('decalage_ensavoirplus--hidden', !isHidden)
}
</script>
<style lang="scss">
.decalage_cont {
margin-bottom: 70px;
display: flex;
&--left {
justify-content: flex-start;
}
&--right {
justify-content: flex-end;
}
}
}
.decalage {
padding-top: 50px;
padding-bottom: 50px;
padding-bottom: 40px;
display: flex;
@media (min-width: 0px) and (max-width: 700px) {
@@ -74,17 +84,16 @@ import DsButton from '@root/design-system/primitives/DsButton.vue'
@media (min-width: 800px) {
width: 60vw;
}
/* tons = arrière-plan section */
&--default { background: transparent; }
&--brand { background: var(--c-brand_rouge);}
&--dark { background: var(--c-backgroud-black); }
&--brandreverse { background: var(--c-backgroud-brandreverse); }
&--jaune { background: var(--c-background-jaune); }
/* position = arrière-plan section */
&--right {
.decalage_inner {
padding-right: 20px;
padding-left: 50px;
@@ -94,8 +103,11 @@ import DsButton from '@root/design-system/primitives/DsButton.vue'
padding-left: 40px;
}
}
.decalage_button {
text-align: left;
}
}
&--left {
justify-content: flex-end;
@@ -108,13 +120,23 @@ import DsButton from '@root/design-system/primitives/DsButton.vue'
padding-left: 15px;
}
}
h2 {
text-align: right;
}
.decalage_button {
text-align: right;
}
}
.decalage_button {
margin-top: 32px;
}
}
.decalage_inner {
h2 {
padding-bottom: 5px;
}
@media (min-width: 0px) {
width: 100%;
}
@@ -149,12 +171,7 @@ import DsButton from '@root/design-system/primitives/DsButton.vue'
width: 600px;
}
}
.decalage_button {
margin-top: 10px;
text-align: right;
}
.decalage_ensavoirplus--hidden {
display: none;
}

2
app/components/section/PageSection.vue
View File

@@ -28,7 +28,7 @@
<script setup>
const props = defineProps({
tone: { type: String, default: 'default' }, // default / brand / muted / dark…
tone: { type: String, default: 'default' }, // Background
padded_size: { type: String, default: '' }, // none | sm | md | lg
contentSize: { type: String, default: 'default'}, // narrow/default/wide
content: { type: Boolean, default: true }, // contenu contraint ou full

2
app/components/test.vue
View File

@@ -8,6 +8,6 @@
</script>
<style>
<style lang="scss">
</style>

2
app/components/testcomponentpage.vue
View File

@@ -10,6 +10,6 @@
</script>
<style>
<style lang="scss">
</style>