premier commit
This commit is contained in:
Valentin
157
components/Header.vue
Normal file
157
components/Header.vue
Normal file
@@ -0,0 +1,157 @@
|
||||
|
||||
<template>
|
||||
<header>
|
||||
<nav>
|
||||
<div>
|
||||
<h1 :class="{ active: isActive('/') }">
|
||||
<div class="hover_el_active" id="indexActive" aria-label="selected element"></div>
|
||||
<NuxtLink to="/">mahée auffret</NuxtLink>
|
||||
</h1>
|
||||
</div>
|
||||
<ul>
|
||||
<li :class="{ active: isActive('/galerie') }">
|
||||
<div class="hover_el_active" id="galeryActive" aria-label="selected element"></div>
|
||||
<NuxtLink to="/galerie">galerie</NuxtLink>
|
||||
</li>
|
||||
<li :class="{ active: isActive('/magasin') }">
|
||||
<div class="hover_el_active" id="shopActive" aria-label="selected element"></div>
|
||||
<NuxtLink to="/magasin">magasin</NuxtLink>
|
||||
</li>
|
||||
<li :class="{ active: isActive('/contact') }">
|
||||
<div class="hover_el_active" id="contactActive" aria-label="selected element"></div>
|
||||
<NuxtLink to="/contact">contact</NuxtLink>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
<div>
|
||||
<a :href="globalData.instagram_link" target="_blank">
|
||||
<img src="/assets/images/instagram.png" alt="Logo Instagram Dessiné" />
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
setup() {
|
||||
const globalData = inject('globalData');
|
||||
return { globalData };
|
||||
},
|
||||
methods: {
|
||||
isActive(path) {
|
||||
return this.$route.path === path;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
nav {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
h1 {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
position: relative;
|
||||
margin-top: 1rem;
|
||||
> a {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
padding-left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
h1 .hover_el_active {
|
||||
left: -40% !important;
|
||||
width: 170% !important;
|
||||
}
|
||||
h1:hover .hover_el_active,
|
||||
h1.active .hover_el_active {
|
||||
opacity: 1;
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin-top: 1rem;
|
||||
> li {
|
||||
position: relative;
|
||||
margin-left: 1.5rem;
|
||||
> a {
|
||||
position: relative;
|
||||
padding: 10px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
> li:hover .hover_el_active,
|
||||
> li.active .hover_el_active {
|
||||
opacity: 1;
|
||||
}
|
||||
> li:first-of-type {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.hover_el_active {
|
||||
position: absolute;
|
||||
top: -70%;
|
||||
left: -15%;
|
||||
width: 130%;
|
||||
height: 240%;
|
||||
background-size: contain !important;
|
||||
background-repeat: no-repeat !important;
|
||||
background-position: center !important;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
#indexActive {
|
||||
background-image: url('/assets/images/hover-index.png');
|
||||
}
|
||||
#galeryActive {
|
||||
background-image: url('/assets/images/hover-index.png');
|
||||
left: -30%;
|
||||
width: 160%;
|
||||
}
|
||||
#shopActive {
|
||||
background-image: url('/assets/images/hover-index.png');
|
||||
}
|
||||
#contactActive {
|
||||
background-image: url('/assets/images/hover-index.png');
|
||||
}
|
||||
}
|
||||
> div {
|
||||
width: 3rem;
|
||||
z-index: 1;
|
||||
img {
|
||||
width: 100%;
|
||||
transform: rotate(0deg);
|
||||
transition: transform 0.3s ease-out;
|
||||
}
|
||||
img:hover {
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 800px) {
|
||||
header {
|
||||
align-items: center;
|
||||
nav {
|
||||
flex-direction: row;
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
ul {
|
||||
margin-top: 0;
|
||||
> li:first-of-type {
|
||||
margin-left: 2.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
205
components/Projects.vue
Normal file
205
components/Projects.vue
Normal file
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<main>
|
||||
<article v-for="content in contents" :key="content.id">
|
||||
<div>
|
||||
<NuxtImg
|
||||
:src="img((content.image ? content.image : content.shop_image))"
|
||||
:alt="content.titre"
|
||||
format="webp"
|
||||
placeholder
|
||||
lazy
|
||||
sizes="sm:40vw lg:30vw"
|
||||
@click="displaySlider(content.id)" />
|
||||
</div>
|
||||
<div>
|
||||
<p v-if="content.titre">{{ content.titre }}</p>
|
||||
<p v-if="content.medium">{{ content.medium }}</p>
|
||||
<p v-if="content.description">{{ content.description }}</p>
|
||||
<p v-if="content.format">{{ content.format }}</p>
|
||||
<p v-if="content.annee">{{ content.annee }}</p>
|
||||
<p v-if="content.prix">{{ content.prix }}</p>
|
||||
</div>
|
||||
</article>
|
||||
<swiper
|
||||
:zoom="true"
|
||||
:loop="true"
|
||||
:modules="modules"
|
||||
:navigation="true"
|
||||
@slideChange="onSlideChange"
|
||||
@swiper="onSwiper"
|
||||
>
|
||||
<swiper-slide v-for="content in contents" :key="content.id">
|
||||
<div class="swiper-zoom-container">
|
||||
<NuxtImg
|
||||
:src="img((content.image ? content.image : content.shop_image))"
|
||||
:alt="content.titre"
|
||||
format="webp"
|
||||
placeholder
|
||||
lazy />
|
||||
</div>
|
||||
</swiper-slide>
|
||||
<div class="swiper-button-close" @click="closeSlider()"></div>
|
||||
</swiper>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { A11y, Navigation, Zoom } from "swiper/modules";
|
||||
import { Swiper, SwiperSlide } from "swiper/vue";
|
||||
import "swiper/css";
|
||||
import 'swiper/css/zoom';
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const { getThumbnail : img } = useDirectusFiles();
|
||||
|
||||
const swiperInstance = ref(null);
|
||||
const onSwiper = (swiper) => {
|
||||
swiperInstance.value = swiper;
|
||||
};
|
||||
const onSlideChange = () => {};
|
||||
|
||||
const displaySlider = (index) => {
|
||||
const body = document.querySelector('body');
|
||||
body.style.overflowY = 'hidden';
|
||||
const swiper = swiperInstance.value;
|
||||
swiper.slideToLoop(index - 1);
|
||||
const swiperEl = swiper.el;
|
||||
swiperEl.style.display = "block";
|
||||
setTimeout(() => {
|
||||
swiperEl.style.opacity = 1;
|
||||
}, 10);
|
||||
}
|
||||
|
||||
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";
|
||||
}, 300);
|
||||
}
|
||||
|
||||
return {
|
||||
onSwiper,
|
||||
onSlideChange,
|
||||
modules: [Navigation, A11y, Zoom],
|
||||
displaySlider,
|
||||
closeSlider,
|
||||
img
|
||||
};
|
||||
},
|
||||
components: {
|
||||
Swiper,
|
||||
SwiperSlide,
|
||||
},
|
||||
props: {
|
||||
contents: Object
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
main {
|
||||
margin-top: 5vh;
|
||||
article {
|
||||
display: flex;
|
||||
margin-bottom: 3vh;
|
||||
> div:first-of-type {
|
||||
width: 40vw;
|
||||
img {
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
> div:last-of-type {
|
||||
padding-left: 5vw;
|
||||
width: 50vw;
|
||||
p {
|
||||
line-height: 1.2;
|
||||
margin-bottom: 0.5vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
backdrop-filter: blur(5px);
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
position: fixed;
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-out;
|
||||
.swiper-wrapper {
|
||||
.swiper-slide {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img{
|
||||
width: 60%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.swiper-button-prev,
|
||||
.swiper-button-next,
|
||||
.swiper-button-close {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
}
|
||||
.swiper-button-prev {
|
||||
left: 5vw;
|
||||
bottom: calc(50vh - 1rem);
|
||||
background-image: url(/assets/images/before.png);
|
||||
}
|
||||
.swiper-button-next {
|
||||
right: 5vw;
|
||||
bottom: calc(50vh - 1rem);
|
||||
background-image: url(/assets/images/after.png);
|
||||
}
|
||||
.swiper-button-close {
|
||||
right: 5vw;
|
||||
top: 5vh;
|
||||
background-image: url(/assets/images/close.png);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 800px) {
|
||||
main {
|
||||
article {
|
||||
> div:first-of-type {
|
||||
width: 25vw;
|
||||
}
|
||||
> div:last-of-type {
|
||||
padding-left: 2vw;
|
||||
}
|
||||
}
|
||||
.swiper .swiper-wrapper .swiper-slide img {
|
||||
width: 40%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
main {
|
||||
article > div:first-of-type {
|
||||
width: 15vw;
|
||||
}
|
||||
.swiper .swiper-wrapper .swiper-slide img {
|
||||
width: 30%;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user