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

Side menu interaction added, condition of use moved.

Browse Source
This commit is contained in:
PascalMarchesseault
2024-06-26 02:43:10 -04:00
parent 3d17e163e6
commit e734f0f839
6 changed files with 277 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
src/views/manualusers/ARPS.vue
View File

@@ -1,9 +1,9 @@
<template>
<!-- Bannière-->
<div class="z-20">
<div class="relative bottom-4 z-20 m">
<div class="relative flex flex-col">
<!-- Social Network-->
<div class="bg-black bg-opacity-50 flex flex-col md:flex-row items-center justify-between py-2 px-4">
<div class="bg-black bg-opacity-50 flex flex-col md:flex-row items-center justify-between py-2 px-4 min-h-24">
<div class="text-white mb-2 md:mb-0 w-full md:w-auto flex justify-between md:block">
<div class="text-lg">1000+ Abonnés</div>
<div class="text-sm">500 Contacts en commun</div>
@@ -35,13 +35,14 @@
</a>
</div>
</div>
</div>
</div>
<!--Banner & user info-->
<div class="relative">
<!--Banner-->
<div>
<img class="w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]" :src="imageSrc" alt="Profile Banner">
<img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]" :src="imageSrc" alt="Profile Banner">
</div>
<!--User info -->
<div class="absolute top-1/2 right-10 text-white z-30 transform -translate-y-1/2">
@@ -55,17 +56,18 @@
</div>
<!-- Actions Button & image profile -->
<div class="w-full ">
<div class="relative bottom-4 w-full">
<div class="bg-gray-800 py-4 relative shadow-lg" style="background-color: #24120E">
<div class=" flex flex-col sm:flex-row items-center sm:justify-between">
<div class="flex flex-col sm:flex-row items-center sm:justify-between">
<img
class=" left-5 rounded-full border-solid border-2 sm:absolute sm:top-1/2 sm:transform sm:-translate-y-1/2 md:left-20 z-30"
class="left-5 rounded-full border-solid border-2 sm:absolute sm:top-1/2 sm:transform sm:-translate-y-1/2 md:left-20 z-20"
:src="profilePicture"
alt="Profile Picture"
style="border-color: rgb(70, 37, 24); max-width: 250px; width: 100%;">
<div class="flex flex-wrap sm:flex-nowrap items-center mt-4 sm:mt-0 sm:ml-auto space-x-2 sm:space-x-4">
<button
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125">
class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125"
@click="isDialogActive = true">
<v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-text-box-plus-outline</v-icon>
</button>
<button class="text-white py-2 px-4 rounded"
@@ -88,22 +90,81 @@
<CreatorFeed></CreatorFeed>
<!--Post-modale-->
<v-dialog v-model="isDialogActive" max-width="500">
<template v-slot:default="{ isActive }">
<v-card class="text-center rounded-xl">
<div class="text-white p-4 rounded-t" style="background-color: #110E0F">
<h2>Publication</h2>
</div>
<v-card-text class="bg">
<v-row class="justify-center mb-4">
<v-col class="d-flex align-center justify-end">
<v-btn :class="{'v-btn--active': !isArticle}" @click="togglePostType(false)">QUICKY</v-btn>
</v-col>
<v-col class="d-flex align-center justify-start">
<v-btn :class="{'v-btn--active': isArticle}" @click="togglePostType(true)">ARTICLE</v-btn>
</v-col>
</v-row>
<v-textarea label="Écrivez votre message ici..." v-model="message" outlined></v-textarea>
<v-file-input
label="Ajoutez des fichiers"
v-model="files"
outlined
multiple
dropzone
placeholder="Glissez et déposez des fichiers ici ou cliquez pour sélectionner des fichiers"
></v-file-input>
</v-card-text>
<v-card-actions class="justify-end">
<v-btn color="primary" @click="publishPost">Publier</v-btn>
<v-btn color="primary" @click="cancelPost">Annuler</v-btn>
</v-card-actions>
</v-card>
</template>
</v-dialog>
</template>
<script setup>
import CreatorFeed from "@/views/main/CreatorFeed.vue";
import {ref} from 'vue';
let imageSrc = '/images/usersmedia/ARPS/banners/bannerARPS01.png';
let profilePicture = '/images/usersmedia/ARPS/profilepictures/profileARPS.png';
let isDialogActive = ref(false);
let message = ref('');
let files = ref([]);
let isArticle = ref(false);
const publishPost = () => {
// Logic to publish post
console.log('Post published:', message.value, files.value);
isDialogActive.value = false;
resetPostForm();
};
const cancelPost = () => {
isDialogActive.value = false;
resetPostForm();
};
const resetPostForm = () => {
message.value = '';
files.value = [];
};
const togglePostType = (article) => {
isArticle.value = article;
};
</script>
<style scoped>
.shadow-lg {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);
}
</style>
.v-btn--active {
background-color: #1976D2;
color: white;
}
</style>