Fakultas Ilmu Komputer UI

Commit c6478c94 authored by Jonathan's avatar Jonathan
Browse files

Merge branch 'jonathan' into 'master'

Jonathan

See merge request functional-programming/diskuy-frontend!49
parents dc05948e 407f2685
......@@ -42,7 +42,9 @@ export default function Search(props) {
</h1>
<ThreadList thread={threads} />
{totalItems == 0 && (
<p>No threads with keyword "{searchParam}" found.</p>
<div className="noThreadsMessage">
<p>No threads with keyword "{searchParam}" found.</p>
</div>
)}
{totalItems != 0 && (
<div className="paginationContainer">
......
......@@ -54,7 +54,7 @@ export default function Profile(props) {
<b>Profile</b>
</h1>
</div>
<div className="profile_section">
<div className="profileSection">
<div className="userIcon">
{user.picture == 'None' ? (
<i className="far fa-user-circle" />
......@@ -69,8 +69,8 @@ export default function Profile(props) {
<Button text="Edit Profile" color="orange" url="profile/update" />
)}
</div>
<div className="my_threads_section">
<div className="sub_header_my_threads">
<div className="myThreadsSection">
<div className="subHeaderMyThreads">
<h3>
<b>{isUser ? 'Your' : user.username}'s threads</b>
</h3>
......
......@@ -44,7 +44,7 @@ export default function FormCreateThread(props) {
};
return (
<div className="formContainer">
<div className="formComponentContainer">
<div className="back" onClick={back}>
<i className="fas fa-angle-left"></i>
<h5>Back</h5>
......@@ -62,7 +62,7 @@ export default function FormCreateThread(props) {
</div>
)}
<form onSubmit={handleSubmit}>
<div className="form_container">
<div className="formContainer">
<label htmlFor="title">Username</label>
<input
type="text"
......
......@@ -4,7 +4,7 @@ export default function CommentList(props) {
return (
<div>
{props.comment.map((value) => (
<div id="threadComment">
<div className="threadComment">
<Post type="comment" content={value} />
</div>
))}
......
......@@ -62,7 +62,7 @@ export default function ListThreads(props) {
};
return (
<div className="formContainer">
<div className="formComponentContainer">
<div className="back" onClick={back}>
<i className="fas fa-angle-left"></i>
<h5>Back</h5>
......@@ -72,7 +72,7 @@ export default function ListThreads(props) {
<b>Create a Thread</b>
</h1>
</div>
<div className="form_section">
<div className="formSection">
<div>
{message && (
<div>
......@@ -82,7 +82,7 @@ export default function ListThreads(props) {
</div>
)}
<form onSubmit={handleSubmit}>
<div className="form_container">
<div className="formContainer">
<label for="title">Title</label>
<input
type="text"
......
......@@ -61,7 +61,7 @@ export default function EditComment(props) {
};
return (
<div className="formContainer">
<div className="formComponentContainer">
<div className="back" onClick={back}>
<i className="fas fa-angle-left"></i>
<h5>Back</h5>
......@@ -71,7 +71,7 @@ export default function EditComment(props) {
<b>Edit a Comment</b>
</h1>
</div>
<div className="form_section">
<div className="formSection">
<div>
{message && (
<div>
......@@ -81,7 +81,7 @@ export default function EditComment(props) {
</div>
)}
<form onSubmit={handleSubmit}>
<div className="form_container">
<div className="formContainer">
<label for="body">Body</label>
<textarea
className="body"
......
......@@ -89,7 +89,7 @@ export default function EditThread(props) {
};
return (
<div className="formContainer">
<div className="formComponentContainer">
<div className="back" onClick={back}>
<i className="fas fa-angle-left"></i>
<h5>Back</h5>
......@@ -99,7 +99,7 @@ export default function EditThread(props) {
<b>Edit a Thread</b>
</h1>
</div>
<div className="form_section">
<div className="formSection">
<div>
{message && (
<div>
......@@ -109,7 +109,7 @@ export default function EditThread(props) {
</div>
)}
<form onSubmit={handleSubmit}>
<div className="form_container">
<div className="formContainer">
<label for="title">Title</label>
<input
type="text"
......
......@@ -16,8 +16,8 @@ export default function ListThreads(props) {
</div>
{props.isRecent ? (
<div className="list_threads_section">
<div className="sub_header_list_threads">
<div className="listThreadsSection">
<div className="subHeaderListThreads">
<div className="tab">
<Link to="/page/1" style={{ textDecoration: 'none' }}>
<h3 className="active">Recent</h3>
......@@ -36,8 +36,8 @@ export default function ListThreads(props) {
/>
</div>
) : (
<div className="list_threads_section">
<div className="sub_header_list_threads">
<div className="listThreadsSection">
<div className="subHeaderListThreads">
<div className="tab">
<Link to="/page/1" style={{ textDecoration: 'none' }}>
<h3>Recent</h3>
......
......@@ -85,9 +85,9 @@ export default function Post(props) {
const time = translate(content.inserted_at);
return (
<div id="post">
<div id="postHeader">
<div id="headerData">
<div className="post">
<div className="postHeader">
<div className="headerData">
<div className="userImage">
{user.picture == 'None' ? (
<i className="far fa-user-circle" />
......@@ -112,49 +112,38 @@ export default function Post(props) {
{content.user_id == AuthService.getCurrentUserId() && (
<div id="headerButton">
<div className="buttonContainer">
<div className="headerButton">
<div className="postButtonContainer">
{checkType == 'threads' && (
<div className="threadButtons">
<Button
type="button"
text="Edit"
color="none-green"
url={`thread/edit/${content.id}`}
/>
<button
type="button"
className="deleteButton"
onClick={() => deletePost(user.username)}
>
Delete
</button>
</div>
)}
{checkType == 'post' && (
<div classname="commentDeleteButton">
<Button
type="button"
text="Edit"
color="none-green"
url={`comment/edit/${content.id}`}
/>
<button
type="button"
className="deleteButton"
onClick={() => deletePost(user.username)}
>
Delete
</button>
</div>
)}
<button
type="button"
className="deleteButton"
onClick={() => deletePost(user.username)}
>
Delete
</button>
</div>
</div>
)}
</div>
<div id="postContent">
{props.type == 'thread' && <h1 id="judul">{content.title}</h1>}
<p id="isi">{contents}</p>
<div className="postContent">
{props.type == 'thread' && <h1 className="postTitle">{content.title}</h1>}
<p className="postBody">{contents}</p>
<div className="likeSection">
{loggedIn && (
<button className="likeButton" onClick={handleLike}>
......
......@@ -6,14 +6,14 @@ export default function PreviewThread(props) {
const { content } = props;
const time = translate(content.inserted_at);
return (
<div id="threadCard">
<div id="threadCardHeader">
<h2 id="judul">
<div className="threadCard">
<div className="threadCardHeader">
<h2 className="previewThreadTitle">
<b>{content.title}</b>
</h2>
</div>
<p id="topic">{content.topic_name}</p>
<div id="threadCardContent">
<p className="previewThreadTopic">{content.topic_name}</p>
<div className="threadCardContent">
<p>
By{' '}
<Link to={`/profile/${content.username}/1`}>{content.username}</Link>{' '}
......
......@@ -35,7 +35,9 @@ export default function RecentThreads(props) {
return (
<div className="recentThreads">
{totalItems == 0 ? (
<p>There is no threads yet.</p>
<div className="noThreadsMessage">
<p>There is no threads yet.</p>
</div>
) : (
<Fragment>
<ThreadList thread={threads} />
......
......@@ -109,10 +109,10 @@ export default function Thread(props) {
</div>
{loggedIn && (
<div id="addCommentSection">
<div className="addCommentSection">
<h3>Write a Comment</h3>
<form onSubmit={handleSubmit}>
<div className="commentFormContainer">
<div className="commentformComponentContainer">
<textarea
className="commentBox"
placeholder="Write your comment here"
......@@ -121,8 +121,7 @@ export default function Thread(props) {
/>
<div>
<button
className="submitComment"
id="addCommentButton"
className="submitComment addCommentButton"
type="submit"
>
Post Comment
......@@ -142,8 +141,8 @@ export default function Thread(props) {
<div>
<CommentList
comment={comment}
thread_id={threadParm}
topic_id={topicParm}
thread_className={threadParm}
topic_className={topicParm}
/>
<div className="paginationContainer">
<Pagination
......
......@@ -34,7 +34,9 @@ export default function TopThreads(props) {
return (
<div className="topThreads">
{totalItems == 0 ? (
<p>There is no threads yet.</p>
<div className="noThreadsMessage">
<p>There is no threads yet.</p>
</div>
) : (
<Fragment>
<ThreadList thread={threads} />
......
......@@ -40,7 +40,7 @@ export default function CreateTopicForm(props) {
};
return (
<div className="formContainer">
<div className="formComponentContainer">
<div className="back" onClick={back}>
<i className="fas fa-angle-left"></i>
<h5>Back</h5>
......@@ -58,7 +58,7 @@ export default function CreateTopicForm(props) {
</div>
)}
<form onSubmit={handleSubmit}>
<div className="form_container">
<div className="formContainer">
<label for="title">Topic Name</label>
<input
type="text"
......
......@@ -70,7 +70,7 @@ export default function Topic(props) {
</button>
)}
</div>
<div className="list_threads_section">
<div className="listThreadsSection">
{totalItems == 0 ? (
<p>There are no threads with this topic yet.</p>
) : (
......
......@@ -20,7 +20,7 @@ export default function TopicList(props) {
return (
<div className="topicContainer">
<div className="headerTopic">
<div className="topicHeader">
<h1>Topic List</h1>
{loggedIn && isAdmin && (
<Button text="Create Topic" color="orange" url="create/topic" />
......@@ -42,7 +42,7 @@ export default function TopicList(props) {
>
<div className="topicCard">
<div className="topicCardHeader">
<h2 id="judul">{value.name}</h2>
<h2 className="topicTitle">{value.name}</h2>
</div>
</div>
</Link>
......
......@@ -6,8 +6,8 @@ import '../../styles/utility/Footer.css';
function Footer() {
return (
<div id="footerContainer">
<div id="footer">
<div>
<div id="footerContainer">
<div id="fasilkomLogo">
<p>
<b>Developed under</b>
......
......@@ -4,8 +4,34 @@ body {
overflow-wrap: break-word;
}
.header {
margin-top: 36px;
}
.header h1 {
font-family: "DM Sans";
font-size: 36px;
color: #003F5A;
margin-bottom: 24px;
}
@media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
p {
font-size: 14px;
}
}
\ No newline at end of file
.header {
margin-top: 18px;
text-align: center;
}
.header h1 {
font-size: 28px;
}
}
@media only screen and (max-device-width : 320px) {
.header {
text-align: center;
}
}
.loginFormContainer {
.loginformComponentContainer {
margin-top: 36px;
margin-left: 72px;
margin-right: 72px;
......@@ -11,20 +11,20 @@
margin-bottom: 72px;
}
.loginFormContainer h1{
.loginformComponentContainer h1{
margin-bottom: 40px;
text-align: center;
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.loginFormContainer {
@media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
.loginformComponentContainer {
margin-top: 24px;
margin-left: 36px;
margin-right: 36px;
margin-bottom: 184px;
}
.loginFormContainer h1{
.loginformComponentContainer h1{
font-size: 28px;
text-align: center;
}
......
......@@ -22,7 +22,7 @@
text-align: center;
}
.searchResultContainer p{
.noThreadsMessage p{
text-align: center;
}
}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment