Skip to content

Commit

Permalink
#11 add scrollable on the dashboard vertically and search option on t…
Browse files Browse the repository at this point in the history 
…he sidebar
  • Loading branch information
@jianmingtu
jianmingtu committed Apr 14, 2021
1 parent 586bc4c commit 865432e
Show file tree
Hide file tree
Showing 6 changed files with 370 additions and 3 deletions.
8 changes: 7 additions & 1 deletion client/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,13 @@ import Main from "./components/main/Main";
import Navbar from "./components/navbar/Navbar";
import Sidebar from "./components/sidebar/Sidebar";

import Posts from "./components/posts/Post"

import LoginPage from "./layouts/LoginPage";
import SignOutPage from "./layouts/SignOutPage"
import NewPostPage from "./layouts/NewPostPage"


import * as token from './token'

const App = () => {
Expand Down Expand Up @@ -43,7 +46,10 @@ const App = () => {
</Route>
<Route path="/newPost">
<NewPostPage></NewPostPage>
</Route>
</Route>
<Route path="/posts">
<Posts></Posts>
</Route>
<Route path="/">
<Main user={user}></Main>
</Route>
Expand Down
165 changes: 165 additions & 0 deletions client/src/components/posts/Post.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,165 @@
import "./Posts.css";
import hello from "../../assets/hello.svg";
import Chart from "../charts/Chart";

const Posts = () => {
return (
<main>
<div className="main__container">
{/* <!-- MAIN TITLE STARTS HERE --> */}

<div className="main__title">
<img src={hello} alt="hello" />
<div className="main__greeting">
<h1>Hello Codersbite</h1>
<p>Welcome to your admin dashboard</p>
</div>
</div>

{/* <!-- MAIN TITLE ENDS HERE --> */}

{/* <!-- MAIN CARDS STARTS HERE --> */}
<div className="main__cards">
<div className="card">
<i
className="fa fa-user-o fa-2x text-lightblue"
aria-hidden="true"
></i>
<div className="card_inner">
<p className="text-primary-p">Number of Subscribers</p>
<span className="font-bold text-title">578</span>
</div>
</div>

<div className="card">
<i className="fa fa-calendar fa-2x text-red" aria-hidden="true"></i>
<div className="card_inner">
<p className="text-primary-p">Times of Watching</p>
<span className="font-bold text-title">2467</span>
</div>
</div>

<div className="card">
<i
className="fa fa-video-camera fa-2x text-yellow"
aria-hidden="true"
></i>
<div className="card_inner">
<p className="text-primary-p">Number of Videos</p>
<span className="font-bold text-title">340</span>
</div>
</div>

<div className="card">
<i
className="fa fa-thumbs-up fa-2x text-green"
aria-hidden="true"
></i>
<div className="card_inner">
<p className="text-primary-p">Number of Likes</p>
<span className="font-bold text-title">645</span>
</div>
</div>
</div>
{/* <!-- MAIN CARDS ENDS HERE --> */}

{/* <!-- CHARTS STARTS HERE --> */}
<div className="charts">
<div className="charts__left">
<div className="charts__left__title">
<div>
<h1>Daily Reports</h1>
<p>Cupertino, California, USA</p>
</div>
<i className="fa fa-usd" aria-hidden="true"></i>
</div>
<Chart />
</div>

<div className="charts__right">
<div className="charts__right__title">
<div>
<h1>Stats Reports</h1>
<p>Cupertino, California, USA</p>
</div>
<i className="fa fa-usd" aria-hidden="true"></i>
</div>

<div className="charts__right__cards">
<div className="card1">
<h1>Income</h1>
<p>$75,300</p>
</div>

<div className="card2">
<h1>Sales</h1>
<p>$124,200</p>
</div>

<div className="card3">
<h1>Users</h1>
<p>3900</p>
</div>

<div className="card4">
<h1>Orders</h1>
<p>1881</p>
</div>
</div>
</div>
</div>
{/* <!-- CHARTS ENDS HERE --> */}

{/* <!-- CHARTS STARTS HERE --> */}
<div className="charts">
<div className="charts__left">
<div className="charts__left__title">
<div>
<h1>Daily Reports</h1>
<p>Cupertino, California, USA</p>
</div>
<i className="fa fa-usd" aria-hidden="true"></i>
</div>
<Chart />
</div>

<div className="charts__right">
<div className="charts__right__title">
<div>
<h1>Stats Reports</h1>
<p>Cupertino, California, USA</p>
</div>
<i className="fa fa-usd" aria-hidden="true"></i>
</div>

<div className="charts__right__cards">
<div className="card1">
<h1>Income</h1>
<p>$75,300</p>
</div>

<div className="card2">
<h1>Sales</h1>
<p>$124,200</p>
</div>

<div className="card3">
<h1>Users</h1>
<p>3900</p>

</div>

<div className="card4">
<h1>Orders</h1>
<p>1881</p>
</div>
</div>
</div>
</div>
{/* <!-- CHARTS ENDS HERE --> */}
</div>
</main>
);
};

export default Posts;
195 changes: 195 additions & 0 deletions client/src/components/posts/Posts.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,195 @@
main {
background: #f3f4f6;
grid-area: main;
overflow-y: auto;
}

.main__container {
padding: 20px 35px;
}

.main__title {
display: flex;
align-items: center;
}

.main__title > img {
max-height: 100px;
object-fit: contain;
margin-right: 20px;
}

.main__greeting > h1 {
font-size: 24px;
color: #2e4a66;
margin-bottom: 5px;
}

.main__greeting > p {
font-size: 14px;
font-weight: 700;
color: #a5aaad;
}

.main__cards {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 30px;
margin: 20px 0;
}

.card {
display: flex;
flex-direction: column;
justify-content: space-around;
height: 70px;
padding: 25px;
border-radius: 5px;
background: #ffffff;
box-shadow: 5px 5px 13px #ededed, -5px -5px 13px #ffffff;
}

.card_inner {
display: flex;
align-items: center;
justify-content: space-between;
}

.card_inner > span {
font-size: 25px;
}

.charts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-top: 50px;
}

.charts__left {
padding: 25px;
border-radius: 5px;
background: #ffffff;
box-shadow: 5px 5px 13px #ededed, -5px -5px 13px #ffffff;
}

.charts__left__title {
display: flex;
align-items: center;
justify-content: space-between;
}

.charts__left__title > div > h1 {
font-size: 24px;
color: #2e4a66;
margin-bottom: 5px;
}

.charts__left__title > div > p {
font-size: 14px;
font-weight: 700;
color: #a5aaad;
}

.charts__left__title > i {
color: #ffffff;
font-size: 20px;
background: #ffc100;
border-radius: 200px 0px 200px 200px;
-moz-border-radius: 200px 0px 200px 200px;
-webkit-border-radius: 200px 0px 200px 200px;
border: 0px solid #000000;
padding: 15px;
}

.charts__right {
padding: 25px;
border-radius: 5px;
background: #ffffff;
box-shadow: 5px 5px 13px #ededed, -5px -5px 13px #ffffff;
}

.charts__right__title {
display: flex;
align-items: center;
justify-content: space-between;
}

.charts__right__title > div > h1 {
font-size: 24px;
color: #2e4a66;
margin-bottom: 5px;
}

.charts__right__title > div > p {
font-size: 14px;
font-weight: 700;
color: #a5aaad;
}

.charts__right__title > i {
color: #ffffff;
font-size: 20px;
background: #39447a;
border-radius: 200px 0px 200px 200px;
-moz-border-radius: 200px 0px 200px 200px;
-webkit-border-radius: 200px 0px 200px 200px;
border: 0px solid #000000;
padding: 15px;
}

.charts__right__cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 30px;
}

.card1 {
background: #d1ecf1;
color: #35a4ba;
text-align: center;
padding: 25px;
border-radius: 5px;
font-size: 14px;
}

.card2 {
background: #d2f9ee;
color: #38e1b0;
text-align: center;
padding: 25px;
border-radius: 5px;
font-size: 14px;
}

.card3 {
background: #d6d8d9;
color: #3a3e41;
text-align: center;
padding: 25px;
border-radius: 5px;
font-size: 14px;
}

.card4 {
background: #fddcdf;
color: #f65a6f;
text-align: center;
padding: 25px;
border-radius: 5px;
font-size: 14px;
}

@media only screen and (max-width: 855px) {
.main__cards {
grid-template-columns: 1fr;
gap: 10px;
margin-bottom: 0;
}

.charts {
grid-template-columns: 1fr;
margin-top: 30px;
}
}
1 change: 1 addition & 0 deletions client/src/components/sidebar/Sidebar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
padding: 20px;
-webkit-transition: all 0.5s;
transition: all 0.5s;
height: 100vh;
}

/* #sidebar:after {
Expand Down
Loading

0 comments on commit 865432e

Please sign in to comment.