a_adli/colouring-montreal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'feature/menu_expand_collapse_on_mobile'

Browse Source
This commit is contained in:
Tom Russell 2019-05-27 16:13:29 +01:00
commit 59f69d0012
5 changed files with 6965 additions and 5583 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/.eslintignore Normal file
View File

@ -0,0 +1,6 @@
node_modules/
build
test/fixtures
test/tests
razzle.config.js
packages/create-razzle-app/templates

33
app/.eslintrc Normal file
View File

@ -0,0 +1,33 @@
{
"extends": [
"eslint:recommended",
"plugin:react/recommended"
],
"env": {
"browser": true,
"commonjs": true,
"node": true,
"es6": true
},
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
"rules": {
"no-console": "off",
"strict": ["error", "global"],
"curly": "warn"
},
"plugins": [
"react"
],
"settings": {
"react": {
"version": "detect"
}
}
}

12371
app/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

26
app/package.json
View File

@ -11,29 +11,31 @@
"start:prod": "NODE_ENV=production node build/server.js"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.15",
"@fortawesome/free-solid-svg-icons": "^5.7.2",
"@fortawesome/fontawesome-svg-core": "^1.2.18",
"@fortawesome/free-solid-svg-icons": "^5.8.2",
"@fortawesome/react-fontawesome": "^0.1.4",
"@mapbox/sphericalmercator": "^1.1.0",
"body-parser": "^1.18.3",
"body-parser": "^1.19.0",
"bootstrap": "^4.3.1",
"connect-pg-simple": "^5.0.0",
"express": "^4.16.4",
"express-session": "^1.15.6",
"leaflet": "^1.4.0",
"express": "^4.17.1",
"express-session": "^1.16.1",
"leaflet": "^1.5.1",
"mapnik": "^4.2.1",
"node-fs": "^0.1.7",
"pg-promise": "^8.5.6",
"react": "^16.8.3",
"react-dom": "^16.8.3",
"pg-promise": "^8.7.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-leaflet": "^1.0.1",
"react-leaflet-universal": "^1.2.0",
"react-router-dom": "^4.3.1",
"serialize-javascript": "^1.6.1",
"serialize-javascript": "^1.7.0",
"sharp": "^0.21.3"
},
"devDependencies": {
"razzle": "^2.4.1",
"babel-eslint": "^10.0.1"
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-react": "^7.13.0",
"razzle": "^3.0.0"
}
}

112
app/src/frontend/header.js
View File

@ -5,55 +5,81 @@ import Logo from './logo';
import './header.css';
/**
* Main Header
* Render the main header using a responsive design
*/
const Header = (props) => (
<header className="main-header">
<nav className="navbar navbar-light navbar-expand-md">
<Logo />
<ul className="navbar-nav ml-auto">
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {collapseMenu: true};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(state => ({
collapseMenu: !state.collapseMenu
}));
}
render() {
return (
<header className="main-header">
<nav className="navbar navbar-light navbar-expand-md">
<span className="navbar-brand">
<Logo/>
</span>
<button className="navbar-toggler navbar-toggler-right" type="button"
onClick={this.handleClick} aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className={this.state.collapseMenu ? 'collapse navbar-collapse' : 'navbar-collapse'}>
<ul className="navbar-nav ml-auto">
<li className="nav-item">
<a className="nav-link" href="https://pages.colouring.london">Hello</a>
</li>
<li className="nav-item">
<a className="nav-link" href="https://pages.colouring.london/buildingcategories">Data Categories</a>
</li>
<li className="nav-item">
<NavLink to="/view/age.html" className="nav-link">View Maps</NavLink>
</li>
<li className="nav-item">
<NavLink to="/edit/age.html" className="nav-link">Add/Edit Data</NavLink>
</li>
<li className="nav-item">
<a className="nav-link" href="https://pages.colouring.london/about">More about</a>
</li>
<li className="nav-item">
<a className="nav-link" href="https://pages.colouring.london/whoisinvolved">Who's Involved?</a>
</li>
<li className="nav-item">
<a className="nav-link" href="https://discuss.colouring.london">Discuss</a>
</li>
{
this.props.user?
(
<li className="nav-item">
<a className="nav-link" href="https://pages.colouring.london">Hello</a>
<NavLink to="/my-account.html" className="nav-link">
My account (Logged in as {this.props.user.username})
</NavLink>
</li>
):
(
<Fragment>
<li className="nav-item">
<NavLink to="/login.html" className="nav-link">Log in</NavLink>
</li>
<li className="nav-item">
<a className="nav-link" href="https://pages.colouring.london/buildingcategories">Data Categories</a>
<NavLink to="/sign-up.html" className="nav-link">Sign up</NavLink>
</li>
<li className="nav-item">
<NavLink to="/view/age.html" className="nav-link">View Maps</NavLink>
</li>
<li className="nav-item">
<NavLink to="/edit/age.html" className="nav-link">Add/Edit Data</NavLink>
</li>
<li className="nav-item">
<a className="nav-link" href="https://pages.colouring.london/about">More about</a>
</li>
<li className="nav-item">
<a className="nav-link" href="https://pages.colouring.london/whoisinvolved">Who's Involved?</a>
</li>
<li className="nav-item">
<a className="nav-link" href="https://discuss.colouring.london">Discuss</a>
</li>
{
props.user?
(
<li className="nav-item">
<NavLink to="/my-account.html" className="nav-link">My account (Logged in as {props.user.username})</NavLink>
</li>
):
(
<Fragment>
<li className="nav-item">
<NavLink to="/login.html" className="nav-link">Log in</NavLink>
</li>
<li className="nav-item">
<NavLink to="/sign-up.html" className="nav-link">Sign up</NavLink>
</li>
</Fragment>
)
}
</Fragment>
)
}
</ul>
</div>
</nav>
</header>
);
</header>
);
}
}
export default Header;