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({
contrastText: '#fff', // for button text color
},
},
spacing: 10,
});
const App = () => {
......@@ -39,7 +40,7 @@ const App = () => {
needLoadingSignIn,
setNeedLoadingSignIn,
currentStepIndex,
setCurrentStepIndex
setCurrentStepIndex,
};
return (
......
......@@ -202,27 +202,30 @@ export const NAV_OPTIONS_DATA = [
{
name: 'Your Organization Profile',
path: '/portal/org-profile',
// don't find an icon match the design
icon: <BusinessIcon />,
},
{
name: 'Projects and Working Groups',
path: '/portal/dashboard#projects-wg',
type: 'submenu',
icon: <BusinessCenterIcon />,
},
{
name: 'Committers and Contributors',
path: '/portal/dashboard#committers-contributors',
type: 'submenu',
icon: <PeopleAltIcon />,
},
{
name: 'Resources',
path: '/portal/dashboard#resources',
type: 'submenu',
icon: <DescriptionIcon />,
},
{
name: 'FAQs',
path: '/portal/dashboard#faqs',
type: 'submenu',
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 {
ListItemIcon,
List,
Typography,
Theme,
} from '@material-ui/core';
import ContactSupportIcon from '@material-ui/icons/ContactSupport';
import ExpandLessIcon from '@material-ui/icons/ExpandLess';
......@@ -38,42 +39,55 @@ const faqItems = [
},
];
const useStyles = makeStyles(() =>
const useStyles = makeStyles((theme: Theme) =>
createStyles({
faqContainer: {
position: 'relative',
display: 'flex',
marginTop: 40,
paddingLeft: 64,
paddingRight: 0,
marginTop: theme.spacing(4),
padding: theme.spacing(0, 1),
border: '2px #DCDFE5 solid',
borderRadius: borderRadiusSize,
maxWidth: '100%',
[theme.breakpoints.up('lg')]: {
paddingLeft: theme.spacing(6.5),
},
},
faqIcon: {
position: 'absolute',
top: -30,
left: 12,
top: theme.spacing(-3),
left: theme.spacing(1),
color: iconGray,
backgroundColor: mainContentBGColor,
fontSize: 60,
},
faqTitle: {
textAlign: 'center',
paddingTop: theme.spacing(9),
[theme.breakpoints.up('sm')]: {
textAlign: 'left',
},
},
faqIconForBG: {
fontSize: 200,
opacity: 0.15,
color: iconGray,
marginTop: 42,
marginTop: theme.spacing(4),
display: 'none',
[theme.breakpoints.up('lg')]: {
display: 'block',
},
},
faqList: {
marginTop: 30,
marginBottom: 25,
padding: 10,
marginTop: theme.spacing(3),
marginBottom: theme.spacing(2.5),
padding: theme.spacing(1),
},
faqItemCtn: {
padding: 0,
border: '2px #EDEDED solid',
borderRadius: borderRadiusSize,
marginBottom: 5,
marginBottom: theme.spacing(0.5),
},
faqQuestion: {
backgroundColor: '#EDEDED',
......@@ -83,7 +97,7 @@ const useStyles = makeStyles(() =>
flexDirection: 'row-reverse',
},
faqAnswer: {
padding: '16px 32px',
padding: theme.spacing(1.5, 3),
},
})
);
......@@ -114,13 +128,10 @@ export default function DashboardFAQs() {
</List>
));
return (
<div
style={{
paddingTop: 90,
}}
id="faqs"
>
<Typography variant="h4">FAQs</Typography>
<div id="faqs">
<Typography className={classes.faqTitle} variant="h4">
FAQs
</Typography>
<Container className={classes.faqContainer}>
<ContactSupportIcon className={classes.faqIcon} />
<Container className={classes.faqList}>{renderFAQs}</Container>
......
......@@ -11,6 +11,7 @@ import {
ListItemAvatar,
ListItemText,
makeStyles,
Theme,
Typography,
} from '@material-ui/core';
import { Container } from '@material-ui/core';
......@@ -34,20 +35,31 @@ const orgRepDataTest = [
},
];
const useStyles = makeStyles(() =>
const useStyles = makeStyles((theme: Theme) =>
createStyles({
introCtn: {
padding: 0,
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-between',
},
card: {
width: '30%',
height: 260,
boxShadow: '1px 1px 15px rgba(0,0,0,0.1)',
display: 'flex',
justifyContent: '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: {
backgroundColor: '#8A94A8',
......@@ -69,21 +81,21 @@ const useStyles = makeStyles(() =>
flexDirection: 'column',
justifyContent: 'start',
alignItems: 'start',
padding: '20px 30px',
padding: theme.spacing(2, 3),
backgroundColor: '#fff',
},
contentTitle: {
marginBottom: 5,
marginBottom: theme.spacing(0.5),
},
divider: {
width: '100%',
margin: '5px 0',
margin: theme.spacing(0.5, 0),
},
contentList: {
width: '100%',
},
contentItemCtn: {
padding: '8px 0',
padding: theme.spacing(1, 0),
},
contentAvatar: {
width: 35,
......@@ -113,7 +125,7 @@ export default function DashboardIntro() {
const [orgRepData, setOrgRepData] = useState<Array<OrgRep> | null>(null);
const renderOrgRep = orgRepData?.map((rep) => (
<ListItem>
<ListItem key={rep.name}>
<ListItemText
classes={{
primary: classes.repPrimary,
......@@ -130,6 +142,8 @@ export default function DashboardIntro() {
setLogo(require('../../../assets/logos/ef-registered-wht.svg').default);
setOrgRepData(orgRepDataTest);
} else {
setLogo(require('../../../assets/logos/ef-registered-wht.svg').default);
setOrgRepData(orgRepDataTest);
// TO DO:
// fetch the logo 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 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';
import {
borderRadiusSize,
brightBlue,
brightOrange,
darkGray,
darkOrange,
iconGray,
} from '../../../Constants/Constants';
import SectionCtn from '../../UIComponents/CustomContainer/SectionCtn';
const useStyles = makeStyles(() =>
const useStyles = makeStyles((theme: Theme) =>
createStyles({
overviewCard: {
width: '22%',
minWidth: 220,
margin: '25px 10px 20px 10px',
minWidth: 230,
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',
},
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: {
......@@ -34,14 +48,14 @@ const useStyles = makeStyles(() =>
overviewIcon: {
height: '100%',
width: 85,
padding: 18,
marginRight: 12,
padding: theme.spacing(2),
marginRight: theme.spacing(1),
color: iconGray,
borderRadius: 4,
borderRadius: borderRadiusSize,
},
overviewTitle: {
color: darkGray,
paddingRight: 10,
paddingRight: theme.spacing(1),
},
})
);
......
......@@ -9,6 +9,8 @@ import {
MenuItem,
Toolbar,
Typography,
IconButton,
Theme,
} from '@material-ui/core';
import PersonIcon from '@material-ui/icons/Person';
import EditIcon from '@material-ui/icons/Edit';
......@@ -16,38 +18,87 @@ import SettingsIcon from '@material-ui/icons/Settings';
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
import AccountCircleIcon from '@material-ui/icons/AccountCircle';
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 { 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';
const useStyles = makeStyles(() =>
const useStyles = makeStyles((theme: Theme) =>
createStyles({
appBar: {
width: `calc(100% - ${drawerWidth}px)`,
height: 70,
marginLeft: drawerWidth,
position: 'relative',
height: 110,
backgroundColor: '#fff',
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: {
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',
justifyContent: 'flex-end',
padding: '0 32px',
position: 'absolute',
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: {
display: 'none',
backgroundColor: '#EBEBF2',
height: 28,
height: 30,
width: 1,
marginRight: 21,
marginRight: theme.spacing(2),
[theme.breakpoints.up('md')]: {
display: 'block',
},
},
username: {
color: themeBlack,
marginBottom: 0,
marginRight: 7,
marginRight: theme.spacing(1),
},
dropDownBtn: {
minWidth: 38,
minWidth: 40,
height: 30,
padding: 0,
},
......@@ -58,9 +109,13 @@ const useStyles = makeStyles(() =>
minWidth: 30,
},
avatarCtn: {
width: 38,
height: 38,
marginLeft: 11,
display: 'none',
width: 40,
height: 40,
marginLeft: theme.spacing(1),
[theme.breakpoints.up('md')]: {
display: 'flex',
},
backgroundColor: darkOrange,
},
anchorTag: {
......@@ -81,7 +136,11 @@ interface UserInfo {
picture: string;
}
export default function AppTopBar() {
interface AppTopBarProps {
handleDrawerToggle: () => void;
}
const AppTopBar: React.FC<AppTopBarProps> = ({ handleDrawerToggle }) => {
const classes = useStyles();
const [userInfo, setUserInfo] = useState<UserInfo>({
first_name: '',
......@@ -192,22 +251,39 @@ export default function AppTopBar() {
return (
<AppBar position="fixed" className={classes.appBar}>
<Toolbar className={classes.toolbarCtn}>
<div className={classes.verticalDivider}></div>
<Typography paragraph className={classes.username}>
{userInfo?.full_name || 'Anonymous'}
</Typography>
<Button className={classes.dropDownBtn} onClick={handleDropdownBtnClicked}>
<ExpandMoreIcon className={classes.dropDownIcon} />
</Button>
{renderDropdownMenu()}
{userInfo?.picture ? (
<Avatar className={classes.avatarCtn} alt="user avatar" src={userInfo.picture} />
) : (
<Avatar className={classes.avatarCtn}>{getInitials(userInfo.first_name, userInfo.last_name) || 'A'}</Avatar>
)}
<div className={classes.iconCtn}>
<img src={efGRYLogo} alt="Eclipse Foundation logo" className={classes.efLogo}></img>
<IconButton
color="inherit"
aria-label="open drawer"
edge="start"
className={classes.hamburgerIcon}
onClick={handleDrawerToggle}
>
<MenuIcon />
</IconButton>
</div>
<div className={classes.userInfoCtn}>
<div className={classes.verticalDivider}></div>
<Typography component="p" className={classes.username}>
{userInfo?.full_name || 'Anonymous'}
</Typography>
<Button className={classes.dropDownBtn} onClick={handleDropdownBtnClicked}>
<ExpandMoreIcon className={classes.dropDownIcon} />
</Button>
{renderDropdownMenu()}
{userInfo?.picture ? (
<Avatar className={classes.avatarCtn} alt="user avatar" src={userInfo.picture} />
) : (
<Avatar className={classes.avatarCtn}>{getInitials(userInfo.first_name, userInfo.last_name) || 'A'}</Avatar>
)}
</div>
</Toolbar>
</AppBar>
);
}
};
export default AppTopBar;
import { NavLink } from 'react-router-dom';
import { ListItem, ListItemText, ListItemIcon, Container, Drawer, List } from '@material-ui/core';
import {
ListItem,
ListItemText,
ListItemIcon,
Container,
Drawer,
List,
Theme,
Hidden,
Button,
} from '@material-ui/core';
import { makeStyles, createStyles } from '@material-ui/core/styles';
import efWhiteLogo from '../../../assets/logos/ef-registered-wht.svg';
import CloseIcon from '@material-ui/icons/Close';
import { NAV_OPTIONS_DATA, drawerWidth, themeBlack, darkOrange } from '../../../Constants/Constants';
import { useRouteMatch } from 'react-router-dom';
import { scrollToTop } from '../../../Utils/formFunctionHelpers';
const useStyles = makeStyles(() =>
const useStyles = makeStyles((theme: Theme) =>
createStyles({
drawer: {
width: drawerWidth,
flexShrink: 0,
[theme.breakpoints.up('md')]: {
width: drawerWidth,
flexShrink: 0,
},
},
drawerPaper: {
width: drawerWidth,
backgroundColor: themeBlack,
},
navOptions: {
......@@ -22,11 +34,11 @@ const useStyles = makeStyles(() =>
},
},
navItems: {
height: 53,
height: 55,
borderLeft: `rgba(0,0,0,0) 5px solid`,
},
navItemsActive: {
height: 53,
height: 55,
borderLeft: `${darkOrange} 5px solid`,
},
navIcons: {
......@@ -44,7 +56,16 @@ const useStyles = makeStyles(() =>
justifyContent: 'center',
},
efLogo: {
width: 174,
width: 175,
},
closeBtn: {
position: 'fixed',
top: theme.spacing(1.5),
right: theme.spacing(2),
},
closeIcon: {
color: 'white',
fontSize: 30,
},
})
);
......@@ -52,17 +73,29 @@ const useStyles = makeStyles(() =>
interface NavOptionProps {
path: string;
icon: JSX.Element;
type: string | undefined;
name: string;
handleDrawerToggle: (() => void) | null;
}
interface LeftNavBarProps {
mobileOpen: boolean;
handleDrawerToggle: () => void;
}
const NavOption: React.FC<NavOptionProps> = ({ path, icon, name }) => {
const NavOption: React.FC<NavOptionProps> = ({ path, icon, type, name, handleDrawerToggle }) => {
const classes = useStyles();
const isActive = useRouteMatch(path