noan.randon
/
Favor
3
2
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

profil

Browse Source
master
Zakariya SAOULA 2 years ago
parent 6e3b1aaaec
commit 78b94be1d5
4 changed files with 30263 additions and 3178 deletions
Show Stats Download Patch File Download Diff File

142
Site Web/client/src/pages/Profil.js
Unescape View File

@ -14,7 +14,7 @@ const Profil = () => {
return (
<>
<Navbar />
<main>
{/* <main>
<div id="bandeauProfil">
<h1 className='affichage-date'>Compte créé le : {dateParser(userData.createdAt)}</h1>
<div id="image">
@ -93,6 +93,146 @@ const Profil = () => {
</div>
</div>
</div>
</main> */}
<main>
<div>
<div>
<div class="imageProfil">
<img src={userData.picture}/>
</div>
<div class="divPseudo">
<h3 class="pseudo">{userData.pseudo}</h3>
{/* <h3>suuu</h3> */}
</div>
<div class="divSuivreFollowing">
<a href="#" class="button" id="button">Suivre +</a>
</div>
<div class="divSuivreFollowing">
<div class="nbFollow" onClick={() => setFollowingPopup(true)}>
<h4>{userData.following.length}</h4>
<h4 class="txtFollower">Abonnements</h4>
</div>
<div class="nbFollow" onClick={() => setFollowerPopup(true)}>
<h4>{userData.followers.length}</h4>
<h4 class="txtFollower">Abonnés</h4>
</div>
</div>
{followingPopup && (
<div className="popup-profil-container">
<div className="modal">
<h3>Abonnements</h3>
<span className="cross" onClick={() => setFollowingPopup(false)}>
&#10005;
</span>
<ul>
{usersData.map((user) => {
for (let i = 0; i < userData.following.length; i++) {
if (user._id === userData.following[i]) {
return (
<li key={user._id}>
<img src={user.picture} alt="user-pic" />
<h4>{user.pseudo}</h4>
<div className="follow-handler">
<FollowHandler idToFollow={user._id} type={'card'}/>
</div>
</li>
);
}
}
return null;
})}
</ul>
</div>
</div>
)}
{followerPopup && (
<div className="popup-profil-container">
<div className="modal">
<h3>Abonnés</h3>
<span className="cross" onClick={() => setFollowerPopup(false)}>
&#10005;
</span>
<ul>
{usersData.map((user) => {
for (let i = 0; i < userData.followers.length; i++) {
if (user._id === userData.followers[i]) {
return (
<li key={user._id}>
<img src={user.picture} alt="user-pic" />
<h4>{user.pseudo}</h4>
<div className="follow-handler">
<FollowHandler idToFollow={user._id} type={'card'} />
</div>
</li>
);
}
}
return null;
})}
</ul>
</div>
</div>
)}
</div>
<div class="basDePage">
<div class="divMenu">
<div>
<nav role="navigation" class="navProfil">
<ul class="navItemsProfil">
<li class="navItemProfil">
<a href="#" class="navLinkProfil" ><span>Dossier Personnel</span></a>
</li>
<li class="navItemProfil">
<a href="#" class="navLinkProfil"><span>Posts</span></a>
</li>
<li class="navItemProfil">
<a href="#" class="navLinkProfil"><span>Posts likés</span></a>
</li>
</ul>
</nav>
</div>
<div class="menuContent">
<div class="listContent">
<span>suu</span>
</div>
</div>
</div>
<div class="recoDiv">
<div class="reco">
<span>Vous pourriez suivre</span>
<hr/>
<div class="ListReco">
<div class="UtiReco">
<img src="https://ionicframework.com/docs/img/demos/avatar.svg"/>
<span>UtiT</span>
<a href="#" class="buttonReco" id="button">Suivre</a>
</div>
<div class="UtiReco">
<img src="https://ionicframework.com/docs/img/demos/avatar.svg"/>
<span>UtiT</span>
<a href="#" class="buttonReco" id="button">Suivre</a>
</div>
<div class="UtiReco">
<img src="https://ionicframework.com/docs/img/demos/avatar.svg"/>
<span>UtiT</span>
<a href="#" class="buttonReco" id="button">Suivre</a>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</>

293
Site Web/client/src/styles/pages/_profil.scss
Unescape View File

@ -1,44 +1,44 @@
#PhotoProfile{
display: block;
margin-left: auto;
margin-right: auto;
width: 150px;
height:150px;
border-radius: 80px;
border: 2px solid #555;
}
// #PhotoProfile{
// display: block;
// margin-left: auto;
// margin-right: auto;
// width: 150px;
// height:150px;
// border-radius: 80px;
// border: 2px solid #555;
// }
#blocAbonnement{
display: flex;
justify-content: center;
// #blocAbonnement{
// display: flex;
// justify-content: center;
}
#blocAbonnement .bloc-aboonnements-abonner{
margin-left: 80px;
margin-right: 80px;
}
// }
// #blocAbonnement .bloc-aboonnements-abonner{
// margin-left: 80px;
// margin-right: 80px;
// }
#blocName{
text-align: center;
}
// #blocName{
// text-align: center;
// }
.affichage-date{
font-size: 15px;
}
// .affichage-date{
// font-size: 15px;
// }
.nombre{
color:black;
}
// .nombre{
// color:black;
// }
.texteNombre{
color:white;
}
// .texteNombre{
// color:white;
// }
#bandeauProfil{
background-color: #D9D9D9;
margin-top: 50px;
}
// #bandeauProfil{
// background-color: #D9D9D9;
// margin-top: 50px;
// }
.popup-profil-container {
z-index: 100;
@ -145,3 +145,230 @@
}
}
}
.navProfil {
margin: 0% 0 0% 4%;
padding-top: 0.5%;
}
/* Navigation */
.navProfil {
font-family: Georgia, Arial, sans-serif;
font-size: 14px;
}
.navItemsProfil {
padding-top: 2%;
padding-bottom: 2%;
list-style: none;
}
.navItemProfil {
display: inline-block;
margin-right: 25px;
}
.navLinkProfil,
.navLinkProfil:link,
.navLinkProfil:visited,
.navLinkProfil:active {
display: block;
position: relative;
font-size: 14px;
letter-spacing: 1px;
cursor: pointer;
text-decoration: none;
outline: none;
}
.navLinkProfil,
.navLinkProfil:link,
.navLinkProfil:visited,
.navLinkProfil:active {
color: black;
font-weight: bold;
}
.navLinkProfil::before {
content: "";
position: absolute;
top: 100%;
left: 0;
width: 100%;
height: 3px;
background: rgba(0,0,0,0.2);
opacity: 0;
-webkit-transform: translate(0, 10px);
transform: translate(0, 10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.navLinkProfil:hover::before,
.navLinkProfil:hover::before {
opacity: 1;
-webkit-transform: translate(0, 5px);
transform: translate(0, 5px);
}
img {
margin-top: 1%;
border-radius: 100%;
width: 10%;
}
.imageProfil{
display: flex;
justify-content: center;
}
.flex-menu {
display:flex;
justify-content: center;
}
.flex-menu li:not(:last-child) {
margin-right:40px;
}
.divSuivreFollowing {
display: flex;
justify-content: center;
padding-bottom: 1%;
}
.nbFollow {
margin: 0% 8% 0% 5%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-bottom: 3%;
}
.nbFollow h4 {
margin: 5% 0% 0% 0%;
display: flex;
justify-content: center;
font-weight: bold;
}
// h3 {
// margin: 0%;
// }
// h4 {
// margin: 40% 0% 0% 0%;
// display: flex;
// justify-content: center;
// font-weight: bold;
// }
.pseudo {
margin:1% 0% 0% 0%;
}
.divPseudo {
display: grid;
justify-items: center;
}
/* * {
padding:0;
margin:0;
} */
// .txtFollower {
// display: flex;
// justify-content: center;
// margin: 0%;
// padding: 0% 0% 20% 0%;
// }
.button {
padding: 0.5% 0.5%;
border-radius: 10%;
background: #19104f;
text-decoration: none;
color: white;
font-size: 16px;
letter-spacing: .08em;
margin-top: 1%;
}
.buttonReco {
padding-top: 1.5%;
border-radius: 10%;
background: #19104f;
text-decoration: none;
color: white;
font-size: 13px;
letter-spacing: .08em;
margin-top: 1%;
}
.divMenu {
margin: 0%;
background-color: #cccaca;
width: 75%;
height: 500px;
border-radius: 25px;
}
.menuContent{
background-color: #8c8c8e;
margin: 0% 0% 0% 2.5%;
border-radius: 25px;
width: 95%;
height: 85%;
}
.reco{
background-color: #a8a8a8;
margin: 0% 0% 0% 2.5%;
border-radius: 25px;
width: 100%;
height: 300px;
}
.reco span{
display: flex;
justify-content: center;
padding-top: 3%;
}
.listContent {
/* display: flex;
justify-content: center; */
padding-left: 2.5%;
padding-top: 2.5%;
}
.basDePage {
display: flex;
flex-direction: row ;
justify-content: space-around;
}
.recoDiv {
width: 20%;
}
.UtiReco {
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding: 5% 0% 0% 0%;
}
.ListReco {
display: flex;
flex-direction: column;
align-content: space-around;
}
// div {
// border: 5px ridge;
// }

33409
Site Web/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

13
Site Web/package.json
Unescape View File

@ -10,17 +10,26 @@
"author": "",
"license": "ISC",
"dependencies": {
"axios": "^1.1.3",
"@reduxjs/toolkit": "^1.9.1",
"axios": "^1.2.2",
"bcrypt": "^5.1.0",
"body-parser": "^1.20.1",
"cookie-parser": "^1.4.6",
"cors": "^2.8.5",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"js-cookie": "^3.0.1",
"jsonwebtoken": "^8.5.1",
"mongoose": "^6.6.6",
"multer": "^1.4.5-lts.1",
"nodemon": "^2.0.20",
"validator": "^13.7.0"
"react-dom": "^18.2.0",
"react-redux": "^8.0.5",
"react-router-dom": "^6.6.1",
"react-scripts": "^5.0.1",
"sass": "^1.57.1",
"tachyons": "^4.12.0",
"validator": "^13.7.0",
"web-vitals": "^3.1.0"
}
}

Write Preview
Loading…
Cancel
Save