dashboard API integration
This commit is contained in:
Sonika
parent
977f2986d9
commit
17648bcb37
306
src/App.css
306
src/App.css
@ -2,37 +2,301 @@
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.App-logo {
|
||||
height: 40vmin;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.App-logo {
|
||||
animation: App-logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.App-header {
|
||||
background-color: #282c34;
|
||||
min-height: 100vh;
|
||||
background-color:#101010;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
font-size: calc(10px + 2vmin);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.App-footer {
|
||||
background-color: #101010;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
color: white;
|
||||
/* position : absolute;
|
||||
bottom : 0;
|
||||
width:100%; */
|
||||
}
|
||||
|
||||
.App-link {
|
||||
color: #61dafb;
|
||||
}
|
||||
|
||||
@keyframes App-logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
.header-menu {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-right: 15%;
|
||||
}
|
||||
|
||||
.header-menu a {
|
||||
margin-left: 12%;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
width: 350px;
|
||||
}
|
||||
|
||||
.search-field {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.gridListRoot {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
overflow: hidden;
|
||||
margin-top: 2%;
|
||||
}
|
||||
|
||||
.gridList {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gridListItem {
|
||||
width: 245.5px;
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
@media (min-width: 1500px) {
|
||||
.gridListItem {
|
||||
width: 320px;
|
||||
height: 328px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1300px) and (max-width: 1500px) {
|
||||
.gridListItem {
|
||||
width: 272px;
|
||||
height: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.gridListItem {
|
||||
width: 360px;
|
||||
height: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) and (max-width: 800px) {
|
||||
.gridListItem {
|
||||
width: 288px;
|
||||
height: 260px;
|
||||
}
|
||||
}
|
||||
|
||||
.fa {
|
||||
padding: 15px;
|
||||
font-size: 25px;
|
||||
width: 50px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
margin: 5px 3px 0px 3px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.fa:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.fa-facebook {
|
||||
background: #3B5998;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fa-twitter {
|
||||
background: #55ACEE;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fa-youtube {
|
||||
background: #bb0000;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fa-instagram {
|
||||
background: #125688;
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.card-container {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 5% auto;
|
||||
width: 210px;
|
||||
height: 210px;
|
||||
perspective: 1000px;
|
||||
margin-bottom: 10%;
|
||||
}
|
||||
|
||||
|
||||
.card-body {
|
||||
width: 210px;
|
||||
height: 210px;
|
||||
transform-style: preserve-3d;
|
||||
transition: all .7s linear;
|
||||
}
|
||||
|
||||
.card-container:last-child{
|
||||
margin-right: 35px;
|
||||
}
|
||||
|
||||
/* .card-container:hover .card-body {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.card-container:hover > .card-body > .side-front {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: opacity 1s ease-in, visibility .75s linear;
|
||||
} */
|
||||
|
||||
/*- Card sides -*/
|
||||
.card-side {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #212121;
|
||||
background-color: #fff;
|
||||
backface-visibility: hidden;
|
||||
box-shadow: 0 10px 35px rgba(50,50,93,.1),0 2px 15px rgba(0,0,0,.07);
|
||||
}
|
||||
|
||||
.side-front {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
/*- Back side -*/
|
||||
.side-back {
|
||||
z-index: 2;
|
||||
padding: 32px;
|
||||
transform: rotateY(180deg);
|
||||
background-color: #878383
|
||||
}
|
||||
|
||||
.side-back div {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.side-back a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.side-back a:hover {
|
||||
color: black;
|
||||
}
|
||||
|
||||
.flip-card-div {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.flip-card-div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
div[role=columnheader] {
|
||||
height: 35px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.select-field {
|
||||
width : 35%;
|
||||
}
|
||||
|
||||
.ReactTable .rt-tbody .rt-tr-group {
|
||||
border-bottom: solid 1px #2d333b !important;
|
||||
}
|
||||
|
||||
.ReactTable .rt-thead .rt-tr {
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.card_header span {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.project_details {
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.project_details li {
|
||||
padding-top: 0px !important;
|
||||
}
|
||||
|
||||
/* ul[class*="MuiList-padding-"] {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
} */
|
||||
|
||||
.groupArrow {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
color: white;
|
||||
margin: 0 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.noResult {
|
||||
margin: auto;
|
||||
width: 288px;
|
||||
}
|
||||
|
||||
.img {
|
||||
position: absolute;
|
||||
left: 45%;
|
||||
top: 55%;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* .full-height div:nth-of-type(3n) {
|
||||
width: 10px !important;
|
||||
top: 100px !important;
|
||||
}
|
||||
|
||||
.full-height div:nth-of-type(3n) div {
|
||||
background-color: red !important;
|
||||
} */
|
||||
|
||||
.track-vertical {
|
||||
width: 10px !important;
|
||||
top: 100px !important;
|
||||
bottom: 2px;
|
||||
right: 2px;
|
||||
border-radius: 3px;
|
||||
background: rgba(255, 255, 255, 0.111);
|
||||
}
|
||||
.track-vertical .thumb-vertical {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 10% !important;
|
||||
cursor: pointer;
|
||||
border-radius: inherit;
|
||||
background-color: white;
|
||||
}
|
||||
@ -15,39 +15,39 @@ export default function Dashboard(){
|
||||
console.log('sdfsds',getLinkedProjectList,getUnlinkedProjectList)
|
||||
|
||||
return (
|
||||
// <Paper sx={{bgcolor:'#1e1e1e', height:600, color:'white'}}>
|
||||
<Paper sx={{bgcolor:'#1e1e1e', height:600, color:'white',margin:'0px !important'}}>
|
||||
<div className="home-page">
|
||||
<div className="navbar-margin stories" style={{minHeight : '500px'}}>
|
||||
<h1 className="mobile-heading">home</h1>
|
||||
<div style={{marginTop: '5%', marginLeft: '1%', marginRight: '1%', display: 'flex', flexDirection: 'row', justifyContent:'space-between'}}>
|
||||
<Card style={{paddingTop: '5px', height: '170px', width: '49.5%'}}>
|
||||
{/* <Link to={{ pathname: `${process.env.PUBLIC_URL}/projects`, state: { type: 'unlinked'} }}> */}
|
||||
<CardContent style={{margin: '6%', display: 'flex'}}>
|
||||
<Typography component="h2" variant="h2" style={{color: '#C00243', fontWeight: 'bold'}}>
|
||||
{getLinkedProjectList.length}
|
||||
</Typography>
|
||||
<Typography component="h6" variant="h6" style={{color: '#C00243', margin: '3%'}}>
|
||||
New Projects That needs Contract Linkage
|
||||
</Typography>
|
||||
</CardContent>
|
||||
{/* </Link> */}
|
||||
</Card>
|
||||
<Card style={{paddingTop: '5px', height: '170px', width: '49.5%'}}>
|
||||
{/* <Link to={{ pathname: `${process.env.PUBLIC_URL}/projects`, state: { type: 'linked'} }}> */}
|
||||
<CardContent style={{margin: '6%', display: 'flex'}}>
|
||||
<Typography component="h2" variant="h2" style={{color: '#E1AB1A', fontWeight: 'bold'}}>
|
||||
{getUnlinkedProjectList.length}
|
||||
</Typography>
|
||||
<Typography component="h6" variant="h6" style={{color: '#E1AB1A', margin: '3%'}}>
|
||||
Projects That needs To Be Published
|
||||
</Typography>
|
||||
</CardContent>
|
||||
{/* </Link> */}
|
||||
</Card>
|
||||
</div>
|
||||
<div className="navbar-margin stories" style={{minHeight : '500px'}}>
|
||||
<h1 className="mobile-heading">Home</h1>
|
||||
<div style={{marginTop: '5%', marginLeft: '1%', marginRight: '1%', display: 'flex', flexDirection: 'row', justifyContent:'space-between'}}>
|
||||
<Card style={{paddingTop: '5px', height: '170px', width: '49.5%', backgroundColor:'#181817'}}>
|
||||
{/* <Link to={{ pathname: `${process.env.PUBLIC_URL}/projects`, state: { type: 'unlinked'} }}> */}
|
||||
<CardContent style={{margin: '6%', display: 'flex'}}>
|
||||
<Typography component="h2" variant="h2" style={{color: '#C00243', fontWeight: 'bold'}}>
|
||||
{getUnlinkedProjectList && getUnlinkedProjectList.length}
|
||||
</Typography>
|
||||
<Typography component="h6" variant="h6" style={{color: '#C00243', margin: '3%'}}>
|
||||
New Projects That needs Contract Linkage
|
||||
</Typography>
|
||||
</CardContent>
|
||||
{/* </Link> */}
|
||||
</Card>
|
||||
<Card style={{paddingTop: '5px', height: '170px', width: '49.5%', backgroundColor:'#181817',}}>
|
||||
{/* <Link to={{ pathname: `${process.env.PUBLIC_URL}/projects`, state: { type: 'linked'} }}> */}
|
||||
<CardContent style={{margin: '6%', display: 'flex'}}>
|
||||
<Typography component="h2" variant="h2" style={{color: '#E1AB1A', fontWeight: 'bold'}}>
|
||||
{getLinkedProjectList && getLinkedProjectList.length}
|
||||
</Typography>
|
||||
<Typography component="h6" variant="h6" style={{color: '#E1AB1A', margin: '3%'}}>
|
||||
Projects That needs To Be Published
|
||||
</Typography>
|
||||
</CardContent>
|
||||
{/* </Link> */}
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</Paper>
|
||||
|
||||
)
|
||||
}
|
||||
@ -38,7 +38,7 @@ function Header() {
|
||||
};
|
||||
|
||||
return (
|
||||
<AppBar position="static" sx={{bgcolor:'#1e1e1e', height:'94px'}}>
|
||||
<AppBar position="static" sx={{bgcolor:'#0d0d0d', height:'94px'}}>
|
||||
<Container maxWidth="xl">
|
||||
|
||||
<Toolbar disableGutters sx={{marginTop:'10px'}}>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user