Andal.LND/frontend-app-gradebook
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip

Browse Source
This commit is contained in:
Rick Reilly
2019-01-02 16:35:41 -05:00
parent 75c4ad1f59
commit c4a4967659
4 changed files with 76 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
package-lock.json generated
View File

@@ -2875,6 +2875,21 @@
}
}
},
"@babel/runtime": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.2.0.tgz",
"integrity": "sha512-oouEibCbHMVdZSDlJBO6bZmID/zA/G/Qx3H1d3rSNPTD+L8UNKvCat7aKWSJ74zYbm5zWGh0GQN0hKj8zYFTCg==",
"requires": {
"regenerator-runtime": "^0.12.0"
},
"dependencies": {
"regenerator-runtime": {
"version": "0.12.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz",
"integrity": "sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg=="
}
}
},
"@babel/template": {
"version": "7.0.0-beta.40",
"resolved": "https://registry.npmjs.org/@babel/template/-/template-7.0.0-beta.40.tgz",
@@ -13559,6 +13574,14 @@
"integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
"dev": true
},
"json2mq": {
"version": "0.2.0",
"resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz",
"integrity": "sha1-tje9O6nqvhIsg+lyBIOusQ0skEo=",
"requires": {
"string-convert": "^0.2.0"
}
},
"json3": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/json3/-/json3-3.3.2.tgz",
@@ -20129,6 +20152,17 @@
"integrity": "sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw==",
"dev": true
},
"react-media": {
"version": "1.9.2",
"resolved": "https://registry.npmjs.org/react-media/-/react-media-1.9.2.tgz",
"integrity": "sha512-JUYECMcJIm0V61LSVKd1e+II4ZTYO0GuR7xtlvKETlmThZ416BqZjZdJ1uGqgmMAGFeJ3TG4TX/3Kg4qbR3EJw==",
"requires": {
"@babel/runtime": "^7.2.0",
"invariant": "^2.2.2",
"json2mq": "^0.2.0",
"prop-types": "^15.5.10"
}
},
"react-proptype-conditional-require": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/react-proptype-conditional-require/-/react-proptype-conditional-require-1.0.4.tgz",
@@ -22379,6 +22413,11 @@
"resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
"integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
},
"string-convert": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz",
"integrity": "sha1-aYLMMEn7tM2F+LJFaLnZvznu/5c="
},
"string-length": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/string-length/-/string-length-2.0.0.tgz",

1
package.json
View File

@@ -36,6 +36,7 @@
"query-string": "^5.1.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-media": "^1.9.2",
"react-redux": "^5.0.7",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",

8
src/components/Header/header.scss
View File

@@ -13,4 +13,12 @@
content: "\00BB";
margin-left: 4px;
}
}
.color-gray {
color: #767676;
}
.justify-self-start {
justify-self: start !important;
}

41
src/components/Header/index.jsx
View File

@@ -1,5 +1,7 @@
import React from 'react';
import { Hyperlink } from '@edx/paragon';
import { Hyperlink, Icon } from '@edx/paragon';
import classNames from 'classnames';
import Media from 'react-media';
import EdxLogo from '../../../assets/edx-sm.png';
@@ -20,18 +22,31 @@ export default class Header extends React.Component {
render() {
return (
<div className="mb-3">
<header className="border-bottom-blue">
<div className="d-flex justify-content-center align-items-center p-3 border-bottom-blue">
<Hyperlink content={this.renderLogo()} destination="https://www.edx.org" />
</div>
<div className>
<a className="nav-link border-bottom-gray" href="https://www.google.com">Rick</a>
<a className="nav-link border-bottom-gray" href="https://www.google.com">Alex</a>
<a className="nav-link border-bottom-gray" href="https://www.google.com">Zach</a>
<a className="nav-link border-bottom-gray" href="https://www.google.com">Jansen</a>
<a className="nav-link border-bottom-gray" href="https://www.google.com">Simon</a>
</div>
</header>
<Media query="(max-width: 992px)">
{matches =>
(matches ? (
<header className="border-bottom-blue">
<div className="d-flex justify-content-center align-items-center p-3 border-bottom-blue">
<button className="border-0 mr-auto" onClick={() => this.setState({ mobileNavOpen: !this.state.mobileNavOpen })}>
<Icon className={classNames('fa', 'fa-2x', 'color-gray', { 'fa-bars': !this.state.mobileNavOpen }, { 'fa-times': this.state.mobileNavOpen })} />
</button>
<Hyperlink content={this.renderLogo()} destination="https://www.edx.org" />
</div>
{this.state.mobileNavOpen &&
<div>
<a className="nav-link border-bottom-gray" href="https://www.google.com">Rick</a>
<a className="nav-link border-bottom-gray" href="https://www.google.com">Alex</a>
<a className="nav-link border-bottom-gray" href="https://www.google.com">Zach</a>
<a className="nav-link border-bottom-gray" href="https://www.google.com">Jansen</a>
<a className="nav-link border-bottom-gray" href="https://www.google.com">Simon</a>
</div>}
</header>
) : (
<header>
<h1>hello world</h1>
</header>))
}
</Media>
</div>
);
}