+ - + @click="displaySlider(content.id)" + /> {{ content.titre }} @@ -30,12 +27,10 @@ > - + /> @@ -51,8 +46,6 @@ import 'swiper/css/zoom'; export default { setup() { - const { getThumbnail : img } = useDirectusFiles(); - const swiperInstance = ref(null); const onSwiper = (swiper) => { swiperInstance.value = swiper; @@ -73,11 +66,11 @@ export default { const closeSlider = () => { const body = document.querySelector('body'); - body.style.overflowY = 'auto'; const swiperEl = document.querySelector('.swiper'); swiperEl.style.opacity = 0; setTimeout(() => { swiperEl.style.display = "none"; + body.style.overflowY = 'auto'; }, 300); } @@ -87,7 +80,6 @@ export default { modules: [Navigation, A11y, Zoom], displaySlider, closeSlider, - img }; }, components: { @@ -143,6 +135,14 @@ export default { img{ width: 60%; } + > .swiper-zoom-container { + > img { + cursor: zoom-in; + } + } + } + .swiper-slide-zoomed > .swiper-zoom-container > img { + cursor: move; } } .swiper-button-prev, @@ -197,9 +197,10 @@ export default { width: 15vw; } .swiper .swiper-wrapper .swiper-slide img { - width: 30%; + width: 60%; + padding-top: 2rem; + padding-bottom: 2rem; } - } } \ No newline at end of file diff --git a/composables/useFetchGlobalData.js b/composables/useFetchGlobalData.js new file mode 100644 index 0000000..0f087a9 --- /dev/null +++ b/composables/useFetchGlobalData.js @@ -0,0 +1,11 @@ +export const useFetchGlobalData = async () => { + const globalData = useState('globalData', () => {}) + + await callOnce(async () => { + globalData.value = await $fetch(`/api/items/global`) + globalData.value = globalData.value.data + }) + return { + globalData + } +} \ No newline at end of file diff --git a/error.vue b/error.vue index 4996d29..c2af036 100644 --- a/error.vue +++ b/error.vue @@ -2,42 +2,29 @@ Erreur 404 + Erreur {{ error.statusCode }} La page {{ error.url }} n'existe pas - +
- + @click="displaySlider(content.id)" + /> {{ content.titre }} @@ -30,12 +27,10 @@ > - + /> @@ -51,8 +46,6 @@ import 'swiper/css/zoom'; export default { setup() { - const { getThumbnail : img } = useDirectusFiles(); - const swiperInstance = ref(null); const onSwiper = (swiper) => { swiperInstance.value = swiper; @@ -73,11 +66,11 @@ export default { const closeSlider = () => { const body = document.querySelector('body'); - body.style.overflowY = 'auto'; const swiperEl = document.querySelector('.swiper'); swiperEl.style.opacity = 0; setTimeout(() => { swiperEl.style.display = "none"; + body.style.overflowY = 'auto'; }, 300); } @@ -87,7 +80,6 @@ export default { modules: [Navigation, A11y, Zoom], displaySlider, closeSlider, - img }; }, components: { @@ -143,6 +135,14 @@ export default { img{ width: 60%; } + > .swiper-zoom-container { + > img { + cursor: zoom-in; + } + } + } + .swiper-slide-zoomed > .swiper-zoom-container > img { + cursor: move; } } .swiper-button-prev, @@ -197,9 +197,10 @@ export default { width: 15vw; } .swiper .swiper-wrapper .swiper-slide img { - width: 30%; + width: 60%; + padding-top: 2rem; + padding-bottom: 2rem; } - } } \ No newline at end of file diff --git a/composables/useFetchGlobalData.js b/composables/useFetchGlobalData.js new file mode 100644 index 0000000..0f087a9 --- /dev/null +++ b/composables/useFetchGlobalData.js @@ -0,0 +1,11 @@ +export const useFetchGlobalData = async () => { + const globalData = useState('globalData', () => {}) + + await callOnce(async () => { + globalData.value = await $fetch(`/api/items/global`) + globalData.value = globalData.value.data + }) + return { + globalData + } +} \ No newline at end of file diff --git a/error.vue b/error.vue index 4996d29..c2af036 100644 --- a/error.vue +++ b/error.vue @@ -2,42 +2,29 @@ Erreur 404 + Erreur {{ error.statusCode }} La page {{ error.url }} n'existe pas - +