Fakultas Ilmu Komputer UI

Commit ae8b4fdd authored by Jonathan Chandra's avatar Jonathan Chandra
Browse files

fix responsive styling

parent 1ae585b2
...@@ -21,7 +21,7 @@ export default function Pagination(props) { ...@@ -21,7 +21,7 @@ export default function Pagination(props) {
onChange={handlePageChange} onChange={handlePageChange}
itemClass="page-item" itemClass="page-item"
linkClass="page-link" linkClass="page-link"
hideNavigation={false} hideNavigation="false"
/> />
</div> </div>
); );
......
...@@ -106,29 +106,30 @@ export default function Post(props) { ...@@ -106,29 +106,30 @@ export default function Post(props) {
</div> </div>
</div> </div>
<div id="headerButton">
<div className="buttonContainer">
{content.user_id == AuthService.getCurrentUserId() && ( {content.user_id == AuthService.getCurrentUserId() && (
<div> <div id="headerButton">
{checkType == 'threads' && ( <div className="buttonContainer">
<Button <div>
type="button" {checkType == 'threads' && (
text="Edit" <Button
color="none-green" type="button"
url={`thread/edit/${content.id}`} text="Edit"
/> color="none-green"
)} url={`thread/edit/${content.id}`}
<button />
type="button" )}
className="deleteButton" <button
onClick={() => deletePost(user.username)} type="button"
> className="deleteButton"
Delete onClick={() => deletePost(user.username)}
</button> >
</div> Delete
</button>
</div>
</div>
</div>
)} )}
</div>
</div>
</div> </div>
<div id="postContent"> <div id="postContent">
{props.type == 'thread' && <h1 id="judul">{content.title}</h1>} {props.type == 'thread' && <h1 id="judul">{content.title}</h1>}
......
...@@ -75,4 +75,20 @@ ...@@ -75,4 +75,20 @@
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 {
flex-wrap: wrap;
justify-content: center;
flex-direction: column;
}
.my_threads_section p {
text-align: center;
}
} }
\ No newline at end of file
...@@ -66,7 +66,7 @@ label { ...@@ -66,7 +66,7 @@ label {
} }
.topic { .topic {
width: 400px; max-idth: 400px;
font-family: "DM Sans"; font-family: "DM Sans";
height: 45px; height: 45px;
padding: 12px 16px; padding: 12px 16px;
...@@ -152,19 +152,23 @@ textarea:focus, input:focus, select:focus{ ...@@ -152,19 +152,23 @@ textarea:focus, input:focus, select:focus{
} }
.title { .title {
min-width: 303px; min-width: 248px;
max-width: 303px;
} }
.topic { .topic {
min-width: 248px;
max-width: 303px; max-width: 303px;
} }
.body { .body {
min-width: 303px; min-width: 248px;
max-width: 303px;
} }
.username { .username {
min-width: 303px; min-width: 248px;
max-width: 303px;
} }
.buttonContainer { .buttonContainer {
...@@ -172,3 +176,9 @@ textarea:focus, input:focus, select:focus{ ...@@ -172,3 +176,9 @@ textarea:focus, input:focus, select:focus{
justify-content: center; justify-content: center;
} }
} }
@media only screen and (max-device-width : 320px) {
.header {
text-align: center;
}
}
...@@ -23,8 +23,10 @@ ...@@ -23,8 +23,10 @@
.tab h3 { .tab h3 {
font-family: "DM Sans"; font-family: "DM Sans";
font-size: 1.125rem; font-size: 18px;
color: #000000; color: #000000;
margin-right: 24px;
margin-top: 4px;
opacity: 0.5; opacity: 0.5;
} }
...@@ -112,4 +114,24 @@ ...@@ -112,4 +114,24 @@
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 {
font-size: 16px;
margin-right: 28px;
margin-left: 28px;
margin-top: 4px;
}
.recentThreads p, .topThreads p {
text-align: center;
}
} }
\ No newline at end of file
...@@ -121,7 +121,8 @@ button:focus { ...@@ -121,7 +121,8 @@ button:focus {
@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) {
#post { #post {
min-width: 303px; min-width: 248px;
max-width: 303px;
margin-bottom: 20px; margin-bottom: 20px;
} }
......
...@@ -48,19 +48,13 @@ p { ...@@ -48,19 +48,13 @@ p {
@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) {
#threadCard { #threadCard {
min-width: 303px; min-width: 248px;
max-width: 303px;
margin-bottom: 20px; margin-bottom: 20px;
padding: 16px; padding: 16px;
} }
#topic { #topic {
background: #DE6600;
color:#ffffff;
padding: 4px;
border-radius: 4px;
width: max-content;
margin: 24px 0px 0px 0px;
border-radius: 4px;
font-size: 14px; font-size: 14px;
} }
...@@ -69,15 +63,6 @@ p { ...@@ -69,15 +63,6 @@ p {
margin-left: 20px; margin-left: 20px;
} }
.fa-thumbs-up {
height: 16px;
color: #DE6600;
}
p {
color: #000000;
}
#judul { #judul {
font-size: 24px; font-size: 24px;
color: #000000; color: #000000;
...@@ -90,4 +75,8 @@ p { ...@@ -90,4 +75,8 @@ p {
#threadCardContent p{ #threadCardContent p{
margin-bottom: 0px; margin-bottom: 0px;
} }
#threadCardContent p{
text-align: left;
}
} }
\ No newline at end of file
...@@ -80,8 +80,8 @@ textarea:focus { ...@@ -80,8 +80,8 @@ textarea:focus {
} }
.noCommentLabel p { .noCommentLabel p {
font-size: 16px!important; font-size: 16px;
margin-bottom: 0px!important; margin-bottom: 0px;
} }
.commentFormContainer { .commentFormContainer {
...@@ -108,7 +108,8 @@ textarea:focus { ...@@ -108,7 +108,8 @@ textarea:focus {
} }
.commentBox { .commentBox {
min-width: 303px; min-width: 248px;
max-width: 303px;
height: 120px; height: 120px;
font-size: 14px; font-size: 14px;
} }
...@@ -127,10 +128,4 @@ textarea:focus { ...@@ -127,10 +128,4 @@ textarea:focus {
margin-bottom: 0px; margin-bottom: 0px;
text-align: center; text-align: center;
} }
}
@media only screen and (min-device-width : 1920px) {
.commentBox {
min-width: 1759px;
}
} }
\ No newline at end of file
...@@ -65,4 +65,15 @@ ...@@ -65,4 +65,15 @@
margin-left: 36px; margin-left: 36px;
margin-right: 36px; margin-right: 36px;
} }
}
@media only screen and (max-device-width : 320px) {
.deleteTopicButton {
margin-left: 0px;
margin-top: 18px;
}
.header h1 {
margin-bottom: 36px;
}
} }
\ No newline at end of file
...@@ -78,4 +78,16 @@ ...@@ -78,4 +78,16 @@
align-items: center; align-items: center;
margin-bottom: 24px; margin-bottom: 24px;
} }
}
@media only screen and (max-device-width : 320px) {
.headerTopic {
display: flex;
flex-direction: column;
align-items: center;
}
.headerTopic h1 {
margin-bottom: 36px;
}
} }
\ No newline at end of file
...@@ -28,4 +28,10 @@ ...@@ -28,4 +28,10 @@
.button { .button {
font-size: 16px; font-size: 16px;
} }
}
@media only screen and (max-device-width : 320px) {
.button {
margin-top: 12px
}
} }
\ No newline at end of file
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
} }
.form-control { .form-control {
width: 320px; min-width: 320px;
margin-right: 0px!important; margin-right: 0px!important;
border-radius: 0.25rem 0rem 0rem 0.25rem; border-radius: 0.25rem 0rem 0rem 0.25rem;
border-color: #FEA02F; border-color: #FEA02F;
...@@ -51,14 +51,22 @@ ...@@ -51,14 +51,22 @@
@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) {
.form-control { .form-control {
width: 300px; min-width: 180px;
max-width: 300px;
margin-right: 0px!important; margin-right: 0px!important;
border-radius: 0.25rem 0rem 0rem 0.25rem; border-radius: 0.25rem 0rem 0rem 0.25rem;
border-color: #FEA02F; border-color: #FEA02F;
} }
#logoDiskuy svg { #logoDiskuy svg {
width: 120px; width: 120px;
height: 29.46px; height: 29.46px;
} }
}
@media only screen and (max-device-width : 320px) {
.form-control {
min-width: 180px;
max-width: 240px;
}
} }
\ No newline at end of file
Supports Markdown
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