diff --git a/package-lock.json b/package-lock.json index 66a7fea..41184fc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1025,8 +1025,7 @@ "base64-js": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.2.1.tgz", - "integrity": "sha512-dwVUVIXsBZXwTuwnXI9RK8sBmgq09NDHzyR9SAph9eqk76gKK2JSQmZARC2zRC81JC2QTtxD0ARU5qTS25gIGw==", - "dev": true + "integrity": "sha512-dwVUVIXsBZXwTuwnXI9RK8sBmgq09NDHzyR9SAph9eqk76gKK2JSQmZARC2zRC81JC2QTtxD0ARU5qTS25gIGw==" }, "batch": { "version": "0.6.1", @@ -1258,6 +1257,15 @@ "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=" }, + "camel-case": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz", + "integrity": "sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=", + "requires": { + "no-case": "2.3.2", + "upper-case": "1.1.3" + } + }, "camelcase": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-2.1.1.tgz", @@ -1678,6 +1686,11 @@ "randombytes": "2.0.5" } }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=" + }, "css-color-names": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", @@ -1730,6 +1743,16 @@ } } }, + "css-to-react-native": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.0.4.tgz", + "integrity": "sha1-z0zEB1WLNHTUuovhos07bOcTEBs=", + "requires": { + "css-color-keywords": "1.0.0", + "fbjs": "0.8.16", + "postcss-value-parser": "3.3.0" + } + }, "cssesc": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-0.1.0.tgz", @@ -2701,8 +2724,7 @@ "has-flag": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz", - "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=", - "dev": true + "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=" }, "has-unicode": { "version": "2.0.1", @@ -2972,8 +2994,7 @@ "ieee754": { "version": "1.1.8", "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.8.tgz", - "integrity": "sha1-vjPUCsEO8ZJnAfbwii2G+/0a0+Q=", - "dev": true + "integrity": "sha1-vjPUCsEO8ZJnAfbwii2G+/0a0+Q=" }, "in-publish": { "version": "2.0.0", @@ -3150,6 +3171,11 @@ "number-is-nan": "1.0.1" } }, + "is-function": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.1.tgz", + "integrity": "sha1-Es+5i2W1fdPRk6MSH19uL0N2ArU=" + }, "is-glob": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz", @@ -3202,7 +3228,6 @@ "version": "2.0.4", "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==", - "dev": true, "requires": { "isobject": "3.0.1" } @@ -3281,8 +3306,7 @@ "isobject": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz", - "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=", - "dev": true + "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=" }, "isomorphic-fetch": { "version": "2.2.1", @@ -3538,6 +3562,11 @@ "signal-exit": "3.0.2" } }, + "lower-case": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz", + "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=" + }, "lru-cache": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.1.tgz", @@ -3798,6 +3827,14 @@ "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz", "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=" }, + "no-case": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz", + "integrity": "sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==", + "requires": { + "lower-case": "1.1.4" + } + }, "node-fetch": { "version": "1.7.3", "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz", @@ -4844,8 +4881,7 @@ "postcss-value-parser": { "version": "3.3.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.0.tgz", - "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=", - "dev": true + "integrity": "sha1-h/OPnxj3dKSrTIojL1xc6IcqnRU=" }, "postcss-zindex": { "version": "2.2.0", @@ -5073,6 +5109,15 @@ "prop-types": "15.6.0" } }, + "react-icons-kit": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/react-icons-kit/-/react-icons-kit-1.0.7.tgz", + "integrity": "sha1-xdnjHXGyvP4Lr2U5OOosFYAsLuQ=", + "requires": { + "camel-case": "3.0.0", + "prop-types": "15.6.0" + } + }, "react-router": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-4.2.0.tgz", @@ -5115,6 +5160,24 @@ "warning": "3.0.0" } }, + "react-scroll": { + "version": "1.6.4", + "resolved": "https://registry.npmjs.org/react-scroll/-/react-scroll-1.6.4.tgz", + "integrity": "sha512-hBJlqX+ig3Lw+JN2w8jFJQG1VWLxcVHfb6DzlMU67rC1clyyei5L6DpjjQoafZuvqOH/jOKWanCyN7yaMRyUTg==", + "requires": { + "object-assign": "4.1.1", + "prop-types": "15.6.0" + } + }, + "react-sidenav": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/react-sidenav/-/react-sidenav-2.1.2.tgz", + "integrity": "sha1-QZgdr9u3P2nIxOIZwHJm0J0qVlY=", + "requires": { + "prop-types": "15.6.0", + "styled-components": "2.2.3" + } + }, "read-pkg": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz", @@ -5893,6 +5956,51 @@ "schema-utils": "0.3.0" } }, + "styled-components": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-2.2.3.tgz", + "integrity": "sha512-KzdZv4zyZPLoM4V90Tu+3evqTBZt1quFC1DBt5SA7k4dY3ANWmK+LZiIk/Q99GzLisBiEjV+Fn9nyty9rrZ1jw==", + "requires": { + "buffer": "5.0.8", + "css-to-react-native": "2.0.4", + "fbjs": "0.8.16", + "hoist-non-react-statics": "1.2.0", + "is-function": "1.0.1", + "is-plain-object": "2.0.4", + "prop-types": "15.6.0", + "stylis": "3.4.0", + "supports-color": "3.2.3" + }, + "dependencies": { + "buffer": { + "version": "5.0.8", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.0.8.tgz", + "integrity": "sha512-xXvjQhVNz50v2nPeoOsNqWCLGfiv4ji/gXZM28jnVwdLJxH4mFyqgqCKfaK9zf1KUbG6zTkjLOy7ou+jSMarGA==", + "requires": { + "base64-js": "1.2.1", + "ieee754": "1.1.8" + } + }, + "hoist-non-react-statics": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz", + "integrity": "sha1-qkSM8JhtVcxAdzsXF0t90GbLfPs=" + }, + "supports-color": { + "version": "3.2.3", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz", + "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=", + "requires": { + "has-flag": "1.0.0" + } + } + } + }, + "stylis": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.4.0.tgz", + "integrity": "sha512-RGVodOGadOR9RzRcZ+zzXXWMfuSmrQubeYtnzJZqq3jXIEH8zZ6nRRlOccn0RRsd19yUfYqtlvrq+SkNwfUH3A==" + }, "supports-color": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz", @@ -6107,6 +6215,11 @@ "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=" }, + "upper-case": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz", + "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=" + }, "url": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz", diff --git a/package.json b/package.json index 968aa60..99b5166 100644 --- a/package.json +++ b/package.json @@ -47,7 +47,10 @@ "express": "^4.16.1", "react": "^16.0.0", "react-dom": "^16.0.0", + "react-icons-kit": "^1.0.7", "react-router": "^4.2.0", - "react-router-dom": "^4.2.2" + "react-router-dom": "^4.2.2", + "react-scroll": "^1.6.4", + "react-sidenav": "^2.1.2" } } diff --git a/src/components/Navbar/Navbar.react.js b/src/components/Navbar/Navbar.react.js new file mode 100644 index 0000000..335671d --- /dev/null +++ b/src/components/Navbar/Navbar.react.js @@ -0,0 +1,42 @@ +import React from 'react'; +import SideNav, { Nav, NavIcon, NavText } from 'react-sidenav'; +import SvgIcon from 'react-icons-kit'; +import Scroll, {Link, Element} from 'react-scroll' +let scroller = Scroll.scroller; +import {ic_aspect_ratio} from 'react-icons-kit/md/ic_aspect_ratio'; +import {ic_question_answer} from 'react-icons-kit/md/ic_question_answer'; +import {ic_person} from 'react-icons-kit/md/ic_person'; + +import styles from './Navbar.scss'; +import globals from "stylesheets/globals.scss"; + +export default class Navbar extends React.Component { + //specify the base color/background of the parent container if needed + render(){ + return( +
+ + { + scroller.scrollTo(this.props.sections.find(section => section.text === id).sectionID, + { + duration: 800, + delay: 0 + } + ); + } + } + > + {this.props.sections.map((section) => + + )} + +
+ ) + } +} diff --git a/src/components/Navbar/Navbar.scss b/src/components/Navbar/Navbar.scss new file mode 100644 index 0000000..af43ad2 --- /dev/null +++ b/src/components/Navbar/Navbar.scss @@ -0,0 +1,12 @@ +@import "stylesheets/globals.scss"; + +.navbar { + background: $darkBlue; + text-align: left; + color: white; + width: 20; +} + +.nav { + background: white; +} diff --git a/src/components/Section/Section.react.js b/src/components/Section/Section.react.js index 31131ef..badad25 100644 --- a/src/components/Section/Section.react.js +++ b/src/components/Section/Section.react.js @@ -1,16 +1,11 @@ import React from 'react'; -import styles from 'components/Section/Section.scss'; +import Scroll, {Link, Element} from 'react-scroll' +import PropTypes from 'prop-types'; export default class Section extends React.Component { - render() { - return ( -
-
-

{this.props.title}

-

{this.props.content}

-
-
- ) + render(){ + return( + + ); } - } diff --git a/src/stylesheets/globals.scss b/src/stylesheets/globals.scss index d21a895..a93bb35 100644 --- a/src/stylesheets/globals.scss +++ b/src/stylesheets/globals.scss @@ -4,6 +4,7 @@ $spacingMargin: 24px; $black: #101010; $darkBlue: #133b70; $red: #ff6477; +$lightBlue: #8EEEFF; @mixin PrimaryFont { font-family: 'Libre Baskerville', serif; diff --git a/src/web/App.react.js b/src/web/App.react.js index 0e8cb32..b2a7a70 100644 --- a/src/web/App.react.js +++ b/src/web/App.react.js @@ -1,6 +1,7 @@ import Button from 'components/Button/Button.react'; import Header from 'components/Header/Header.react'; import Logo from 'components/Logo/Logo.react'; +import Navbar from 'components/Navbar/Navbar.react'; import React from 'react'; import styles from 'web/App.scss'; import Summary from 'components/Summary/Summary.react'; @@ -8,19 +9,90 @@ import Section from 'components/Section/Section.react.js' import Event from 'components/Event/Event.react'; import Tracks from 'components/Tracks/Tracks.react'; +import SideNav, { Nav, NavIcon, NavText } from 'react-sidenav'; +import SvgIcon from 'react-icons-kit'; +import {ic_aspect_ratio} from 'react-icons-kit/md/ic_aspect_ratio'; +import {ic_question_answer} from 'react-icons-kit/md/ic_question_answer'; +import {ic_person} from 'react-icons-kit/md/ic_person'; + export default class App extends React.Component { render() { + let isMobile = { + Android: function() { + return navigator.userAgent.match(/Android/i); + }, + BlackBerry: function() { + return navigator.userAgent.match(/BlackBerry/i); + }, + iOS: function() { + return navigator.userAgent.match(/iPhone|iPad|iPod/i); + }, + Opera: function() { + return navigator.userAgent.match(/Opera Mini/i); + }, + Windows: function() { + return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/WPDesktop/i); + }, + any: function() { + return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()); + } + }; + + let test; + if(isMobile.any()){ + test =

"You are using a mobile device"

+ } + else { + let test =

"You are using a desktop/laptop"

+ } return ( +
+
+ {test} +
+
+ +
+
February 16th - 18th
+
+
+

Project Tracks

+
); } diff --git a/src/web/App.scss b/src/web/App.scss index a5a564b..d0187e1 100644 --- a/src/web/App.scss +++ b/src/web/App.scss @@ -7,6 +7,7 @@ display: flex; align-items: center; height: 100vh; + overflow: auto; > div { margin-bottom: 80px; @@ -36,3 +37,9 @@ margin-left: $spacingMargin; } } + +.navbar{ + position:absolute; + top:100px; + left:100px; +}