various fixes

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/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/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/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
   }
 })