jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modifié contactview version mobile, le defualtLayout afin d'ajouter le menu mobile sur toutes les pages, index j'ai modifier quand non change de page pour remonter dans le haut de la page. Contact view j'avais un petit bug avec l'image et j,ai ajouté un effet sur la photo

Browse Source
This commit is contained in:
PascalMarchesseault
2024-03-29 14:03:02 -04:00
parent 5cd4eb531a
commit e339b5ff67
4 changed files with 203 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
src/layouts/DefaultLayout.vue
View File

@@ -2,13 +2,13 @@
<body style="background-color: #f4f4f4;">
<v-card style="z-index: 9000; background-color: #f4f4f4;" class="hidden-sm-and-down" hidden-sm-and-down>
<div class="md:flex hidden items-center justify-between flex-col">
<!-- Version pour ordinateur -->
<v-container style="z-index: 2000; margin-bottom: 1.4%">
<v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
<v-card-text justify="end" style="max-width: 22%; min-width: 500px; margin-top: .2%; margin-bottom: -1.2%;">
<v-card-text justify="end" style="max-width: 22%; min-width: 500px; margin-top: .2%;">
<v-text-field append-inner-icon="mdi-magnify" density="compact"
label="Recherche et comptes (Non fonctionnel pour le moment)" variant="solo" hide-details
single-line></v-text-field>
@@ -27,87 +27,48 @@
</v-container>
</div>
</v-card>
<!-- Version pour mobile -->
<div class="md:hidden flex flex-col items-center justify-center">
<v-container style="margin-top: -20px;">
<v-card style="z-index: 9000; background-color: #f4f4f4;" class="hidden-md-and-up" hidden-md-and-up>
<v-app-bar app>
<v-app-bar-nav-icon @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
<v-row>
<v-col cols="auto">
<!-- Logo -->
<router-link :to="{ name: 'home' }">
<img src="/images/Chevron2.png" class="img-Logo mr-2 logo rounded-full" alt="Logo">
</router-link>
<v-col cols="11" class="d-flex align-center justify-center">
<img src="/images/Chevron2.png" class="mobile-header" alt="Logo">
</v-col>
<v-spacer></v-spacer> <!-- Espace flexible pour pousser la photo de profil à droite -->
<v-col cols="auto">
<!-- Photo de profil -->
<router-link :to="{ name: 'yourprofile' }" class="text-green-700">
<img src="/images/pascal.jpg" class="img-small mr-2 logob rounded-full img-small profilePicture"
alt="Logo">
</router-link>
</v-col>
</v-row>
</v-container>
<v-container class="text-center" style="margin-top: -30px;">
<v-row class="justify-center">
<!-- Premier lien avec icône -->
<v-col cols="auto" class="mx-4">
<router-link :to="{ name: 'home' }" class="text-green-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
<path stroke-linecap="round" stroke-linejoin="round"
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
</svg>
</router-link>
</v-col>
<!-- Deuxième lien avec icône -->
<v-col cols="auto" class="mx-4">
<router-link :to="{ name: 'contact' }" class="text-green-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
<path stroke-linecap="round" stroke-linejoin="round"
d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
</svg>
</router-link>
</v-col>
<!-- Troisième lien avec icône -->
<v-col cols="auto" class="mx-4">
<router-link :to="{ name: 'creatorfolio' }" class="text-green-700">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
<path stroke-linecap="round" stroke-linejoin="round"
d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
</svg>
</router-link>
</v-col>
<div v-if="user">
Hello, {{ user.email }}
</div>
<v-btn color="red" variant="text" @click="logout()">Logout</v-btn>
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: 20px;"></div>
</v-row>
</v-app-bar>
<v-navigation-drawer v-model="drawer" temporary>
<v-list>
<v-list-item subtitle="Pascal@hutopy.com" title="Pascal Marchesseault">
<template v-slot:prepend>
<img src="/images/pascal.jpg" class="mobile-profile-picture mini-profile-picture " alt="Avatar">
</template>
</v-list-item>
</v-list>
<v-divider></v-divider>
<v-list density="compact" nav>
<h1 class="h1-navigation">Navigation</h1>
<router-link :to="{ name: 'home' }" class="">
<v-list-item prepend-icon="mdi-home" title="Accueil" value="home"></v-list-item>
</router-link>
<RouterLink :to="{ name: 'contact' }">
<v-list-item prepend-icon="mdi-account-multiple" title="Amis" value="friends"></v-list-item>
</RouterLink>
<v-list-item prepend-icon="mdi-newspaper" title="Contenu" value="content"></v-list-item>
<v-divider style="margin-top: 20%;"></v-divider>
<h1 class="h1-navigation">Outils</h1>
<v-list-item prepend-icon="mdi-wallet" title="Portefeuille" value="wallet"></v-list-item>
<v-list-item style="margin-top: 110%;" prepend-icon="mdi-logout" title="Déconnexion"
value="logout"></v-list-item>
</v-container>
</div>
</v-list>
</v-navigation-drawer>
</v-card>
<main class="px-8 py-3 ">
@@ -122,7 +83,7 @@ import { useAuthStore } from '@/plugins/store/authStore';
import { useRouter } from 'vue-router';
const authStore = useAuthStore();
const router = useRouter()
const router = useRouter();
const logout = () => {
authStore.logout();
@@ -130,6 +91,71 @@ const logout = () => {
}
const user = authStore.user;
</script>
<style src="../cssstyle/index.css"></style>
<script>
export default {
data() {
return {
imageSrc: '../../../images/guillaimeaime3x.png',
drawer: false,
items: [
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
],
};
},
};
</script>
<style>
.mini-profile-picture {
border-radius: 100px;
}
.mobile-profile-picture {
height: 40px;
border-radius: px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
/* Ajouter une ombre à la photo */
border: 2px solid #a30e79;
margin-right: 10px
}
.header-banner {
border-top: 5px solid rgba(107, 0, 101, 1);
margin-top: 15%;
}
.social-container {
background-color: #006d77;
margin-top: -20%;
font-size: 1.4rem;
font-weight: 800;
color: white;
}
.social-container2 {
background-color: #0baab2;
font-size: 1.4rem;
font-weight: 800;
color: white;
min-width: 400px;
}
.mobile-header {
height: 50px;
}
</style>

85
src/layouts/FooterLayout.vue
View File

@@ -1,56 +1,57 @@
<!--lg="8" md="10" sm="10" xs="10" -->
<template>
<v-container>
<body style="background-color: #f4f4f4;">
<v-container style="background-color: #f4f4f4;">
<div style="background-color: #f4f4f4; min-height: 10vh; display: flex; flex-direction: column;"
class="footer-align">
<v-container style="background-color: #f4f4f4">
<v-row justify="center" style="margin-top: 30px;">
<v-col cols="5" lg="5" md="5" sm="12" xs="7">
<v-row>
<v-img src="../../../images/hutopy.png" class="hutopy-footer-picture"></v-img>
</v-row>
</v-col>
</v-row>
</v-container>
<div style="background-color: #f4f4f4; min-height: 10vh; display: flex; flex-direction: column;"
class="footer-align">
<v-container style="background-color: #f4f4f4">
<v-row justify="center" style="margin-top: 30px;">
<v-col cols="5" lg="5" md="5" sm="12" xs="7">
<v-row>
<v-img src="../../../images/hutopy.png" class="hutopy-footer-picture"></v-img>
</v-row>
</v-col>
</v-row>
</v-container>
<v-container>
<v-row justify="center">
<v-col cols="auto">
<a href="https://www.facebook.com/profile.php?id=61556819217561">
<img class="icons" src="../../../images/facebookiconblackpink.png" alt="Description image 2">
</a>
</v-col>
<v-col cols="auto">
<a href="https://www.instagram.com/hutopy.inc/">
<img src="../../../images/instagramblackpink.png" alt="Description image 3" class="icons">
</a>
</v-col>
<v-col cols="auto">
<router-link :to="{ name: 'home' }">
<img src="../../../images/xblackpink.png" alt="Description image 1" class="icons">
</router-link>
</v-col>
</v-row>
</v-container>
<v-container>
<v-row justify="center">
<v-col cols="auto">
<a href="https://www.facebook.com/profile.php?id=61556819217561">
<img class="icons" src="../../../images/facebookiconblackpink.png" alt="Description image 2">
</a>
</v-col>
<v-col cols="auto">
<a href="https://www.instagram.com/hutopy.inc/">
<img src="../../../images/instagramblackpink.png" alt="Description image 3" class="icons">
</a>
</v-col>
<v-col cols="auto">
<router-link :to="{ name: 'home' }">
<img src="../../../images/xblackpink.png" alt="Description image 1" class="icons">
</router-link>
</v-col>
</v-row>
</v-container>
<v-container class="text-center" style="flex-grow: 1;">
<v-btn v-for="link in links" :key="link" class="mx-2" color="black" rounded="xl" variant="text">
{{ link }}
</v-btn>
</v-container>
<v-container class="text-center" style="flex-grow: 1;">
<v-btn v-for="link in links" :key="link" class="mx-2" color="black" rounded="xl" variant="text">
{{ link }}
</v-btn>
</v-container>
<v-container class="text-black text-center ">
{{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
</v-container>
<v-container class="text-black text-center ">
{{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
</v-container>
</div>
</v-container>
</div>
</v-container>
</body>
</template>

16
src/router/index.js
View File

@@ -1,11 +1,12 @@
import ProjectRoadmap from '@/views/main/ProjectRoadmap.vue'
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/main/HomeView.vue'
import SignupView from '../views/SignupView.vue'
import LoginView from '../views/LoginView.vue'
import SignupView from '../views/SignupView.vue'
import ContactView from '../views/main/ContactView.vue'
import CreatorFolio from '../views/main/CreatorFolio.vue'
import HomeView from '../views/main/HomeView.vue'
import YourProfile from '../views/main/YourProfile.vue'
import ProjectRoadmap from '@/views/main/ProjectRoadmap.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
@@ -43,10 +44,11 @@ const router = createRouter({
path: '/roadmap',
name: 'roadmap',
component: ProjectRoadmap
},
]
}
],
scrollBehavior(to, from, savedPosition) {
return { top: 0 };
}
})
export default router

88
src/views/main/ContactView.vue
View File

@@ -1,4 +1,5 @@
<template>
<DefaultLayout></DefaultLayout>
<!--PC -->
<div class="hutopy-backgroud-color">
<div class="hidden-xs flex-col items-center page-margin">
@@ -6,9 +7,9 @@
<v-row class="text-center align-center row-between-logo-text home-row">
<v-col xl="7" lg="9" md="11" sm="12" xs="12"> </v-col>
<v-col cols="auto">
<img class="hutopy-header-image" src="../../../images/hutopy.png">
</v-col>
<img class="hutopy-header-image" src="../../../images/hutopy.png">
<v-col class="ml-0 text-left ">
<RouterLink :to="{ name: 'home' }">
@@ -24,6 +25,7 @@
<v-col xl="8" lg="11" md="12" sm="12" xs="12">
<v-row>
<v-col>
<img class="contact-image" src="../../../images/contactpage/contactpicture.png">
</v-col>
@@ -85,22 +87,14 @@
</div>
<div class="hidden-sm-and-up flex-col items-center justify-center">
<img class="hutopy-header-image" src="../../../images/hutopy.png">
<img class="contact-image" src="../../../images/contactpage/contactpicture.png">
<v-spacer style="margin-bottom: 25px;"></v-spacer>
<v-img src="../../../images/contactpage/contactpicture.png" contain aspect-ratio="16/9"
style="clip-path: polygon(0 20%, 100% 0, 100% 60%, 0 100%);"></v-img>
<v-row>
<v-col cols="7">
<v-col cols="12">
<h1 class="h2-Participez-au-développement">PARTICIPEZ AU DÉVELOPPEMENT</h1>
</v-col>
<v-col>
<RouterLink :to="{ name: 'home' }">
<v-btn class="home-btn" size="large" color="rgb(107, 0, 101)" outlined elevation="0">
Accueil
</v-btn>
</RouterLink>
</v-col>
</v-row>
<v-text-field class="labelsize" label="Nom ($)" style="margin-top: 5%; color: rgb(107, 0, 101);"></v-text-field>
@@ -156,6 +150,7 @@
<script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
</script>
@@ -184,10 +179,11 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
.h2-Participez-au-développement {
font-size: 1.8rem;
margin-top: 3%;
font-size: 1.4rem;
margin-top: 10%;
margin-bottom: 6%;
margin-left: 5%;
font-weight: 600;
}
.home-btn {
@@ -223,20 +219,22 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
max-width: 100%;
margin-top: 4%;
height: 103%;
}
.home-btn {
margin-top: 5%;
margin-top: 20%;
border-radius: 30px;
width: 180px;
min-width: 175px;
margin-left: 70%;
width: 140px;
min-width: 140px;
margin-left: 55%;
}
.h2-Participez-au-développement {
font-size: 2rem;
margin-top: -3%;
font-size: 1.6rem;
margin-top: 10%;
margin-bottom: 6%;
}
@@ -250,6 +248,11 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
}
.hutopy-header-image {
margin-top: 6%;
width: 400px;
margin-left: 2%;
}
}
@@ -264,17 +267,20 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
}
.home-btn {
margin-top: 5%;
margin-top: 35%;
border-radius: 30px;
width: 180px;
min-width: 175px;
margin-left: 74%;
width: auto;
min-width: 160px;
max-width: 180px;
margin-left: 40%;
}
.h2-Participez-au-développement {
font-size: 2rem;
margin-top: -3%;
margin-top: 10%;
margin-bottom: 6%;
}
@@ -287,7 +293,11 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
margin-top: 3%;
}
.hutopy-header-image {
margin-top: 6%;
width: 500px;
margin-left: 1%;
}
}
@@ -296,7 +306,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
.hutopy-header-image {
margin: 0 auto;
height: 120px;
margin-left: -0%;
margin-left: 1%;
}
@@ -306,7 +316,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
border-radius: 30px;
width: 180px;
min-width: 175px;
margin-left: 22%;
margin-left: 30%;
margin-top: 37%;
@@ -350,7 +360,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
.hutopy-header-image {
margin: 0 auto;
height: 165px;
margin-left: -4%;
margin-left: -2.8%;
}
.home-btn {
@@ -359,7 +369,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
border-radius: 30px;
width: 180px;
min-width: 175px;
margin-left: 50%;
margin-left: 53%;
margin-top: 45%;
@@ -416,7 +426,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
.hutopy-header-image {
margin: 0 auto;
height: 165px;
margin-left: -5%;
margin-left: -3%;
}
.home-btn {
@@ -425,7 +435,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
border-radius: 30px;
width: 180px;
min-width: 175px;
margin-left: 75%;
margin-left: 82%;
margin-top: 40%;
@@ -481,7 +491,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
.hutopy-header-image {
margin: 0 auto;
height: 160px;
margin-left: -8%;
margin-left: -4.6%;
}
.contact-image {
@@ -492,7 +502,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
.home-btn {
margin-top: 5%;
margin-left: 47%;
margin-left: 53%;
border-radius: 30px;
width: 180px;
min-width: 175px;
@@ -551,7 +561,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
.hutopy-header-image {
margin: 0 auto;
height: 180px;
margin-left: 7%;
margin-left: 3.5%;
}
.contact-image {
@@ -563,7 +573,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
.home-btn {
margin-top: 5%;
margin-left: 33%;
margin-left: 30%;
border-radius: 30px;
width: 180px;
min-width: 175px;