Merge branch 'release/0.3.1' into develop

app.vue

@@ -9,4 +9,9 @@
 </template>
 
 <script setup lang="ts">
+
+const layoutStore = useLayoutStore()
+
+layoutStore.resetAnchoredSections()
+
 </script>

components/Common/Banner.vue

@@ -113,7 +113,7 @@ const props = defineProps({
 
 .details-square {
   position: absolute;
-  bottom: 0.4rem;
+  bottom: 0;
   right: 0;
   width: 13rem;
   height: 10rem;
@@ -125,7 +125,7 @@ const props = defineProps({
   bottom: 0;
   right: 13rem;
   width: 13rem;
-  height: 10.4rem;
+  height: 10rem;
 
   img {
     width: 100%;

components/Common/Card/Benefit.vue

@@ -63,7 +63,7 @@ hr {
     font-weight: 300;
     font-size: 1.5rem;
     line-height: 1rem;
-    color: var(--primary-color);
+    color: var(--on-primary-color);
   }
 
   .number {
@@ -82,7 +82,7 @@ hr {
   p {
     font-weight: normal;
     font-size: 1rem;
-    color: var(--primary-color);
+    color: var(--on-primary-color);
     margin-top: 1rem;
     height: 5rem;
   }
@@ -90,7 +90,7 @@ hr {
   ul {
     font-weight: normal;
     font-size: 0.8rem;
-    color: var(--primary-color);
+    color: var(--on-primary-color);
     margin-top: 1rem;
     margin-bottom: 1rem;
   }

components/Common/MenuScroll.vue

@@ -90,7 +90,7 @@ const handleScroll = () => {
 
   a {
     text-decoration: none;
-    color: var(--on-primary-color);
+    color: var(--on-neutral-color);
   }
 
   a:hover {

components/Common/Meta.vue

@@ -1,6 +1,8 @@
 <!--
 Définit les balises meta de la page
 -->
+<template></template>
+
 <script setup lang="ts">
   const props = defineProps({
     title: {

components/Common/ReviewSection.vue

@@ -38,20 +38,20 @@
                     <v-card-text>
                       {{ card.review }}
                     </v-card-text>
-
-                    <footer>
-                      <v-card-actions>
-                        {{ card.name }}
-                      </v-card-actions>
-
-                      <p class="reviewer-status">
-                        {{ card.status }}
-                      </p>
-                      <p class="reviewer-structure">
-                        {{ card.structure }}
-                      </p>
-                    </footer>
                   </v-card-item>
+
+                  <v-card-actions>
+                    <p class="reviewer-name">
+                      {{ card.name }}
+                    </p>
+
+                    <p class="reviewer-status">
+                      {{ card.status }}
+                    </p>
+                    <p class="reviewer-structure">
+                      {{ card.structure }}
+                    </p>
+                  </v-card-actions>
                 </v-card>
               </v-container>
             </Slide>
@@ -129,16 +129,19 @@ const goNext = () => {
 }
 
 .carousel {
-  .v-card-item {
+  .v-card {
     display: flex;
     flex-direction: column;
-    justify-content: space-between;
-    height: 100%;
+    padding: 0 0.5rem;
+    border-radius: 1rem;
+    min-height: 300px;
+    max-height: 300px;
+    margin-top: 2rem;
+    margin-bottom: 0.6rem;
   }
 
-  :deep(.v-card-item__content) {
-    display: flex;
-    flex-direction: column;
+  .v-card-item {
+    flex: 1
   }
 
   .v-card-text {
@@ -149,15 +152,14 @@ const goNext = () => {
     flex: 1;
   }
 
-  footer {
-    min-height: 100px;
+  .v-card-actions {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
   }
 
-  .v-card-actions {
+  .reviewer-name {
     font-weight: 500;
     font-size: 20px;
     line-height: 24px;
@@ -198,15 +200,6 @@ const goNext = () => {
   border-radius: 1rem;
 }
 
-.v-card {
-  padding: 0 0.5rem;
-  border-radius: 1rem;
-  min-height: 300px;
-  max-height: 300px;
-  margin-top: 2rem;
-  margin-bottom: 0.6rem;
-}
-
 @media (min-width:2100px) {
   .v-card {
     min-height: 360px !important;

components/Home/Caroussel.vue

@@ -24,9 +24,7 @@ Carrousel de la page d'accueil
             class="logo"
           />
 
-          <p class="description">
-            {{ item.description }}
-          </p>
+          <p class="description" v-html="item.description" />
 
           <v-row class="align-start pl-4">
             <v-btn

components/Home/EventAgenda.vue

@@ -14,15 +14,25 @@ Section "Agenda" de la page d'accueil
       <v-row justify="center">
         <div class="btn-container">
           <v-col cols="12" md="6">
-            <v-btn append-icon="fas fa-arrow-right" class="btn-event">
-              Découvrir l'agenda
-            </v-btn>
+            <AgendaLink href="/">
+              <v-btn
+                append-icon="fas fa-arrow-right"
+                class="btn-event"
+              >
+                Découvrir l'agenda
+              </v-btn>
+            </AgendaLink>
           </v-col>
 
           <v-col cols="12" md="6">
-            <v-btn append-icon="fas fa-arrow-right" class="btn-event">
-              Découvrir l’ANNUAIRE
-            </v-btn>
+            <AgendaLink href="/annuaire">
+              <v-btn
+                append-icon="fas fa-arrow-right"
+                class="btn-event"
+              >
+                Découvrir l’annuaire
+              </v-btn>
+            </AgendaLink>
           </v-col>
         </div>
       </v-row>
@@ -32,6 +42,7 @@ Section "Agenda" de la page d'accueil
 
 <script setup>
 import { useDisplay } from "vuetify";
+import AgendaLink from "~/components/Common/AgendaLink.vue";
 const { mdAndDown } = useDisplay();
 </script>
 

components/Layout/AnchoredSection.vue

@@ -31,20 +31,17 @@
   const top: Ref<number | null> = ref(null)
   const bottom: Ref<number | null> = ref(null)
 
-  onMounted(() => {
+  const onScroll = (scroll: any) => {
     top.value = section.value!.offsetTop
     bottom.value = section.value!.offsetTop + section.value!.offsetHeight
-  })
 
-  const onScroll = (e: any) => {
     if (top.value === null || bottom.value === null) {
       return
     }
 
-    const screenVerticalCenter = document.documentElement.scrollTop + window.innerHeight / 2
+    const screenVerticalCenter = scroll.target.documentElement.scrollTop + window.innerHeight / 2
 
     const active = screenVerticalCenter > top.value && screenVerticalCenter < bottom.value
-
     if (active !== layoutStore.isAnchoredSectionOnScreen[props.id]) {
         layoutStore.setIsAnchoredSectionOnScreen(
           props.id,

components/Layout/Footer/Footer.vue

@@ -12,100 +12,104 @@
           </v-col>
 
           <!-- Deuxième section : liens agenda culturel (écrans larges seulement) -->
-          <v-col v-if="mdAndUp" cols="2" >
+          <v-col v-if="mdAndUp" cols="7" >
             <v-row>
-              <h5>
-                Agenda culturel
-              </h5>
-            </v-row>
-            <v-row>
-              <AgendaLink href="/annuaire">
-                Annuaire
-              </AgendaLink>
-            </v-row>
-            <v-row>
-              <AgendaLink href="/actualites">
-                Actualités
-              </AgendaLink>
-            </v-row>
-            <v-row>
-              <AgendaLink href="/annonces">
-                Annonces
-              </AgendaLink>
-            </v-row>
-          </v-col>
+              <v-col cols="3">
+                <v-row>
+                  <h5>
+                    Agenda culturel
+                  </h5>
+                </v-row>
+                <v-row>
+                  <AgendaLink href="/annuaire">
+                    Annuaire
+                  </AgendaLink>
+                </v-row>
+                <v-row>
+                  <AgendaLink href="/actualites">
+                    Actualités
+                  </AgendaLink>
+                </v-row>
+                <v-row>
+                  <AgendaLink href="/annonces">
+                    Annonces
+                  </AgendaLink>
+                </v-row>
+              </v-col>
 
-          <!-- Troisième section : liens logiciels culturels (écrans larges seulement) -->
-          <v-col v-if="mdAndUp" cols="2">
-            <v-row>
-              <h5>
-                Logiciels culturels
-              </h5>
-            </v-row>
-            <v-row>
-              <nuxt-link to="/opentalent_artist">
-                Opentalent Artist
-              </nuxt-link>
-            </v-row>
-            <v-row>
-              <nuxt-link to="/opentalent_school">
-                Opentalent School
-              </nuxt-link
-              >
-            </v-row>
-            <v-row>
-              <nuxt-link to="/opentalent_manager">
-                Opentalent Manager
-              </nuxt-link>
-            </v-row>
-          </v-col>
+              <!-- Troisième section : liens logiciels culturels (écrans larges seulement) -->
+              <v-col cols="3">
+                <v-row>
+                  <h5>
+                    Logiciels culturels
+                  </h5>
+                </v-row>
+                <v-row>
+                  <nuxt-link to="/opentalent_artist">
+                    Opentalent Artist
+                  </nuxt-link>
+                </v-row>
+                <v-row>
+                  <nuxt-link to="/opentalent_school">
+                    Opentalent School
+                  </nuxt-link
+                  >
+                </v-row>
+                <v-row>
+                  <nuxt-link to="/opentalent_manager">
+                    Opentalent Manager
+                  </nuxt-link>
+                </v-row>
+              </v-col>
 
-          <!-- Quatrième section : A propos (écrans larges seulement) -->
-          <v-col v-if="mdAndUp" cols="2">
-            <v-row>
-              <h5>
-                A PROPOS
-              </h5>
-            </v-row>
-            <v-row>
-              <nuxt-link to="/qui-sommes-nous">
-                Qui sommes-nous
-              </nuxt-link>
-            </v-row>
-            <v-row>
-              <nuxt-link to="/nous-rejoindre">
-                Nous rejoindre
-              </nuxt-link
-              >
-            </v-row>
-            <v-row>
-              <nuxt-link to="/nous-contacter">
-                Nous contacter
-              </nuxt-link>
-            </v-row>
-          </v-col>
+              <!-- Quatrième section : A propos (écrans larges seulement) -->
+              <v-col cols="3">
+                <v-row>
+                  <h5>
+                    A PROPOS
+                  </h5>
+                </v-row>
+                <v-row>
+                  <nuxt-link to="/qui-sommes-nous">
+                    Qui sommes-nous
+                  </nuxt-link>
+                </v-row>
+                <v-row>
+                  <nuxt-link to="/nous-rejoindre">
+                    Nous rejoindre
+                  </nuxt-link
+                  >
+                </v-row>
+                <v-row>
+                  <nuxt-link to="/nous-contacter">
+                    Nous contacter
+                  </nuxt-link>
+                </v-row>
+              </v-col>
 
-          <!-- Cinquième section : liens espace client (écrans larges seulement) -->
-          <v-col v-if="mdAndUp" cols="2">
-            <v-row>
-              <h5>
-                Espace client
-              </h5>
-            </v-row>
-            <v-row>
-              <nuxt-link href="https://ressources.opentalent.fr/display/FAQ/Accueil" target="_blank">
-                Foire Aux Questions
-              </nuxt-link>
-            </v-row>
-            <v-row>
-              <nuxt-link href="https://ressources.opentalent.fr/" target="_blank">
-                Support en ligne
-              </nuxt-link>
-            </v-row>
-            <v-row>
-              <nuxt-link to="/nous-contacter" target="_blank" >
-                Nous contacter
-              </nuxt-link>
+              <!-- Cinquième section : liens espace client (écrans larges seulement) -->
+              <v-col cols="3">
+                <v-row>
+                  <h5>
+                    Espace client
+                  </h5>
+                </v-row>
+                <v-row>
+                  <nuxt-link href="https://ressources.opentalent.fr/display/FAQ/Accueil" target="_blank">
+                    Foire Aux Questions
+                  </nuxt-link>
+                </v-row>
+                <v-row>
+                  <nuxt-link href="https://ressources.opentalent.fr/" target="_blank">
+                    Support en ligne
+                  </nuxt-link>
+                </v-row>
+                <v-row>
+                  <nuxt-link to="/nous-contacter" target="_blank" >
+                    Nous contacter
+                  </nuxt-link>
+                </v-row>
+              </v-col>
             </v-row>
           </v-col>
 

components/Layout/Footer/Solutions.vue

@@ -25,7 +25,7 @@
 
         <v-col cols="10">
           <!-- list v-chip-->
-          <v-chip-group active-class="primary--text" column>
+          <v-chip-group column disabled>
             <v-chip class="ma-2 chip-custom" label>
               <span class="chip-detail">Orchestres</span>
             </v-chip>
@@ -57,7 +57,7 @@
 
         <v-col cols="10">
           <!-- list v-chip-->
-          <v-chip-group active-class="primary--text" column>
+          <v-chip-group column disabled>
             <v-chip class="ma-2 chip-custom" color="primary" label>
               <span class="chip-detail">Fédérations</span>
             </v-chip>
@@ -86,7 +86,7 @@
 
         <v-col cols="10">
           <!-- list v-chip-->
-          <v-chip-group active-class="primary--text" column>
+          <v-chip-group column disabled>
             <v-chip class="ma-2 chip-custom" label>
               <span class="chip-detail">Conservatoire</span>
             </v-chip>
@@ -141,6 +141,7 @@ const props = defineProps({
 }
 
 .chip-custom {
+  opacity: 1;
   color: var(--on-primary-color);
   border: 1px solid var(--primary-color);
   border-radius: 3rem;

components/Layout/Navigation.vue

@@ -19,7 +19,7 @@ Menu Navigation
         <v-menu
           v-for="item in menu"
           :key="item.label"
-          open-on-hover
+          :open-on-hover="true"
         >
           <template v-slot:activator="{ props }">
             <nuxt-link

components/Logiciels/Artist/Abonnement.vue

@@ -69,7 +69,12 @@
           </p>
 
           <div class="border-row">
-            <v-img src="/images/logiciels/school/cmf_logo_orange.png" class="logo-cmf" />
+            <nuxt-link href="https://www.cmf-musique.org/" target="_blank">
+              <v-img
+                src="/images/logiciels/school/cmf_logo_orange.png"
+                class="logo-cmf"
+              />
+            </nuxt-link>
 
             <div class="cmf-container">
               <p>
@@ -160,7 +165,7 @@ h3 {
   margin-bottom: 4rem;
 
   p {
-    color: var(--primary-color);
+    color: var(--on-primary-color);
     width: 25rem;
     font-weight: 300;
     font-size: 16px;

components/Logiciels/Manager/SomeNumbers.vue

@@ -38,10 +38,12 @@
           La plus grande Confédération Musicale de France nous fait confiance
         </span>
 
-        <v-img
-          src="/images/logiciels/manager/cmf.jpg"
-          class="cmf-img mb-6"
-        />
+        <nuxt-link href="https://www.cmf-musique.org/" target="_blank">
+          <v-img
+            src="/images/logiciels/manager/cmf.jpg"
+            class="cmf-img mb-6"
+          />
+        </nuxt-link>
       </v-col>
     </v-row>
   </LayoutContainer>

components/Webinaire/Catalogue.vue

@@ -105,11 +105,12 @@
     </div>
 
     <!-- Modale d'inscription -->
-    <div
-      v-if="selectedWebinar"
+    <v-dialog
+      v-model="modalShowing"
+      max-width="800"
       class="calendar-modal"
     >
-      <div class="alt-theme">
+      <div class="alt-theme d-flex flex-column align-center">
         <LayoutUISubTitle>
           Inscrivez vous
         </LayoutUISubTitle>
@@ -135,7 +136,7 @@
           </v-col>
         </v-row>
       </div>
-    </div>
+    </v-dialog>
   </LayoutContainer>
 </template>
 
@@ -269,6 +270,8 @@ const showModal = (webinaireTitle: string) => {
   selectedWebinar.value = webinaireTitle.trim();
 };
 
+const modalShowing = computed(() => selectedWebinar.value)
+
 const closeModal = () => {
   selectedWebinar.value = null;
 };
@@ -390,20 +393,6 @@ const closeModal = () => {
 }
 
 .calendar-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(14, 45, 50, 0.8);
-  z-index: 9999;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  > div {
-    padding: 4rem;
-  }
 
   h4 {
     font-weight: 600;

pages/opentalent_manager.vue

@@ -5,12 +5,6 @@
   />
 
   <div class="theme-manager">
-    <CommonBannerTitle
-      leftText="School"
-      title="Opentalent Manager"
-      rightText="Artist"
-    />
-
     <LogicielsTitle>
       <template #left-text>School</template>
       Opentalent Manager

pages/qui-sommes-nous.vue

@@ -27,7 +27,9 @@
 
   <AboutLogiciels />
 
-  <HomeEventAgenda class="mb-6"/>
+  <AnchoredSection id="agenda" class="mb-6">
+    <HomeEventAgenda/>
+  </AnchoredSection>
 
   <AboutChronologie v-if="lgAndUp"/>
 
@@ -41,6 +43,7 @@
 <script setup lang="ts">
 import type { MenuScroll } from "~/types/interface";
 import { useDisplay } from "vuetify";
+import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
 
 const { lgAndUp } = useDisplay()
 
@@ -55,5 +58,9 @@ const menus: Array<MenuScroll> = [
 ];
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+:deep(.active) {
+  background-color: var(--primary-color);
+  color: var(--on-primary-color);
+}
 </style>

stores/layoutStore.ts

@@ -14,6 +14,10 @@ export const useLayoutStore = defineStore('layout', () => {
     isFooterVisible.value = value
   }
 
+  const resetAnchoredSections = () =>{
+    isAnchoredSectionOnScreen.value = {}
+  }
+
   const isAnchoredSectionOnScreen: Ref<Record<string, boolean>> = ref({})
 
   const setIsAnchoredSectionOnScreen = (sectionId: string, value: boolean) => {
@@ -26,6 +30,7 @@ export const useLayoutStore = defineStore('layout', () => {
     isFooterVisible,
     setIsFooterVisible,
     isAnchoredSectionOnScreen,
+    resetAnchoredSections,
     setIsAnchoredSectionOnScreen
   }
 })