dashboard css fix
This commit is contained in:
Sonika
parent
f0877effa1
commit
271eea9538
302
src/App.css
302
src/App.css
@ -1,302 +1,8 @@
|
|||||||
.App {
|
.app-background {
|
||||||
text-align: center;
|
background-color: #0d0d0d !important;
|
||||||
}
|
|
||||||
|
|
||||||
.App-header {
|
|
||||||
background-color:#101010;
|
|
||||||
height: 80px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: 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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
color:white !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.gridListRoot {
|
.app-screen-heights{
|
||||||
display: flex;
|
min-height: 650px;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
@ -1,8 +1,5 @@
|
|||||||
import { Card, CardContent, Grid, Paper, Typography } from "@mui/material";
|
import { Box, Card, CardContent, Grid, Paper, Typography, styled } from "@mui/material";
|
||||||
import React, { useEffect } from "react";
|
import React, { useEffect } from "react";
|
||||||
import { useMutation } from "@tanstack/react-query";
|
|
||||||
import { useQuery } from '@tanstack/react-query';
|
|
||||||
import {Link} from 'react-router-dom';
|
|
||||||
import { getLinkedProjects, useGetLinkedProjects } from "APIs/getLinkedProjects";
|
import { getLinkedProjects, useGetLinkedProjects } from "APIs/getLinkedProjects";
|
||||||
import { useGetUnlinkedProjects } from "APIs/getUnlinkedProjects";
|
import { useGetUnlinkedProjects } from "APIs/getUnlinkedProjects";
|
||||||
import { useGetProjectData } from "APIs/getProject";
|
import { useGetProjectData } from "APIs/getProject";
|
||||||
@ -14,42 +11,54 @@ export default function Dashboard(){
|
|||||||
const { data: getUnlinkedProjectList } = useGetUnlinkedProjects();
|
const { data: getUnlinkedProjectList } = useGetUnlinkedProjects();
|
||||||
const { data: getProjectDataList } = useGetProjectData();
|
const { data: getProjectDataList } = useGetProjectData();
|
||||||
|
|
||||||
|
const Item = styled(Paper)(({ theme }) => ({
|
||||||
|
backgroundColor: '#1e1e1e',
|
||||||
|
color:"white",
|
||||||
|
padding: theme.spacing(5),
|
||||||
|
textAlign: 'left',
|
||||||
|
|
||||||
|
}));
|
||||||
console.log('sdfsds',getProjectDataList)
|
console.log('sdfsds',getProjectDataList)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Paper sx={{bgcolor:'#1e1e1e', height:600, color:'white',margin:'0px !important'}}>
|
<Paper square className="app-background app-screen-heights">
|
||||||
<div className="home-page">
|
<Box sx={{ flexGrow: 1 ,width:'100%'}} >
|
||||||
<div className="navbar-margin stories" style={{minHeight : '500px'}}>
|
<Grid container spacing={3} >
|
||||||
{/* <h1 className="mobile-heading">Home</h1> */}
|
<Grid item xs={5.2} sx={{marginTop:'6%'}}>
|
||||||
<div style={{marginTop: '5%', marginLeft: '1%', marginRight: '1%', display: 'flex', flexDirection: 'row', justifyContent:'space-between'}}>
|
<Item>
|
||||||
<Card style={{paddingTop: '5px', height: '170px', width: '49.5%', backgroundColor:'#181817'}}>
|
<Grid container spacing={2} sx={{flexDirection:'row', flexWrap:'nowrap'}}>
|
||||||
{/* <Link to={{ pathname: `${process.env.PUBLIC_URL}/projects`, state: { type: 'unlinked'} }}> */}
|
<Grid item>
|
||||||
<CardContent style={{margin: '6%', display: 'flex'}}>
|
|
||||||
<Typography component="h2" variant="h2" style={{color: '#C00243', fontWeight: 'bold'}}>
|
<Typography component="h2" variant="h2" style={{color: '#C00243', fontWeight: 'bold'}}>
|
||||||
{getUnlinkedProjectList && getUnlinkedProjectList.length}
|
{getUnlinkedProjectList && getUnlinkedProjectList.length}
|
||||||
</Typography>
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
<Grid item>
|
||||||
<Typography component="h6" variant="h6" style={{color: '#C00243', margin: '3%'}}>
|
<Typography component="h6" variant="h6" style={{color: '#C00243', margin: '3%'}}>
|
||||||
New Projects That needs Contract Linkage
|
New Projects That needs Contract Linkage
|
||||||
</Typography>
|
</Typography>
|
||||||
</CardContent>
|
</Grid>
|
||||||
{/* </Link> */}
|
</Grid>
|
||||||
</Card>
|
</Item>
|
||||||
<Card style={{paddingTop: '5px', height: '170px', width: '49.5%', backgroundColor:'#181817',}}>
|
</Grid>
|
||||||
{/* <Link to={{ pathname: `${process.env.PUBLIC_URL}/projects`, state: { type: 'linked'} }}> */}
|
<Grid item xs={5.2} sx={{marginTop:'6%'}}>
|
||||||
<CardContent style={{margin: '6%', display: 'flex'}}>
|
<Item>
|
||||||
|
<Grid container sx={{flexDirection:'row', flexWrap:'nowrap'}}>
|
||||||
|
<Grid item>
|
||||||
<Typography component="h2" variant="h2" style={{color: '#E1AB1A', fontWeight: 'bold'}}>
|
<Typography component="h2" variant="h2" style={{color: '#E1AB1A', fontWeight: 'bold'}}>
|
||||||
{getLinkedProjectList && getLinkedProjectList.length}
|
{getLinkedProjectList && getLinkedProjectList.length}
|
||||||
</Typography>
|
</Typography>
|
||||||
|
</Grid>
|
||||||
|
<Grid item>
|
||||||
<Typography component="h6" variant="h6" style={{color: '#E1AB1A', margin: '3%'}}>
|
<Typography component="h6" variant="h6" style={{color: '#E1AB1A', margin: '3%'}}>
|
||||||
Projects That needs To Be Published
|
Projects That needs To Be Published
|
||||||
</Typography>
|
</Typography>
|
||||||
</CardContent>
|
</Grid>
|
||||||
{/* </Link> */}
|
</Grid>
|
||||||
</Card>
|
</Item>
|
||||||
</div>
|
</Grid>
|
||||||
</div>
|
|
||||||
</div>
|
</Grid>
|
||||||
|
</Box>
|
||||||
</Paper>
|
</Paper>
|
||||||
|
|
||||||
)
|
)
|
||||||
|
|||||||
10
src/components/projects/ProjectFilter.js
Normal file
10
src/components/projects/ProjectFilter.js
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
export default function ProjectFilter(){
|
||||||
|
|
||||||
|
return(
|
||||||
|
<>
|
||||||
|
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user