From 69db715459a943b519846c3e74dc5932d1721649 Mon Sep 17 00:00:00 2001
From: Martin Wighus Holtmon <martinwh@stud.ntnu.no>
Date: Fri, 19 Nov 2021 12:22:28 +0100
Subject: [PATCH] projectPart2/Problem2: Styled it a bit better
---
.../pages/user-photos/UserPhotos.css | 37 +++++++++++++++++--
.../pages/user-photos/UserPhotos.jsx | 13 +++----
2 files changed, 39 insertions(+), 11 deletions(-)
diff --git a/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.css b/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.css
index cdf8ba6..18e34c1 100644
--- a/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.css
+++ b/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.css
@@ -9,25 +9,54 @@
#divImageList > .divImageItem {
width: 49%;
+ min-width: 450px;
height: auto;
- display: flex;
+ display: inline-flex;
flex-flow: column nowrap;
- justify-content: flex-start;
- /*background-color: blue; */
+ background-color: #FAFAFA;
+ border: solid #DBDBDB;
}
#divImageList > .divImageItem > .divImage {
max-height: 300px;
+ text-align: left;
}
#divImageList > .divImageItem > .divImage img {
display: block;
+ margin: auto;
max-height: 100%;
max-width: 100%;
height: auto;
width: auto;
}
+#divImageList > .divImageItem > .divImage span {
+ position: center;
+}
+
#divImageList > .divImageItem > .divPhotoInfo {
- margin-top: 5px;
+ margin: 5px;
+}
+
+.text-link {
+ color: inherit;
+ text-decoration: inherit;
+ font-weight: bold;
+}
+
+.text-link:hover {
+ text-decoration: underline;
+}
+
+.comment {
+ margin-bottom: 8px;
}
+
+.comment-date {
+ color: #8E8E8E;
+ font-weight: lighter;
+ text-transform: uppercase;
+ font-size: smaller;
+}
+
diff --git a/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx b/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx
index 046ea31..56534c2 100644
--- a/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx
+++ b/projectSecondPart/src/photo-share/pages/user-photos/UserPhotos.jsx
@@ -34,7 +34,7 @@ class UserPhotos extends React.Component {
getAuthor = (user) => {
if (user) {
- return <Link to={`/photo-share/users/${user._id}`}>{user.first_name} {user.last_name}</Link>;
+ return <Link className="text-link" to={`/photo-share/users/${user._id}`}>{user.first_name} {user.last_name}</Link>;
}
return '';
};
@@ -46,16 +46,16 @@ class UserPhotos extends React.Component {
<>
{image.comments.map((comment) => {
return (
- <div key={comment._id}>
- {comment.comment} <br/>
- Created on {comment.date_time} by {this.getAuthor(comment.user)}<br/><br/>
+ <div className="comment" key={comment._id}>
+ {this.getAuthor(comment.user)} {comment.comment} <br/>
+ <span className="comment-date">Commented {comment.date_time}</span>
</div>
);
})}
</>
);
}
- return <>No Comments!</>;
+ return <></>;
};
render() {
@@ -68,9 +68,8 @@ class UserPhotos extends React.Component {
<img src={path.join(__dirname, 'images', image.file_name)}/>
</div>
<div className="divPhotoInfo">
- <span>Creation date: {image.date_time}</span> <br/>
- <span>Comments: </span><br/>
{this.generateComments(image)}
+ <span>Created {image.date_time}</span>
</div>
</div>
))}
--
GitLab