From 08f8f55b74123bb18e56c8b10d8dce023f059389 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chlo=C3=A9=20JACOB?= <chloe.jacob4@etu.unistra.fr>
Date: Wed, 1 Mar 2023 09:22:27 +0100
Subject: [PATCH] quelques modifications
---
src/assets/locales/en/common.json | 2 +-
src/assets/locales/fr/common.json | 2 +-
src/components/Post.tsx | 4 +-
src/components/Suggestion.tsx | 6 +--
src/views/AddPostView.tsx | 88 ++++++++++++++++---------------
src/views/DiscoverView.tsx | 4 +-
src/views/FeedView.tsx | 8 +--
src/views/PostView.tsx | 2 +-
src/views/Profile.tsx | 16 +++---
9 files changed, 67 insertions(+), 65 deletions(-)
diff --git a/src/assets/locales/en/common.json b/src/assets/locales/en/common.json
index d0ff8e8..a7b177c 100644
--- a/src/assets/locales/en/common.json
+++ b/src/assets/locales/en/common.json
@@ -1,6 +1,6 @@
{
"languages": {
- "aaa": "EN",
+ "actual": "English version\u00A0!",
"french": "french",
"english": "english"
},
diff --git a/src/assets/locales/fr/common.json b/src/assets/locales/fr/common.json
index a2b1e9b..72cb8dc 100644
--- a/src/assets/locales/fr/common.json
+++ b/src/assets/locales/fr/common.json
@@ -1,6 +1,6 @@
{
"languages": {
- "aaa": "FR",
+ "actual": "Version française\u00A0!",
"french": "français",
"english": "anglais"
},
diff --git a/src/components/Post.tsx b/src/components/Post.tsx
index 0f0f3e0..f8b31a1 100644
--- a/src/components/Post.tsx
+++ b/src/components/Post.tsx
@@ -52,7 +52,7 @@ async function copyLink(text: string) {
return <>
{/* A POST */}
-<div className="border rounded-xl bg-white dark:bg-darkblue">
+<div className="border rounded-xl bg-white dark:bg-darkblue overflow-hidden">
{/* HEADER POST */}
<div className="flex justify-between p-4 items-center">
<div className="flex items-center gap-4">
@@ -84,7 +84,7 @@ return <>
</div>
<div className="relative">
{/* ICON */}
- <div className="w-10 flex justify-center items-center cursor-pointer" onClick={() => setDropdownOpen(!dropdownOpen)}>
+ <div className="w-5 md:w-10 flex justify-center items-center cursor-pointer" onClick={() => setDropdownOpen(!dropdownOpen)}>
<FontAwesomeIcon className="text-[22px]" icon={faEllipsisVertical} />
</div>
{/* DROPDOWN */}
diff --git a/src/components/Suggestion.tsx b/src/components/Suggestion.tsx
index cf05bc7..3f19fea 100644
--- a/src/components/Suggestion.tsx
+++ b/src/components/Suggestion.tsx
@@ -22,9 +22,9 @@ return <>
{/* USER / STORY */}
<li className="flex flex-col items-center">
<div className="relative">
- <div className="bg-gray-400 flex items-center justify-center rounded-full overflow-hidden w-24 h-24">
+ <div className="bg-gray-400 flex items-center justify-center rounded-full overflow-hidden w-16 md:w-24 h-16 md:h-24">
{/* <img src="/src/assets/images/pp_user.png" alt="" /> */}
- <p className="uppercase text-white text-[38px]">{user.firstName.charAt(0)}</p>
+ <p className="uppercase text-white text-2xl md:text-[38px]">{user.firstName.charAt(0)}</p>
</div>
{user.isFollowedByViewer ? (
<button className="px-2 py-[7px] text-2xl rounded-full bg-blue-200 flex items-center justify-center absolute right-0 bottom-0" onClick={() => {
@@ -38,7 +38,7 @@ return <>
dispatch(followUserSuggestionAsync(user));
}}
>
- <FontAwesomeIcon className="text-[14px]" icon={faPlus} />
+ <FontAwesomeIcon className="text-[10px] md:text-sm" icon={faPlus} />
</button>
)}
</div>
diff --git a/src/views/AddPostView.tsx b/src/views/AddPostView.tsx
index 902d3eb..5d4ede8 100644
--- a/src/views/AddPostView.tsx
+++ b/src/views/AddPostView.tsx
@@ -39,50 +39,52 @@ const AddPostView = () => {
{/* HEADER */}
<Navbar />
{/* MODAL */}
- <div className="max-w-[640px] mx-auto p-6 border rounded-xl mt-10 flex flex-col">
- <p className="text-center font-bold text-2xl">{t('addpost.title')}</p>
- <form className="flex flex-col gap-4 mt-6" onSubmit={(event)=> {
- event.preventDefault();
- dispatch(addPost(selectedImg, location, caption)); //ajouter les autres éléments (accessibilityCaption, hasCommentsDisabled) ?
- }}>
- {/* IMAGE */}
- <div className="flex flex-col gap-1">
- <label htmlFor="image-upload" className="font-bold">{t('addpost.image')} :</label>
- <input type="file" accept="image/*" id="image-upload" onChange={(test)=> {
- if (test.target.files) {
- setSelectedImg(selectedImg.concat(test.target.files[0]));
- }
- }}
- />
- </div>
- {/* LOCATION */}
- <div className="flex flex-col gap-1">
- <label htmlFor="location-input" className="font-bold">{t('addpost.place')} :</label>
- <input className="h-10 p-2 rounded-sm border dark:text-darkblue" id="location-input" placeholder="Lieu" value={location} onChange={(e)=>
- setLocation(e.target.value)} />
- </div>
- {/* DESCRIPTION */}
- <div className="flex flex-col gap-1">
- <label htmlFor="caption-input" className="font-bold">{t('addpost.caption')} :</label>
- <input className="h-10 p-2 rounded-sm border dark:text-darkblue" id="caption-input" placeholder="Description" value={caption} onChange={(e)=>
- setCaption(e.target.value)} />
- </div>
- {/* BTNS */}
- <div className="grid grid-cols-2 gap-4 mt-6">
- {/* CANCEL BTN */}
- <Link to="/feed">
- <button
- className="bg-red-600 text-white font-bold h-10 rounded-md mt-2 uppercase w-full">{t('actions.cancel')}</button>
- </Link>
- {/* SUBMIT BTN */}
- <button className="bg-green-700 text-white font-bold h-10 rounded-md mt-2 uppercase w-full" type="submit">
- {t('actions.send')}
- </button>
- </div>
- </form>
+ <div className="max-w-[640px] px-4 mx-auto">
+ <div className="p-6 border rounded-xl mt-10 flex flex-col">
+ <p className="text-center font-bold text-2xl">{t('addpost.title')}</p>
+ <form className="flex flex-col gap-4 mt-6" onSubmit={(event)=> {
+ event.preventDefault();
+ dispatch(addPost(selectedImg, location, caption)); //ajouter les autres éléments (accessibilityCaption, hasCommentsDisabled) ?
+ }}>
+ {/* IMAGE */}
+ <div className="flex flex-col gap-1">
+ <label htmlFor="image-upload" className="font-bold">{t('addpost.image')} :</label>
+ <input type="file" accept="image/*" id="image-upload" onChange={(test)=> {
+ if (test.target.files) {
+ setSelectedImg(selectedImg.concat(test.target.files[0]));
+ }
+ }}
+ />
+ </div>
+ {/* LOCATION */}
+ <div className="flex flex-col gap-1">
+ <label htmlFor="location-input" className="font-bold">{t('addpost.place')} :</label>
+ <input className="h-10 p-2 rounded-sm border dark:text-darkblue" id="location-input" placeholder="Lieu" value={location} onChange={(e)=>
+ setLocation(e.target.value)} />
+ </div>
+ {/* DESCRIPTION */}
+ <div className="flex flex-col gap-1">
+ <label htmlFor="caption-input" className="font-bold">{t('addpost.caption')} :</label>
+ <input className="h-10 p-2 rounded-sm border dark:text-darkblue" id="caption-input" placeholder="Description" value={caption} onChange={(e)=>
+ setCaption(e.target.value)} />
+ </div>
+ {/* BTNS */}
+ <div className="grid grid-cols-2 gap-4 mt-6">
+ {/* CANCEL BTN */}
+ <Link to="/feed">
+ <button
+ className="bg-red-600 hover:bg-red-800 text-white font-bold h-10 rounded-md mt-2 uppercase w-full">{t('actions.cancel')}</button>
+ </Link>
+ {/* SUBMIT BTN */}
+ <button className="bg-green-700 hover:bg-green-900 text-white font-bold h-10 rounded-md mt-2 uppercase w-full" type="submit">
+ {t('actions.send')}
+ </button>
+ </div>
+ </form>
- {redirect &&
- <Navigate to={'post/' + post.id} replace={true} />}
+ {redirect &&
+ <Navigate to={'post/' + post.id} replace={true} />}
+ </div>
</div>
</>
diff --git a/src/views/DiscoverView.tsx b/src/views/DiscoverView.tsx
index de7c808..880664e 100644
--- a/src/views/DiscoverView.tsx
+++ b/src/views/DiscoverView.tsx
@@ -60,9 +60,9 @@ return <>
) : (
<div className="flex flex-col items-center gap-4 mt-20">
<FontAwesomeIcon className="text-[96px]" icon={faCompass} />
- <p className="font-bold text-xl">Votre discover est vide...</p>
+ <p className="font-bold text-xl text-center">Votre discover est vide...</p>
<p className="text-center">Ajouter un post pour remplir votre discover !</p>
- <button className="bg-gray-400 text-white font-bold h-10 rounded-md py-2 px-4">
+ <button className="bg-gray-400 hover:bg-gray-600 text-white font-bold h-10 rounded-md py-2 px-4">
<Link to="/addpost">Ajouter un post</Link>
</button>
</div>
diff --git a/src/views/FeedView.tsx b/src/views/FeedView.tsx
index ffd83b9..80c4c04 100644
--- a/src/views/FeedView.tsx
+++ b/src/views/FeedView.tsx
@@ -51,7 +51,7 @@ return <>
{/* FEEDVIEW */}
<div className="max-w-[640px] mx-auto mt-8 mb-16 px-4">
{/* USERS / STORIES */}
- <ul className="flex gap-8">
+ <ul className="flex flex-wrap justify-center gap-8">
{/* USER / STORY */}
{suggestionItems && //ici
suggestionItems.map((user) => {
@@ -91,9 +91,9 @@ return <>
) : (
<div className="flex flex-col items-center gap-4 mt-20">
<FontAwesomeIcon className="text-[96px]" icon={faHouse} />
- <p className="font-bold text-xl">Votre feed est vide...</p>
- <p>Vous devriez suivre des utilisateurs pour remplir votre feed !</p>
- <button className="bg-gray-400 text-white font-bold h-10 rounded-md py-2 px-4">
+ <p className="font-bold text-xl text-center">Votre feed est vide...</p>
+ <p className="text-center">Vous devriez suivre des utilisateurs pour remplir votre feed !</p>
+ <button className="bg-gray-400 hover:bg-gray-600 text-white font-bold h-10 rounded-md py-2 px-4">
<Link to="/discover">Découvrir des posts</Link>
</button>
</div>
diff --git a/src/views/PostView.tsx b/src/views/PostView.tsx
index 2beb93f..836eafc 100644
--- a/src/views/PostView.tsx
+++ b/src/views/PostView.tsx
@@ -32,7 +32,7 @@ const PostView = () => {
<div className="h-full">
{/* HEADER */}
<Navbar />
- <div className="max-w-[640px] mx-auto py-16 px-4">
+ <div className="max-w-[640px] mx-auto py-10 md:py-16 px-4">
{/* A POST */}
{post && (
<Post post={post} key={post.id}
diff --git a/src/views/Profile.tsx b/src/views/Profile.tsx
index 2f3f777..8c0d831 100644
--- a/src/views/Profile.tsx
+++ b/src/views/Profile.tsx
@@ -35,14 +35,14 @@ return <>
<div className="flex flex-col gap-[30px] sm:gap-4">
<div className="flex gap-5 justify-center items-center">
<p className="text-xl">Chloé</p>
- <button className="bg-red-500 text-white font-bold h-10 rounded-md py-2 px-4" onClick={() => {
+ <button className="bg-red-600 hover:bg-red-800 text-white font-bold h-10 rounded-md py-2 px-4" onClick={() => {
dispatch(logoutAsync());
}}>Se déconnecter</button>
</div>
<div className="flex gap-10">
<div className="flex flex-col items-center">
<p>XX</p>
- <p>publications</p>
+ <p>posts</p>
</div>
<div className="flex flex-col items-center">
<p>XX</p>
@@ -56,25 +56,25 @@ return <>
</div>
</div>
{/* CHANGEMENT DE LANGUE */}
- <div className="flex gap-10 mt-10">
- <button className="bg-blue-500 text-white font-bold h-10 rounded-md mt-2 py-2 px-4"
+ <div className="flex flew-wrap gap-10 mt-10">
+ <button className="bg-blue-500 text-white font-bold h-10 rounded-md py-2 px-4"
type="button"
onClick={() => {
i18n.changeLanguage(Language.EN);
}}
>
- {t('languages.english')}
+ {t('languages.english')}
</button>
- <button className="bg-blue-500 text-white font-bold h-10 rounded-md mt-2 py-2 px-4"
+ <button className="bg-blue-500 text-white font-bold h-10 rounded-md py-2 px-4"
type="button"
onClick={() => {
i18n.changeLanguage(Language.FR);
}}
>
- {t('languages.french')}
+ {t('languages.french')}
</button>
</div>
- <p>{t('languages.aaa')}</p>
+ <p className="mt-8 text-center">{t('languages.actual')}</p>
</div>
</div>
--
GitLab