Unverified Commit 4f87c47a authored by Zhou (Link)  Fang's avatar Zhou (Link) Fang Committed by GitHub
Browse files

Portal-Added overview section (#209)

* Added basic router and navigation layout

* finished navigation logic

* made the left nav bar a component and improved the styles

* Added a demo collapse section

* finished the basic faq collapse list

* finished the basic faq collapse list

* finished style for FAQs part

* removed unused imports

* minor update to fix a React warning

* Added fetch for user name and avatar

* made some improvements based on feedback

* Added basic components and styles

* commented out home

* fixed unused variables issue

* Server responds 302 redirect when there is no token/q_session #193



Adds property that stops auto redirect when there is an issue with
authentication and source is Javascript.

* Changed some of the navs to sub navs

* finished overview section

* fixed the warning
Co-authored-by: Martin Lowe's avatarMartin Lowe <martin.lowe@eclipse-foundation.org>
parent 9d89be15
......@@ -208,6 +208,9 @@ export const NAV_OPTIONS_DATA = [
export const drawerWidth = 280;
export const themeBlack = '#0B0B0B';
export const darkOrange = '#DD730A';
export const brightOrange = '#FC9D05';
export const iconGray = '#9B9BAE';
export const darkGray = '#807C7C';
export const borderRadiusSize = 5;
export const mainContentBGColor = '#fff';
export const brightBlue = '#08BDF4';
import { Typography } from '@material-ui/core';
import { createStyles, makeStyles, Card, Container, Typography, Link } from '@material-ui/core';
import BusinessCenterIcon from '@material-ui/icons/BusinessCenter';
import PeopleAltIcon from '@material-ui/icons/PeopleAlt';
import DescriptionIcon from '@material-ui/icons/Description';
import ContactSupportIcon from '@material-ui/icons/ContactSupport';
import { brightBlue, brightOrange, darkGray, darkOrange, iconGray } from '../../../Constants/Constants';
const useStyles = makeStyles(() =>
createStyles({
main: { padding: '90px 0 0' },
overviewCtn: {
display: 'flex',
marginTop: 40,
padding: 0,
justifyContent: 'space-between',
},
overviewCard: {
width: '22%',
height: 90,
backgroundColor: '#fff',
boxShadow: '1px 1px 15px rgba(0,0,0,0.1)',
transition: 'all 0.2s ease-out',
'&:hover': {
boxShadow: '2px 2px 15px rgba(0,0,0,0.15)',
transform: 'scale(1.03)',
transition: 'all 0.2s ease-out',
},
},
overviewAnchor: {
width: '100%',
display: 'flex',
alignItems: 'center',
'&:hover': { textDecoration: 'none' },
},
overviewIcon: {
height: '100%',
width: 85,
padding: 18,
marginRight: 12,
color: iconGray,
borderRadius: 4,
},
overviewTitle: {
color: darkGray,
paddingRight: 10,
},
})
);
export default function DashboardOverview() {
return (
<div
style={{
paddingTop: 90,
}}
>
<Typography variant="h4">Overview</Typography>
{
// below are placeholders
}
<div
style={{
display: 'flex',
marginTop: 40,
justifyContent: 'space-between',
}}
>
<div
const classes = useStyles();
const overviewItemData = [
{
title: 'Projects and Working Groups',
icon: (
<BusinessCenterIcon
className={classes.overviewIcon}
style={{
width: '22%',
height: 90,
backgroundColor: '#fff',
boxShadow: '1px 1px 15px rgba(0,0,0,0.1)',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
borderBottom: `6px ${darkOrange} solid`,
}}
>
<h5>Lorem Ipsum</h5>
</div>
<div
/>
),
href: '#projects-wg',
},
{
title: 'Committer and Contributors',
icon: (
<PeopleAltIcon
className={classes.overviewIcon}
style={{
width: '22%',
height: 90,
backgroundColor: '#fff',
boxShadow: '1px 1px 15px rgba(0,0,0,0.1)',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
borderBottom: `6px ${brightBlue} solid`,
}}
>
<h5>Lorem Ipsum</h5>
</div>
<div
/>
),
href: '#committers-contributors',
},
{
title: 'Resources',
icon: (
<DescriptionIcon
className={classes.overviewIcon}
style={{
width: '22%',
height: 90,
backgroundColor: '#fff',
boxShadow: '1px 1px 15px rgba(0,0,0,0.1)',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
borderBottom: `6px ${brightOrange} solid`,
}}
>
<h5>Lorem Ipsum</h5>
</div>
<div
/>
),
href: '#resources',
},
{
title: 'FAQs',
icon: (
<ContactSupportIcon
className={classes.overviewIcon}
style={{
width: '22%',
height: 90,
backgroundColor: '#fff',
boxShadow: '1px 1px 15px rgba(0,0,0,0.1)',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
borderBottom: `6px ${darkGray} solid`,
}}
>
<h5>Lorem Ipsum</h5>
</div>
</div>
</div>
/>
),
href: '#faqs',
},
];
const renderOverviewItems = overviewItemData.map((item) => (
<Card className={classes.overviewCard}>
<Link className={classes.overviewAnchor} href={item.href}>
{item.icon}
<Typography className={classes.overviewTitle} component="h6" variant="h6">
{item.title}
</Typography>
</Link>
</Card>
));
return (
<Container className={classes.main}>
<Typography variant="h4">Overview</Typography>
<Container className={classes.overviewCtn}>{renderOverviewItems}</Container>
</Container>
);
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment