finalize responsiveness for school page

assets/style/main.scss

@@ -21,6 +21,10 @@ body {
   width: 90%;
   margin-right: auto;
   margin-left: auto;
+
+  @media (max-width: 600px) {
+    width: 96%;
+  }
 }
 .v-row.center-90 {
   margin: -12px auto;

components/Common/Table/Comparatif.vue

@@ -95,7 +95,7 @@
           v-model="carouselPos"
           :hide-delimiters="true"
           :show-arrows="false"
-          :height="800"
+          :height="height"
         >
           <v-carousel-item>
             <h4>Standard</h4>
@@ -210,6 +210,7 @@ const props = defineProps({
   }
 });
 
+const height = computed(() => 150 + props.items.length * 48)
 
 const carouselPos = ref(0)
 

components/Layout/Footer/Solutions.vue

@@ -17,13 +17,13 @@
         v-if="showArtist"
         class="row-artist"
       >
-        <v-col cols="2">
+        <v-col cols="6" md="2">
           <NuxtLink to="/opentalent_artist">
             <v-img src="/images/logo/logiciels/Artist-noir.png" class="logo" />
           </NuxtLink>
         </v-col>
 
-        <v-col cols="10">
+        <v-col cols="6" md="10">
           <!-- list v-chip-->
           <v-chip-group column disabled>
             <v-chip class="ma-2 chip-custom" label>
@@ -49,13 +49,13 @@
         v-if="showManager"
         class="row-manager"
       >
-        <v-col cols="2">
+        <v-col cols="6" md="2">
           <NuxtLink to="/opentalent_manager">
           <v-img src="/images/logo/logiciels/Manager-noir.png" class="logo" />
         </NuxtLink>
         </v-col>
 
-        <v-col cols="10">
+        <v-col cols="6" md="10">
           <!-- list v-chip-->
           <v-chip-group column disabled>
             <v-chip class="ma-2 chip-custom" color="primary" label>
@@ -138,6 +138,11 @@ const props = defineProps({
 <style scoped lang="scss">
 .chip-detail {
   color: var(--on-neutral-color);
+
+  @media (max-width: 600px) {
+    width: 100%;
+    text-align: center;
+  }
 }
 
 .chip-custom {
@@ -147,12 +152,23 @@ const props = defineProps({
   border-radius: 3rem;
   text-transform: uppercase;
   font-weight: 500;
-  font-size: 10px;
   line-height: 16px;
   display: flex;
   align-items: center;
   text-align: center;
   letter-spacing: 0.2em;
+
+  @media (max-width: 600px) {
+    font-size: 10px !important;
+    width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+
+    :deep(.v-chip__content) {
+      width: 100%;
+    }
+  }
 }
 
 .row-artist,

components/Layout/UI/Title.vue

@@ -17,5 +17,12 @@
     font-size: 3rem;
     line-height: 3rem;
     margin-left: 1rem;
+
+    @media (max-width: 600px) {
+      font-size: 2rem;
+      line-height: 2rem;
+      margin-left: 12px;
+      width: 100%;
+    }
   }
 </style>

components/Logiciels/School/Contact.vue

@@ -3,15 +3,19 @@
     <LayoutContainer>
       <!-- Section "Appelez nous" -->
       <v-row>
-        <v-col cols="6">
+        <LayoutUISubTitle v-if="smAndDown">
+          Contactez-nous
+        </LayoutUISubTitle>
+
+        <v-col cols="12" md="6">
           <v-img
             src="/images/contact/contact.jpg"
             class="help-img"
           />
         </v-col>
 
-        <v-col cols="5">
-          <LayoutUISubTitle>
+        <v-col cols="12" lg="5">
+          <LayoutUISubTitle v-if="mdAndUp">
             Contactez-nous
           </LayoutUISubTitle>
 
@@ -39,7 +43,7 @@
 
       <!-- Section "Adhérent CMF" -->
       <v-row class="center-90" >
-        <v-col cols="6" >
+        <v-col cols="12" lg="6" >
           <LayoutUISubTitle>
             Adhérents CMF
           </LayoutUISubTitle>
@@ -71,12 +75,12 @@
               target="_blank"
               class="btn-contact"
             >
-              Je souhaite obtenir mon code d'accès
+              Obtenir mon code d'accès
             </v-btn>
           </div>
         </v-col>
 
-        <v-col cols="6">
+        <v-col cols="12" md="6">
            <v-img
              src="/images/logiciels/school/CMF-vivre_la_musique_ensemble.jpg"
              class="logo-cmf mt-12"
@@ -88,6 +92,10 @@
 </template>
 <script setup>
 import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
+import { useDisplay } from "vuetify";
+
+const { smAndDown, mdAndUp } = useDisplay()
+
 </script>
 
 <style scoped>
@@ -103,6 +111,10 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
   background-size: contain;
   width: 80%;
   height: 100%;
+
+  @media (max-width: 600px) {
+    margin: 0 auto !important;
+  }
 }
 
 .btn-contact {
@@ -113,13 +125,14 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
   color: var(--on-secondary-color);
   padding: 19px 28px;
   gap: 9px;
+  max-width: 90%;
 }
 
 .subtitle {
   font-weight: 400;
   font-size: 34px;
   line-height: 38px;
-  color: var(--primary-color);
+  color: var(--on-neutral-color);
   margin-bottom: 2rem;
 }
 
@@ -127,13 +140,19 @@ import AnchoredSection from "~/components/Layout/AnchoredSection.vue";
   font-weight: 300;
   font-size: 16px;
   line-height: 20px;
-  color: var(--primary-color);
+  color: var(--on-neutral-color);
   text-align: justify;
 }
 
-@media (max-width: 1600px) {
+@media (max-width: 1600px) and (min-width: 600px) {
   .contact-details {
     width: 30rem !important;
   }
 }
+
+@media (max-width: 600px) {
+  .contact-details {
+    width: 90%;
+  }
+}
 </style>

components/Logiciels/School/Formations.vue

@@ -10,7 +10,8 @@
 
         <v-row class="formation pb-6 align-center">
           <v-col
-            cols="6"
+            cols="12"
+            md="6"
             v-for="(formation, index) in formations"
             :key="index"
           >
@@ -131,5 +132,19 @@ const formations: Array<Formation> = [
     line-height: 1.5rem;
     color: var(--on-primary-color);
   }
+
+  @media (max-width: 600px) {
+    .v-btn {
+      height: 96px;
+    }
+
+    :deep(.v-btn__content) {
+      white-space: pre-wrap;
+      line-height: 1.2em;
+      padding: auto;
+      text-align: center;
+    }
+  }
+
 }
 </style>

components/Logiciels/School/SomeNumbers.vue

@@ -17,7 +17,7 @@
     <v-container>
       <v-row class="mb-12 card-container custom-row">
         <v-col
-          cols="3"
+          lg="3"
           class="d-flex justify-center align-center small-padding"
         >
           <CommonCardStat
@@ -26,7 +26,7 @@
           />
         </v-col>
         <v-col
-          cols="3"
+          lg="3"
           class="d-flex justify-center align-center"
         >
           <CommonCardStat
@@ -35,7 +35,7 @@
           />
         </v-col>
         <v-col
-          cols="3"
+          lg="3"
           class="d-flex justify-center align-center"
         >
           <CommonCardStat
@@ -44,7 +44,7 @@
           />
         </v-col>
         <v-col
-          cols="3"
+          lg="3"
           class="d-flex justify-center align-center"
         >
           <CommonCardStat

pages/opentalent_manager.vue

@@ -18,7 +18,7 @@
       logoSrc="/images/logo/logiciels/Manager-noir.png"
     />
 
-    <CommonMenuScroll :menus="menus" class="mb-6" />
+    <CommonMenuScroll v-if="lgAndUp" :menus="menus" class="mb-6" />
 
     <CommonActionMenu :actions="stickyMenuActions" />
 
@@ -47,7 +47,7 @@ import type { MenuScroll, ActionMenuItem } from "~/types/interface";
 import { ActionMenuItemType } from "~/types/enum/layout";
 import { useDisplay } from "vuetify";
 
-const { mdAndUp } = useDisplay()
+const { mdAndUp, lgAndUp } = useDisplay()
 
 const menus: Array<MenuScroll> = ref([
   { anchor: "presentation", label: "Présentation" },

pages/opentalent_school.vue

@@ -19,7 +19,7 @@
       :logo-alt-theme="true"
     />
 
-    <CommonMenuScroll :menus="menus" class="mb-6" />
+    <CommonMenuScroll v-if="lgAndUp" :menus="menus" class="mb-6" />
 
     <CommonActionMenu :actions="stickyMenuActions" />
 
@@ -50,7 +50,7 @@ import type { MenuScroll, ActionMenuItem } from "~/types/interface";
 import { ActionMenuItemType } from "~/types/enum/layout";
 import { useDisplay } from "vuetify";
 
-const { mdAndUp } = useDisplay()
+const { mdAndUp, lgAndUp } = useDisplay()
 
 const menus: Array<MenuScroll> = [
   { anchor: "presentation", label: "Présentation" },