Fakultas Ilmu Komputer UI

Commit 300aeb66 authored by Jonathan's avatar Jonathan
Browse files

Merge branch 'jonathan' into 'master'

Jonathan

See merge request !34
parents 1c5563d1 ec520097
......@@ -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
......
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>
......
......@@ -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}
/>
......
......@@ -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>
......
......@@ -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>
......
......@@ -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>
)}
......
......@@ -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>
......
......@@ -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>
);
}
......@@ -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">
......
......@@ -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>
......
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
.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;
}
.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;
}
.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;