Merge pull request #926 from SE-TINF22B6/frontend

Fix: Post style
SE-TINF22B6 · Jun 11, 2024 · de006db · de006db
2 parents 4df9fff + 0045f7c
commit de006db
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 11 deletions.
diff --git a/src/main/web/src/scenes/Home/components/create-post/PostDraft.tsx b/src/main/web/src/scenes/Home/components/create-post/PostDraft.tsx
diff --git a/src/main/web/src/scenes/Home/components/post/Post.css b/src/main/web/src/scenes/Home/components/post/Post.css
@@ -17,6 +17,7 @@
   height: auto;
   max-width: 260px;
   max-height: 170px;
+  min-height: 170px;
   top: 50%;
   transform: translateY(-50%);
   position: relative;
@@ -92,7 +93,6 @@
 
 .home-post-interaction {
   position: relative;
-  margin-top: 110px;
   margin-right: 20px;
 }
 

diff --git a/src/main/web/src/scenes/Home/components/post/Post.tsx b/src/main/web/src/scenes/Home/components/post/Post.tsx
@@ -153,7 +153,7 @@ export const Post: React.FC<PostModel> = (props: PostModel) => {
         setMarginLeft(tags ? '110px' : '0');
         setMarginTop(postImage ? '140px' : '5px');
       } else {
-        setWidth(postImage ? '330px' : '600px');
+        setWidth(postImage ? '360px' : '600px');
         setMarginLeft(postImage ? (imageWidth ? `${imageWidth + 20}px` : '280px') : '10px');
         setMarginTop('0');
       }
@@ -228,21 +228,23 @@ export const Post: React.FC<PostModel> = (props: PostModel) => {
               &nbsp;· {formattedTime}
             </div>
           </div>
-          <div className="home-post-interaction">
+          <div className="home-post-interaction"
+               style={{marginTop: `${parseInt(marginTop as string) + 110}px`}}>
             <Interaction
                 likes={likes}
                 userLiked={userLiked}
                 heartClass={heartClass}
                 comments={comments}
                 handleLike={() => handleLike(id, "post", likes, setLikes, setUserLiked, setHeartClass)}
                 id={id}
-                isHomepage={true}/>
+                isHomepage={true}
+            />
           </div>
         </div>
 
         {menuOpen && (
             <div className="post-menu-container">
-              <PostMenu
+            <PostMenu
                   handleShareClick={handleShareClick}
                   handleSaveClick={handleSaveClick}
                   handleUnsaveClick={handleUnsaveClick}

diff --git a/src/main/web/src/scenes/Post/PostDetail.css b/src/main/web/src/scenes/Post/PostDetail.css
@@ -53,8 +53,10 @@
   height: auto;
   max-height: 250px;
   max-width: 420px;
+  min-height: 230px;
   position: relative;
   border-radius: 10px;
+  object-fit: contain;
 }
 
 .post-detail-infos {