Fix/carousel

components/Carousel.vue

@@ -1,6 +1,6 @@
 <template>
-  <ClientOnly> 
-     <Carousel :settings="carrousel_settings"> 
+  <ClientOnly>
+    <Carousel :settings="carrousel_settings">
       <Slide
         v-for="(item, index) in props.items"
         :key="index"
@@ -9,48 +9,48 @@
         <a :href="item.url" target="_blank">
           <img :src="item.logo" class="carousel__item" />
         </a>
-      </Slide> 
+      </Slide>
       <template #addons>
-        <Navigation />  
-        <Pagination /> 
-     </template> 
-    </Carousel> 
+        <Navigation />
+        <Pagination />
+      </template>
+    </Carousel>
   </ClientOnly>
 </template>
 
-<script setup> 
+<script setup>
   import "vue3-carousel/dist/carousel.css"
   import { Carousel, Slide, Navigation, Pagination } from "vue3-carousel"
   import { useDisplay } from "vuetify"
 
   const props = defineProps({
-   items: { type: Array, required: true },
+    items: { type: Array, required: true },
   })
 
-   const { name } = toRefs(useDisplay())
-   const nb_items_to_display = ref(3)
-watch(
+  const { name } = toRefs(useDisplay())
+  const nb_items_to_display = ref(3)
+  watch(
     name,
     (value) => {
-       switch (value) {
-         case "xs": {
-           nb_items_to_display.value = 1
+      switch (value) {
+        case "xs": {
+          nb_items_to_display.value = 1
           break
-       }
+        }
         case "sm": {
           nb_items_to_display.value = 2
           break
         }
         default: {
-         nb_items_to_display.value = 3
+          nb_items_to_display.value = 3
           break
         }
       }
     },
     {
       immediate: true,
     },
-   )  
+  )
 
   const carrousel_settings = reactive({
     autoplay: 2000,
@@ -59,7 +59,7 @@ watch(
     pauseAutoplayOnHover: true,
     transition: 1000,
     wrapAround: true,
-})
+  })
 
   onMounted(() => {
     console.log(carrousel_settings)
@@ -77,17 +77,18 @@ watch(
     display: flex;
     justify-content: center;
     align-items: center;
-  } 
-  .carousel__slide { 
+  }
+
+  .carousel__slide {
     display: flex;
     padding: 15px;
     align-items: center;
     justify-content: center;
-  } 
+  }
 
-  .carousel__prev, 
+  .carousel__prev,
   .carousel__next {
     box-sizing: content-box;
-    border: 5px solid red; 
-  } 
-</style> 
+    border: 5px solid red;
+  }
+</style>

components/Loading.vue

@@ -17,97 +17,70 @@
             mdi-emoticon-excited-outline
           </v-icon>
           <br />
-          <Carousel :items="users_list"/>
+          <Carousel :items="users_list" />
         </v-card-text>
       </v-card>
     </v-col>
   </v-row>
 </template>
 
-
 <script setup>
-  import { useDisplay } from "vuetify"
-  import ying_yang from "@/assets/img/logos/ying yang.png"
-  import chemin from "@/assets/img/logos/chemin.png"
-  import vert from "@/assets/img/logos/vert.png"
-  import lampadaire from "@/assets/img/logos/lampadaire.png"
-  import collegue from "@/assets/img/logos/collegue.png"
-  import sobene from "@/assets/img/logos/sobene.png"
-  import etincelle from "@/assets/img/logos/etincelle.png"
-  import geste from "@/assets/img/logos/geste.png"
-  import socle from "@/assets/img/logos/socle.png"
-  import derniere from "@/assets/img/logos/derniere.png"
-  import salon from "@/assets/img/logos/salon.png"
-
-
-
-  import { loadFull } from "tsparticles"
-
-  const particlesInit = async (engine) => {
-    await loadFull(engine)
-  }
-
-  useHead({
-    titleTemplate: "OpenGeode - open source framework for geometric models",
-  })
+  import ying_yang from "@/assets/img/energy_sobriety/ying_yang.png"
+  import chemin from "@/assets/img/energy_sobriety/chemin.png"
+  import vert from "@/assets/img/energy_sobriety/vert.png"
+  import lampadaire from "@/assets/img/energy_sobriety/lampadaire.png"
+  import collegue from "@/assets/img/energy_sobriety/collegue.png"
+  import sobene from "@/assets/img/energy_sobriety/sobene.png"
+  import etincelle from "@/assets/img/energy_sobriety/etincelle.png"
+  import geste from "@/assets/img/energy_sobriety/geste.png"
+  import socle from "@/assets/img/energy_sobriety/socle.png"
+  import derniere from "@/assets/img/energy_sobriety/derniere.png"
+  import salon from "@/assets/img/energy_sobriety/salon.png"
 
   const users_list = [
     {
       name: "YING YANG",
       logo: ying_yang,
-      // url: "https://www.nrcan.gc.ca/home",
     },
     {
       name: "CHEMIN",
       logo: chemin,
-      // url: "https://www.ring-team.org",
     },
     {
       name: "SOBRIETE ENERGETIQUE",
       logo: sobene,
-      // url: "https://www.ring-team.org",
     },
     {
       name: "VERT",
       logo: vert,
-      // url: "https://www.nrcan.gc.ca/home",
     },
     {
       name: "LAMPADAIRE",
       logo: lampadaire,
-      // url: "https://www.bsc.es/",
     },
     {
       name: "COLLEGUE",
       logo: collegue,
-      // url: "https://www.bsc.es/",
     },
     {
       name: "ETINCELLE",
       logo: etincelle,
-      // url: "https://www.nrcan.gc.ca/home",
     },
     {
       name: "GESTE",
       logo: geste,
-      // url: "https://www.nrcan.gc.ca/home",
     },
     {
       name: "SOCLE",
       logo: socle,
-      // url: "https://www.nrcan.gc.ca/home",
     },
     {
       name: "DERNIERE",
       logo: derniere,
-      // url: "https://www.nrcan.gc.ca/home",
     },
     {
       name: "SALON",
       logo: salon,
-      // url: "https://www.nrcan.gc.ca/home",
     },
   ]
-
-  const { smAndUp } = useDisplay()
-</script>
+</script>