diff --git a/src/components/thread/Pagination.jsx b/src/components/thread/Pagination.jsx
index f098f7ea079a4ea20bf5b76de6817a0bb5ca8566..e7fd9a714d4b41f72b0334637762c0f94d2f9ccc 100644
--- a/src/components/thread/Pagination.jsx
+++ b/src/components/thread/Pagination.jsx
@@ -21,7 +21,7 @@ export default function Pagination(props) {
onChange={handlePageChange}
itemClass="page-item"
linkClass="page-link"
- hideNavigation={false}
+ hideNavigation="false"
/>
</div>
);
diff --git a/src/components/thread/Post.jsx b/src/components/thread/Post.jsx
index ee95a3079debb021f7b0c567c1c84a5596d0fcce..4e2e3803e4c89f4ffb85142115452b88141ad7bc 100644
--- a/src/components/thread/Post.jsx
+++ b/src/components/thread/Post.jsx
@@ -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>}
diff --git a/src/styles/profile/Profile.css b/src/styles/profile/Profile.css
index 47306febd84eb58d523ea33ea114ecc3fbe708a0..067c747466fb7d9679db08af7325fa434324f5e2 100644
--- a/src/styles/profile/Profile.css
+++ b/src/styles/profile/Profile.css
@@ -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
diff --git a/src/styles/thread/Form.css b/src/styles/thread/Form.css
index d15c7704598c8e53cc12a718cd87969c5ba00440..7238651ae68312eb13ac972d3e6ffdb8934ae931 100644
--- a/src/styles/thread/Form.css
+++ b/src/styles/thread/Form.css
@@ -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;
+ }
+}
diff --git a/src/styles/thread/ListThreads.css b/src/styles/thread/ListThreads.css
index 21a74ff970f1895b9aa52e4297c2306954fef1e8..cb182085ba29a7d331311de8e6a49c1d91063866 100644
--- a/src/styles/thread/ListThreads.css
+++ b/src/styles/thread/ListThreads.css
@@ -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
diff --git a/src/styles/thread/Post.css b/src/styles/thread/Post.css
index 662a04d164a86afaec8849bd9523ca4c1b91cfc6..b76f836dbfbe0d4754a1815e3c2c29325d37b9c1 100644
--- a/src/styles/thread/Post.css
+++ b/src/styles/thread/Post.css
@@ -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;
}
diff --git a/src/styles/thread/PreviewThread.css b/src/styles/thread/PreviewThread.css
index fff8834466df0bc628993a9ce1e5adf794a64cc6..a5457f1fd8638335ff99b31083f4c93e23815b99 100644
--- a/src/styles/thread/PreviewThread.css
+++ b/src/styles/thread/PreviewThread.css
@@ -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
diff --git a/src/styles/thread/Thread.css b/src/styles/thread/Thread.css
index add265702f691c8a913136d77fc6fb8f0aeb6832..679e68491c727daf6084f871283c15439695ca4f 100644
--- a/src/styles/thread/Thread.css
+++ b/src/styles/thread/Thread.css
@@ -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
diff --git a/src/styles/topic/Topic.css b/src/styles/topic/Topic.css
index 007d02020256d19f6cb44adaf40903453025d046..a3fa43fec4a33fca100bcf640062548c250fd271 100644
--- a/src/styles/topic/Topic.css
+++ b/src/styles/topic/Topic.css
@@ -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
diff --git a/src/styles/topic/TopicList.css b/src/styles/topic/TopicList.css
index 12a13a839a58e1b11b20a74684bb9aae37ea290c..df7f29abf3210042e99d246324135d1f53f8d096 100644
--- a/src/styles/topic/TopicList.css
+++ b/src/styles/topic/TopicList.css
@@ -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
diff --git a/src/styles/utility/Button.css b/src/styles/utility/Button.css
index a7e77ffc3d0034f298ad5f796c9b21f74c090b9b..1dab8914996c4822df97407ad22c28997506519f 100644
--- a/src/styles/utility/Button.css
+++ b/src/styles/utility/Button.css
@@ -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
diff --git a/src/styles/utility/Navbar.css b/src/styles/utility/Navbar.css
index 376e4e78ef3e3f4fd435ccab9537e8353f9b96ab..9424c9d40431e147cb1807776c6f0224f1749774 100644
--- a/src/styles/utility/Navbar.css
+++ b/src/styles/utility/Navbar.css
@@ -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