Fakultas Ilmu Komputer UI

Commit 656f9b6c authored by Jonathan Chandra's avatar Jonathan Chandra
Browse files

fix css and add responsive css

parent 27b0362f
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 authHeader from '../../helpers/services/authHeader.service';
import { API_URL } from '../../config/keys';
import AuthService from '../../helpers/services/auth.service';
......@@ -45,7 +45,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>
......
......@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react';
import { useInput } from '../../helpers/hooks/input-hook';
import authHeader from '../../helpers/services/authHeader.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>
......
......@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react';
import { useInput } from '../../helpers/hooks/input-hook';
import authHeader from '../../helpers/services/authHeader.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>
......
......@@ -135,7 +135,7 @@ export default function Post(props) {
)}
<div className="pointContainer">
<div className="point">
<p>{points} - likes</p>
<p>{points} likes</p>
</div>
</div>
</div>
......
......@@ -117,13 +117,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>
)}
......
......@@ -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 authHeader from '../../helpers/services/authHeader.service';
import { API_URL } from '../../config/keys';
import AuthService from '../../helpers/services/auth.service';
......@@ -44,7 +44,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>
......
......@@ -29,18 +29,22 @@ export default function TopicList(props) {
)}
</div>
<div className="topics">
{topics.map((value) => (
<Link
to={`topic/${value.name}/page/1`}
style={{ textDecoration: 'none' }}
>
<div className="topicCard">
<div id="threadCardHeader">
<h2 id="judul">{value.name}</h2>
</div>
<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>
</Link>
))}
))}
</div>
</div>
</div>
);
......
......@@ -17,7 +17,9 @@ function Footer() {
href="https://cs.ui.ac.id"
className="footerMenu"
>
<FasilkomLogo />
<div id="logoFasilkom">
<FasilkomLogo />
</div>
</a>
</div>
<div id="footerContent">
......
......@@ -29,7 +29,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>
......
body {
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
p {
font-size: 14px;
}
}
\ No newline at end of file
......@@ -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
......@@ -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
......@@ -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
......@@ -2,12 +2,6 @@
margin: 36px 72px!important;
}
.form_container {
display: flex;
flex-direction: column;
margin-top: 60px;
}
label {
font-family: "DM Sans";
font-size: 18px;
......@@ -42,3 +36,11 @@ label {
textarea:focus, input:focus, select:focus{
outline: none;
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
label {
font-size: 14px;
margin-bottom: 12px;
}
}
\ No newline at end of file
......@@ -7,11 +7,6 @@
color: #007A7A;
}
.back h5 {
font-family: 'DM Sans';
font-size: 18px;
}
.back:hover {
cursor: pointer;
}
......@@ -22,19 +17,10 @@
.header h1 {
font-family: "DM Sans";
font-size: 36px;
font-size: 2.25rem;
color: #003F5A;
}
.form_section {
margin-top: 60px;
}
.form_container {
display: flex;
flex-direction: column;
}
label {
font-family: "DM Sans";
font-size: 18px;
......@@ -43,41 +29,6 @@ label {
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;
......@@ -92,3 +43,9 @@ label {
textarea:focus, input:focus, select:focus{
outline: none;
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.header h1 {
font-size: 28px;
}
}
\ No newline at end of file
.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;
}
}
.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 {