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

Portal - Make the Portal responsive (#243)

* Made left nav bar responsive

* Made main content section responsive

* fixed the React warning

* updated responsive design

* Updated humbergur menu design

* Used theme.spacing for pading, margin etc.

* minor changes and fixed a typo

* Made padding and margin to the multiple of 5
parent 1175907b
...@@ -17,6 +17,7 @@ const theme = createMuiTheme({ ...@@ -17,6 +17,7 @@ const theme = createMuiTheme({
contrastText: '#fff', // for button text color contrastText: '#fff', // for button text color
}, },
}, },
spacing: 10,
}); });
const App = () => { const App = () => {
...@@ -39,7 +40,7 @@ const App = () => { ...@@ -39,7 +40,7 @@ const App = () => {
needLoadingSignIn, needLoadingSignIn,
setNeedLoadingSignIn, setNeedLoadingSignIn,
currentStepIndex, currentStepIndex,
setCurrentStepIndex setCurrentStepIndex,
}; };
return ( return (
......
...@@ -202,27 +202,30 @@ export const NAV_OPTIONS_DATA = [ ...@@ -202,27 +202,30 @@ export const NAV_OPTIONS_DATA = [
{ {
name: 'Your Organization Profile', name: 'Your Organization Profile',
path: '/portal/org-profile', path: '/portal/org-profile',
// don't find an icon match the design
icon: <BusinessIcon />, icon: <BusinessIcon />,
}, },
{ {
name: 'Projects and Working Groups', name: 'Projects and Working Groups',
path: '/portal/dashboard#projects-wg', path: '/portal/dashboard#projects-wg',
type: 'submenu',
icon: <BusinessCenterIcon />, icon: <BusinessCenterIcon />,
}, },
{ {
name: 'Committers and Contributors', name: 'Committers and Contributors',
path: '/portal/dashboard#committers-contributors', path: '/portal/dashboard#committers-contributors',
type: 'submenu',
icon: <PeopleAltIcon />, icon: <PeopleAltIcon />,
}, },
{ {
name: 'Resources', name: 'Resources',
path: '/portal/dashboard#resources', path: '/portal/dashboard#resources',
type: 'submenu',
icon: <DescriptionIcon />, icon: <DescriptionIcon />,
}, },
{ {
name: 'FAQs', name: 'FAQs',
path: '/portal/dashboard#faqs', path: '/portal/dashboard#faqs',
type: 'submenu',
icon: <HelpIcon />, icon: <HelpIcon />,
}, },
{ {
......
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 373.33 195"><defs><style>.cls-1{fill:#f79422;}.cls-2{fill:#3d3c3b;}</style></defs><title>EF_all_colours_ai</title><g id="Layer_1" data-name="Layer 1"><path class="cls-1" d="M316.56,131.3l-8.67-11h-2.71V138h3.34v-12l9.31,12h2.07V120.31h-3.34ZM284.15,123c4.17,0,5.84,3.34,5.79,6.33s-1.62,6-5.79,6-5.74-3.11-5.81-6S280,123,284.15,123Zm0-3c-6.12,0-9.1,4.68-9.1,9.33s2.88,9.13,9.1,9.13,9-4.58,9.08-9.16S290.25,120,284.15,120Zm-21.23,18V120.31H259.6V138Zm-23.56,0h3.34V123.34h5.61v-3H233.74v3h5.62Zm-18.91-6.44h-6.58l3.29-7.56Zm2.83,6.44h3.64L219,120.31h-3.64L207.4,138H211l1.51-3.33h9.26Zm-38-14.56h3.64c3.85,0,5.46,2.76,5.54,5.52s-1.52,5.83-5.54,5.83h-3.64Zm3.64-3.16H182V138h6.95c6.2,0,8.93-4.52,8.85-9S195,120.31,188.92,120.31Zm-22.37,11-8.67-11h-2.71V138h3.34v-12l9.3,12h2.08V120.31h-3.34Zm-27.46-10.94V130.5c0,3-1.56,4.88-4.32,4.88s-4.58-1.69-4.58-4.88V120.36h-3.31V130.5c0,5.33,3.62,7.91,7.86,7.91,4.45,0,7.67-2.68,7.67-7.91V120.36Zm-33,2.65c4.17,0,5.84,3.34,5.79,6.33s-1.62,6-5.79,6-5.74-3.11-5.82-6S101.93,123,106.1,123Zm0-3c-6.12,0-9.1,4.68-9.1,9.33s2.88,9.13,9.1,9.13,9-4.58,9.08-9.16S112.19,120,106.1,120ZM76.32,138v-6.54h8.87V128.4H76.32v-4.83H85.7v-3.21H73V138Z"/><path class="cls-2" d="M320.23,101.75H298.06V92.84h21.38V85.9H298.06V76.76h22.17V69.54H290.67v39.54h29.56Zm-40-25.66c-3-6.1-9.36-7.84-15.51-7.84-7.28,0-15.29,3.38-15.29,11.5,0,8.86,7.45,11,15.51,12,5.25.56,9.14,2.09,9.14,5.81,0,4.29-4.4,5.92-9.08,5.92s-9.36-1.92-11.11-6.26l-6.21,3.22c2.94,7.22,9.14,9.7,17.21,9.7,8.8,0,16.58-3.78,16.58-12.58,0-9.42-7.67-11.56-15.91-12.58-4.73-.56-8.79-1.52-8.79-5,0-2.93,2.65-5.25,8.17-5.25,4.29,0,8,2.15,9.37,4.4Zm-53.34-6.55c-6.21-.05-12.41,0-18.62,0v39.54h7.45V97.46h11.17C246.25,97.46,246.2,69.54,226.91,69.54Zm-11.17,7.11h11.17c9.47,0,9.53,14,0,14H215.74Zm-18,32.43V69.54h-7.39v39.54Zm-44-39.54v39.54h27.75V102.2H161.22V69.54ZM141.55,99a14.53,14.53,0,0,1-9.92,4c-9.76,0-13.54-6.82-13.6-13.37s4.06-13.7,13.6-13.7a13.56,13.56,0,0,1,9.53,3.72l5-4.79a20.35,20.35,0,0,0-14.49-6c-14.27,0-21,10.49-20.93,20.81S117,110,131.63,110a20.83,20.83,0,0,0,15-5.87Zm-39,2.76H80.37V92.84h21.38V85.9H80.37V76.76h22.17V69.54H73v39.54h29.56Z"/><path class="cls-1" d="M60.66,65.52c9-14.1,27.15-19,42.25-12.25l-1-.69a33.16,33.16,0,1,0-35.8,55.83l1.05.63C54.69,98.14,51.61,79.63,60.66,65.52Z"/><path class="cls-2" d="M323,73.41v0a4.58,4.58,0,1,1,9.16,0v0a4.58,4.58,0,1,1-9.16,0Zm8.63,0v0a4.05,4.05,0,1,0-8.1,0v0a4,4,0,0,0,4.05,4.08A4.07,4.07,0,0,0,331.67,73.38Zm-5.94-2.47H328c1.11,0,1.92.5,1.92,1.58A1.46,1.46,0,0,1,328.83,74L330,75.67h-1.39l-1-1.5h-.74v1.5h-1.15Zm2.15,2.31c.53,0,.82-.26.82-.65s-.32-.66-.82-.66h-1v1.31Z"/></g></svg>
\ No newline at end of file
...@@ -9,6 +9,7 @@ import { ...@@ -9,6 +9,7 @@ import {
ListItemIcon, ListItemIcon,
List, List,
Typography, Typography,
Theme,
} from '@material-ui/core'; } from '@material-ui/core';
import ContactSupportIcon from '@material-ui/icons/ContactSupport'; import ContactSupportIcon from '@material-ui/icons/ContactSupport';
import ExpandLessIcon from '@material-ui/icons/ExpandLess'; import ExpandLessIcon from '@material-ui/icons/ExpandLess';
...@@ -38,42 +39,55 @@ const faqItems = [ ...@@ -38,42 +39,55 @@ const faqItems = [
}, },
]; ];
const useStyles = makeStyles(() => const useStyles = makeStyles((theme: Theme) =>
createStyles({ createStyles({
faqContainer: { faqContainer: {
position: 'relative', position: 'relative',
display: 'flex', display: 'flex',
marginTop: 40, marginTop: theme.spacing(4),
paddingLeft: 64, padding: theme.spacing(0, 1),
paddingRight: 0,
border: '2px #DCDFE5 solid', border: '2px #DCDFE5 solid',
borderRadius: borderRadiusSize, borderRadius: borderRadiusSize,
maxWidth: '100%', maxWidth: '100%',
[theme.breakpoints.up('lg')]: {
paddingLeft: theme.spacing(6.5),
},
}, },
faqIcon: { faqIcon: {
position: 'absolute', position: 'absolute',
top: -30, top: theme.spacing(-3),
left: 12, left: theme.spacing(1),
color: iconGray, color: iconGray,
backgroundColor: mainContentBGColor, backgroundColor: mainContentBGColor,
fontSize: 60, fontSize: 60,
}, },
faqTitle: {
textAlign: 'center',
paddingTop: theme.spacing(9),
[theme.breakpoints.up('sm')]: {
textAlign: 'left',
},
},
faqIconForBG: { faqIconForBG: {
fontSize: 200, fontSize: 200,
opacity: 0.15, opacity: 0.15,
color: iconGray, color: iconGray,
marginTop: 42, marginTop: theme.spacing(4),
display: 'none',
[theme.breakpoints.up('lg')]: {
display: 'block',
},
}, },
faqList: { faqList: {
marginTop: 30, marginTop: theme.spacing(3),
marginBottom: 25, marginBottom: theme.spacing(2.5),
padding: 10, padding: theme.spacing(1),
}, },
faqItemCtn: { faqItemCtn: {
padding: 0, padding: 0,
border: '2px #EDEDED solid', border: '2px #EDEDED solid',
borderRadius: borderRadiusSize, borderRadius: borderRadiusSize,
marginBottom: 5, marginBottom: theme.spacing(0.5),
}, },
faqQuestion: { faqQuestion: {
backgroundColor: '#EDEDED', backgroundColor: '#EDEDED',
...@@ -83,7 +97,7 @@ const useStyles = makeStyles(() => ...@@ -83,7 +97,7 @@ const useStyles = makeStyles(() =>
flexDirection: 'row-reverse', flexDirection: 'row-reverse',
}, },
faqAnswer: { faqAnswer: {
padding: '16px 32px', padding: theme.spacing(1.5, 3),
}, },
}) })
); );
...@@ -114,13 +128,10 @@ export default function DashboardFAQs() { ...@@ -114,13 +128,10 @@ export default function DashboardFAQs() {
</List> </List>
)); ));
return ( return (
<div <div id="faqs">
style={{ <Typography className={classes.faqTitle} variant="h4">
paddingTop: 90, FAQs
}} </Typography>
id="faqs"
>
<Typography variant="h4">FAQs</Typography>
<Container className={classes.faqContainer}> <Container className={classes.faqContainer}>
<ContactSupportIcon className={classes.faqIcon} /> <ContactSupportIcon className={classes.faqIcon} />
<Container className={classes.faqList}>{renderFAQs}</Container> <Container className={classes.faqList}>{renderFAQs}</Container>
......
...@@ -11,6 +11,7 @@ import { ...@@ -11,6 +11,7 @@ import {
ListItemAvatar, ListItemAvatar,
ListItemText, ListItemText,
makeStyles, makeStyles,
Theme,
Typography, Typography,
} from '@material-ui/core'; } from '@material-ui/core';
import { Container } from '@material-ui/core'; import { Container } from '@material-ui/core';
...@@ -34,20 +35,31 @@ const orgRepDataTest = [ ...@@ -34,20 +35,31 @@ const orgRepDataTest = [
}, },
]; ];
const useStyles = makeStyles(() => const useStyles = makeStyles((theme: Theme) =>
createStyles({ createStyles({
introCtn: { introCtn: {
padding: 0, padding: 0,
display: 'flex', display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-between', justifyContent: 'space-between',
}, },
card: { card: {
width: '30%',
height: 260, height: 260,
boxShadow: '1px 1px 15px rgba(0,0,0,0.1)', boxShadow: '1px 1px 15px rgba(0,0,0,0.1)',
display: 'flex', display: 'flex',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
minWidth: 255,
width: '100%',
margin: theme.spacing(2, 0),
[theme.breakpoints.up(650)]: {
width: '45%',
margin: theme.spacing(2.5, 0.5, 0, 0.5),
},
[theme.breakpoints.up(1280)]: {
width: '30%',
margin: theme.spacing(2.5, 1, 0, 1),
},
}, },
companyLogoCard: { companyLogoCard: {
backgroundColor: '#8A94A8', backgroundColor: '#8A94A8',
...@@ -69,21 +81,21 @@ const useStyles = makeStyles(() => ...@@ -69,21 +81,21 @@ const useStyles = makeStyles(() =>
flexDirection: 'column', flexDirection: 'column',
justifyContent: 'start', justifyContent: 'start',
alignItems: 'start', alignItems: 'start',
padding: '20px 30px', padding: theme.spacing(2, 3),
backgroundColor: '#fff', backgroundColor: '#fff',
}, },
contentTitle: { contentTitle: {
marginBottom: 5, marginBottom: theme.spacing(0.5),
}, },
divider: { divider: {
width: '100%', width: '100%',
margin: '5px 0', margin: theme.spacing(0.5, 0),
}, },
contentList: { contentList: {
width: '100%', width: '100%',
}, },
contentItemCtn: { contentItemCtn: {
padding: '8px 0', padding: theme.spacing(1, 0),
}, },
contentAvatar: { contentAvatar: {
width: 35, width: 35,
...@@ -113,7 +125,7 @@ export default function DashboardIntro() { ...@@ -113,7 +125,7 @@ export default function DashboardIntro() {
const [orgRepData, setOrgRepData] = useState<Array<OrgRep> | null>(null); const [orgRepData, setOrgRepData] = useState<Array<OrgRep> | null>(null);
const renderOrgRep = orgRepData?.map((rep) => ( const renderOrgRep = orgRepData?.map((rep) => (
<ListItem> <ListItem key={rep.name}>
<ListItemText <ListItemText
classes={{ classes={{
primary: classes.repPrimary, primary: classes.repPrimary,
...@@ -130,6 +142,8 @@ export default function DashboardIntro() { ...@@ -130,6 +142,8 @@ export default function DashboardIntro() {
setLogo(require('../../../assets/logos/ef-registered-wht.svg').default); setLogo(require('../../../assets/logos/ef-registered-wht.svg').default);
setOrgRepData(orgRepDataTest); setOrgRepData(orgRepDataTest);
} else { } else {
setLogo(require('../../../assets/logos/ef-registered-wht.svg').default);
setOrgRepData(orgRepDataTest);
// TO DO: // TO DO:
// fetch the logo and set state // fetch the logo and set state
// fetch the organization rep and set state // fetch the organization rep and set state
......
import { createStyles, makeStyles, Card, Typography, Link } from '@material-ui/core'; import { createStyles, makeStyles, Card, Typography, Link, Theme } from '@material-ui/core';
import BusinessCenterIcon from '@material-ui/icons/BusinessCenter'; import BusinessCenterIcon from '@material-ui/icons/BusinessCenter';
import PeopleAltIcon from '@material-ui/icons/PeopleAlt'; import PeopleAltIcon from '@material-ui/icons/PeopleAlt';
import DescriptionIcon from '@material-ui/icons/Description'; import DescriptionIcon from '@material-ui/icons/Description';
import ContactSupportIcon from '@material-ui/icons/ContactSupport'; import ContactSupportIcon from '@material-ui/icons/ContactSupport';
import { brightBlue, brightOrange, darkGray, darkOrange, iconGray } from '../../../Constants/Constants'; import {
borderRadiusSize,
brightBlue,
brightOrange,
darkGray,
darkOrange,
iconGray,
} from '../../../Constants/Constants';
import SectionCtn from '../../UIComponents/CustomContainer/SectionCtn'; import SectionCtn from '../../UIComponents/CustomContainer/SectionCtn';
const useStyles = makeStyles(() => const useStyles = makeStyles((theme: Theme) =>
createStyles({ createStyles({
overviewCard: { overviewCard: {
width: '22%', minWidth: 230,
minWidth: 220,
margin: '25px 10px 20px 10px',
height: 90, height: 90,
backgroundColor: '#fff', backgroundColor: '#fff',
boxShadow: '1px 1px 15px rgba(0,0,0,0.1)', boxShadow: '1px 1px 15px rgba(0,0,0,0.1)',
transition: 'all 0.2s ease-out', transition: 'all 0.2s ease-out',
'&:hover': { '&:hover': {
boxShadow: '2px 2px 15px rgba(0,0,0,0.15)', boxShadow: '2px 2px 15px rgba(0,0,0,0.15)',
transform: 'scale(1.03)', transform: 'scale(1.03)',
transition: 'all 0.2s ease-out', transition: 'all 0.2s ease-out',
}, },
margin: theme.spacing(2, 0),
width: '100%',
[theme.breakpoints.up('sm')]: {
margin: theme.spacing(2.5, 1, 2, 1),
width: '46%',
},
[theme.breakpoints.up(1200)]: {
margin: theme.spacing(2.5, 1, 2, 1),
width: '22%',
},
}, },
overviewAnchor: { overviewAnchor: {
...@@ -34,14 +48,14 @@ const useStyles = makeStyles(() => ...@@ -34,14 +48,14 @@ const useStyles = makeStyles(() =>
overviewIcon: { overviewIcon: {
height: '100%', height: '100%',
width: 85, width: 85,
padding: 18, padding: theme.spacing(2),
marginRight: 12, marginRight: theme.spacing(1),
color: iconGray, color: iconGray,
borderRadius: 4, borderRadius: borderRadiusSize,
}, },
overviewTitle: { overviewTitle: {
color: darkGray, color: darkGray,
paddingRight: 10, paddingRight: theme.spacing(1),
}, },
}) })
); );
......
...@@ -9,6 +9,8 @@ import { ...@@ -9,6 +9,8 @@ import {
MenuItem, MenuItem,
Toolbar, Toolbar,
Typography, Typography,
IconButton,
Theme,
} from '@material-ui/core'; } from '@material-ui/core';
import PersonIcon from '@material-ui/icons/Person'; import PersonIcon from '@material-ui/icons/Person';
import EditIcon from '@material-ui/icons/Edit'; import EditIcon from '@material-ui/icons/Edit';
...@@ -16,38 +18,87 @@ import SettingsIcon from '@material-ui/icons/Settings'; ...@@ -16,38 +18,87 @@ import SettingsIcon from '@material-ui/icons/Settings';
import ExitToAppIcon from '@material-ui/icons/ExitToApp'; import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import AccountCircleIcon from '@material-ui/icons/AccountCircle'; import AccountCircleIcon from '@material-ui/icons/AccountCircle';
import { makeStyles, createStyles } from '@material-ui/core/styles'; import { makeStyles, createStyles } from '@material-ui/core/styles';
import { ExpandMore as ExpandMoreIcon } from '@material-ui/icons'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import MenuIcon from '@material-ui/icons/Menu';
import { useState } from 'react'; import { useState } from 'react';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { api_prefix, darkOrange, drawerWidth, END_POINT, FETCH_HEADER } from '../../../Constants/Constants'; import efGRYLogo from '../../../assets/logos/ef-gry.svg';
import { api_prefix, darkOrange, END_POINT, FETCH_HEADER, themeBlack } from '../../../Constants/Constants';
import { logout } from '../../../Utils/formFunctionHelpers'; import { logout } from '../../../Utils/formFunctionHelpers';
const useStyles = makeStyles(() => const useStyles = makeStyles((theme: Theme) =>
createStyles({ createStyles({
appBar: { appBar: {
width: `calc(100% - ${drawerWidth}px)`, position: 'relative',
height: 70, height: 110,
marginLeft: drawerWidth,
backgroundColor: '#fff', backgroundColor: '#fff',
boxShadow: '0px 0px 16px rgba(0, 0, 0, 0.05)', boxShadow: '0px 0px 16px rgba(0, 0, 0, 0.05)',
[theme.breakpoints.up('md')]: {
height: 70,
position: 'fixed',
},
[theme.breakpoints.down('sm')]: {
// Has to use !important to overwrite the padding-right 17px added by MUI when hamburger menu is open
// This can avoid making user dropdown menu move left and right
padding: '0 !important',
},
transition: theme.transitions.create('height', {
easing: theme.transitions.easing.easeInOut,
duration: theme.transitions.duration.leavingScreen,
}),
}, },
toolbarCtn: { toolbarCtn: {
height: '100%',
},
iconCtn: {
width: '100%',
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
position: 'absolute',
left: 0,
right: 0,
bottom: 0,
[theme.breakpoints.up('md')]: {
display: 'none',
},
},
efLogo: {
width: 120,
},
hamburgerIcon: {
marginRight: theme.spacing(0.5),
color: themeBlack,
},
userInfoCtn: {
display: 'flex', display: 'flex',
justifyContent: 'flex-end', position: 'absolute',
padding: '0 32px', top: theme.spacing(1),
right: theme.spacing(1),
height: 40,
alignItems: 'center',
[theme.breakpoints.up('md')]: {
top: theme.spacing(1.5),
right: theme.spacing(2),
},
}, },
verticalDivider: { verticalDivider: {
display: 'none',
backgroundColor: '#EBEBF2', backgroundColor: '#EBEBF2',
height: 28, height: 30,
width: 1, width: 1,
marginRight: 21, marginRight: theme.spacing(2),
[theme.breakpoints.up('md')]: {
display: 'block',
},
}, },
username: { username: {
color: themeBlack,
marginBottom: 0, marginBottom: 0,
marginRight: 7, marginRight: theme.spacing(1),
}, },
dropDownBtn: { dropDownBtn: {
minWidth: 38, minWidth: 40,
height: 30, height: 30,
padding: 0, padding: 0,
}, },
...@@ -58,9 +109,13 @@ const useStyles = makeStyles(() => ...@@ -58,9 +109,13 @@ const useStyles = makeStyles(() =>
minWidth: 30, minWidth: 30,
}, },
avatarCtn: { avatarCtn: {
width: 38, display: 'none',
height: 38, width: 40,
marginLeft: 11, height: 40,