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

Big cleanup for styling

Browse Source
This commit is contained in:
Jonathan Bourdon
2025-02-12 13:38:29 -05:00
parent d6f3610d17
commit aba9ba7658
20 changed files with 519 additions and 500 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/public/images/hutopymedia/homepage/brain.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 18 KiB

BIN
frontend/public/images/hutopymedia/homepage/hands.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 13 KiB

34
frontend/src/App.vue
View File

@@ -1,26 +1,15 @@
<template> <template>
<v-app> <v-app>
<div class="flex flex-row"> <div class="flex flex-row font-sans bg-hBackground text-hOnBackground">
<!-- Side Bar for larger screens -->
<div v-if="!smAndDown" class="border-r-1 z-30"> <div class="fixed border-r-1 min-h-screen border-r border-[#3d3d3d]">
<side-bar></side-bar> <side-bar></side-bar>
</div> </div>
<!-- Mobile --> <div class="ml-64 w-full flex justify-center items-center ">
<div v-if="smAndDown" class="mobile-container">
<div v-if="!brandingStore.loading"
class="min-h-screen justify-center items-center bg-hBackground">
<router-view></router-view> <router-view></router-view>
</div> </div>
</div>
<!-- PC -->
<div v-if="!smAndDown" class="w-full ml-64">
<div v-if="!brandingStore.loading"
class="min-h-screen justify-center items-center bg-hBackground">
<router-view></router-view>
</div>
</div>
</div> </div>
</v-app> </v-app>
@@ -28,20 +17,9 @@
<script async setup> <script async setup>
import SideBar from "@/views/main/SideBar.vue"; import SideBar from "@/views/main/SideBar.vue";
import { useBrandingStore } from "@/stores/brandingStore.js";
import { useDisplay } from "vuetify";
const { smAndDown } = useDisplay();
const brandingStore = useBrandingStore();
</script> </script>
<style scoped> <style scoped>
/* Ensure content does not overflow on mobile */
.mobile-container {
width: 100%; /* Full width for mobile */
max-width: 100vw; /* Prevent overflow */
overflow-x: hidden; /* Hide horizontal overflow */
padding: 0; /* Remove extra padding */
box-sizing: border-box; /* Include padding in width/height calculation */
}
</style> </style>

55
frontend/src/assets/main.css
View File

@@ -3,16 +3,59 @@
@tailwind utilities; @tailwind utilities;
:root { :root {
--h-background: #1C1C1D; /* Branding Colors */
--hutopy-primary: #6B0065;
--hutopy-secondary: #A30E79;
/* UI COLORS */
--h-background: #201b20;
--h-on-background: #e2e5e9; --h-on-background: #e2e5e9;
--h-surface: #252728; --h-surface: #252829;
--h-on-surface: #e2e5e9; --h-on-surface: #e2e5e9;
--h-primary: #231F20; --h-primary: #1B1B1F;
--h-on-primary: #d9e1e1; --h-on-primary: #c5c8c8;
--h-secondary: #683B1E; --h-secondary: #e7e5ea;
--h-on-secondary: #b0b3b8; --h-on-secondary: #000000;
--h-tertiary: #272A44; --h-tertiary: #272A44;
--h-on-tertiary: #bdb6b6; --h-on-tertiary: #bdb6b6;
--h-error: #bc2f2f; --h-error: #bc2f2f;
--h-on-error: #ffffff; --h-on-error: #ffffff;
} }
@layer components {
.btn {
@apply min-w-24 w-full;
@apply p-4;
@apply flex flex-nowrap gap-4 items-center justify-center;
@apply rounded-lg;
@apply capitalize text-base font-sans font-medium;
@apply w-fit px-10;
}
button.primary {
@apply btn bg-hPrimary text-hOnPrimary;
}
button.secondary {
@apply btn bg-hSecondary text-hOnSecondary;
}
div.card {
@apply w-[800px];
@apply rounded-xl p-10 m-4;
@apply bg-hSurface text-hOnSurface;
}
div.card-title {
@apply font-sans font-bold text-2xl;
@apply mb-8;
}
div.card-entry {
@apply mb-4;
}
div.card-actions {
@apply flex flex-row gap-6 justify-end;
}
}

61
frontend/src/views/LoginView.vue
View File

@@ -1,39 +1,48 @@
<template> <template>
<div v-if="isMobileView" class="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-6 text-center">
<!-- Image -->
<img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png" alt="Image" class="w-64 h-64 rounded-full mb-4 border" />
<!-- Message --> <div class="flex min-h-screen items-center">
<div class="text-lg text-gray-700 mt-8"> <div class="card justify-items-center">
<p class="font-semibold mb-2">Pour vous connecter et modifier votre page, veuillez utiliser un appareil avec un écran plus large, comme un ordinateur.</p>
<p>Pour le moment, l'expérience sur téléphone n'est pas encore complétée.</p> <img alt="hutopy login"
<p class="mt-4 font-bold">Désolé de l'inconvénient.</p> src="/images/hutopy-logo.png"/>
</div>
<div class="flex flex-col w-[800px] gap-10 justify-items-center">
<h1 class="text-2xl font-bold login-text text-center mt-10">
Connexion
</h1>
<google-login :callback="googleCallback"
class="w-full justify-items-center"
popup-type="TOKEN">
<button class="secondary w-full">
<v-icon left>mdi-google</v-icon>
Google
</button>
</google-login>
</div> </div>
<div> </div>
<div class="flex items-start justify-center py-2">
<div class="max-w-[600px] mt-[10%] ">
<img class="rounded-2xl"
src="/images/hutopymedia/loginpage/loginhutopy.png"
alt="hutopy login">
<login-form></login-form>
</div>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>
import LoginForm from "@/views/main/LoginForm.vue"; import {ref} from 'vue';
import { useDisplay } from "vuetify"; import {GoogleLogin} from "vue3-google-login";
import {ref, watch} from "vue"; import {useAuthStore} from '@/stores/authStore.js';
const { smAndDown } = useDisplay(); const authStore = useAuthStore();
const isMobileView = ref(smAndDown.value);
watch(smAndDown, (newVal) => { const errorSnackBar = ref(false);
isMobileView.value = newVal;
}); async function googleCallback(token) {
const response = await authStore.loginWithGoogle(JSON.stringify(token));
if (response !== true) {
errorSnackBar.value = true;
}
}
</script> </script>

59
frontend/src/views/creators/CreateCreator.vue
View File

@@ -47,16 +47,39 @@ async function createAccount() {
</script> </script>
<template> <template>
<div class="container">
<div class="card">
<div class="h-1"></div> <!-- To delete and find the bug that causes the margin of the following component to use a white background.--> <div class="card-title">
<div class="create-creator-card">
<div class="py-2 text-3xl font-bold text-center mb-10">
Créez votre Hutopy. Créez votre Hutopy.
</div> </div>
<div class="flex flex-column justify-end gap-2"> <div class="card-entry">
<name-editor
v-model:name="creatorName"
creator-name-reservation-id="creatorNameDirty"
@update:creator-name-reservation-id="handleCreatorNameReservationIdChanged($event)"
></name-editor>
</div>
<div class="card-actions">
<button
:disabled="!canSave"
class="secondary"
@click="createAccount">
Cancel
</button>
<button
class="primary"
:disabled="!canSave"
@click="createAccount">
Créer
</button>
</div>
</div>
</div>
<v-alert <v-alert
v-if="!!errorMessage" v-if="!!errorMessage"
outlined outlined
@@ -65,30 +88,14 @@ async function createAccount() {
{{ errorMessage }} {{ errorMessage }}
</v-alert> </v-alert>
<name-editor
v-model:name="creatorName"
creator-name-reservation-id="creatorNameDirty"
@update:creator-name-reservation-id="handleCreatorNameReservationIdChanged($event)"
></name-editor>
<div class="flex flex-row justify-end gap-2">
<v-btn
:disabled="!canSave"
variant="outlined"
@click="createAccount"
:style="{ borderColor: 'rgb(159, 76, 173)', color: 'rgb(159, 76, 173)' }"
>
Créer
</v-btn>
</div>
</div>
</div>
</template> </template>
<style scoped> <style scoped>
.create-creator-card {
@apply text-center max-w-[1000px] mx-auto p-10 bg-white shadow-2xl rounded mt-16 ; .container {
@apply min-h-screen w-full;
@apply flex items-center justify-center;
} }
</style> </style>

12
frontend/src/views/creators/CreatorHome.vue
View File

@@ -7,7 +7,7 @@
<button <button
v-if="isLoggedIn" v-if="isLoggedIn"
@click="isEditMode ? saveChanges() : toggleEditMode()" @click="isEditMode ? saveChanges() : toggleEditMode()"
class="px-4 py-2 rounded-md hover:opacity-90 bg-hSecondary text-hOnSecondary" class="primary"
> >
{{ isEditMode ? 'Enregistrer' : 'Éditer la page' }} {{ isEditMode ? 'Enregistrer' : 'Éditer la page' }}
</button> </button>
@@ -15,14 +15,14 @@
<button <button
v-if="isEditMode && isLoggedIn" v-if="isEditMode && isLoggedIn"
@click="cancelEdit" @click="cancelEdit"
class="px-4 py-2 rounded-md hover:opacity-90 bg-red-500 text-white" class="secondary"
> >
Annuler Annuler
</button> </button>
</div> </div>
<!-- MainPage --> <!-- MainPage -->
<div class="flex flex-col max-w-[650px] mx-auto px-6 bg-hBackground text-hOnBackground"> <div class="flex flex-col mx-auto px-6">
<h1 class="flex justify-start text-2xl font-bold text-center mb-4">Qui sommes-nous</h1> <h1 class="flex justify-start text-2xl font-bold text-center mb-4">Qui sommes-nous</h1>
@@ -55,7 +55,8 @@
alt="Image principale" alt="Image principale"
class=" max-w-full h-auto cursor-pointer max-h-96"/> class=" max-w-full h-auto cursor-pointer max-h-96"/>
</label> </label>
<button v-if="isEditMode" @click="deleteImage('mainImageUrl')" <button v-if="isEditMode"
@click="deleteImage('mainImageUrl')"
class="absolute top-10 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600"> class="absolute top-10 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
X X
</button> </button>
@@ -301,12 +302,11 @@
</template> </template>
<script setup> <script setup>
import {ref, onMounted} from "vue"; import {onMounted, ref, watch} from "vue";
import {useClient} from "@/plugins/api.js"; import {useClient} from "@/plugins/api.js";
import {useBrandingStore} from "@/stores/brandingStore.js"; import {useBrandingStore} from "@/stores/brandingStore.js";
import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js"; import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
import {useDisplay} from "vuetify"; import {useDisplay} from "vuetify";
import {watch} from "vue";
import FullscreenImage from "@/views/creators/FullscreenImage.vue"; import FullscreenImage from "@/views/creators/FullscreenImage.vue";
const {smAndDown} = useDisplay(); const {smAndDown} = useDisplay();

9
frontend/src/views/creators/CreatorLayout.vue
View File

@@ -1,19 +1,21 @@
<template> <template>
<div class="flex flex-col min-h-screen max-w-[960px] mx-auto"> <div class="min-h-screen w-[1024px] bg-hSurface text-hOnSurface">
<div v-if="brandingStore.loading"> <div v-if="brandingStore.loading">
<v-progress-linear indeterminate></v-progress-linear> <v-progress-linear indeterminate></v-progress-linear>
</div> </div>
<div v-else> <div v-else>
<div>
<banner></banner> <banner></banner>
</div> </div>
<div class="py-8 flex-grow"> <div>
<router-view></router-view> <router-view></router-view>
</div> </div>
<div> <div>
<Footer></Footer> <Footer></Footer>
</div> </div>
</div>
</div> </div>
@@ -23,5 +25,6 @@
import Banner from "@/views/creators/Banner.vue"; import Banner from "@/views/creators/Banner.vue";
import Footer from "@/views/main/Footer.vue"; import Footer from "@/views/main/Footer.vue";
import {useBrandingStore} from "@/stores/brandingStore.js"; import {useBrandingStore} from "@/stores/brandingStore.js";
const brandingStore = useBrandingStore() const brandingStore = useBrandingStore()
</script> </script>

18
frontend/src/views/documentation/DocumentationLayout.vue
View File

@@ -3,22 +3,12 @@ import Footer from "@/views/main/Footer.vue";
</script> </script>
<template> <template>
<div class="min-h-screen w-[1024px] bg-hSurface text-hOnSurface">
<div class="flex flex-col min-h-screen max-w-[960px] mx-auto"> <div>
<!-- <div class="flex justify-center">-->
<!-- <img src="/images/hutopy.png"-->
<!-- class="rounded-2xl"-->
<!-- alt="logo hutopy"-->
<!-- width="600">-->
<!-- </div>-->
<div class="p-4">
<router-view></router-view> <router-view></router-view>
</div> </div>
<div>
<Footer></Footer> <Footer></Footer>
</div> </div>
</div>
</template> </template>

4
frontend/src/views/main/Footer.vue
View File

@@ -6,7 +6,7 @@ import InstagramIcon from '@/assets/icons/instagram.svg'
<template> <template>
<footer class="py-8 flex flex-col gap-8 bg-hBackground"> <footer class="py-8 flex flex-col gap-8">
<div <div
class="text-hOnBackground centered-text text-2xl font-bold flex justify-center items-center ml-28 lg:tracking-[125px] md:tracking-[50px] sm:tracking-[20px]"> class="text-hOnBackground centered-text text-2xl font-bold flex justify-center items-center ml-28 lg:tracking-[125px] md:tracking-[50px] sm:tracking-[20px]">
@@ -58,7 +58,7 @@ import InstagramIcon from '@/assets/icons/instagram.svg'
</router-link> </router-link>
</div> </div>
<div class="flex justify-center base-text mb-13 link"> <div class="flex justify-center base-text link">
Hutopy &copy;{{ new Date().getFullYear() }} - {{ $t('footer.allRightsReserved') }} Hutopy &copy;{{ new Date().getFullYear() }} - {{ $t('footer.allRightsReserved') }}
</div> </div>

99
frontend/src/views/main/Landing.vue
View File

@@ -3,23 +3,26 @@ import Footer from "@/views/main/Footer.vue";
</script> </script>
<template> <template>
<div>
<div> <div>
<div class="pa-4 flex flex-col justify-center md:flex-row"> <div class="pa-4 flex flex-col justify-center md:flex-row">
<div class="py-6"> <div class="py-6">
<div> <div>
<img src="/images/hutopymedia/banners/hutopy.png" alt="Hutopy Logo" class="md:h-44 logo-image sm:h-28 sm:mx-auto"> <img alt="Hutopy Logo" class="md:h-44 logo-image sm:h-28 sm:mx-auto"
src="/images/hutopymedia/banners/hutopy.png">
</div> </div>
</div> </div>
<div class="flex flex-col space-y-3 header-btn"> <div class="flex flex-col space-y-3 header-btn">
<v-btn <v-btn
to="/login" class="text-white w-full sm:w-auto inscription-btn-header"
class="text-white w-full sm:w-auto inscription-btn-header"> to="/login">
Inscription Inscription
</v-btn> </v-btn>
<v-btn <v-btn
class="w-full sm:w-auto inscription-btn-header-outlined"
to="/create-creator" to="/create-creator"
variant="outlined" variant="outlined">
class="w-full sm:w-auto inscription-btn-header-outlined">
Créer ma page Créer ma page
</v-btn> </v-btn>
</div> </div>
@@ -34,41 +37,40 @@ import Footer from "@/views/main/Footer.vue";
<span class="text-white"> les <span class="highlight2">PROJETS</span> </span><br> <span class="text-white"> les <span class="highlight2">PROJETS</span> </span><br>
<span class="text-white"> que vous <span class="highlight">AIMEZ</span> </span> <span class="text-white"> que vous <span class="highlight">AIMEZ</span> </span>
</div> </div>
<img src="/images/hutopymedia/banners/heart.png" alt="YourHutopy" class="w-48 h-48 md:w-48 md:h-48 object-contain"> <img alt="YourHutopy" class="w-48 h-48 md:w-48 md:h-48 object-contain"
src="/images/hutopymedia/banners/heart.png">
</div> </div>
<div class="relative mt-10"> <div class="relative mt-10">
<img
src="/images/hutopymedia/banners/bannerbg.png" <div class="flex flex-col lg:flex-row justify-center items-center lg:space-x-14 space-y-6 lg:space-y-0 pa-1">
alt="YourHutopy" <div class="bg-hSurface p-4 max-w-md text-center rounded-3xl space-y-8 shadow-xl h-[520px]">
class="responsive-banner"
/>
<div class="absolute inset-0 flex flex-col lg:flex-row justify-center items-center lg:space-x-14 space-y-6 lg:space-y-0 pa-1">
<div class="bg-white p-4 max-w-md text-center rounded-3xl space-y-8 shadow-xl h-[520px]">
<div class="text-xl mb-2 box-text">Je soutiens</div> <div class="text-xl mb-2 box-text">Je soutiens</div>
<img <img
src="/images/hutopymedia/homepage/hands.png"
alt="YourHutopy" alt="YourHutopy"
class="max-h-56 mx-auto" class="max-h-56 mx-auto"
src="/images/hutopymedia/homepage/hands.png"
> >
<div class="text-md text-justify px-6 "> <div class="text-md text-justify px-6 ">
Soutenez financièrement vos créateurs préférés et participez directement à leur succès. Chaque contribution est un geste fort pour encourager leur talent et leur passion. Soutenez financièrement vos créateurs préférés et participez directement à leur succès. Chaque contribution
est un geste fort pour encourager leur talent et leur passion.
</div> </div>
<!-- <v-btn>Soutenir</v-btn> --> <!-- <v-btn>Soutenir</v-btn> -->
</div> </div>
<div class="bg-white p-4 max-w-md text-center rounded-3xl space-y-8 shadow-xl h-[520px]"> <div class="bg-hSurface p-4 max-w-md text-center rounded-3xl space-y-8 shadow-xl h-[520px]">
<div class="text-xl mb-2 box-text">Je crée</div> <div class="text-xl mb-2 box-text">Je crée</div>
<img <img
src="/images/hutopymedia/homepage/brain.png"
alt="YourHutopy" alt="YourHutopy"
class="max-h-56 mx-auto" class="max-h-56 mx-auto"
src="/images/hutopymedia/homepage/brain.png"
> >
<div class="text-md text-justify px-6"> <div class="text-md text-justify px-6">
Offrez à votre communauté l’opportunité de vous soutenir dans vos projets et vos passions. Transformez vos idées en réalité grâce à ceux qui croient en vous. Offrez à votre communauté l’opportunité de vous soutenir dans vos projets et vos passions. Transformez vos
idées en réalité grâce à ceux qui croient en vous.
</div> </div>
<v-btn <v-btn
to="/login"
class="inscription-btn" class="inscription-btn"
to="/login"
> >
Inscription Inscription
</v-btn> </v-btn>
@@ -81,19 +83,22 @@ import Footer from "@/views/main/Footer.vue";
<div class="gap-8 items-start flex flex-col md:flex-row"> <div class="gap-8 items-start flex flex-col md:flex-row">
<!-- Section de texte --> <!-- Section de texte -->
<div class="space-y-6"> <div class="space-y-6">
<img src="/images/hutopymedia/homepage/votrehutopy.png" alt="YourHutopy" class="w-full mb-6"> <img alt="YourHutopy" class="w-full mb-6" src="/images/hutopymedia/homepage/votrehutopy.png">
<div class="space-y-4"> <div class="space-y-4">
<p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1 homepagetext">Hutopy, c'est quoi ?</p> <p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1 homepagetext">Hutopy, c'est quoi ?</p>
<p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1 homepagetext"> <p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1 homepagetext">
Hutopy est une plateforme qui permet de soutenir financièrement vos créateurs préférés et de les encourager dans leurs projets. C'est aussi un espace où les créateurs peuvent partager leur passion, créer leur page, et donner à leur communauté l’opportunité de les aider à réaliser leurs rêves. Hutopy est une plateforme qui permet de soutenir financièrement vos créateurs préférés et de les
encourager dans leurs projets. C'est aussi un espace où les créateurs peuvent partager leur passion, créer
leur page, et donner à leur communauté l’opportunité de les aider à réaliser leurs rêves.
</p> </p>
<p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1 homepagetext"> <p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1 homepagetext">
Simple, accessible et humain, Hutopy valorise le talent et le soutien, car chaque geste, aussi petit soit-il, peut faire une grande différence dans l’accomplissement de sa propre utopie. Simple, accessible et humain, Hutopy valorise le talent et le soutien, car chaque geste, aussi petit
soit-il, peut faire une grande différence dans l’accomplissement de sa propre utopie.
</p> </p>
<div class="flex justify-center"> <div class="flex justify-center">
<v-btn <v-btn
to="/create-creator"
class="text-white mt-12 flex items-center justify-center round create-btn" class="text-white mt-12 flex items-center justify-center round create-btn"
to="/create-creator"
> >
Créer ma page Créer ma page
</v-btn> </v-btn>
@@ -103,15 +108,21 @@ import Footer from "@/views/main/Footer.vue";
<!-- Section droite : 4 images --> <!-- Section droite : 4 images -->
<div class="mt-8 md:mt-0 grid grid-cols-2 gap-4 lg:ml-15"> <div class="mt-8 md:mt-0 grid grid-cols-2 gap-4 lg:ml-15">
<div><img src="/images/hutopymedia/homepage/grinding.png" alt="Grinding" class="w-full h-auto object-cover rounded-2xl"></div> <div><img alt="Grinding" class="w-full h-auto object-cover rounded-2xl"
<div><img src="/images/hutopymedia/homepage/sign.png" alt="Microphone" class="w-full h-auto object-cover rounded-2xl"></div> src="/images/hutopymedia/homepage/grinding.png"></div>
<div><img src="/images/hutopymedia/homepage/girlvr.png" alt="Girl VR" class="w-full h-auto object-cover rounded-2xl"></div> <div><img alt="Microphone" class="w-full h-auto object-cover rounded-2xl"
<div><img src="/images/hutopymedia/homepage/girlarmy.png" alt="Girl Army" class="w-full h-auto object-cover rounded-2xl"></div> src="/images/hutopymedia/homepage/sign.png"></div>
<div><img alt="Girl VR" class="w-full h-auto object-cover rounded-2xl"
src="/images/hutopymedia/homepage/girlvr.png"></div>
<div><img alt="Girl Army" class="w-full h-auto object-cover rounded-2xl"
src="/images/hutopymedia/homepage/girlarmy.png"></div>
</div> </div>
</div> </div>
</div> </div>
<Footer class="mt-10"></Footer> <Footer class="mt-10"></Footer>
</div>
</template> </template>
<style scoped> <style scoped>
@@ -197,20 +208,8 @@ body {
} }
.responsive-banner {
width: 100vw; /* Prend toute la largeur de l'écran */
height: 1100px; /* Hauteur par défaut pour les petits écrans */
object-fit: cover; /* Maintient les proportions de l'image */
}
.header-btn {
}
.logo-image { .logo-image {
margin-left: auto; margin-left: auto;
} }
@media (min-width: 640px) { @media (min-width: 640px) {
@@ -218,9 +217,6 @@ body {
margin-top: 25px; margin-top: 25px;
margin-bottom: 25px; margin-bottom: 25px;
} }
.responsive-banner {
height: 1100px; /* Pour les écrans >= 640px */
}
.support-text { .support-text {
font-size: 3.0rem; /* Ajustez la taille du texte */ font-size: 3.0rem; /* Ajustez la taille du texte */
@@ -231,35 +227,20 @@ body {
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.responsive-banner {
height: 1100px; /* Pour les écrans >= 768px */
}
.header-btn { .header-btn {
margin-top: 60px; margin-top: 60px;
} }
.logo-image { .logo-image {
margin-right: 20px; margin-right: 20px;
margin-left: 0; margin-left: 0;
}
}
@media (min-width: 1024px) {
.responsive-banner {
height: 750px; /* Pour les écrans >= 1024px */
}
}
@media (min-width: 1280px) {
.responsive-banner {
height: 600px; /* Pour les écrans >= 1280px */
} }
} }
.homepagetext { .homepagetext {
color: white; color: white;
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
} }
</style> </style>

42
frontend/src/views/main/LoginForm.vue
View File

@@ -1,42 +0,0 @@
<template>
<div class="flex flex-col items-center min-w-[300px] m-4">
<h1 class="text-center text-2xl font-bold mb-5 login-text">Connexion</h1>
<google-login class="w-full"
:callback="googleCallback"
popup-type="TOKEN">
<v-btn density="comfortable" class="mb-2 w-full">
<v-icon left>mdi-google</v-icon>
Google
</v-btn>
</google-login>
</div>
</template>
<script setup>
import {ref} from 'vue';
import {useAuthStore} from '@/stores/authStore.js';
import {GoogleLogin} from "vue3-google-login";
const authStore = useAuthStore();
const errorSnackBar = ref(false);
async function googleCallback(token) {
const response = await authStore.loginWithGoogle(JSON.stringify(token));
if (response !== true) {
errorSnackBar.value = true;
}
}
</script>
<style scoped>
.login-text{
@apply text-hOnBackground;
}
</style>

12
frontend/src/views/main/SideBar.vue
View File

@@ -35,7 +35,7 @@ function toggleLanguage() {
<template> <template>
<nav class="container"> <nav class="container">
<div class="mt-4 px-4"> <div class="m-4">
<router-link to="/@hutopy"> <router-link to="/@hutopy">
<img src="/images/hutopy-logo.png" <img src="/images/hutopy-logo.png"
alt="hutopy logo"> alt="hutopy logo">
@@ -98,7 +98,7 @@ function toggleLanguage() {
<button @click="authStore.logout" <button @click="authStore.logout"
class="action"> class="action">
<i class="mdi mdi-logout"></i> <i class="mdi mdi-logout"></i>
{{ t.signOut }} <span class="text-no-wrap">{{ t.signOut }}</span>
</button> </button>
</div> </div>
@@ -110,19 +110,17 @@ function toggleLanguage() {
<style scoped> <style scoped>
.container { .container {
@apply fixed flex flex-col h-full max-w-64; @apply flex flex-col h-screen w-64 max-w-64 overflow-y-auto;
@apply border-r;
@apply bg-hBackground border-[#3d3d3d] text-hOnBackground;
} }
.profile { .profile {
@apply ml-4 text-lg font-sans capitalize; @apply ml-4 text-lg font-sans capitalize;
@apply font-sans font-semibold; @apply font-semibold;
} }
.action { .action {
@apply capitalize;
@apply w-full flex items-center gap-4 px-4 py-2 rounded; @apply w-full flex items-center gap-4 px-4 py-2 rounded;
@apply capitalize text-base font-sans font-medium;
@apply bg-hBackground hover:bg-hSurface; /* FIXME: The hover value is not semantically correct */ @apply bg-hBackground hover:bg-hSurface; /* FIXME: The hover value is not semantically correct */
} }

34
frontend/src/views/profile/ProfilePage.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="flex flex-col min-h-screen max-w-[960px] mx-auto"> <div class="flex flex-col min-h-screen w-[1024px]">
<!-- Modal --> <!-- Modal -->
<v-dialog v-model="dialogEditFullnameShown" max-width="800px"> <v-dialog v-model="dialogEditFullnameShown" max-width="800px">
<fullname-dialog <fullname-dialog
@@ -20,21 +20,19 @@
</v-dialog> </v-dialog>
<!-- Creator Section (integrated directly) --> <!-- Creator Section (integrated directly) -->
<v-dialog v-model="dialog" max-width="800px"> <v-dialog v-model="dialogShown" max-width="800px">
<div class="card">
<component <component
:is="currentComponent" :is="currentComponent"
:creator="creatorProfileStore.creator" :creator="creatorProfileStore.creator"
@closeRequested="closeDialog" @closeRequested="closeDialog"
></component> ></component>
</div>
</v-dialog> </v-dialog>
<div class="space-y-6 p-4"> <div class="space-y-6 p-4">
<div class="card"> <div class="card">
<div class="title"> <div class="card-title">
{{ $t('personnalinformation.informations') }} {{ $t('personnalinformation.informations') }}
</div> </div>
@@ -61,7 +59,7 @@
<!-- Phone & email --> <!-- Phone & email -->
<div class="card"> <div class="card">
<div class="title"> <div class="card-title">
{{ $t('personnalinformation.contactdetails') }} {{ $t('personnalinformation.contactdetails') }}
</div> </div>
@@ -77,7 +75,7 @@
<template v-if="creatorProfileStore.creator !== undefined"> <template v-if="creatorProfileStore.creator !== undefined">
<div class="card"> <div class="card">
<div class="title"> <div class="card-title">
{{ $t('creatorinfopage.informations') }} {{ $t('creatorinfopage.informations') }}
</div> </div>
<div class="content"> <div class="content">
@@ -107,7 +105,7 @@
</div> </div>
<div class="card"> <div class="card">
<div class="title"> <div class="card-title">
{{ $t('creatorinfopage.socialnetwork') }} {{ $t('creatorinfopage.socialnetwork') }}
</div> </div>
<div class="content"> <div class="content">
@@ -233,7 +231,7 @@ function handleSaveEditEmail(firstname, lastname) {
const creatorProfileStore = useCreatorProfileStore(); const creatorProfileStore = useCreatorProfileStore();
const dialog = ref(false); const dialogShown = ref(false);
const currentComponent = ref(''); const currentComponent = ref('');
const componentsMap = { const componentsMap = {
@@ -245,34 +243,22 @@ const componentsMap = {
function requestCancel() { function requestCancel() {
currentComponent.value = null; currentComponent.value = null;
dialog.value = false; dialogShown.value = false;
} }
const openDialog = (component) => { const openDialog = (component) => {
currentComponent.value = componentsMap[component]; currentComponent.value = componentsMap[component];
dialog.value = true; dialogShown.value = true;
}; };
const closeDialog = () => { const closeDialog = () => {
currentComponent.value = null; currentComponent.value = null;
dialog.value = false; dialogShown.value = false;
}; };
</script> </script>
<style scoped> <style scoped>
.card {
@apply p-4 bg-hSurface text-hOnSurface shadow-md rounded-lg mb-4;
}
.title {
@apply text-lg font-semibold text-hOnSecondary mb-2;
}
.content {
@apply text-base font-semibold text-hOnSurface flex flex-col w-full;
}
.action { .action {
@apply active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full; @apply active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full;
} }

33
frontend/src/views/profile/account/AliasDialog.vue
View File

@@ -1,10 +1,12 @@
<template> <template>
<v-card>
<v-card-title>
{{ $t('personnalinformation.alias') }}
</v-card-title>
<div class="m-4"> <div class="card">
<div class="card-title">
{{ $t('personnalinformation.alias') }}
</div>
<div class="card-entry">
<v-text-field <v-text-field
variant="outlined" variant="outlined"
v-model="alias" v-model="alias"
@@ -12,15 +14,22 @@
></v-text-field> ></v-text-field>
</div> </div>
<v-card-actions> <div class="card-actions">
<v-btn variant="plain" @click="requestClose">
<button class="secondary"
@click="requestClose">
Annuler Annuler
</v-btn> </button>
<v-btn color="#A6147D" @click="requestSave">
<button class="primary"
@click="requestSave">
Enregistrer Enregistrer
</v-btn> </button>
</v-card-actions>
</v-card> </div>
</div>
</template> </template>
<script setup> <script setup>

23
frontend/src/views/profile/account/EmailDialog.vue
View File

@@ -1,23 +1,28 @@
<template> <template>
<div class="pb-5 text-2xl">Courriel</div> <div class="card">
<div class="card-title">
Courriel
</div>
<div class="m-4"> <div class="card-entry">
<v-text-field <v-text-field
variant="outlined"
v-model="email" v-model="email"
label="Votre courriel" label="Votre courriel"
variant="outlined"
></v-text-field> ></v-text-field>
</div> </div>
<div class="flex justify-end space-x-4"> <div class="card-actions">
<v-btn color="black" variant="text" @click="cancel"> <button class="secondary"
@click="cancel">
Annuler Annuler
</v-btn> </button>
<v-btn color="#A6147D" @click="save"> <button class="primary"
@click="save">
Enregistrer Enregistrer
</v-btn> </button>
</div>
</div> </div>
</template> </template>
<script setup> <script setup>

33
frontend/src/views/profile/account/FullnameDialog.vue
View File

@@ -1,16 +1,19 @@
<template> <template>
<v-card>
<v-card-title>
{{ $t('personnalinformation.fullname') }}
</v-card-title>
<div class="m-4"> <div class="card">
<div class="card-title">
{{ $t('personnalinformation.fullname') }}
</div>
<div class="card-entry">
<v-text-field <v-text-field
variant="outlined" variant="outlined"
v-model="firstname" v-model="firstname"
:label="$t('personnalinformation.firstname')" :label="$t('personnalinformation.firstname')"
></v-text-field> ></v-text-field>
</div>
<div class="card-entry">
<v-text-field <v-text-field
variant="outlined" variant="outlined"
v-model="lastname" v-model="lastname"
@@ -18,15 +21,21 @@
></v-text-field> ></v-text-field>
</div> </div>
<v-card-actions> <div class="card-actions">
<v-btn variant="plain" @click="requestClose">
<button class="secondary"
@click="requestClose">
Annuler Annuler
</v-btn> </button>
<v-btn color="#A6147D" @click="requestSave">
<button class="primary"
@click="requestSave">
Enregistrer Enregistrer
</v-btn> </button>
</v-card-actions>
</v-card> </div>
</div>
</template> </template>
<script setup> <script setup>

30
frontend/src/views/profile/creators/ChangeStripeIdDialog.vue
View File

@@ -33,27 +33,33 @@ const cancel = () => {
</script> </script>
<template> <template>
<div class="pb-5 text-2xl">Modifier le Stripe ID</div> <div class="card">
<div class="flex flex-col space-y-4"> <div class="card-title">
Modifier le Stripe ID
</div>
<div class="card-entry">
<v-text-field <v-text-field
variant="outlined"
v-model="stripeId" v-model="stripeId"
label="Stripe Id" label="Stripe Id"
outlined outlined
variant="outlined"
></v-text-field> ></v-text-field>
<div class="flex justify-end space-x-4"> <div class="card-actions">
<v-btn color="black" variant="text" @click="cancel">Annuler</v-btn> <button class="secondary"
<v-btn color="#A6147D" @click="save">Enregistrer</v-btn> @click="cancel">
Annuler
</button>
<button class="primary"
@click="save">
Enregistrer
</button>
</div>
</div> </div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.flex {
display: flex;
}
.space-y-4 > * + * {
margin-top: 1rem;
}
</style> </style>

30
frontend/src/views/profile/creators/ChangeTitleDialog.vue
View File

@@ -36,28 +36,34 @@ const cancel = () => {
</script> </script>
<template> <template>
<div class="pb-5 text-2xl">Modifier le Titre</div> <div class="card">
<div class="flex flex-col space-y-4">
<div class="card-title">
Modifier le Titre
</div>
<div class="card-entry">
<v-text-field <v-text-field
variant="outlined"
v-model="title" v-model="title"
label="Titre" label="Titre"
outlined outlined
variant="outlined"
></v-text-field> ></v-text-field>
<div class="flex justify-end space-x-4"> <div class="card-actions">
<v-btn color="black" variant="text" @click="cancel">Annuler</v-btn> <button class="secondary"
<v-btn color="#A6147D" @click="save">Enregistrer</v-btn> @click="cancel">
Annuler
</button>
<button class="primary"
@click="save">
Enregistrer
</button>
</div>
</div> </div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.flex {
display: flex;
}
.space-y-4 > * + * {
margin-top: 1rem;
}
</style> </style>

59
frontend/src/views/profile/creators/SocialsDialog.vue
View File

@@ -67,70 +67,88 @@ const cancel = () => {
</style> </style>
<template> <template>
<div class="pb-5 text-2xl">Reseaux Sociaux</div>
<div class="card">
<div class="card-title">
Reseaux Sociaux
</div>
<div class="card-entry">
<div class="flex flex-row align-center"> <div class="flex flex-row align-center">
<v-icon class="mb-5 mr-2">mdi-facebook</v-icon> <v-icon class="mb-5 mr-2">mdi-facebook</v-icon>
<v-text-field <v-text-field
variant="outlined"
v-model="facebookUrl" v-model="facebookUrl"
label="Lien Facebook" label="Lien Facebook"
outlined outlined
variant="outlined"
></v-text-field> ></v-text-field>
</div> </div>
</div>
<div class="card-entry">
<div class="flex flex-row align-center"> <div class="flex flex-row align-center">
<v-icon class="mb-5 mr-2">mdi-instagram</v-icon> <v-icon class="mb-5 mr-2">mdi-instagram</v-icon>
<v-text-field <v-text-field
variant="outlined"
v-model="instagramUrl" v-model="instagramUrl"
label="Lien Instagram" label="Lien Instagram"
outlined outlined
variant="outlined"
></v-text-field> ></v-text-field>
</div> </div>
</div>
<div class="card-entry">
<div class="flex flex-row align-center"> <div class="flex flex-row align-center">
<v-icon class="mb-5 mr-2">mdi-linkedin</v-icon> <v-icon class="mb-5 mr-2">mdi-linkedin</v-icon>
<v-text-field <v-text-field
variant="outlined"
v-model="linkedInUrl" v-model="linkedInUrl"
label="Lien LinkedIn" label="Lien LinkedIn"
outlined outlined
variant="outlined"
></v-text-field> ></v-text-field>
</div> </div>
</div>
<div class="card-entry">
<div class="flex flex-row align-center"> <div class="flex flex-row align-center">
<v-icon class="mb-5 mr-2">mdi-reddit</v-icon> <v-icon class="mb-5 mr-2">mdi-reddit</v-icon>
<v-text-field <v-text-field
variant="outlined"
v-model="redditUrl" v-model="redditUrl"
label="Lien Reddit" label="Lien Reddit"
outlined outlined
variant="outlined"
></v-text-field> ></v-text-field>
</div> </div>
</div>
<div class="card-entry">
<div class="flex flex-row align-center"> <div class="flex flex-row align-center">
<div class="w-6 h-6 mb-5 mr-2"> <div class="w-6 h-6 mb-5 mr-2">
<XIcon></XIcon> <XIcon></XIcon>
</div> </div>
<v-text-field <v-text-field
variant="outlined"
v-model="tikTokUrl" v-model="tikTokUrl"
label="Lien TikTok" label="Lien TikTok"
outlined outlined
variant="outlined"
></v-text-field> ></v-text-field>
</div> </div>
</div>
<div class="card-entry">
<div class="flex flex-row align-center"> <div class="flex flex-row align-center">
<v-icon class="mb-5 mr-2">mdi-web</v-icon> <v-icon class="mb-5 mr-2">mdi-web</v-icon>
<v-text-field <v-text-field
variant="outlined"
v-model="websiteUrl" v-model="websiteUrl"
label="Lien site web" label="Lien site web"
outlined outlined
variant="outlined"
></v-text-field> ></v-text-field>
</div> </div>
</div>
<div class="card-entry">
<div class="flex flex-row align-center"> <div class="flex flex-row align-center">
<div class="w-6 h-6 mb-5 mr-2"> <div class="w-6 h-6 mb-5 mr-2">
@@ -138,25 +156,38 @@ const cancel = () => {
</div> </div>
<v-text-field <v-text-field
variant="outlined"
v-model="xUrl" v-model="xUrl"
label="Lien X" label="Lien X"
outlined outlined
variant="outlined"
></v-text-field> ></v-text-field>
</div> </div>
</div>
<div class="card-entry">
<div class="flex flex-row align-center"> <div class="flex flex-row align-center">
<v-icon class="mb-5 mr-2">mdi-youtube</v-icon> <v-icon class="mb-5 mr-2">mdi-youtube</v-icon>
<v-text-field <v-text-field
variant="outlined"
v-model="youtubeUrl" v-model="youtubeUrl"
label="Lien Youtube" label="Lien Youtube"
outlined outlined
variant="outlined"
></v-text-field> ></v-text-field>
</div> </div>
<div class="flex justify-end space-x-4">
<v-btn color="black" variant="text" @click="cancel">Annuler</v-btn>
<v-btn color="#A6147D" @click="save">Enregistrer</v-btn>
</div> </div>
<div class="card-actions">
<button class="secondary"
@click="cancel">
Annuler
</button>
<button class="primary"
@click="save">
Enregistrer
</button>
</div>
</div>
</template> </template>