Fakultas Ilmu Komputer UI

Skip to content

GitLab

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

fix css and add responsive css

parent 27b0362f
Hide whitespace changes
Inline Side-by-side
src/components/profile/UpdateProfileForm.jsx
View file @ 656f9b6c
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>
......
src/components/thread/CreateThread.jsx
View file @ 656f9b6c
......@@ -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>
......
src/components/thread/EditThread.jsx
View file @ 656f9b6c
......@@ -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>
......
src/components/thread/Post.jsx
View file @ 656f9b6c
......@@ -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>
......
src/components/thread/Thread.jsx
View file @ 656f9b6c
......@@ -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>
)}
......
src/components/topic/CreateTopicForm.jsx
View file @ 656f9b6c
......@@ -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>
......
src/components/topic/TopicList.jsx
View file @ 656f9b6c
......@@ -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>
);
......
src/components/utility/Footer.jsx
View file @ 656f9b6c
......@@ -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">
......
src/components/utility/Navbar.jsx
View file @ 656f9b6c
......@@ -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>
......
src/styles/App.css
View file @ 656f9b6c
body {
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
p {
font-size: 14px;
}
}
\ No newline at end of file
src/styles/LoginForm.css
View file @ 656f9b6c
......@@ -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
src/styles/Search.css
View file @ 656f9b6c
......@@ -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
src/styles/profile/Profile.css
View file @ 656f9b6c
......@@ -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
src/styles/profile/UpdateProfileForm.css
View file @ 656f9b6c
......@@ -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
src/styles/thread/EditThread.css
View file @ 656f9b6c
......@@ -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
src/styles/thread/CreateThread.css → src/styles/thread/Form.css
View file @ 656f9b6c
.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;
}
}
src/styles/thread/ListThreads.css
View file @ 656f9b6c
.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 {