paragraphe contact multi ligne + 2 colonnes magasin

This commit is contained in:
Valentin 2024-05-27 19:05:43 +02:00
parent e4210d9926
commit d469194e2d
6 changed files with 59 additions and 20 deletions

View File

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

View File

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

View File

@ -2,8 +2,6 @@
// https://github.com/codepie-io/nuxt3-dynamic-routes/blob/main/nuxt.config.ts // https://github.com/codepie-io/nuxt3-dynamic-routes/blob/main/nuxt.config.ts
// + ssg homemade caching to not retrieve all the files each generation // + 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 { crawlImages } from './ssg_hooks/crawlImages.js'
import { cacheImages } from './ssg_hooks/cacheImages.js' import { cacheImages } from './ssg_hooks/cacheImages.js'

View File

@ -7,7 +7,7 @@
/> />
</div> </div>
<div> <div>
<p>{{ globalData.contact_text }}</p> <p v-html="globalData.contact_text"></p>
<a :href="'mailto:' + globalData.email">{{ globalData.email }}</a> <a :href="'mailto:' + globalData.email">{{ globalData.email }}</a>
</div> </div>
</main> </main>
@ -19,6 +19,10 @@ export default {
let globalData = await useFetchGlobalData(); let globalData = await useFetchGlobalData();
globalData = globalData.globalData._object.$sglobalData; 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 { return {
globalData globalData
@ -53,6 +57,7 @@ export default {
width: 30vw; width: 30vw;
} }
> div:last-of-type { > div:last-of-type {
margin-top: 0;
width: 40vw; width: 40vw;
margin-left: 2rem; margin-left: 2rem;
align-self: flex-end; align-self: flex-end;

View File

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

View File

@ -1,7 +1,16 @@
<template> <template>
<main> <main>
<p>{{ globalData.magasin_explication }}</p> <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> </main>
</template> </template>
@ -10,13 +19,18 @@ import Projects from '@/components/Projects.vue';
export default { export default {
async setup() { 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 () => { onBeforeMount(async () => {
if (itemsData.value) { if (toilesData.value) {
magasin.value = itemsData.value.data; toiles.value = toilesData.value.data;
}
if (printsData.value) {
prints.value = printsData.value.data;
} }
}); });
@ -25,11 +39,30 @@ export default {
return { return {
globalData, globalData,
magasin toiles,
prints
}; };
}, },
components: { components: {
Projects Projects
} }
}; };
</script> </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>