diff --git a/src/components/Search.jsx b/src/components/Search.jsx
index 1e2b2d2588ac903bdef4135f7eddae44e54f4702..d5253550db01fa859f56cdd131ab606051f006eb 100644
--- a/src/components/Search.jsx
+++ b/src/components/Search.jsx
@@ -41,6 +41,9 @@ export default function Search(props) {
<b>Search Results for "{searchParam}"</b>
</h1>
<ThreadList thread={threads} />
+ {totalItems == 0 && (
+ <p>Can't find any thread with your keyword.</p>
+ )}
{totalItems != 0 && (
<div className="paginationContainer">
<Pagination
diff --git a/src/components/profile/UpdateProfileForm.jsx b/src/components/profile/UpdateProfileForm.jsx
index 765ce30eec32a04225b30a74cd6600f9f50169e7..2c61ff0602a6a3c764d30d8976b3d29a4b94a2bb 100644
--- a/src/components/profile/UpdateProfileForm.jsx
+++ b/src/components/profile/UpdateProfileForm.jsx
@@ -1,7 +1,7 @@
import axios from 'axios';
import React, { useState } from 'react';
import { useInput } from '../../helpers/hooks/input-hook';
-import '../../styles/profile/UpdateProfileForm.css';
+import '../../styles/thread/Form.css';
import { API_URL } from '../../config/keys';
import AuthService, { authHeader } from '../../helpers/services/auth.service';
@@ -44,7 +44,7 @@ export default function FormCreateThread(props) {
};
return (
- <div className="updateProfileFormContainer">
+ <div className="formContainer">
<div className="back" onClick={back}>
<i className="fas fa-angle-left"></i>
<h5>Back</h5>
diff --git a/src/components/thread/CreateThread.jsx b/src/components/thread/CreateThread.jsx
index b0b14b502711675b917cb8a6757c0e6224342ce3..20dab4c3af7501a59d9c2d96cabf3ebe321574f7 100644
--- a/src/components/thread/CreateThread.jsx
+++ b/src/components/thread/CreateThread.jsx
@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react';
import { useInput } from '../../helpers/hooks/input-hook';
import { authHeader } from '../../helpers/services/auth.service';
import { API_URL } from '../../config/keys';
-import '../../styles/thread/CreateThread.css';
+import '../../styles/thread/Form.css';
export default function ListThreads(props) {
const { history } = props;
@@ -61,7 +61,7 @@ export default function ListThreads(props) {
};
return (
- <div className="createThreadContainer">
+ <div className="formContainer">
<div className="back" onClick={back}>
<i className="fas fa-angle-left"></i>
<h5>Back</h5>
@@ -87,7 +87,7 @@ export default function ListThreads(props) {
type="text"
className="title"
name="title"
- placeholder="Your threads title"
+ placeholder="Your thread's title"
required="false"
{...bindTitle}
/>
@@ -107,7 +107,7 @@ export default function ListThreads(props) {
<textarea
className="body"
name="body"
- placeholder="Tulis"
+ placeholder="Your thread's body"
required="false"
{...bindBody}
/>
diff --git a/src/components/thread/EditThread.jsx b/src/components/thread/EditThread.jsx
index 131bf43dd98550491bfea488a6b6a620d7616445..08bca23a2b3f37ae88b836feabe516d3a59f5332 100644
--- a/src/components/thread/EditThread.jsx
+++ b/src/components/thread/EditThread.jsx
@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react';
import { useInput } from '../../helpers/hooks/input-hook';
import authHeader from '../../helpers/services/auth.service';
import { API_URL } from '../../config/keys';
-import '../../styles/thread/EditThread.css';
+import '../../styles/thread/Form.css';
export default function EditThread(props) {
const { history } = props;
@@ -89,7 +89,7 @@ export default function EditThread(props) {
};
return (
- <div className="editThreadContainer">
+ <div className="formContainer">
<div className="back" onClick={back}>
<i className="fas fa-angle-left"></i>
<h5>Back</h5>
diff --git a/src/components/thread/Post.jsx b/src/components/thread/Post.jsx
index 96f511a6bd93a76f6df057a53dc28bfd95775ed7..ee95a3079debb021f7b0c567c1c84a5596d0fcce 100644
--- a/src/components/thread/Post.jsx
+++ b/src/components/thread/Post.jsx
@@ -145,7 +145,7 @@ export default function Post(props) {
)}
<div className="pointContainer">
<div className="point">
- <p>{points} - likes</p>
+ <p>{points} likes</p>
</div>
</div>
</div>
diff --git a/src/components/thread/Thread.jsx b/src/components/thread/Thread.jsx
index c752e4971fad2bffb2d39005dba4ff892c017523..be93dddf047b6acc3e8507f48fa2f7c588dd4599 100644
--- a/src/components/thread/Thread.jsx
+++ b/src/components/thread/Thread.jsx
@@ -118,13 +118,15 @@ export default function Thread(props) {
required="false"
{...bindInput}
/>
- <button
- className="submitComment"
- id="addCommentButton"
- type="submit"
- >
- Post Comment
- </button>
+ <div>
+ <button
+ className="submitComment"
+ id="addCommentButton"
+ type="submit"
+ >
+ Post Comment
+ </button>
+ </div>
</form>
</div>
)}
diff --git a/src/components/topic/CreateTopicForm.jsx b/src/components/topic/CreateTopicForm.jsx
index 0c7a446c8876b4eb3e2a869eb7c1beb9cea1fc09..c10f3c47d8dbddd1d919b9b8d4b63196ad1ca34b 100644
--- a/src/components/topic/CreateTopicForm.jsx
+++ b/src/components/topic/CreateTopicForm.jsx
@@ -2,7 +2,7 @@
import axios from 'axios';
import React, { useState } from 'react';
import { useInput } from '../../helpers/hooks/input-hook';
-import '../../styles/topic/CreateTopicForm.css';
+import '../../styles/thread/Form.css';
import { API_URL } from '../../config/keys';
import { authHeader, isAdmin } from '../../helpers/services/auth.service';
@@ -40,7 +40,7 @@ export default function CreateTopicForm(props) {
};
return (
- <div className="createTopicFormContainer">
+ <div className="formContainer">
<div className="back" onClick={back}>
<i className="fas fa-angle-left"></i>
<h5>Back</h5>
diff --git a/src/components/topic/TopicList.jsx b/src/components/topic/TopicList.jsx
index afbc4d2f65ca82d69ab1c6a93d805a55020b6410..5b0bdd901f6391ca58a7d6d54129156f687c1675 100644
--- a/src/components/topic/TopicList.jsx
+++ b/src/components/topic/TopicList.jsx
@@ -26,21 +26,31 @@ export default function TopicList(props) {
<Button text="Create Topic" color="orange" url="create/topic" />
)}
</div>
- <div className="topics">
- {topics.map((value) => (
- <Link
- key={value.name}
- to={`topic/${value.name}/page/1`}
- style={{ textDecoration: 'none' }}
- >
- <div className="topicCard">
- <div id="threadCardHeader">
- <h2 id="judul">{value.name}</h2>
+ {topics.length == 0 && (
+ <div className="noTopic">
+ <p>There is no topic yet.</p>
+ </div>
+ )}
+ {topics.length != 0 && (
+ <div className="topics">
+ <div className="topicCards">
+ {topics.map((value) => (
+ <div className="topicCardContainer">
+ <Link
+ to={`topic/${value.name}/page/1`}
+ style={{ textDecoration: 'none' }}
+ >
+ <div className="topicCard">
+ <div id="threadCardHeader">
+ <h2 id="judul">{value.name}</h2>
+ </div>
+ </div>
+ </Link>
</div>
- </div>
- </Link>
- ))}
- </div>
+ ))}
+ </div>
+ </div>
+ )}
</div>
);
}
diff --git a/src/components/utility/Footer.jsx b/src/components/utility/Footer.jsx
index de3e39bd7c26a06695d4645dfcfbd654480ece1d..a54ed55e2e51a9e0d49b4b476c4bc1059488c0ac 100644
--- a/src/components/utility/Footer.jsx
+++ b/src/components/utility/Footer.jsx
@@ -12,8 +12,14 @@ function Footer() {
<p>
<b>Developed under</b>
</p>
- <a target="_blank" href="https://cs.ui.ac.id" className="footerMenu">
- <FasilkomLogo />
+ <a
+ target="_blank"
+ href="https://cs.ui.ac.id"
+ className="footerMenu"
+ >
+ <div id="logoFasilkom">
+ <FasilkomLogo />
+ </div>
</a>
</div>
<div id="footerContent">
diff --git a/src/components/utility/Navbar.jsx b/src/components/utility/Navbar.jsx
index b513032c51f3490fd7ff22625b7390df42e3aa10..08b28efd4a6c04d2ae7ab2285b01cd9c06b44783 100644
--- a/src/components/utility/Navbar.jsx
+++ b/src/components/utility/Navbar.jsx
@@ -26,7 +26,9 @@ const Navbar = (props) => {
<div className="navbar-brand">
<div className="d-flex align-items-center">
<Link to="/page/1">
- <DiskuyLogo />
+ <div id="logoDiskuy">
+ <DiskuyLogo />
+ </div>
</Link>
</div>
</div>
diff --git a/src/styles/App.css b/src/styles/App.css
index 987fee2b9fa5bc22b5cd72e3c5ba2b2d81d07d2e..c62479ec402deb7c84bb592750e3bdfb89f6af5e 100644
--- a/src/styles/App.css
+++ b/src/styles/App.css
@@ -1,3 +1,5 @@
-body {
-
+@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+ p {
+ font-size: 14px;
+ }
}
\ No newline at end of file
diff --git a/src/styles/LoginForm.css b/src/styles/LoginForm.css
index 8fcfc3c05f20a02df6922ce87abaec5c9a713cbf..694ef39d0b585d5492397351ab5df404566844de 100644
--- a/src/styles/LoginForm.css
+++ b/src/styles/LoginForm.css
@@ -14,68 +14,16 @@
margin-bottom: 40px;
}
-.loginButton {
- border-radius: 4px;
- border-width: 0px;
- padding: 8px;
- font-family: "DM Sans";
- color: #ffffff;
- border-style: none;
- background-color: #DE6600;
- border-color: #DE6600;
- margin-right: 24px;
-}
-
-.formContainer h1 {
- font-family: "DM Sans";
- font-size: 36px;
- font-weight: bold;
- color: #003F5A;
-}
-
-label {
- font-family: "DM Sans";
- font-size: 18px;
- color: #000000;
- font-weight: bold;
- margin-bottom: 12px;
-}
-
-.email {
- width: 1205px;
- max-width: 1296px;
- font-family: "DM Sans";
- height: 45px;
- padding: 12px 16px;
- border-radius: 8px;
- border: 0;
- box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25);
- margin-bottom: 32px;
-}
-
-.password {
- width: 1205px;
- max-width: 1296px;
- font-family: "DM Sans";
- height: 45px;
- padding: 12px 16px;
- border-radius: 8px;
- border: 0;
- box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25);
- margin-bottom: 32px;
-}
-
-.buttonSubmit {
- border-radius: 4px;
- border-width: 0px;
- padding: 8px;
- font-family: "DM Sans";
- color: #ffffff;
- border-style: none;
- background-color: #DE6600;
- border-color: #DE6600;
-}
-
-textarea:focus, input:focus, select:focus{
- outline: none;
-}
+@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+ .loginFormContainer {
+ margin-top: 24px;
+ margin-left: 36px;
+ margin-right: 36px;
+ margin-bottom: 184px;
+ }
+
+ .loginFormContainer h1{
+ font-size: 28px;
+ text-align: center;
+ }
+}
\ No newline at end of file
diff --git a/src/styles/Search.css b/src/styles/Search.css
index 20a8d9c28a500a9dc6c983b2af07d9cb043b40fb..9f339866d1e4c663a1cc35c9980493b68b795b48 100644
--- a/src/styles/Search.css
+++ b/src/styles/Search.css
@@ -7,4 +7,15 @@
font-size: 36px;
color: #003F5A;
margin-bottom: 56px;
+}
+
+@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+ .searchresultContainer {
+ margin: 24px 36px
+ }
+
+ .searchresultContainer h1{
+ font-size: 28px;
+ margin-bottom: 36px;
+ }
}
\ No newline at end of file
diff --git a/src/styles/profile/Profile.css b/src/styles/profile/Profile.css
index 5b496661971ab5b105f49f629bba1aa161f27891..0970a3a99374e9add0a4fc56588a87179a2d680e 100644
--- a/src/styles/profile/Profile.css
+++ b/src/styles/profile/Profile.css
@@ -4,12 +4,6 @@
margin-right: 72px;
}
-.header h1 {
- font-family: "DM Sans";
- font-size: 36px;
- color: #007A7A;
-}
-
.profile_section {
display: flex;
flex-direction: column;
@@ -19,14 +13,9 @@
.profile_section h2 {
font-family: "DM Sans";
- font-size: 24px;
+ font-size: 20px;
color: #000000;
-}
-
-.icon {
- width: 180px;
- height: 180px;
- font-size: 180px;
+ margin-top: 8px;
}
.my_threads_section {
@@ -59,4 +48,29 @@
margin: 0px;
margin-bottom: 8px;
color: #DE6600;
+}
+
+@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+ .profileContainer {
+ margin-top: 24px;
+ margin-left: 36px;
+ margin-right: 36px;
+ }
+
+ .profile_section h2 {
+ font-size: 16px;
+ margin-top: 8px;
+ }
+
+ .profile_section {
+ margin-top: 36px;
+ }
+
+ .sub_header_my_threads h3 {
+ font-size: 18px;
+ }
+
+ p {
+ font-size: 14px;
+ }
}
\ No newline at end of file
diff --git a/src/styles/profile/UpdateProfileForm.css b/src/styles/profile/UpdateProfileForm.css
deleted file mode 100644
index 62852f5c4748c1aa293151a188741fa9c9ddeb90..0000000000000000000000000000000000000000
--- a/src/styles/profile/UpdateProfileForm.css
+++ /dev/null
@@ -1,44 +0,0 @@
-.updateProfileFormContainer {
- margin: 36px 72px!important;
-}
-
-.form_container {
- display: flex;
- flex-direction: column;
- margin-top: 60px;
-}
-
-label {
- font-family: "DM Sans";
- font-size: 18px;
- color: #000000;
- font-weight: bold;
- margin-bottom: 12px;
-}
-
-.username {
- min-width: 1120px;
- max-width: 1296px;
- font-family: "DM Sans";
- height: 45px;
- padding: 12px 16px;
- border-radius: 8px;
- border: 0;
- box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25);
- margin-bottom: 32px;
-}
-
-.buttonSubmit {
- border-radius: 4px;
- border-width: 0px;
- padding: 8px;
- font-family: "DM Sans";
- color: #ffffff;
- border-style: none;
- background-color: #DE6600;
- border-color: #DE6600;
-}
-
-textarea:focus, input:focus, select:focus{
- outline: none;
-}
diff --git a/src/styles/thread/EditThread.css b/src/styles/thread/EditThread.css
deleted file mode 100644
index cd91a2029e75bfb8bb2ec17ebe3451c7f916420e..0000000000000000000000000000000000000000
--- a/src/styles/thread/EditThread.css
+++ /dev/null
@@ -1,94 +0,0 @@
-.editThreadContainer {
- margin: 36px 72px!important;
-}
-
-.back {
- margin-top: 32px;
- color: #007A7A;
-}
-
-.back h5 {
- font-family: 'DM Sans';
- font-size: 18px;
-}
-
-.back:hover {
- cursor: pointer;
-}
-
-.header {
- margin-top: 36px;
-}
-
-.header h1 {
- font-family: "DM Sans";
- font-size: 36px;
- color: #003F5A;
-}
-
-.form_section {
- margin-top: 60px;
-}
-
-.form_container {
- display: flex;
- flex-direction: column;
-}
-
-label {
- font-family: "DM Sans";
- font-size: 18px;
- color: #000000;
- font-weight: bold;
- margin-bottom: 12px;
-}
-
-.title {
- min-width: 1120px;
- max-width: 1296px;
- font-family: "DM Sans";
- height: 45px;
- padding: 12px 16px;
- border-radius: 8px;
- border: 0;
- box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25);
- margin-bottom: 32px;
-}
-
-.topic {
- width: 400px;
- font-family: "DM Sans";
- height: 45px;
- padding: 12px 16px;
- border-radius: 8px;
- border: 0;
- box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25);
- margin-bottom: 32px;
-}
-
-.body {
- min-width: 1120px;
- max-width: 1296px;
- font-family: "DM Sans";
- height: 320px;
- padding: 12px 16px;
- border-radius: 8px;
- border: 0;
- box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25);
- margin-bottom: 32px;
-}
-
-.buttonSubmit {
- border-radius: 4px;
- border-width: 0px;
- padding: 8px;
- font-family: "DM Sans";
- color: #ffffff;
- border-style: none;
- background-color: #DE6600;
- border-color: #DE6600;
-}
-
-textarea:focus, input:focus, select:focus{
- outline: none;
-}
diff --git a/src/styles/thread/CreateThread.css b/src/styles/thread/Form.css
similarity index 56%
rename from src/styles/thread/CreateThread.css
rename to src/styles/thread/Form.css
index 158d805d204379bcc9d01c19f579874d77ffc033..3c98893539d2d671f17481cc07ce5515a4c5719c 100644
--- a/src/styles/thread/CreateThread.css
+++ b/src/styles/thread/Form.css
@@ -1,4 +1,4 @@
-.createThreadContainer {
+.formContainer {
margin: 36px 72px!important;
}
@@ -52,8 +52,8 @@ label {
}
.title {
- min-width: 1120px;
- max-width: 1296px;
+ min-width: 1056px;
+ max-width: 1776px;
font-family: "DM Sans";
height: 45px;
padding: 12px 16px;
@@ -75,8 +75,8 @@ label {
}
.body {
- min-width: 1120px;
- max-width: 1296px;
+ min-width: 1056px;
+ max-width: 1776px;
font-family: "DM Sans";
height: 320px;
padding: 12px 16px;
@@ -86,6 +86,18 @@ label {
margin-bottom: 32px;
}
+.username {
+ min-width: 1056px;
+ max-width: 1776px;
+ font-family: "DM Sans";
+ height: 45px;
+ padding: 12px 16px;
+ border-radius: 8px;
+ border: 0;
+ box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25);
+ margin-bottom: 32px;
+}
+
.buttonSubmit {
border-radius: 4px;
border-width: 0px;
@@ -100,3 +112,61 @@ label {
textarea:focus, input:focus, select:focus{
outline: none;
}
+
+@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+ .formContainer {
+ margin: 18px 36px!important;
+ }
+
+ .back {
+ margin-top: 32px;
+ margin-bottom: 12px;
+ }
+
+ .header {
+ margin-top: 18px!important;
+ }
+
+ label {
+ font-size: 14px;
+ margin-bottom: 12px;
+ }
+
+ .back h5 {
+ font-size: 16px;
+ }
+
+ .back i {
+ font-size: 16px;
+ margin-right: 2px;
+ }
+
+ .form_section {
+ margin-top: 36px;
+ }
+
+ .header h1 {
+ font-size: 28px;
+ }
+
+ .title {
+ min-width: 303px;
+ }
+
+ .topic {
+ max-width: 303px;
+ }
+
+ .body {
+ min-width: 303px;
+ }
+
+ .username {
+ min-width: 303px;
+ }
+
+ .buttonContainer {
+ display: flex;
+ justify-content: center;
+ }
+}
diff --git a/src/styles/thread/ListThreads.css b/src/styles/thread/ListThreads.css
index fe9dc82022c4ecb067f101fdfde16fcfaa500f0f..6c2debc61969f38bd49c2100a99c1fec8a4300df 100644
--- a/src/styles/thread/ListThreads.css
+++ b/src/styles/thread/ListThreads.css
@@ -1,3 +1,39 @@
+.header h1 {
+ font-family: "DM Sans";
+ font-size: 2.25rem;
+ color: #007A7A;
+}
+
+.list_threads_section {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+}
+
+.sub_header_list_threads {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.tab {
+ display: flex;
+ align-items: center;
+}
+
+.tab h3 {
+ font-family: "DM Sans";
+ font-size: 1.125rem;
+ color: #000000;
+ opacity: 0.5;
+}
+
+.tab .active {
+ color: #DE6600 !important;
+ font-weight: bold;
+ opacity: 1!important;
+}
+
.listThreadsContainer {
margin-top: 36px;
margin-left: 72px;
@@ -42,4 +78,36 @@
color: #DE6600 !important;
font-weight: bold;
opacity: 1!important;
+}
+
+@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+ .listThreadsContainer {
+ margin-top: 24px;
+ margin-left: 36px;
+ margin-right: 36px;
+ }
+
+ .header h1 {
+ font-size: 36px;
+ }
+
+ .list_threads_section {
+ margin-top: 36px;
+ }
+
+ .sub_header_list_threads {
+ margin-bottom: 28px;
+ }
+
+ .tab h3 {
+ font-size: 16px;
+ margin-right: 20px;
+ margin-top: 4px;
+ }
+
+ .tab .active {
+ color: #DE6600 !important;
+ font-weight: bold;
+ opacity: 1!important;
+ }
}
\ No newline at end of file
diff --git a/src/styles/thread/Post.css b/src/styles/thread/Post.css
index 98f069618b5451161a1ead739a62058918a8f0c1..662a04d164a86afaec8849bd9523ca4c1b91cfc6 100644
--- a/src/styles/thread/Post.css
+++ b/src/styles/thread/Post.css
@@ -1,6 +1,6 @@
#post {
- min-width: 1120px;
- max-width: 1296px;
+ min-width: 1056px;
+ max-width: 1776px;
margin-bottom: 20px;
font-family: "DM Sans";
}
@@ -55,7 +55,7 @@
}
#postContent #judul {
- font-size: 36px;
+ font-size: 32px;
font-weight: bold;
margin-bottom: 24px;
}
@@ -108,4 +108,52 @@ button:focus {
font-size: 36px!important;
border-radius: 50%;
color: #DE6600;
+}
+
+.point p {
+ margin-bottom: 0px;
+}
+
+.point {
+ display: flex;
+ align-items: center;
+}
+
+@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+ #post {
+ min-width: 303px;
+ margin-bottom: 20px;
+ }
+
+ #postHeader {
+ height: auto;
+ padding: 16px 16px;
+ flex-direction: column;
+ }
+
+ #headerButton {
+ margin-top: 24px;
+ }
+
+ #headerButton .buttonContainer div{
+ display: flex;
+ justify-content: space-between;
+ width: 160px;
+ }
+
+ #postContent {
+ padding: 16px;
+ }
+
+ #postContent #judul {
+ font-size: 24px;
+ font-weight: bold;
+ margin-bottom: 24px;
+ }
+
+ #postContent #isi {
+ font-size: 14px;
+ }
+
+
}
\ No newline at end of file
diff --git a/src/styles/thread/PreviewThread.css b/src/styles/thread/PreviewThread.css
index 5e18bf0f0ce7cd0085341c7e7d6c5dc64bf0a6fe..fff8834466df0bc628993a9ce1e5adf794a64cc6 100644
--- a/src/styles/thread/PreviewThread.css
+++ b/src/styles/thread/PreviewThread.css
@@ -1,6 +1,6 @@
#threadCard {
- min-width: 1120px;
- max-width: 1296px;
+ min-width: 1056px;
+ max-width: 1776px;
margin-bottom: 20px;
padding:20px;
box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25);
@@ -44,4 +44,50 @@ p {
#threadCardContent p{
margin-bottom: 0px;
+}
+
+@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+ #threadCard {
+ min-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;
+ }
+
+ .newThreadButton {
+ margin-top: 20px;
+ margin-left: 20px;
+ }
+
+ .fa-thumbs-up {
+ height: 16px;
+ color: #DE6600;
+ }
+
+ p {
+ color: #000000;
+ }
+
+ #judul {
+ font-size: 24px;
+ color: #000000;
+ }
+
+ #threadCardContent {
+ margin-top: 8px;
+ }
+
+ #threadCardContent p{
+ margin-bottom: 0px;
+ }
}
\ No newline at end of file
diff --git a/src/styles/thread/Thread.css b/src/styles/thread/Thread.css
index f6f0907edbeafec10b59c617254560fb2ebe7237..2fb0312dd270d1aa8424e242c106c802ca477cf6 100644
--- a/src/styles/thread/Thread.css
+++ b/src/styles/thread/Thread.css
@@ -54,7 +54,7 @@
.commentBox {
min-width: 1120px;
- max-width: 1296px;
+ max-width: 1776px;
font-family: "DM Sans";
height: 120px;
padding: 12px 16px;
@@ -81,4 +81,50 @@ textarea:focus {
.noCommentLabel p {
font-size: 16px!important;
margin-bottom: 0px!important;
+}
+
+@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+ .threadContainer {
+ margin-top: 24px;
+ margin-bottom: 24px;
+ margin-left: 36px;
+ margin-right: 36px;
+ }
+
+ #addCommentSection h3 {
+ font-size: 18px;
+ text-align: center;
+ }
+
+ #addCommentSection div {
+ display: flex;
+ justify-content: center;
+ }
+
+ .commentBox {
+ min-width: 303px;
+ height: 120px;
+ font-size: 14px;
+ }
+
+ .submitComment {
+ font-size: 16px;
+ }
+
+ .commentText {
+ font-size: 18px;
+ text-align: center;
+ }
+
+ .noCommentLabel p {
+ font-size: 14px;
+ 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/CreateTopicForm.css b/src/styles/topic/CreateTopicForm.css
deleted file mode 100644
index f86398255db10c508a99469a6fd5bc6b6fe3b082..0000000000000000000000000000000000000000
--- a/src/styles/topic/CreateTopicForm.css
+++ /dev/null
@@ -1,43 +0,0 @@
-.createTopicFormContainer {
- margin: 36px 72px!important;
-}
-
-.form_container {
- display: flex;
- flex-direction: column;
-}
-
-label {
- font-family: "DM Sans";
- font-size: 18px;
- color: #000000;
- font-weight: bold;
- margin-bottom: 12px;
-}
-
-.title {
- min-width: 1120px;
- max-width: 1296px;
- font-family: "DM Sans";
- height: 45px;
- padding: 12px 16px;
- border-radius: 8px;
- border: 0;
- box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25);
- margin-bottom: 32px;
-}
-
-.buttonSubmit {
- border-radius: 4px;
- border-width: 0px;
- padding: 8px;
- font-family: "DM Sans";
- color: #ffffff;
- border-style: none;
- background-color: #DE6600;
- border-color: #DE6600;
-}
-
-textarea:focus, input:focus, select:focus{
- outline: none;
-}
diff --git a/src/styles/topic/Topic.css b/src/styles/topic/Topic.css
index 1e20caaaf7955d2741d883f7fcf6b3909eb77f63..bf581d89b2792c8a921e2660a9f76f5a773a4b70 100644
--- a/src/styles/topic/Topic.css
+++ b/src/styles/topic/Topic.css
@@ -55,4 +55,12 @@
color: #D7443E;
margin-left: 24px;
background-color: transparent!important;
+}
+
+@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+ .topicContainer {
+ margin-top: 24px;
+ margin-left: 36px;
+ margin-right: 36px;
+ }
}
\ No newline at end of file
diff --git a/src/styles/topic/TopicList.css b/src/styles/topic/TopicList.css
index f19838f3cff26faf8ac042df2bdfe210809774c9..ed0fd3c5023c120abdbadf4b79f013606a5c3d1e 100644
--- a/src/styles/topic/TopicList.css
+++ b/src/styles/topic/TopicList.css
@@ -1,7 +1,3 @@
-.topicContainer {
- margin-top:36px;
-}
-
.topicContainer h1{
font-family: "DM Sans";
font-size: 36px;
@@ -11,7 +7,11 @@
.topics {
display: flex;
- justify-content: space-around;
+ justify-content: center;
+}
+
+.topicCards {
+ display: flex;
flex-wrap: wrap;
}
@@ -26,7 +26,6 @@
font-family: "DM Sans";
box-shadow: 0px 0px 8px 1px rgba(0,0,0,0.25);
text-align: center;
- margin-bottom: 40px;
align-items: center;
}
@@ -39,5 +38,40 @@
display: flex;
justify-content: space-between;
align-items: center;
- margin-bottom: 60px;
+ margin-bottom: 56px;
+}
+
+.topicCardContainer {
+ padding: 18px;
+ margin-bottom: 8px;
+}
+
+@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+ .button {
+ font-size: 16px;
+ }
+
+ .topicContainer h1{
+ font-family: "DM Sans";
+ font-size: 28px;
+ font-weight: bold;
+ color: #003F5A;
+ }
+
+ .topics {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ }
+
+ .topicCards {
+ justify-content: center;
+ }
+
+ .headerTopic {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 24px;
+ }
}
\ No newline at end of file
diff --git a/src/styles/utility/Button.css b/src/styles/utility/Button.css
index e69b82b9acdbf013dfb3753461287c5643e420f7..a7e77ffc3d0034f298ad5f796c9b21f74c090b9b 100644
--- a/src/styles/utility/Button.css
+++ b/src/styles/utility/Button.css
@@ -22,4 +22,10 @@
padding: 0px!important;
border-radius: 0px!important;
background-color: transparent!important;
+}
+
+@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+ .button {
+ font-size: 16px;
+ }
}
\ No newline at end of file
diff --git a/src/styles/utility/Footer.css b/src/styles/utility/Footer.css
index 810fe2fe2349dbcc9db93009c2ac736919435a73..66923582e3e8595ca7879e8d34e08c5aee59e619 100644
--- a/src/styles/utility/Footer.css
+++ b/src/styles/utility/Footer.css
@@ -39,3 +39,38 @@
color: #ffffff;
font-size: 16px;
}
+
+@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+ #footer {
+ padding: 24px 36px;
+ margin-top: 40px;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .footerContentContainer {
+ display: flex;
+ flex-direction: column;
+ margin: 28px 0px 28px 0px;
+ align-items: center;
+ width: 257px;
+ }
+
+ #footerContent {
+ display: flex;
+ justify-content: center;
+ margin-top: 28px;
+ flex-wrap: wrap;
+ }
+
+ #logoFasilkom svg {
+ width: 160px;
+ height: 68.15px;
+ }
+
+ #fasilkomLogo {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
+}
\ No newline at end of file
diff --git a/src/styles/utility/Navbar.css b/src/styles/utility/Navbar.css
index ecf012364829f317f78f4166cdc05ba556889e0c..376e4e78ef3e3f4fd435ccab9537e8353f9b96ab 100644
--- a/src/styles/utility/Navbar.css
+++ b/src/styles/utility/Navbar.css
@@ -47,4 +47,18 @@
background-color: #DE6600 !important;
border-color: #DE6600 !important;
color: #ffffff !important;
+}
+
+@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
+ .form-control {
+ width: 300px;
+ margin-right: 0px!important;
+ border-radius: 0.25rem 0rem 0rem 0.25rem;
+ border-color: #FEA02F;
+ }
+
+ #logoDiskuy svg {
+ width: 120px;
+ height: 29.46px;
+ }
}
\ No newline at end of file