paragraphe contact multi ligne + 2 colonnes magasin
This commit is contained in:
parent
e4210d9926
commit
d469194e2d
|
@ -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 {
|
||||||
|
|
|
@ -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";
|
||||||
|
|
|
@ -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'
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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');
|
||||||
|
|
||||||
|
|
|
@ -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,7 +39,8 @@ export default {
|
||||||
|
|
||||||
return {
|
return {
|
||||||
globalData,
|
globalData,
|
||||||
magasin
|
toiles,
|
||||||
|
prints
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
|
@ -33,3 +48,21 @@ export default {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</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>
|
Loading…
Reference in New Issue