Fakultas Ilmu Komputer UI

Commit d03d4225 authored by Jonathan's avatar Jonathan
Browse files

Merge branch 'jonathan' into 'master'

Jonathan

See merge request functional-programming/diskuy-frontend!43
parents 64575876 ae4a2b66
......@@ -36,7 +36,7 @@ export default function Search(props) {
}
return (
<div className="searchresultContainer">
<div className="searchResultContainer">
<h1>
<b>Search Results for "{searchParam}"</b>
</h1>
......
......@@ -62,7 +62,7 @@ export default function Profile(props) {
<img alt="profile pic" src={user.picture} />
)}
</div>
<h2>
<h2 className="usernameProfile">
<b>{user.username}</b>
</h2>
{isUser && (
......
......@@ -100,33 +100,48 @@ export default function Post(props) {
By{' '}
<Link to={`/profile/${content.username}/1`}>
{content.username}
</Link>{' '}
- {time}{' '}
</Link>{', '}
{window.innerWidth < 780 && (
<br></br>
)}
{time}{' '}
</p>
</div>
</div>
{content.user_id == AuthService.getCurrentUserId() && (
<div id="headerButton">
<div className="buttonContainer">
<div>
{checkType == 'threads' && (
{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>
<button
type="button"
className="deleteButton"
onClick={() => deletePost(user.username)}
>
Delete
</button>
</div>
)}
{checkType == 'post' && (
<div classname="commentDeleteButton">
<button
type="button"
className="deleteButton"
onClick={() => deletePost(user.username)}
>
Delete
</button>
</div>
)}
</div>
</div>
)}
......
......@@ -17,7 +17,11 @@ export default function PreviewThread(props) {
<p>
By{' '}
<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>
</div>
</div>
......
......@@ -20,7 +20,12 @@ export default new AuthService();
export const authHeader = () => {
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;
......
body {
min-height: 100vh;
word-wrap: break-word;
overflow-wrap: break-word;
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
......
......@@ -13,6 +13,7 @@
.loginFormContainer h1{
margin-bottom: 40px;
text-align: center;
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
......
.searchresultContainer {
.searchResultContainer {
margin: 36px 72px;
min-height: 100vh;
margin-bottom: 72px;
font-family: "DM Sans";
}
.searchresultContainer h1{
font-family: "DM Sans";
.searchResultContainer h1{
font-size: 36px;
color: #003F5A;
margin-bottom: 56px;
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.searchresultContainer {
@media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
.searchResultContainer {
margin: 24px 36px
}
.searchresultContainer h1{
.searchResultContainer h1{
font-size: 28px;
margin-bottom: 36px;
text-align: center;
}
.searchResultContainer p{
text-align: center;
}
}
\ No newline at end of file
......@@ -33,10 +33,16 @@
margin-bottom: 28px;
}
.subHeaderUsername {
word-wrap: break-word;
}
.sub_header_my_threads h3 {
font-family: "DM Sans";
font-size: 20px;
color: #DE6600;
word-wrap: break-word;
max-width: 60vw;
}
.userIcon img {
......@@ -52,7 +58,13 @@
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 {
margin-top: 24px;
margin-left: 36px;
......@@ -70,18 +82,13 @@
.sub_header_my_threads h3 {
font-size: 18px;
text-align: center;
}
p {
font-size: 14px;
}
.sub_header_my_threads {
flex-wrap: wrap;
}
}
@media only screen and (max-device-width : 320px) {
.sub_header_my_threads {
flex-wrap: wrap;
justify-content: center;
......@@ -91,4 +98,14 @@
.my_threads_section p {
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 {
margin: 36px 72px!important;
margin: 36px 72px;
min-height: 100vh;
margin-bottom: 72px;
}
......@@ -116,9 +116,9 @@ textarea:focus, input:focus, select:focus{
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 {
margin: 18px 36px!important;
margin: 18px 36px;
}
.back {
......@@ -127,7 +127,8 @@ textarea:focus, input:focus, select:focus{
}
.header {
margin-top: 18px!important;
margin-top: 18px;
text-align: center;
}
label {
......@@ -154,22 +155,22 @@ textarea:focus, input:focus, select:focus{
.title {
min-width: 248px;
max-width: 303px;
max-width: 468px;
}
.topic {
min-width: 248px;
max-width: 303px;
max-width: 468px;
}
.body {
min-width: 248px;
max-width: 303px;
max-width: 468px;
}
.username {
min-width: 248px;
max-width: 303px;
max-width: 468px;
}
.buttonContainer {
......
......@@ -84,7 +84,7 @@
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 {
margin-top: 24px;
margin-left: 36px;
......@@ -101,6 +101,10 @@
.sub_header_list_threads {
margin-bottom: 28px;
flex-wrap: wrap;
justify-content: center;
flex-direction: column;
justify-content: center;
}
.tab h3 {
......@@ -114,15 +118,6 @@
font-weight: bold;
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 {
font-size: 16px;
......@@ -130,8 +125,8 @@
margin-left: 28px;
margin-top: 4px;
}
.recentThreads p, .topThreads p {
text-align: center;
}
}
\ No newline at end of file
}
......@@ -120,10 +120,10 @@ button:focus {
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 {
min-width: 248px;
max-width: 303px;
max-width: 468px;
margin-bottom: 20px;
}
......@@ -137,7 +137,7 @@ button:focus {
margin-top: 24px;
}
#headerButton .buttonContainer div{
.threadButtons{
display: flex;
justify-content: space-between;
width: 160px;
......@@ -157,5 +157,17 @@ button:focus {
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 {
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 {
min-width: 248px;
max-width: 303px;
max-width: 468px;
margin-bottom: 20px;
padding: 16px;
}
......
.threadContainer {
display: flex;
justify-content: center;
flex-direction: column;
margin-top: 36px;
font-family: "DM Sans";
......@@ -54,7 +53,7 @@
}
.commentBox {
min-width: 303px;
min-width: 468px;
max-width: 3696px;
font-family: "DM Sans";
height: 120px;
......@@ -89,7 +88,7 @@ textarea:focus {
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 {
margin-top: 24px;
margin-bottom: 24px;
......@@ -109,7 +108,7 @@ textarea:focus {
.commentBox {
min-width: 248px;
max-width: 303px;
max-width: 468px;
height: 120px;
font-size: 14px;
}
......@@ -128,4 +127,9 @@ textarea:focus {
margin-bottom: 0px;
text-align: center;
}
}
\ No newline at end of file
.buttonContainer .button {
margin-top: 0px;
}
}
......@@ -59,12 +59,16 @@
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 {
margin-top: 24px;
margin-left: 36px;
margin-right: 36px;
}
.header h1 {
margin-bottom: 36px;
}
}
@media only screen and (max-device-width : 320px) {
......@@ -72,8 +76,4 @@
margin-left: 0px;
margin-top: 18px;
}
.header h1 {
margin-bottom: 36px;
}
}
\ No newline at end of file
......@@ -45,7 +45,12 @@
margin-bottom: 8px;
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
#threadCardHeader #judul{
max-width: 192px;
word-wrap: break-word;
}
@media only screen and (min-device-width : 320px) and (max-device-width : 540px) {
.button {
font-size: 16px;
}
......@@ -55,6 +60,11 @@
min-height: 108px;
}
#threadCardHeader #judul{
max-width: 152px;
word-wrap: break-word;
}
.topicContainer h1{
font-family: "DM Sans";
font-size: 28px;
......@@ -78,9 +88,7 @@
align-items: center;
margin-bottom: 24px;
}
}
@media only screen and (max-device-width : 320px) {
.headerTopic {
display: flex;
flex-direction: column;
......@@ -88,6 +96,22 @@
}
.headerTopic h1 {
margin-bottom: 36px;
margin-bottom: 24px;
}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
.topics {
justify-content: center;
}
.topicCards {
justify-content: center;
}
}
@media only screen and (max-device-width : 540px) {
.topicCards {
justify-content: center;
}
}
\ No newline at end of file
......@@ -24,14 +24,9 @@
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) {
.button {
font-size: 16px;
}
}
@media only screen and (max-device-width : 320px) {
.button {
margin-top: 12px
}
}
\ 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