generated from gitea_admin/default
academie
This commit is contained in:
128
app/components/RessourcesCard.vue
Normal file
128
app/components/RessourcesCard.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<article class="ressources-card bg-surface-container-lowest border border-outline-variant/10 rounded-xl overflow-hidden shadow-sm transition-shadow hover:shadow-xl">
|
||||
<div class="ressources-card__media bg-surface-container-low">
|
||||
<img
|
||||
v-if="imgSrc"
|
||||
:src="imgSrc"
|
||||
:alt="imgAlt || title"
|
||||
class="h-full w-full object-cover"
|
||||
>
|
||||
<div
|
||||
v-else
|
||||
class="flex h-full w-full items-center justify-center bg-surface-container-low text-outline"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<span class="material-symbols-outlined text-5xl">image</span>
|
||||
</div>
|
||||
|
||||
<span
|
||||
v-if="badge"
|
||||
class="absolute left-3 top-3 rounded-md bg-surface px-2.5 py-1 text-xs font-extrabold uppercase text-error shadow-sm"
|
||||
>
|
||||
{{ badge }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="grid gap-6 p-6">
|
||||
<div class="grid gap-3">
|
||||
<h3 class="text-xl font-extrabold leading-tight tracking-tight text-primary">
|
||||
{{ title }}
|
||||
</h3>
|
||||
<p
|
||||
v-if="description"
|
||||
class="text-sm leading-7 text-on-surface-variant"
|
||||
>
|
||||
{{ description }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a
|
||||
v-if="fileUrl"
|
||||
:href="fileUrl"
|
||||
:download="downloadName"
|
||||
class="group flex items-center justify-between gap-4 rounded-lg border border-outline-variant/30 bg-surface-container-low px-4 py-3 text-on-surface transition-colors hover:bg-primary-container"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<span class="min-w-0">
|
||||
<span class="block truncate text-sm font-bold text-primary group-hover:text-on-primary-container">
|
||||
{{ fileLabel }}
|
||||
</span>
|
||||
<span
|
||||
v-if="fileSize"
|
||||
class="block text-xs text-on-surface-variant group-hover:text-on-primary-container/80"
|
||||
>
|
||||
{{ fileSize }}
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-primary-container text-primary transition-colors group-hover:bg-primary group-hover:text-on-primary">
|
||||
<span class="material-symbols-outlined text-xl">download</span>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="flex items-center justify-between gap-4 rounded-lg border border-outline-variant/30 bg-surface-container-low px-4 py-3 text-on-surface opacity-70"
|
||||
>
|
||||
<span>
|
||||
<span class="block text-sm font-bold text-primary">{{ fileLabel }}</span>
|
||||
<span
|
||||
v-if="fileSize"
|
||||
class="block text-xs text-on-surface-variant"
|
||||
>
|
||||
{{ fileSize }}
|
||||
</span>
|
||||
</span>
|
||||
<span class="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-surface-container text-outline">
|
||||
<span class="material-symbols-outlined text-xl">download</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const props = withDefaults(defineProps<{
|
||||
title: string
|
||||
description?: string
|
||||
imgSrc?: string
|
||||
imgAlt?: string
|
||||
badge?: string
|
||||
fileLabel?: string
|
||||
fileSize?: string
|
||||
fileUrl?: string
|
||||
fileName?: string
|
||||
}>(), {
|
||||
description: '',
|
||||
imgSrc: '',
|
||||
imgAlt: '',
|
||||
badge: 'PDF',
|
||||
fileLabel: 'Fiche pédagogique (PDF)',
|
||||
fileSize: '',
|
||||
fileUrl: '',
|
||||
fileName: '',
|
||||
})
|
||||
|
||||
const downloadName = computed(() => props.fileName || true)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ressources-card {
|
||||
max-width: 392px;
|
||||
font-family: 'Inter', sans-serif;
|
||||
}
|
||||
|
||||
.ressources-card__media {
|
||||
position: relative;
|
||||
aspect-ratio: 392 / 200;
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings:
|
||||
'FILL' 0,
|
||||
'wght' 400,
|
||||
'GRAD' 0,
|
||||
'opsz' 24;
|
||||
}
|
||||
</style>
|
||||
@@ -603,7 +603,7 @@
|
||||
const diplomaTypeOptions = ["fin de cycle 2", "DEM", "CEM", "Autre"]
|
||||
const emergencyRelationOptions = ["Parent", "Frère - sœur", "Conjoint.e", "Ami", "Autre"]
|
||||
//const regulationFileUrl = "/contenus/reglement-academie-orchestre.pdf"
|
||||
const regulationFileUrl = "https://media.orchestre-ile.com/uploads/25_26_ONDIF_reglement_academie_57934f522a.pdf"
|
||||
const regulationFileUrl = "https://media.orchestre-ile.com/uploads/ondif_reglement_academie_2027_3d088ffcb2.pdf"
|
||||
|
||||
function createDiploma() {
|
||||
return {
|
||||
|
||||
@@ -256,7 +256,8 @@
|
||||
<option value="eac_4">4</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<!-- CONCERT COMMENTÉ POUR LE MOMENT ON NE LE PROPOSE PAS -->
|
||||
<!-- <div class="space-y-2">
|
||||
<label for="quote-type_commente" class="block text-sm font-medium text-on-surface pl-[2px]">
|
||||
Concert commenté
|
||||
</label>
|
||||
@@ -272,7 +273,7 @@
|
||||
<option value="concert_commente_3">3</option>
|
||||
<option value="concert_commente_4">4</option>
|
||||
</select>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
@@ -110,7 +110,7 @@
|
||||
|
||||
<PageSection tone="" content-size="default" padded_size="md" class="contact_spe_wp">
|
||||
<ContactSpecifique
|
||||
titre="Renseignements Académie d'Orchestre 2026"
|
||||
titre="Renseignements Académie d'Orchestre"
|
||||
nom="Zoë Crampon"
|
||||
poste="Service action culturelle"
|
||||
numero="06 82 73 65 01"
|
||||
|
||||
@@ -114,6 +114,56 @@
|
||||
</template>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- RESSOURCES PEDAGOGIQUES -->
|
||||
<section>
|
||||
<PageSection :content="false">
|
||||
<Decalage
|
||||
tone="brand"
|
||||
title-tone="invert"
|
||||
position="left"
|
||||
button-tone="invert"
|
||||
:ensavoirplus-target="ressourcesSectionId"
|
||||
ensavoirplus-group="ressources"
|
||||
>
|
||||
<template #title>
|
||||
TITRE
|
||||
</template>
|
||||
<DsText as="p" tone="invert" align="justify">
|
||||
texte
|
||||
</DsText>
|
||||
</Decalage>
|
||||
</PageSection>
|
||||
<PageSection
|
||||
:id="ressourcesSectionId"
|
||||
data-ensavoirplus-group="ressources"
|
||||
tone=""
|
||||
content-size="default"
|
||||
padded_size="md"
|
||||
class="decalage_ensavoirplus--hidden"
|
||||
>
|
||||
<section class="ressources-pedagogiques__list">
|
||||
<RessourcesCard
|
||||
v-for="ressource in ressourcesPedagogiques"
|
||||
:key="ressource.id"
|
||||
:title="ressource.title"
|
||||
:description="ressource.description"
|
||||
:img-src="ressource.imgSrc"
|
||||
:img-alt="ressource.imgAlt"
|
||||
:badge="ressource.badge"
|
||||
:file-label="ressource.fileLabel"
|
||||
:file-size="ressource.fileSize"
|
||||
:file-url="ressource.fileUrl"
|
||||
:file-name="ressource.fileName"
|
||||
/>
|
||||
</section>
|
||||
</PageSection>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<!-- ================== -->
|
||||
<!-- CONTACT -->
|
||||
<!-- ================== -->
|
||||
@@ -130,7 +180,16 @@ et de la programmation jeune public"
|
||||
/>
|
||||
</PageSection>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -167,6 +226,21 @@ et de la programmation jeune public"
|
||||
// PRÉPARATION DES DONNÉES POUR AFFICHAGE DANS LA PAGE
|
||||
// ======================================
|
||||
const scolaire_donnees_servies = computed(() => scolaires.value?.[0] || {})
|
||||
const ressourcesSectionId = "texte_cache_ressources"
|
||||
const ressourcesPedagogiques = [
|
||||
{
|
||||
id: "decouverte-orchestre-symphonique",
|
||||
title: "Découverte de l'orchestre symphonique",
|
||||
description: "Un guide complet pour initier les élèves aux instruments de l'orchestre et à leurs familles. Ce document présente les pupitres, leur rôle et propose des activités d'écoute adaptées au cycle 3.",
|
||||
imgSrc: "/img/photos/orchestre.jpg",
|
||||
imgAlt: "Musiciens de l'orchestre en répétition",
|
||||
badge: "PDF",
|
||||
fileLabel: "Fiche pédagogique (PDF)",
|
||||
fileSize: "2.4 Mo",
|
||||
fileUrl: "",
|
||||
fileName: "",
|
||||
},
|
||||
]
|
||||
|
||||
const scolairesChiffres = computed(() =>
|
||||
(scolaires.value?.[0]?.chiffres_scolaires?.[0]?.chiffres || []).map((item) => ({
|
||||
@@ -253,6 +327,12 @@ et de la programmation jeune public"
|
||||
margin-top: 50px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.ressources-pedagogiques__list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 392px));
|
||||
gap: 24px;
|
||||
justify-content: center;
|
||||
}
|
||||
.strapi-blocks {
|
||||
h2 {
|
||||
color: var(--c-bleu);
|
||||
|
||||
Reference in New Issue
Block a user