Skip to content

Commit

Permalink
Fixes 969 970 967 About Page UI update (it looks nice now, please rev…
Browse files Browse the repository at this point in the history 
…iew) (#1103)

* added logo to AboutFooter and made it more mobile friendly

* replaced hardcoded year in AboutFooter

* added mobile stepper carousel effect

* removed label of images and resized carousel
  • Loading branch information
@cindyorangis
cindyorangis authored Jul 12, 2020
1 parent 543f5aa commit 504035b
Show file tree
Hide file tree
Showing 3 changed files with 244 additions and 76 deletions.
2 changes: 2 additions & 0 deletions src/frontend/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,8 @@
"react-dom": "16.13.1",
"react-helmet": "6.0.0",
"react-material-ui-form-validator": "2.0.10",
"react-swipeable-views": "0.13.9",
"react-swipeable-views-utils": "0.13.9",
"typeface-roboto": "0.0.75"
},
"devDependencies": {
Expand Down
199 changes: 133 additions & 66 deletions src/frontend/src/components/AboutFooter/AboutFooter.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { Grid, Box, Typography, SvgIcon, Divider } from '@material-ui/core';

import { makeStyles, useTheme } from '@material-ui/core/styles';
import { Box, Divider, Grid, Typography, useMediaQuery } from '@material-ui/core';
import GitHubIcon from '@material-ui/icons/GitHub';

import Logo from '../../images/logo.svg';
import LogoIcon from '../LogoIcon';

const useStyles = makeStyles((theme) => ({
root: {
Expand All @@ -14,14 +13,17 @@ const useStyles = makeStyles((theme) => ({
},
heading: {
color: 'white',
[theme.breakpoints.down('md')]: {
marginTop: '2rem',
},
},
leftDivider: {
backgroundColor: 'white',
height: '2px',
marginBottom: '8px',
marginRight: '1rem',
marginTop: '5px',
width: '30%',
width: '50%',
},
rightDivider: {
backgroundColor: 'white',
Expand All @@ -46,84 +48,149 @@ const useStyles = makeStyles((theme) => ({

const AboutFooter = () => {
const classes = useStyles();
const theme = useTheme();
const matches = useMediaQuery(theme.breakpoints.up('md'));

return (
<Grid container className={classes.root}>
<Box width={1} pb={5}>
<Grid container direction="row" justify="space-between" alignItems="flex-start">
<Grid container item xs={12} sm={3}>
<Grid container direction="column" item xs={6}>
{matches ? (
<Grid container direction="row" justify="space-between" alignItems="flex-start">
<Grid container item xs={12} sm={3}>
<Grid container direction="column" item xs={6}>
<Typography variant="h5" className={classes.heading}>
DOCS
</Typography>
<Divider className={classes.leftDivider} />
<Typography variant="h6">
<a
href="https://github.com/Seneca-CDOT/telescope/blob/master/docs/environment-setup.md"
className={classes.links}
>
Get Started
</a>
</Typography>
<Typography variant="h6">
<a
href="https://github.com/Seneca-CDOT/telescope/blob/master/docs/CONTRIBUTING.md"
className={classes.links}
>
Contribute
</a>
</Typography>
</Grid>
<Grid container direction="column" item xs={6}>
<Typography variant="h5" className={classes.heading}>
MORE
</Typography>
<Divider className={classes.leftDivider} />
<Typography variant="h6">
<a
href="https://wiki.cdot.senecacollege.ca/wiki/Planet_CDOT_Feed_List"
className={classes.links}
>
Planet CDOT Feed List
</a>
</Typography>
</Grid>
</Grid>
<Grid container item xs={12} sm={6} justify={'center'}>
<LogoIcon height="60" width="60" />
</Grid>
<Grid container direction="column" item xs={12} sm={3} alignItems="flex-end">
<Typography variant="h5" className={classes.heading}>
DOCS
</Typography>
<Divider className={classes.leftDivider} />
<Typography variant="h6">
<a
href="https://github.com/Seneca-CDOT/telescope/blob/master/docs/environment-setup.md"
className={classes.links}
>
Get Started
</a>
</Typography>
<Typography variant="h6">
<a
href="https://github.com/Seneca-CDOT/telescope/blob/master/docs/CONTRIBUTING.md"
className={classes.links}
>
Contribute
</a>
COMMUNITY
</Typography>
<Divider className={classes.rightDivider} />
<Grid container direction="row" justify={'flex-end'}>
<Grid item>
<a href="https://github.com/Seneca-CDOT/telescope" className={classes.links}>
{' '}
<GitHubIcon fontSize="large"></GitHubIcon>
</a>
</Grid>
<Grid item>
<a
href="https://seneca-open-source.slack.com/archives/CS5DGCAE5"
className={classes.links}
>
Slack
</a>
</Grid>
</Grid>
</Grid>
</Grid>
) : (
<Grid container direction="row" justify="space-between" alignItems="flex-start">
<Grid container item xs={12} justify={'center'}>
<LogoIcon height="60" width="60" />
</Grid>
<Grid container item xs={12}>
<Grid container direction="column" item xs={6}>
<Typography variant="h5" className={classes.heading}>
DOCS
</Typography>
<Divider className={classes.leftDivider} />
<Typography variant="h6">
<a
href="https://github.com/Seneca-CDOT/telescope/blob/master/docs/environment-setup.md"
className={classes.links}
>
Get Started
</a>
</Typography>
<Typography variant="h6">
<a
href="https://github.com/Seneca-CDOT/telescope/blob/master/docs/CONTRIBUTING.md"
className={classes.links}
>
Contribute
</a>
</Typography>
</Grid>
<Grid container direction="column" item xs={6} alignItems="flex-end">
<Typography variant="h5" className={classes.heading}>
MORE
</Typography>
<Divider className={classes.rightDivider} />
<Typography variant="h6">
<a
href="https://wiki.cdot.senecacollege.ca/wiki/Planet_CDOT_Feed_List"
className={classes.links}
>
Planet CDOT Feed List
</a>
</Typography>
</Grid>
</Grid>
<Grid container direction="column" item xs={6}>
<Typography variant="h5" className={classes.heading}>
MORE
COMMUNITY
</Typography>
<Divider className={classes.leftDivider} />
<Typography variant="h6">
<a
href="https://wiki.cdot.senecacollege.ca/wiki/Planet_CDOT_Feed_List"
className={classes.links}
>
Planet CDOT Feed List
</a>
</Typography>
</Grid>
</Grid>
<Grid container item xs={12} sm={6} justify={'center'}>
<Typography variant="h5" className={classes.heading}>
LOGO
</Typography>
<SvgIcon fontSize="large">
<img src={Logo}></img>
</SvgIcon>
</Grid>
<Grid container direction="column" item xs={12} sm={3} alignItems="flex-end">
<Typography variant="h5" className={classes.heading}>
COMMUNITY
</Typography>
<Divider className={classes.rightDivider} />
<Grid container direction="row" justify={'flex-end'}>
<Grid item>
<a href="https://github.com/Seneca-CDOT/telescope" className={classes.links}>
{' '}
<GitHubIcon fontSize="large"></GitHubIcon>
</a>
</Grid>
<Grid item>
<a
href="https://seneca-open-source.slack.com/archives/CS5DGCAE5"
className={classes.links}
>
Slack
</a>
<Grid container direction="row">
<Grid item>
<a href="https://github.com/Seneca-CDOT/telescope" className={classes.links}>
{' '}
<GitHubIcon fontSize="large"></GitHubIcon>
</a>
</Grid>
<Grid item>
<a
href="https://seneca-open-source.slack.com/archives/CS5DGCAE5"
className={classes.links}
>
Slack
</a>
</Grid>
</Grid>
</Grid>
</Grid>
</Grid>
)}
</Box>
<Grid item xs={12}>
<Typography variant="h6" className={classes.footer}>
Copyright © 2020 Seneca’s Centre for Development of Open Technology
Copyright © {new Date().getFullYear()} Seneca’s Centre for Development of Open Technology
</Typography>
</Grid>
</Grid>
Expand Down
Loading

0 comments on commit 504035b

Please sign in to comment.