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

css mini profil
continuous-integration/drone/push Build encountered an error Details

Browse Source
master
Bastien OLLIER 2 years ago
parent 50b4bd747b
commit 85c9a3f54c
8 changed files with 109 additions and 101 deletions
Show Stats Download Patch File Download Diff File

10
Site Web/client/src/components/MiniProfil.js
Unescape View File

@ -22,10 +22,12 @@ const MiniProfil = ({uid} ) => {
}
return (
<div className="ListReco">
<div className="UtiReco">
<img className="image" src={userData.picture.data}/>
<a href={`/Profil/${uid}`}>{userData.pseudo}</a>
<div className="miniProfil">
<div className="infoMiniProfil">
<img className="miniProfilImage" src={userData.picture.data}/>
</div>
<div className="infoMiniProfil">
<a className="miniProfilLien" href={`/Profil/${uid}`}>{userData.pseudo}</a>
</div>
</div>
);

4
Site Web/client/src/components/UserProfil/SuggestFriends.js
Unescape View File

@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { isEmpty } from '../Utils';
import FollowHandler from './FollowHandler';
import MiniProfil from "../MiniProfil";
const SuggestFriends = () => {
const userData = useSelector((state) => state.user.user);
@ -79,8 +80,7 @@ const SuggestFriends = () => {
if(user === usersData[i]._id){
return (
<div className="UtiReco" key={user}>
<img src={usersData[i].picture} alt="img"/>
<p>{usersData[i].pseudo}</p>
<MiniProfil uid={usersData[i]._id}></MiniProfil>
<FollowHandler idToFollow={usersData[i]._id} type={"card"}/>
</div>
);

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

@ -1,4 +1,4 @@
import React,{useEffect, useState} from 'react';
import React, {useContext, useEffect, useState} from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { useParams } from 'react-router-dom'
@ -9,15 +9,19 @@ import PostPersonnels from '../components/UserProfil/NavigationProfil/PostsPerso
import DossierPersonnels from '../components/UserProfil/NavigationProfil/DossiersPersonnels';
import PostsLikes from '../components/UserProfil/NavigationProfil/PostsLikes';
import MiniProfil from "../components/MiniProfil";
import SuggestFriends from "../components/UserProfil/SuggestFriends";
import {UidContext} from "../components/AppContext";
const Profil = () => {
const { uid } = useParams();
const [userData, setUserData] = useState(null);
const [followingPopup, setFollowingPopup] = useState(false);
const [uidS, setUidS] = useState(false);
const [followerPopup, setFollowerPopup] = useState(false);
const [dossierPersonnels,setdossierPersonnels ] = useState(false);
const [postPersonnels,setpostPersonnels ] = useState(true);
const [postLikes,setpostLikes ] = useState(false)
const [postLikes,setpostLikes ] = useState(false);
const uidU= useContext(UidContext);
useEffect(() => {
async function fetchData() {
@ -26,6 +30,9 @@ const Profil = () => {
setUserData(data);
}
fetchData();
if(uidU === uid){
setUidS(true);
}
}, [uid]);
@ -50,8 +57,8 @@ const Profil = () => {
}
return (
<>
<Navbar />
<div>
<Navbar />
{/* <main>
<div id="bandeauProfil">
<h1 classNameName='affichage-date'>Compte créé le : {dateParser(userData.createdAt)}</h1>
@ -134,8 +141,8 @@ const Profil = () => {
</div>
</main> */}
<main>
<div>
<main>
<div>
<div>
<div className="imageProfil">
<img className="image" src={userData.picture}/>
@ -145,7 +152,7 @@ const Profil = () => {
{/* <h3>suuu</h3> */}
</div>
<div className="divSuivreFollowing">
<a href="#" className="button" id="button">Suivre +</a>
{ uidS && <a href="#" className="button" id="button">Suivre +</a>}
</div>
<div className="divSuivreFollowing">
<div className="nbFollow" onClick={() => setFollowingPopup(true)}>
@ -211,7 +218,7 @@ const Profil = () => {
<div className="basDePage">
<div className="divMenu">
<div className="divMenu">
<div>
<nav role="navigation" className="navProfil">
<ul className="navItemsProfil">
@ -223,52 +230,25 @@ const Profil = () => {
</li>
<li className="navItemProfil">
<a className="navLinkProfil" id='PostsLikes' onClick={handleModals}>Posts likés</a>
</li>
</li>
</ul>
</nav>
</div>
<div className="menuContent">
<div className="listContent">
{dossierPersonnels &&<DossierPersonnels/>}
{postPersonnels &&<PostPersonnels/>}
{postLikes &&<PostsLikes/>}
{dossierPersonnels &&<DossierPersonnels/>}
{postPersonnels &&<PostPersonnels/>}
{postLikes &&<PostsLikes/>}
</div>
</div>
</div>
<div className="recoDiv">
<div className="reco">
<span>Vous pourriez suivre</span>
<hr/>
<div className="ListReco">
<div className="UtiReco">
<img className="image" src="https://ionicframework.com/docs/img/demos/avatar.svg"/>
<span>UtiT</span>
<a href="#" className="buttonReco" id="button">Suivre</a>
</div>
<div className="UtiReco">
<img className="image" src="https://ionicframework.com/docs/img/demos/avatar.svg"/>
<span>UtiT</span>
<a href="#" className="buttonReco" id="button">Suivre</a>
</div>
<div className="UtiReco">
<img className="image" src="https://ionicframework.com/docs/img/demos/avatar.svg"/>
<span>UtiT</span>
<a href="#" className="buttonReco" id="button">Suivre</a>
</div>
</div>
</div>
<div>
{uid && <SuggestFriends />}
</div>
</div>
</div>
</main>
</>
</div>
</main>
</div>
)
};

94
Site Web/client/src/pages/SearchBar.js
Unescape View File

@ -3,6 +3,7 @@ import { useSelector } from 'react-redux';
import Navbar from '../components/Navbar';
import Post from '../components/Post/Post';
import { isEmpty } from '../components/Utils';
import MiniProfil from "../components/MiniProfil";
const SearchBar = () => {
const [searchValue, setSearchValue] = useState("");
@ -12,7 +13,6 @@ const SearchBar = () => {
const posts = useSelector((state) => state.post.post);
const users = useSelector((state) => state.users.users);
const filteredResultsPosts = posts.filter(function(item) {
return item.tags.some(function(tag) {
return tag.toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
@ -31,9 +31,9 @@ const SearchBar = () => {
console.log("Recherche pour : " + input);
if(searchUsers && searchValue !== "")
setSearchResults(filteredResultsUsers);
setSearchResults(filteredResultsUsers);
else if(searchPosts && searchValue !== "")
setSearchResults(filteredResultsPosts);
setSearchResults(filteredResultsPosts);
}
const handleModals = (e) => {
@ -41,54 +41,60 @@ const SearchBar = () => {
setSearchUsers(true);
setSearchPosts(false);
if(searchValue !== "")
setSearchResults(filteredResultsUsers);
setSearchResults(filteredResultsUsers);
} else {
setSearchPosts(true);
setSearchUsers(false);
if(searchValue !== "")
setSearchResults(filteredResultsPosts);
setSearchResults(filteredResultsPosts);
}
};
return (
<div>
<Navbar />
<main>
<div className="search-main">
<form>
<input type="text" value={searchValue} onChange={(e) => setSearchValue(e.target.value)} placeholder="Rechercher..." />
<button type="button" onClick={handleSearch}>Rechercher</button>
</form>
<div className="divMenuSearch">
<nav role="navigation" className="navProfil">
<ul className="navItemsProfil">
<li className="navItemProfil">
<a className="navLinkProfil" onClick={handleModals} id="Users" >Utilisateur</a>
</li>
<li className="navItemProfil">
<a className="navLinkProfil" onClick={handleModals} id="Posts" >Postes</a>
</li>
</ul>
</nav>
{ searchUsers &&
<ul className='listUsers'>
{searchResults.map((result) => (
<li key={result.pseudo}>{result.pseudo}</li>
))}
</ul>
}
{ searchPosts &&
<ul className='listUsers'>
{searchResults.length !== 0 && searchResults.map((result) => (
<Post post={result} key={result._id}/>
))}
</ul>
}
</div>
</div>
</main>
</div>
);
try {
return (
<div>
<Navbar/>
<main>
<div className="search-main">
<form>
<input type="text" value={searchValue} onChange={(e) => setSearchValue(e.target.value)}
placeholder="Rechercher..."/>
<button type="button" onClick={handleSearch}>Rechercher</button>
</form>
<div className="divMenuSearch">
<nav role="navigation" className="navProfil">
<ul className="navItemsProfil">
<li className="navItemProfil">
<a className="navLinkProfil" onClick={handleModals} id="Users">Utilisateur</a>
</li>
<li className="navItemProfil">
<a className="navLinkProfil" onClick={handleModals} id="Posts">Postes</a>
</li>
</ul>
</nav>
{searchUsers &&
<ul className='listUsers'>
{searchResults.map((result) => (
<MiniProfil key={result._id} uid={result._id}></MiniProfil>
))}
</ul>
}
{searchPosts &&
<ul className='listUsers'>
{searchResults.length !== 0 && searchResults.map((result) => (
<Post post={result} key={result._id}/>
))}
</ul>
}
</div>
</div>
</main>
</div>
);
}
catch (error){
return <p>Loading...</p>;
}
};
export default SearchBar;

1
Site Web/client/src/styles/_settings.scss
Unescape View File

@ -39,6 +39,5 @@ body{
width: 180px;
height: 180px;
clip-path:circle(50%);
}

21
Site Web/client/src/styles/component/_miniProfil.scss
Unescape View File

@ -0,0 +1,21 @@
.miniProfil{
display: flex;
align-content: start;
}
.infoMiniProfil{
margin-left: 10px;
}
.miniProfilLien{
}
.miniProfilImage{
object-fit: cover;
background-size: cover;
width: 25px;
height: 25px;
clip-path:circle(50%);
}

3
Site Web/client/src/styles/index.scss
Unescape View File

@ -9,7 +9,8 @@
@import'./component/configurationDuCompte.scss';
@import'./component/politiqueDeConfidentialite';
@import './component/newPoste';
@import'./component/postNouvelleAffichage';
@import './component/postNouvelleAffichage';
@import './component/miniProfil';
@import './pages/searchBar';

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

@ -313,7 +313,7 @@ margin-top: 1%;
.divMenu {
margin: 0%;
background-color: #cccaca;
width: 75%;
width: 1000px;
height: 500px;
border-radius: 25px;
}
@ -351,14 +351,13 @@ scrollbar-gutter: stable both-edges;
}
.basDePage {
display: flex;
flex-direction: row ;
justify-content: space-around;
display: flex;
justify-content: space-between;
}
.recoDiv {
width: 20%;
width: 250px;
}
.UtiReco {

Write Preview
Loading…
Cancel
Save