dashboard css fix
This commit is contained in:
Sonika
parent
f0877effa1
commit
271eea9538
304
src/App.css
304
src/App.css
@ -1,302 +1,8 @@
|
||||
.App {
|
||||
text-align: center;
|
||||
.app-background {
|
||||
background-color: #0d0d0d !important;
|
||||
color:white !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;
|
||||
}
|
||||
|
||||
.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;
|
||||
.app-screen-heights{
|
||||
min-height: 650px;
|
||||
}
|
||||
@ -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 { useMutation } from "@tanstack/react-query";
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import {Link} from 'react-router-dom';
|
||||
import { getLinkedProjects, useGetLinkedProjects } from "APIs/getLinkedProjects";
|
||||
import { useGetUnlinkedProjects } from "APIs/getUnlinkedProjects";
|
||||
import { useGetProjectData } from "APIs/getProject";
|
||||
@ -14,42 +11,54 @@ export default function Dashboard(){
|
||||
const { data: getUnlinkedProjectList } = useGetUnlinkedProjects();
|
||||
const { data: getProjectDataList } = useGetProjectData();
|
||||
|
||||
|
||||
const Item = styled(Paper)(({ theme }) => ({
|
||||
backgroundColor: '#1e1e1e',
|
||||
color:"white",
|
||||
padding: theme.spacing(5),
|
||||
textAlign: 'left',
|
||||
|
||||
}));
|
||||
console.log('sdfsds',getProjectDataList)
|
||||
|
||||
return (
|
||||
<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%', 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 square className="app-background app-screen-heights">
|
||||
<Box sx={{ flexGrow: 1 ,width:'100%'}} >
|
||||
<Grid container spacing={3} >
|
||||
<Grid item xs={5.2} sx={{marginTop:'6%'}}>
|
||||
<Item>
|
||||
<Grid container spacing={2} sx={{flexDirection:'row', flexWrap:'nowrap'}}>
|
||||
<Grid item>
|
||||
<Typography component="h2" variant="h2" style={{color: '#C00243', fontWeight: 'bold'}}>
|
||||
{getUnlinkedProjectList && getUnlinkedProjectList.length}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Typography component="h6" variant="h6" style={{color: '#C00243', margin: '3%'}}>
|
||||
New Projects That needs Contract Linkage
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Item>
|
||||
</Grid>
|
||||
<Grid item xs={5.2} sx={{marginTop:'6%'}}>
|
||||
<Item>
|
||||
<Grid container sx={{flexDirection:'row', flexWrap:'nowrap'}}>
|
||||
<Grid item>
|
||||
<Typography component="h2" variant="h2" style={{color: '#E1AB1A', fontWeight: 'bold'}}>
|
||||
{getLinkedProjectList && getLinkedProjectList.length}
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Typography component="h6" variant="h6" style={{color: '#E1AB1A', margin: '3%'}}>
|
||||
Projects That needs To Be Published
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Item>
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
</Box>
|
||||
</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