Fakultas Ilmu Komputer UI

Commit d03d4225 authored by Jonathan's avatar Jonathan
Browse files

Merge branch 'jonathan' into 'master'

Jonathan

See merge request !43
parents 64575876 ae4a2b66
...@@ -36,7 +36,7 @@ export default function Search(props) { ...@@ -36,7 +36,7 @@ export default function Search(props) {
} }
return ( return (
<div className="searchresultContainer"> <div className="searchResultContainer">
<h1> <h1>
<b>Search Results for "{searchParam}"</b> <b>Search Results for "{searchParam}"</b>
</h1> </h1>
......
...@@ -62,7 +62,7 @@ export default function Profile(props) { ...@@ -62,7 +62,7 @@ export default function Profile(props) {
<img alt="profile pic" src={user.picture} /> <img alt="profile pic" src={user.picture} />
)} )}
</div> </div>
<h2> <h2 className="usernameProfile">
<b>{user.username}</b> <b>{user.username}</b>
</h2> </h2>
{isUser && ( {isUser && (
......
...@@ -100,33 +100,48 @@ export default function Post(props) { ...@@ -100,33 +100,48 @@ export default function Post(props) {
By{' '} By{' '}
<Link to={`/profile/${content.username}/1`}> <Link to={`/profile/${content.username}/1`}>
{content.username} {content.username}
</Link>{' '} </Link>{', '}
- {time}{' '} {window.innerWidth < 780 && (
<br></br>
)}
{time}{' '}
</p> </p>
</div> </div>
</div> </div>
{content.user_id == AuthService.getCurrentUserId() && ( {content.user_id == AuthService.getCurrentUserId() && (
<div id="headerButton"> <div id="headerButton">
<div className="buttonContainer"> <div className="buttonContainer">
<div> {checkType == 'threads' && (
{checkType == 'threads' && ( <div className="threadButtons">
<Button <Button
type="button" type="button"
text="Edit" text="Edit"
color="none-green" color="none-green"
url={`thread/edit/${content.id}`} url={`thread/edit/${content.id}`}
/> />
)} <button
<button type="button"
type="button" className="deleteButton"
className="deleteButton" onClick={() => deletePost(user.username)}
onClick={() => deletePost(user.username)} >
> Delete
Delete </button>
</button> </div>
</div> )}
{checkType == 'post' && (
<div classname="commentDeleteButton">
<button
type="button"
className="deleteButton"
onClick={() => deletePost(user.username)}
>
Delete
</button>
</div>
)}
</div> </div>
</div> </div>
)} )}
......
...@@ -17,7 +17,11 @@ export default function PreviewThread(props) { ...@@ -17,7 +17,11 @@ export default function PreviewThread(props) {
<p> <p>
By{' '} By{' '}
<Link to={`/profile/${content.username}/1`}>{content.username}</Link>{' '} <Link to={`/profile/${content.username}/1`}>{content.username}</Link>{' '}
- {time} - <i className="far fa-thumbs-up" /> {content.points} {', '}
{window.innerWidth < 780 && (
<br></br>
)}
{time} - <i className="far fa-thumbs-up" /> {content.points}
</p> </p>
</div> </div>
</div> </div>
......
...@@ -20,7 +20,12 @@ export default new AuthService(); ...@@ -20,7 +20,12 @@ export default new AuthService();
export const authHeader = () => { export const authHeader = () => {
const user = JSON.parse(localStorage.getItem('user')); const user = JSON.parse(localStorage.getItem('user'));
return { Authorization: `Bearer ${user?.data?.token}` }; if (user.accessToken) {
return { Authorization: `Bearer ${user.accessToken}` };
}
else if (user.data.token) {
return { Authorization: `Bearer ${user.data.token}` };
}
}; };
export const loggedIn = JSON.parse(localStorage.getItem('user')) && 1; export const loggedIn = JSON.parse(localStorage.getItem('user')) && 1;
......
body { body {
min-height: 100vh; min-height: 100vh;
word-wrap: break-word;
overflow-wrap: break-word;
} }
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
......
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
.loginFormContainer h1{ .loginFormContainer h1{
margin-bottom: 40px; margin-bottom: 40px;
text-align: center;
} }
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { @media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
......
.searchresultContainer { .searchResultContainer {
margin: 36px 72px; margin: 36px 72px;
min-height: 100vh; min-height: 100vh;
margin-bottom: 72px; margin-bottom: 72px;
font-family: "DM Sans";
} }
.searchresultContainer h1{ .searchResultContainer h1{
font-family: "DM Sans";
font-size: 36px; font-size: 36px;
color: #003F5A; color: #003F5A;
margin-bottom: 56px; margin-bottom: 56px;
} }
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { @media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
.searchresultContainer { .searchResultContainer {
margin: 24px 36px margin: 24px 36px
} }
.searchresultContainer h1{ .searchResultContainer h1{
font-size: 28px; font-size: 28px;
margin-bottom: 36px; margin-bottom: 36px;
text-align: center;
}
.searchResultContainer p{
text-align: center;
} }
} }
\ No newline at end of file
...@@ -33,10 +33,16 @@ ...@@ -33,10 +33,16 @@
margin-bottom: 28px; margin-bottom: 28px;
} }
.subHeaderUsername {
word-wrap: break-word;
}
.sub_header_my_threads h3 { .sub_header_my_threads h3 {
font-family: "DM Sans"; font-family: "DM Sans";
font-size: 20px; font-size: 20px;
color: #DE6600; color: #DE6600;
word-wrap: break-word;
max-width: 60vw;
} }
.userIcon img { .userIcon img {
...@@ -52,7 +58,13 @@ ...@@ -52,7 +58,13 @@
color: #DE6600; color: #DE6600;
} }
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { .usernameProfile {
max-width: 72vw;
word-wrap: break-word;
text-align: center;
}
@media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
.profileContainer { .profileContainer {
margin-top: 24px; margin-top: 24px;
margin-left: 36px; margin-left: 36px;
...@@ -70,18 +82,13 @@ ...@@ -70,18 +82,13 @@
.sub_header_my_threads h3 { .sub_header_my_threads h3 {
font-size: 18px; font-size: 18px;
text-align: center;
} }
p { p {
font-size: 14px; font-size: 14px;
} }
.sub_header_my_threads {
flex-wrap: wrap;
}
}
@media only screen and (max-device-width : 320px) {
.sub_header_my_threads { .sub_header_my_threads {
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
...@@ -91,4 +98,14 @@ ...@@ -91,4 +98,14 @@
.my_threads_section p { .my_threads_section p {
text-align: center; text-align: center;
} }
.sub_header_my_threads h3 {
max-width: 72vw;
}
}
@media only screen and (min-device-width : 540px) and (max-device-width : 600px){
.sub_header_my_threads h3 {
max-width: 40vw;
}
} }
\ No newline at end of file
.formContainer { .formContainer {
margin: 36px 72px!important; margin: 36px 72px;
min-height: 100vh; min-height: 100vh;
margin-bottom: 72px; margin-bottom: 72px;
} }
...@@ -116,9 +116,9 @@ textarea:focus, input:focus, select:focus{ ...@@ -116,9 +116,9 @@ textarea:focus, input:focus, select:focus{
outline: none; outline: none;
} }
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { @media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
.formContainer { .formContainer {
margin: 18px 36px!important; margin: 18px 36px;
} }
.back { .back {
...@@ -127,7 +127,8 @@ textarea:focus, input:focus, select:focus{ ...@@ -127,7 +127,8 @@ textarea:focus, input:focus, select:focus{
} }
.header { .header {
margin-top: 18px!important; margin-top: 18px;
text-align: center;
} }
label { label {
...@@ -154,22 +155,22 @@ textarea:focus, input:focus, select:focus{ ...@@ -154,22 +155,22 @@ textarea:focus, input:focus, select:focus{
.title { .title {
min-width: 248px; min-width: 248px;
max-width: 303px; max-width: 468px;
} }
.topic { .topic {
min-width: 248px; min-width: 248px;
max-width: 303px; max-width: 468px;
} }
.body { .body {
min-width: 248px; min-width: 248px;
max-width: 303px; max-width: 468px;
} }
.username { .username {
min-width: 248px; min-width: 248px;
max-width: 303px; max-width: 468px;
} }
.buttonContainer { .buttonContainer {
......
...@@ -84,7 +84,7 @@ ...@@ -84,7 +84,7 @@
opacity: 1!important; opacity: 1!important;
} }
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { @media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
.listThreadsContainer { .listThreadsContainer {
margin-top: 24px; margin-top: 24px;
margin-left: 36px; margin-left: 36px;
...@@ -101,6 +101,10 @@ ...@@ -101,6 +101,10 @@
.sub_header_list_threads { .sub_header_list_threads {
margin-bottom: 28px; margin-bottom: 28px;
flex-wrap: wrap;
justify-content: center;
flex-direction: column;
justify-content: center;
} }
.tab h3 { .tab h3 {
...@@ -114,15 +118,6 @@ ...@@ -114,15 +118,6 @@
font-weight: bold; font-weight: bold;
opacity: 1!important; opacity: 1!important;
} }
}
@media only screen and (max-device-width : 320px) {
.sub_header_list_threads {
flex-wrap: wrap;
justify-content: center;
flex-direction: column;
justify-content: center;
}
.tab h3 { .tab h3 {
font-size: 16px; font-size: 16px;
...@@ -130,8 +125,8 @@ ...@@ -130,8 +125,8 @@
margin-left: 28px; margin-left: 28px;
margin-top: 4px; margin-top: 4px;
} }
.recentThreads p, .topThreads p { .recentThreads p, .topThreads p {
text-align: center; text-align: center;
} }
} }
\ No newline at end of file
...@@ -120,10 +120,10 @@ button:focus { ...@@ -120,10 +120,10 @@ button:focus {
align-items: center; align-items: center;
} }
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { @media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
#post { #post {
min-width: 248px; min-width: 248px;
max-width: 303px; max-width: 468px;
margin-bottom: 20px; margin-bottom: 20px;
} }
...@@ -137,7 +137,7 @@ button:focus { ...@@ -137,7 +137,7 @@ button:focus {
margin-top: 24px; margin-top: 24px;
} }
#headerButton .buttonContainer div{ .threadButtons{
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
width: 160px; width: 160px;
...@@ -157,5 +157,17 @@ button:focus { ...@@ -157,5 +157,17 @@ button:focus {
font-size: 14px; font-size: 14px;
} }
.deleteButton {
margin-left: 0px;
}
.userImage {
display: flex;
align-items: center;
}
.commentDeletebutton {
display: flex;
justify-content: center!important;
}
} }
\ No newline at end of file
...@@ -46,10 +46,10 @@ p { ...@@ -46,10 +46,10 @@ p {
margin-bottom: 0px; margin-bottom: 0px;
} }
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { @media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
#threadCard { #threadCard {
min-width: 248px; min-width: 248px;
max-width: 303px; max-width: 468px;
margin-bottom: 20px; margin-bottom: 20px;
padding: 16px; padding: 16px;
} }
......
.threadContainer { .threadContainer {
display: flex; display: flex;
justify-content: center;
flex-direction: column; flex-direction: column;
margin-top: 36px; margin-top: 36px;
font-family: "DM Sans"; font-family: "DM Sans";
...@@ -54,7 +53,7 @@ ...@@ -54,7 +53,7 @@
} }
.commentBox { .commentBox {
min-width: 303px; min-width: 468px;
max-width: 3696px; max-width: 3696px;
font-family: "DM Sans"; font-family: "DM Sans";
height: 120px; height: 120px;
...@@ -89,7 +88,7 @@ textarea:focus { ...@@ -89,7 +88,7 @@ textarea:focus {
flex-direction: column; flex-direction: column;
} }
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { @media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
.threadContainer { .threadContainer {
margin-top: 24px; margin-top: 24px;
margin-bottom: 24px; margin-bottom: 24px;
...@@ -109,7 +108,7 @@ textarea:focus { ...@@ -109,7 +108,7 @@ textarea:focus {
.commentBox { .commentBox {
min-width: 248px; min-width: 248px;
max-width: 303px; max-width: 468px;
height: 120px; height: 120px;
font-size: 14px; font-size: 14px;
} }
...@@ -128,4 +127,9 @@ textarea:focus { ...@@ -128,4 +127,9 @@ textarea:focus {
margin-bottom: 0px; margin-bottom: 0px;
text-align: center; text-align: center;
} }
}
\ No newline at end of file .buttonContainer .button {
margin-top: 0px;
}
}
...@@ -59,12 +59,16 @@ ...@@ -59,12 +59,16 @@
background-color: transparent!important; background-color: transparent!important;
} }
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { @media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
.topicContainer { .topicContainer {
margin-top: 24px; margin-top: 24px;