Fakultas Ilmu Komputer UI

Commit 4b34887f authored by Jonathan's avatar Jonathan
Browse files

Merge branch 'jonathan' into 'master'

fix responsive styling

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