From ae8b4fdd348837d1102e50402841b76d3f18c379 Mon Sep 17 00:00:00 2001
From: Jonathan Chandra <jonathanjocan@gmail.com>
Date: Tue, 23 Feb 2021 10:53:24 +0700
Subject: [PATCH] fix responsive styling
---
src/components/thread/Pagination.jsx | 2 +-
src/components/thread/Post.jsx | 43 ++++++++++++++--------------
src/styles/profile/Profile.css | 16 +++++++++++
src/styles/thread/Form.css | 18 +++++++++---
src/styles/thread/ListThreads.css | 24 +++++++++++++++-
src/styles/thread/Post.css | 3 +-
src/styles/thread/PreviewThread.css | 23 ++++-----------
src/styles/thread/Thread.css | 13 +++------
src/styles/topic/Topic.css | 11 +++++++
src/styles/topic/TopicList.css | 12 ++++++++
src/styles/utility/Button.css | 6 ++++
src/styles/utility/Navbar.css | 14 +++++++--
12 files changed, 128 insertions(+), 57 deletions(-)
diff --git a/src/components/thread/Pagination.jsx b/src/components/thread/Pagination.jsx
index f098f7e..e7fd9a7 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 ee95a30..4e2e380 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 47306fe..067c747 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 d15c770..7238651 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 21a74ff..cb18208 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 662a04d..b76f836 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 fff8834..a5457f1 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 add2657..679e684 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 007d020..a3fa43f 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 12a13a8..df7f29a 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 a7e77ff..1dab891 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 376e4e7..9424c9d 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
--
GitLab