From 9dea8f719d0cf79e12b14d8c757e741ded4cbd4b Mon Sep 17 00:00:00 2001 From: Nikola Bjelo Date: Tue, 6 Nov 2018 23:11:37 +0100 Subject: [PATCH 01/23] Putting in place a minimal dropdown system (1lvl) --- client/src/views/header/imports.js | 30 ++++++++++++ client/src/views/header/index.js | 75 ++++++++++++++++++++---------- 2 files changed, 80 insertions(+), 25 deletions(-) create mode 100644 client/src/views/header/imports.js diff --git a/client/src/views/header/imports.js b/client/src/views/header/imports.js new file mode 100644 index 000000000..6a54601bf --- /dev/null +++ b/client/src/views/header/imports.js @@ -0,0 +1,30 @@ +import { + Search, + GamepadRounded, + AccessibilityNew, + LibraryAdd +} from '@material-ui/icons' + +const eventsMenus = { + title: 'Events', + to: '/events', + submenus: [ + { title: 'Look for an event', to: '/events', icon: Search, text: '' }, + { title: 'Events you are enrolled in', to: '/events/my', icon: GamepadRounded, text: '' }, + { title: 'Your hosted competition', to: '/events/host', icon: AccessibilityNew, text: '' }, + { title: 'Host a new competition', to: '/events/create', icon: LibraryAdd, text: '' } + ] +} + +const teamsMenus = { + title: 'Teams', + to: '/teams', + submenus: [ + { title: 'All teams', to: '/teams', icon: Search, text: '' }, + { title: 'Your teams', to: '/teams/manage-teams', icon: GamepadRounded, text: '' } + ] +} + +const allMenus = [ eventsMenus, teamsMenus ] + +export default allMenus diff --git a/client/src/views/header/index.js b/client/src/views/header/index.js index 2f46a9dea..d96f17c85 100644 --- a/client/src/views/header/index.js +++ b/client/src/views/header/index.js @@ -7,7 +7,6 @@ import Toolbar from '@material-ui/core/Toolbar' import Typography from '@material-ui/core/Typography' import IconButton from '@material-ui/core/IconButton' import Button from '@material-ui/core/Button' -import classNames from 'classnames' // icons import HomeIcon from '@material-ui/icons/Home' @@ -15,21 +14,13 @@ import ExitIcon from '@material-ui/icons/ExitToApp' import { Link } from 'react-router-dom' -import { getItem } from '../../utils/local-storage' - // components import { LoggedIn } from './LoggedIn' import { LoggedOut } from './LoggedOut' +import allMenus from './imports' import AALogo from '../../assets/advanced-algos/aa-logo-dark.svg' -const ChartsLink = props => -const UsersLink = props => -const TeamsLink = props => -const EventsLink = props => -const KeyVaultLink = props => -const HomeLink = props => - const styles = theme => ({ '@global': { body: { @@ -62,6 +53,25 @@ const styles = theme => ({ }, externalLink: { textDecoration: 'none' + }, + dropdownContent: { + display: 'none', + position: 'absolute', + backgroundColor: '#f1f1f1', + minWidth: '160px', + boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)', + zIndex: 1 + }, + dropdownContentShown: { + display: 'block', + position: 'absolute', + backgroundColor: '#f1f1f1', + minWidth: '160px', + boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)', + zIndex: 1 + }, + dropdownButtons: { + display: 'block' } }) @@ -70,7 +80,7 @@ class Header extends Component { super(props) this.state = { user: null, - open: false + open: null } } @@ -81,8 +91,32 @@ class Header extends Component { render () { let { classes, auth } = this.props + let { open } = this.state let user = JSON.parse(this.state.user) + + const menus = allMenus.map((menu, index) => { + return ( +
this.setState({ open: index })} + onMouseLeave={() => this.setState({ open: null })} + > + +
+ { + menu.submenus.map((submenu, index) => { + // const Icon = submenu.icon + return ( + + ) + })} +
+
+ ) + }) + return (
- - - - - + + { menus } + + + + Meet us on Social Networks: + + + + + + + + + + + From 65d2294e30f3cfb2a57b8a3841b591c405d0127b Mon Sep 17 00:00:00 2001 From: Barry Low Date: Tue, 6 Nov 2018 22:28:30 -0800 Subject: [PATCH 03/23] Add responsive styles to footer --- client/src/views/footer/index.js | 61 ++++++++++++++++++++++---------- 1 file changed, 43 insertions(+), 18 deletions(-) diff --git a/client/src/views/footer/index.js b/client/src/views/footer/index.js index 1ee5d60ef..57268bbc8 100644 --- a/client/src/views/footer/index.js +++ b/client/src/views/footer/index.js @@ -4,8 +4,9 @@ import classNames from 'classnames' import { NavLink, Link } from 'react-router-dom' import { withStyles } from '@material-ui/core/styles' +import withWidth from '@material-ui/core/withWidth' import { connect } from 'react-redux' -import lightGreen from '@material-ui/core/colors/lightGreen'; +import lightGreen from '@material-ui/core/colors/lightGreen' import Typography from '@material-ui/core/Typography' import Grid from '@material-ui/core/Grid' @@ -31,13 +32,25 @@ const styles = theme => ({ textDecoration: 'none' }, descriptionLeft: { - marginLeft: theme.spacing.unit * 12 + marginLeft: theme.spacing.unit * 8, + [theme.breakpoints.down('sm')]: { + marginLeft: 0 + }, + [theme.breakpoints.down('xs')]: { + textAlign: 'center' + } }, signupRight: { - marginTop: theme.spacing.unit * 3 + marginTop: theme.spacing.unit * 2, + [theme.breakpoints.down('xs')]: { + textAlign: 'center' + } }, signupContainer: { - marginBottom: theme.spacing.unit * 2 + marginBottom: theme.spacing.unit * 2, + [theme.breakpoints.down('xs')]: { + textAlign: 'center' + } }, footer: { borderTop: `4px solid ${theme.palette.secondary.light}`, @@ -47,8 +60,14 @@ const styles = theme => ({ color: theme.palette.primary.light }, footerContainer: { - marginRight: theme.spacing.unit * 4, - marginLeft: theme.spacing.unit * 4 + width: 'auto', + marginLeft: theme.spacing.unit * 3, + marginRight: theme.spacing.unit * 3, + [theme.breakpoints.up(1200 + theme.spacing.unit * 3 * 2)]: { + width: 1200, + marginLeft: 'auto', + marginRight: 'auto' + } }, footerLink: { textDecoration: 'none', @@ -59,6 +78,9 @@ const styles = theme => ({ footerInputRoot: { 'label + &': { marginTop: theme.spacing.unit * 3 + }, + [theme.breakpoints.down('xs')]: { + textAlign: 'center' } }, footerInput: { @@ -106,7 +128,7 @@ const styles = theme => ({ class Footer extends Component { render () { - let { classes } = this.props + let { classes, width } = this.props const masterApp = this.props.context.masterApp if (masterApp.footer.visible === false) { @@ -120,26 +142,26 @@ class Footer extends Component { justify='space-evenly' className={classes.footerContainer} > - + - - Advanced Algos Ltd. + + Advanced Algos Ltd. {width} Ground Floor, Palace Court, Church Street,
St. Julians STJ3049, Malta Privacy Statement | Terms of Service - - - + + + Stay in touch! Opt-in our mailing list to stay up to date with the Advanced Algos Project.
Thank you for your interest! We'll keep you informed - + - Meet us on Social Networks: - + Meet us on Social Networks: + { @@ -191,4 +214,6 @@ const mapStateToProps = (state) => { } } -export default connect(mapStateToProps)(withStyles(styles)(Footer)) +const FooterWithStyles = withStyles(styles)(Footer) + +export default connect(mapStateToProps)(withWidth()(FooterWithStyles)) From f55e4a8e112b13aa11bbb0918526a91d65c49899 Mon Sep 17 00:00:00 2001 From: Barry Low Date: Tue, 6 Nov 2018 23:11:53 -0800 Subject: [PATCH 04/23] Add Responsive mobile menu button --- client/src/views/header/index.js | 134 +++++++++++++++++++++---------- 1 file changed, 91 insertions(+), 43 deletions(-) diff --git a/client/src/views/header/index.js b/client/src/views/header/index.js index d96f17c85..d594153c0 100644 --- a/client/src/views/header/index.js +++ b/client/src/views/header/index.js @@ -2,6 +2,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { withStyles } from '@material-ui/core/styles' +import withWidth from '@material-ui/core/withWidth' import AppBar from '@material-ui/core/AppBar' import Toolbar from '@material-ui/core/Toolbar' import Typography from '@material-ui/core/Typography' @@ -11,6 +12,7 @@ import Button from '@material-ui/core/Button' // icons import HomeIcon from '@material-ui/icons/Home' import ExitIcon from '@material-ui/icons/ExitToApp' +import MenuIcon from '@material-ui/icons/Menu' import { Link } from 'react-router-dom' @@ -72,15 +74,23 @@ const styles = theme => ({ }, dropdownButtons: { display: 'block' + }, + mobileMenu: { + color: theme.palette.common.white, + boxShadow: 'none', + border: `1px solid ${theme.palette.common.white}`, + background: 'none' } }) class Header extends Component { constructor (props) { super(props) + this.toggleMenu = this.toggleMenu.bind(this) this.state = { user: null, - open: null + open: null, + mobileOpen: false } } @@ -90,7 +100,7 @@ class Header extends Component { } render () { - let { classes, auth } = this.props + let { classes, auth, width } = this.props let { open } = this.state let user = JSON.parse(this.state.user) @@ -117,6 +127,34 @@ class Header extends Component { ) }) + const mobileMenusButton = ( + + ) + + const mobileMenus = allMenus.map((menu, index) => { + return ( +
this.setState({ open: index })} + onMouseLeave={() => this.setState({ open: null })} + > + +
+ { + menu.submenus.map((submenu, index) => { + // const Icon = submenu.icon + return ( + + ) + })} +
+
+ ) + }) + return (
  - - - - - - - - { menus } - - - - {this.state.user !== undefined && this.state.user !== null ? ( + {(width !== 'xs' && width !== 'sm') && - - - ) : ( - - )} + + + - - - + + + + + {this.state.user !== undefined && this.state.user !== null ? ( + + + + ) : ( + + )} + + + + + + } + { (width === 'xs' || width === 'sm') ? mobileMenusButton : menus } + { (width === 'xs' || width === 'sm') && this.state.mobileOpen ? mobileMenus : '' }
) } + + toggleMenu () { + this.setState({ mobileOpen: !this.state.mobileOpen }) + } } Header.propTypes = { classes: PropTypes.object.isRequired, - auth: PropTypes.object.isRequired + auth: PropTypes.object.isRequired, + width: PropTypes.string } -export default withStyles(styles)(Header) +const HeaderWithStyles = withStyles(styles)(Header) + +export default withWidth()(HeaderWithStyles) From 1bf69ff1bc61305828aad619c2179a11b921f692 Mon Sep 17 00:00:00 2001 From: Nikola Bjelo Date: Wed, 7 Nov 2018 12:16:09 +0100 Subject: [PATCH 05/23] Adding a key to submenus --- client/src/views/header/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/views/header/index.js b/client/src/views/header/index.js index d594153c0..07d3da514 100644 --- a/client/src/views/header/index.js +++ b/client/src/views/header/index.js @@ -116,10 +116,10 @@ class Header extends Component {
{ - menu.submenus.map((submenu, index) => { + menu.submenus.map((submenu, subindex) => { // const Icon = submenu.icon return ( - + ) })}
From b722d4116c3ec163a8f660d9128d4fde3ea3d7da Mon Sep 17 00:00:00 2001 From: Nikola Bjelo Date: Wed, 7 Nov 2018 13:10:17 +0100 Subject: [PATCH 06/23] Adding key and DRYing up --- client/src/views/header/index.js | 28 ++++------------------------ 1 file changed, 4 insertions(+), 24 deletions(-) diff --git a/client/src/views/header/index.js b/client/src/views/header/index.js index 07d3da514..920d191de 100644 --- a/client/src/views/header/index.js +++ b/client/src/views/header/index.js @@ -107,7 +107,9 @@ class Header extends Component { const menus = allMenus.map((menu, index) => { return ( -
this.setState({ open: index })} onMouseLeave={() => this.setState({ open: null })} > @@ -133,28 +135,6 @@ class Header extends Component { ) - const mobileMenus = allMenus.map((menu, index) => { - return ( -
this.setState({ open: index })} - onMouseLeave={() => this.setState({ open: null })} - > - -
- { - menu.submenus.map((submenu, index) => { - // const Icon = submenu.icon - return ( - - ) - })} -
-
- ) - }) - return (
} { (width === 'xs' || width === 'sm') ? mobileMenusButton : menus } - { (width === 'xs' || width === 'sm') && this.state.mobileOpen ? mobileMenus : '' } + { (width === 'xs' || width === 'sm') && this.state.mobileOpen ? menus : '' }
From a6564de34aa7c70e8a277b8f57ee94062991934b Mon Sep 17 00:00:00 2001 From: Nikola Bjelo Date: Wed, 7 Nov 2018 13:11:53 +0100 Subject: [PATCH 07/23] replacing the menu element --- client/src/views/header/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/client/src/views/header/index.js b/client/src/views/header/index.js index 920d191de..d49230122 100644 --- a/client/src/views/header/index.js +++ b/client/src/views/header/index.js @@ -166,6 +166,8 @@ class Header extends Component { Charts + { menus } + - - - -
Profile
- - - -
Logout
- - - - ) - } - - handleMenu (e) { - this.setState({ menu: e.currentTarget }) - } - - handleClose () { - this.setState({ menu: null }) - } - - handleLogout () { - this.props.auth.logout() - this.setState({ menu: null }) - } -} - -LoggedInUserMenu.propTypes = { - menuLabel: PropTypes.string.isRequired, - auth: PropTypes.object.isRequired -} - -export default LoggedInUserMenu diff --git a/client/src/views/layout/header/LoggedOut.js b/client/src/views/layout/header/LoggedOut.js deleted file mode 100644 index 7ce0da698..000000000 --- a/client/src/views/layout/header/LoggedOut.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import Button from '@material-ui/core/Button' - -export const LoggedOut = ({ auth }) => ( -
auth.login()}> - -
-) - -LoggedOut.propTypes = { - auth: PropTypes.object.isRequired -} - -export default LoggedOut diff --git a/client/src/views/layout/header/imports.js b/client/src/views/layout/header/imports.js index 6a54601bf..1f1cd948c 100644 --- a/client/src/views/layout/header/imports.js +++ b/client/src/views/layout/header/imports.js @@ -5,14 +5,14 @@ import { LibraryAdd } from '@material-ui/icons' -const eventsMenus = { - title: 'Events', +const usersMenus = { + title: 'Users', to: '/events', submenus: [ - { title: 'Look for an event', to: '/events', icon: Search, text: '' }, - { title: 'Events you are enrolled in', to: '/events/my', icon: GamepadRounded, text: '' }, - { title: 'Your hosted competition', to: '/events/host', icon: AccessibilityNew, text: '' }, - { title: 'Host a new competition', to: '/events/create', icon: LibraryAdd, text: '' } + { title: 'Your profile', to: '/users/user', icon: Search }, + { title: 'Directory', to: '/users/browse', icon: GamepadRounded }, + { title: 'Search', to: '/users/search', icon: AccessibilityNew }, + { title: 'Report', to: '/report/users', icon: LibraryAdd } ] } @@ -20,11 +20,36 @@ const teamsMenus = { title: 'Teams', to: '/teams', submenus: [ - { title: 'All teams', to: '/teams', icon: Search, text: '' }, - { title: 'Your teams', to: '/teams/manage-teams', icon: GamepadRounded, text: '' } + { title: 'All teams', to: '/teams', icon: Search }, + { title: 'Your teams', to: '/teams/manage-teams', icon: GamepadRounded }, + { title: 'Team members', to: '/teams/team-members', icon: GamepadRounded }, + { title: 'Financial beings', to: '/teams/financial-beings', icon: GamepadRounded }, + { title: 'Report', to: '/report/teams', icon: LibraryAdd } ] } -const allMenus = [ eventsMenus, teamsMenus ] +const eventsMenus = { + title: 'Events', + to: '/events', + submenus: [ + { title: 'Look for an event', to: '/events', icon: Search }, + { title: 'Events you are enrolled in', to: '/events/my', icon: GamepadRounded }, + { title: 'Your hosted competition', to: '/events/host', icon: AccessibilityNew }, + { title: 'Host a new competition', to: '/events/create', icon: LibraryAdd }, + { title: 'Report', to: '/report/events', icon: LibraryAdd } + ] +} + +const keyvaultMenus = { + title: 'Key Vault', + to: '/events', + submenus: [ + { title: 'Manage keys', to: '/key-vault/browse', icon: Search }, + { title: 'Add key', to: '/key-vault/addKey', icon: GamepadRounded }, + { title: 'Report', to: '/report/key-vault', icon: LibraryAdd } + ] +} + +const allMenus = [ usersMenus, teamsMenus, eventsMenus, keyvaultMenus ] export default allMenus diff --git a/client/src/views/layout/header/index.js b/client/src/views/layout/header/index.js index 8d88111d6..60c89835e 100644 --- a/client/src/views/layout/header/index.js +++ b/client/src/views/layout/header/index.js @@ -3,25 +3,14 @@ import PropTypes from 'prop-types' import { Link } from 'react-router-dom' import jwtDecode from 'jwt-decode' -import { withStyles } from '@material-ui/core/styles' -import withWidth from '@material-ui/core/withWidth' -import AppBar from '@material-ui/core/AppBar' -import Toolbar from '@material-ui/core/Toolbar' -import Typography from '@material-ui/core/Typography' -import IconButton from '@material-ui/core/IconButton' -import Button from '@material-ui/core/Button' - // icons -import HomeIcon from '@material-ui/icons/Home' import ExitIcon from '@material-ui/icons/ExitToApp' -import MenuIcon from '@material-ui/icons/Menu' // styles -import styles from './styles' +import './styles.scss' // components import { LoggedIn } from './LoggedIn' -import { LoggedOut } from './LoggedOut' import allMenus from './imports' import AALogo from '../../../assets/advanced-algos/aa-logo-dark.svg' @@ -29,22 +18,33 @@ import AALogo from '../../../assets/advanced-algos/aa-logo-dark.svg' class Header extends Component { constructor (props) { super(props) - this.toggleMenu = this.toggleMenu.bind(this) this.state = { - user: null, - open: null, - mobileOpen: false + onTop: true, + user: null } } - async componentDidMount () { + handleScroll () { + if (window.pageYOffset > 0) { + this.setState({ onTop: false }) + } else { + this.setState({ onTop: true }) + } + } + + componentDidMount () { + window.addEventListener('scroll', () => this.handleScroll()) const user = window.localStorage.getItem('user') this.setState({ user }) } + componentWillUnmount () { + window.removeEventListener('scroll', () => this.handleScroll()) + } + render () { - let { classes, auth, width } = this.props - let { open } = this.state + let { auth } = this.props + let { onTop } = this.state if (window.localStorage.getItem('access_token')) { if (jwtDecode(window.localStorage.getItem('access_token')).exp < new Date().getTime() / 1000) { @@ -54,114 +54,56 @@ class Header extends Component { } let user = JSON.parse(this.state.user) - const menus = allMenus.map((menu, index) => { + const menus = allMenus.map(({ to, title, submenus }, index) => { return ( -
this.setState({ open: index })} - onMouseLeave={() => this.setState({ open: null })} - > - -
+
  • + {title} +
      { - menu.submenus.map((submenu, subindex) => { - // const Icon = submenu.icon + submenus.map(({ icon: Icon, to: subTo, title: subTitle }, subindex) => { return ( - +
    • {subTitle}
      • ) })} -
    • -
    + + ) }) - const mobileMenusButton = ( - - ) - return ( -
    - - - Advanced Algos - -   - - {(width !== 'xs' && width !== 'sm') && - - - - +
    +
    + Advanced Algos +
    +
  • + auth.login()}> Login / Sign Up +
    • + )} +
  • + +
    • + + +
    + ) } - - toggleMenu () { - this.setState({ mobileOpen: !this.state.mobileOpen }) - } } Header.propTypes = { - classes: PropTypes.object.isRequired, - auth: PropTypes.object.isRequired, - width: PropTypes.string + auth: PropTypes.object.isRequired } -const HeaderWithStyles = withStyles(styles)(Header) - -export default withWidth()(HeaderWithStyles) +export default Header diff --git a/client/src/views/layout/header/styles.js b/client/src/views/layout/header/styles.js deleted file mode 100644 index 9bf2e9855..000000000 --- a/client/src/views/layout/header/styles.js +++ /dev/null @@ -1,61 +0,0 @@ -const styles = theme => ({ - '@global': { - body: { - backgroundColor: theme.palette.common.white - } - }, - root: { - flexGrow: 1 - }, - colorDefault: { - color: '#000' - }, - flex: { - flexGrow: 1 - }, - toolbarTitle: { - flex: 1 - }, - menuButton: { - marginLeft: -12, - marginRight: 20 - }, - appBar: { - position: 'relative' - }, - img: { - display: 'block', - maxWidth: 240, - maxHeight: 48 - }, - externalLink: { - textDecoration: 'none' - }, - dropdownContent: { - display: 'none', - position: 'absolute', - backgroundColor: '#f1f1f1', - minWidth: '160px', - boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)', - zIndex: 1 - }, - dropdownContentShown: { - display: 'block', - position: 'absolute', - backgroundColor: '#f1f1f1', - minWidth: '160px', - boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)', - zIndex: 1 - }, - dropdownButtons: { - display: 'block' - }, - mobileMenu: { - color: theme.palette.common.white, - boxShadow: 'none', - border: `1px solid ${theme.palette.common.white}`, - background: 'none' - } -}) - -export default styles diff --git a/client/src/views/layout/header/styles.scss b/client/src/views/layout/header/styles.scss new file mode 100644 index 000000000..7697add81 --- /dev/null +++ b/client/src/views/layout/header/styles.scss @@ -0,0 +1,153 @@ +body{ + overflow-y:scroll; + + &::-webkit-scrollbar-track { + border: 1px solid #000; + padding: 2px 0; + background-color: #404040; + } + + &::-webkit-scrollbar { + width: 10px; + } + + &::-webkit-scrollbar-thumb { + border-radius: 10px; + box-shadow: inset 0 0 6px rgba(0,0,0,.3); + background-color: #737272; + border: 1px solid #000; + } +} + +$break-big: 1300px; +$break-middle: 992px; +$break-small: 768px; + +$height-large-device: 131px; +$height-small-device: 181px; + +$height-not-top: 87px; + +$image-height-big: 75px; +$image-height-small: 45px; + +$text-height: 25px; + +$transition-time: 0.3s; + +$advanced-algos-red: rgb(245,88,88); + +header.menu{ + transition: $transition-time; + &.notOnTop{ + background-color: rgba(0, 0, 0, 0.6); + border-bottom: 1px solid rgba(210, 217, 224, 0.5); + height: $height-not-top; + .container{ + border-bottom: 0px; + img.logo{ + margin-top: ( $height-not-top - $image-height-small ) / 2; + height: $image-height-small; + } + nav.links{ + ul.primaryMenu{ + li.primaryLink{ + padding-top: ( $height-not-top - $text-height ) / 2; + padding-bottom: ( $height-not-top - $text-height ) / 2; + } + } + } + } + } + position: fixed; + height: $height-large-device; + width: 100vw; + z-index: 125; + + @media screen and (max-width: $break-small) { + height: $height-small-device; + } + .container{ + height: 100%; + border-bottom: 1px solid rgba(142, 144, 146, 0.3); + + width: 100%; + @media screen and (min-width: $break-small) { + width: 750px; + } + @media screen and (min-width: $break-middle) { + width: 970px; + } + @media screen and (min-width: $break-big) { + width: 1270px; + } + + padding-left: 15px; + padding-right: 15px; + margin-left: auto; + margin-right: auto; + + img.logo{ + transition: $transition-time; + margin-top: ( $height-large-device - $image-height-big ) / 2 ; + height: $image-height-big; + } + nav.links{ + float: right; + ul.primaryMenu{ + margin: 0 4px 0 0; + list-style: none; + + font-family: 'Saira'; + font-size: 12px; + font-weight: 700; + line-height: $text-height; + text-transform: uppercase; + li.primaryLink{ + transition: $transition-time; + display: block; + float: left; + position: relative; + padding-top: ( $height-large-device - $text-height ) / 2; + padding-bottom: ( $height-large-device - $text-height ) / 2; + padding-right: 21px; + padding-left: 21px; + a{ + color: white; + text-decoration: none; + &:hover{ + color: $advanced-algos-red; + } + } + ul.subMenu{ + display: none; + position: absolute; + top: 100%; + left: 0; + + padding: 18px 30px; + list-style: none; + font-family: 'Saira'; + font-size: 12px; + font-weight: 300; + line-height: $text-height; + + min-width: 240px; + background-color: rgba(0, 0, 0, 0.6); + li{ + height: 30px; + } + } + &:hover{ + &>a{ + color: $advanced-algos-red; + } + ul.subMenu{ + display: block; + } + } + } + } + } + } +} From 44bc7e9e2f3d10adf82ab7e8696eff0f844bb0af Mon Sep 17 00:00:00 2001 From: Unknown Date: Thu, 8 Nov 2018 09:45:20 +0100 Subject: [PATCH 20/23] Creating a responsive button (not connected yet) --- client/src/views/layout/header/index.js | 3 ++ client/src/views/layout/header/styles.scss | 55 ++++++++++++++++++++-- 2 files changed, 55 insertions(+), 3 deletions(-) diff --git a/client/src/views/layout/header/index.js b/client/src/views/layout/header/index.js index 60c89835e..8c21eafe9 100644 --- a/client/src/views/layout/header/index.js +++ b/client/src/views/layout/header/index.js @@ -74,6 +74,9 @@ class Header extends Component {
    Advanced Algos +
    + Menu +