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

#30 Merge fix + some more image location change

Browse Source
This commit is contained in:
Dominic Villemure
2024-04-21 14:14:40 -04:00
parent 5d37cefec1 722265b5c1
commit 0b5988fd4c
30 changed files with 1393 additions and 1866 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/layouts/CardDonate.vue
View File

@@ -1,41 +0,0 @@
<template>
<div class="md:flex hidden items-center justify-between flex-col">
</div>
<div class="md:hidden flex flex-col items-center justify-center">
<v-container class=" footer-donate-container">
<h1 style="text-align: center; color: rgb(107, 0, 101); margin-bottom: 4%;"> ENCOURAGEZ-MOI </h1>
<v-text-field label="Montant"
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
<v-text-field label="Message"
style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
<v-btn style="margin-bottom: 3px; background-color: rgb(163, 14, 121); color: white;" rounded="xl"
size="x-large" block>Faire un don</v-btn>
</v-container>
</div>
</template>
<style>
.footer-donate-container {
background-color: rgb(255, 255, 255);
}
</style>

79
src/layouts/DefaultLayout.vue
View File

@@ -2,14 +2,15 @@
<body style="background-color: #f4f4f4;">
<!-- Version pour ordinateur -->
<!-- PC Version -->
<v-card style="z-index: 1000; background-color: #ffff;" class="hidden-sm-and-down" hidden-sm-and-down elevation="5">
<v-container style="z-index: 2000; margin-bottom: .8%; margin-top: -.3%; margin-right: 1%;">
<v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
<v-menu :location="location">
<v-menu>
<template v-slot:activator="{ props }">
<div class="d-flex align-center" v-bind="attrs" v-on="on">
<div class="d-flex align-center">
<!-- Profile picture in the top right corner -->
<img src="/images/anonyme.png" class="header-profile-icon mr-2" alt="Logo">
<v-btn flat style="min-width: 200px; font-size: 1.3rem;" dark v-bind="props">
ANONYME
@@ -17,45 +18,46 @@
</div>
</template>
<v-list style="padding: 0;"> <!-- Supprimer le padding pour que les boutons occupent toute la largeur -->
<!-- Dropdown Menu Profile/Connection -->
<v-list style="padding: 0;">
<v-list-item>
<router-link :to="{ name: 'yourprofile' }">
<v-btn class="full-width-btn" flat>Mon profile</v-btn>
</router-link>
</v-list-item>
<v-list-item>
<v-btn class="full-width-btn" flat>Déconnexion</v-btn>
</v-list-item>
</v-list>
</v-menu>
</v-row>
</v-container>
</v-card>
<!-- Version pour mobile -->
<!-- Mobile version -->
<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="11" class="d-flex align-center justify-center">
<img src="/images/Chevron2.png" class="mobile-header" alt="Logo">
</v-col>
<!-- Logo Top bar -->
<img src="/images/mobilemenulogo.png" class="mobile-header" alt="Logo">
</v-col>
</v-row>
</v-app-bar>
<!-- Left-side Menu -->
<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>
<!-- Left-side Button -->
<v-divider></v-divider>
<v-list density="compact" nav>
<h1 class="h1-navigation">Navigation</h1>
@@ -66,72 +68,27 @@
<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-list>
</v-navigation-drawer>
</v-card>
<main class="px-8 py-3 ">
<router-view />
</main>
</body>
</template>
<script setup>
import { auth } from '@/stores/auth.js';
import { useRouter } from 'vue-router';
const store = auth();
const router = useRouter();
const logout = () => {
store.logout();
router.push('/login');
}
const user = store.user;
import { ref } from 'vue';
const drawer = ref(false);
</script>
<script>
export default {
data() {
return {
imageSrc: '../../../images/guillaimeaime3x.png',
drawer: false,
items: [
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
],
};
},
};
</script>
<style scoped>
.full-width-btn {
width: 100%;
text-align: left;
padding-left: 24px;
padding-right: 24px;
z-index: 1001;
}
@@ -150,7 +107,6 @@ export default {
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
}
@@ -178,7 +134,6 @@ export default {
}
.mobile-header {
height: 50px;

89
src/layouts/FooterLayout.vue
View File

@@ -1,33 +1,39 @@
<!--lg="8" md="10" sm="10" xs="10" -->
<template>
<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">
<!-- Hutopy footer logo -->
<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>
<router-link :to="{ name: 'home' }">
<v-img src="../../../images/hutopy.png" class="hutopy-footer-picture"></v-img>
</v-row>
</router-link>
</v-col>
</v-row>
</v-container>
<!-- Hutopy Social network links -->
<v-container>
<!-- Facebook link -->
<v-row justify="center">
<v-col cols="auto">
<a href="https://www.facebook.com/profile.php?id=61556819217561">
<img class="icons" src="../../public/images/facebookiconblackpink.png" alt="Description image 2">
</a>
</v-col>
<!-- Instagram link -->
<v-col cols="auto">
<a href="https://www.instagram.com/hutopy.inc/">
<img src="../../public/images/instagramblackpink.png" alt="Description image 3" class="icons">
</a>
</v-col>
<!-- Need X Account -->
<v-col cols="auto">
<router-link :to="{ name: 'home' }">
<img src="../../public/images/xblackpink.png" alt="Description image 1" class="icons">
@@ -36,6 +42,7 @@
</v-row>
</v-container>
<!-- Loop for social network links -->
<v-container class="text-center" style="flex-grow: 1;">
<router-link v-for="link in links" :key="link" :to="getLinkUrl(link)"
class="mx-2 text-decoration-none text-black">
@@ -47,9 +54,6 @@
{{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
</v-container>
</div>
</v-container>
</body>
@@ -57,33 +61,30 @@
<script>
export default {
data: () => ({
links: [
'Aide & Contact',
'Conditions générales',
'Politique des contenus',
'conditions utilisation',
'anti-exploitation',
],
linkRoutes: {
'Aide & Contact': { name: 'helpandcontact' },
'Conditions générales': { name: 'termsandconditions' },
'Politique des contenus': { name: 'contentpolicy' },
'Programme Ambassadeurs': { name: 'ambassadorprogram' },
'conditions utilisation': { name: 'conditionofuse' },
'anti-exploitation': { name: 'antiexploitation' },
},
}),
methods: {
getLinkUrl(link) {
return this.linkRoutes[link] || { name: 'home' };
},
},
<script setup>
const links = [
'Aide & Contact',
'FAQ',
'Guide pour les créateurs',
'Conditions générales',
'Politique de Contenu',
'À Propos'
];
const linkRoutes = {
'Aide & Contact': { name: 'helpandcontact' },
'FAQ': { name: 'FAQ' },
'Guide pour les créateurs': { name: 'guideforcreators' },
'Conditions générales': { name: 'termsandconditions' },
'Politique de Contenu': { name: 'contentpolicy' },
'À Propos': { name: 'about' }
};
// If broken link, redirect to home page.
const getLinkUrl = (link) => linkRoutes[link] || { name: 'home' };
</script>
<style>
.icons {
width: 50px;
@@ -98,16 +99,11 @@ export default {
}
.custom-footer {
padding: 10px;
/* Ajoute un rembourrage intérieur de 10px autour du contenu du footer * 107, 0, 101, 1/
margin: 0;
/* Réinitialise les marges à zéro */
}
.no-margin {
margin: 0 !important;
/* Annule la marge de v-app */
}
footer {
@@ -115,13 +111,11 @@ footer {
justify-content: center;
align-items: center;
flex-direction: column;
/* Pour aligner le contenu verticalement */
background-color: rgba(107, 0, 101, 1);
}
footer a:not(:last-child) {
margin-right: 20px;
/* Ajoute de l'espace entre les images et les liens */
}
.footertextcolor {
@@ -136,9 +130,8 @@ footer a:not(:last-child) {
.custom-color-button {
background-color: rgb(255, 0, 0);
/* Your custom color */
color: white;
/* Text color */
font-size: 1.5rem;
margin-top: 40px;
margin-bottom: 40px;
@@ -148,25 +141,11 @@ footer a:not(:last-child) {
background-color: rgba(107, 0, 101, 1);
}
@media (min-width: 150px) and (max-width: 598px) {
.hutopy-footer-picture {
min-width: 200px;
}
}
@media (min-width: 599px) and (max-width: 999px) {}
@media (min-width: 1000px) and (max-width: 1279px) {}
@media (min-width: 1280px) and (max-width: 1600px) {}
@media (min-width: 1600px) and (max-width: 1919px) {}
@media (min-width: 1920px) and (max-width: 2559px) {}
@media (min-width: 2559px) {}
</style>

24
src/layouts/FormInscriptionBeta.vue
View File

@@ -1,24 +0,0 @@
<template>
<div>
</div>
</template>
<script setup>
</script>
<style>
.h1-inscription-beta-Inscrivez-vous {
font-size: 20px;
/* Taille de la police de 20 pixels */
font-weight: bold;
/* Texte en gras */
text-align: center;
/* Centrer le texte */
margin-top: 5px;
margin-bottom: 15px;
}
</style>

36
src/layouts/SimpleVideoCard.vue
View File

@@ -1,36 +0,0 @@
<template>
<v-card class="vcard-descriptions-mobile" style="margin-top: 30px;">
<h1 class="h1profilemobile">Podcast #01</h1>
<h2 clase="card-date" style="margin-bottom: 4%; text-align: right; margin-right: 5%;">10-03-2024 </h2>
<iframe width="420" height="315" src="https://www.youtube.com/embed/CDlj1IUhBqg?si=ot1YPBMKbmviOXvD">
</iframe>
<p class="text-justify pa-4" style="font-size: 1.2em">
Voici mon nouveau podcast!
</p>
</v-card>
</template>
<style>
.vcard-descriptions-mobile {
box-shadow: 0 6px 9px rgba(0, 0, 0, 0.6);
}
.h1profilemobile {
font-size: 2rem;
text-align: center;
color: rgba(163, 14, 121, 0.85);
}
.card-date {
text-align: right;
}
</style>