paragraphe contact multi ligne + 2 colonnes magasin

components/Header.vue

@@ -150,8 +150,8 @@ export default {
                 h1 {
                     margin-top: 0;
                     > .hover_el_active {
-                        top: -130% !important;
-                        height: 350% !important;
+                        top: -110% !important;
+                        height: 300% !important;
                     }
                 }
                 ul {

components/Projects.vue

@@ -3,9 +3,9 @@
         <article v-for="content in contents.slice().reverse()" :key="content.id">
             <div>
                 <img
-                    :src="`/imgs/small/${content.image ? content.image : content.shop_image}.webp`"
+                    :src="`/imgs/small/${content.image}.webp`"
                     :alt="content.titre"
-                    @click="displaySlider(content.id)"
+                    @click="displaySlider(contents.length - content.id)"
                 />
             </div>
             <div>
@@ -28,7 +28,7 @@
             <swiper-slide v-for="content in contents.slice().reverse()" :key="content.id">
                 <div class="swiper-zoom-container">
                     <img
-                        :src="`/imgs/large/${content.image ? content.image : content.shop_image}.webp`"
+                        :src="`/imgs/large/${content.image}.webp`"
                         :alt="content.titre"
                     />
                 </div>
@@ -56,7 +56,7 @@ export default {
             const body = document.querySelector('body');
             body.style.overflowY = 'hidden';
             const swiper = swiperInstance.value;
-            swiper.slideToLoop(index - 1);
+            swiper.slideToLoop(index);
             const swiperEl = swiper.el;
             swiperEl.style.display = "block";
             setTimeout(() => {
@@ -66,7 +66,13 @@ export default {
 
         const closeSlider = () => {
             const body = document.querySelector('body');
-            const swiperEl = document.querySelector('.swiper');
+            const swiperElements = document.querySelectorAll('.swiper');
+            let swiperEl;
+            for (let swiperElement of swiperElements) {
+                if (swiperElement.style.opacity == 1) {
+                    swiperEl = swiperElement;
+                }
+            }
             swiperEl.style.opacity = 0;
             setTimeout(() => {
                 swiperEl.style.display = "none";

nuxt.config.ts

@@ -2,8 +2,6 @@
 // https://github.com/codepie-io/nuxt3-dynamic-routes/blob/main/nuxt.config.ts
 // + ssg homemade caching to not retrieve all the files each generation
 
-// import { createDirectus, staticToken, rest, readFiles } from '@directus/sdk';
-
 import { crawlImages } from './ssg_hooks/crawlImages.js'
 import { cacheImages } from './ssg_hooks/cacheImages.js'
 

pages/contact.vue

@@ -7,7 +7,7 @@
             />
         </div>
         <div>
-            <p>{{ globalData.contact_text }}</p>
+            <p v-html="globalData.contact_text"></p>
             <a :href="'mailto:' + globalData.email">{{ globalData.email }}</a>
         </div>
     </main>
@@ -19,6 +19,10 @@ export default {
 
         let globalData = await useFetchGlobalData();
         globalData = globalData.globalData._object.$sglobalData;
+        if (globalData.contact_text.includes('\n')) {
+            console.log("BABABABA");
+            globalData.contact_text = JSON.stringify(globalData.contact_text).replace(/\\n/g, '<br>').slice(1, -1);
+        }
 
         return {
             globalData
@@ -53,6 +57,7 @@ export default {
                 width: 30vw;
             }
             > div:last-of-type {
+                margin-top: 0;
                 width: 40vw;
                 margin-left: 2rem;
                 align-self: flex-end;

pages/index.vue

@@ -25,13 +25,10 @@ export default {
             }
         });
 
-        
-
         return {
             itemsAccueil,
         };
 
-
         function startSlider() {
             const imgs = document.querySelectorAll('.indexImg img');
             

pages/magasin.vue

@@ -1,7 +1,16 @@
 <template>
     <main>
         <p>{{ globalData.magasin_explication }}</p>
-        <Projects :contents="magasin" />
+        <div class="category">
+            <div>
+                <h3>Toiles</h3>
+                <Projects :contents="toiles" />
+            </div>
+            <div>
+                <h3>Impressions</h3>
+                <Projects :contents="prints" />
+            </div>
+        </div>
     </main>
 </template>
 
@@ -10,13 +19,18 @@ import Projects from '@/components/Projects.vue';
 
 export default {
     async setup() {
-        const magasin = ref([]);
+        const toiles = ref([]);
+        const prints = ref([]);
 
-        const { data: itemsData } = useFetch('/api/items/magasin', { server: true });
+        const { data: toilesData } = useFetch('/api/items/toiles', { server: true });
+        const { data: printsData } = useFetch('/api/items/prints', { server: true });
 
         onBeforeMount(async () => {
-            if (itemsData.value) {
-                magasin.value = itemsData.value.data;
+            if (toilesData.value) {
+                toiles.value = toilesData.value.data;
+            }
+            if (printsData.value) {
+                prints.value = printsData.value.data;
             }
         });
 
@@ -25,7 +39,8 @@ export default {
 
         return {
             globalData,
-            magasin
+            toiles,
+            prints
         };
     },
     components: {
@@ -33,3 +48,21 @@ export default {
     }
 };
 </script>
+
+<style scoped lang="scss">
+    h3:first-of-type {
+        margin-top: 2rem;
+    }
+    h3 {
+        text-transform: uppercase;
+    }
+
+    @media screen and (min-width: 800px) {
+        .category {
+            display: flex;
+            > div {
+                width: 50%;
+            }
+        }
+    }
+</style>