From a4756873e5c871bf148cc8e76b4c4816caf6486d Mon Sep 17 00:00:00 2001 From: Paul Bienkowski Date: Sun, 9 May 2021 15:38:09 +0200 Subject: [PATCH] frontend: Add footer, improve menu, add links to privacy policy and imprint --- frontend/src/App.js | 220 +++++++++++------- frontend/src/App.module.scss | 42 +++- frontend/src/components/Page/Page.module.scss | 1 - frontend/src/components/Page/index.js | 8 - frontend/src/components/Page/index.tsx | 13 ++ frontend/src/config.dev.json | 4 +- frontend/src/config.json.example | 4 +- frontend/src/pages/HomePage.module.scss | 4 +- 8 files changed, 186 insertions(+), 110 deletions(-) delete mode 100644 frontend/src/components/Page/index.js create mode 100644 frontend/src/components/Page/index.tsx diff --git a/frontend/src/App.js b/frontend/src/App.js index d7ad79f..61a5eb0 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.js @@ -1,8 +1,9 @@ import React from 'react' import {connect} from 'react-redux' -import {Image, Icon, Button} from 'semantic-ui-react' +import {List, Grid, Container, Menu, Icon, Button, Header} from 'semantic-ui-react' import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom' +import config from 'config.json' import styles from './App.module.scss' import { @@ -21,96 +22,137 @@ import {Avatar, LoginButton} from 'components' const App = connect((state) => ({login: state.login}))(function App({login}) { return ( -
-
-
-
- OpenBikeSensor -
- -
-
+ + + + OpenBikeSensor + - - - - - - - - - - - - - - - - - - - - - - - {login && ( - <> - - - - - - - + + Tracks + + + {login ? ( + + + + + + + + + + + + + + ) : ( + + + + + )} - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + {login && ( + <> + + + + + + + + )} + + + + + +
+ + + + +
About the project
+ + + + openbikesensor.org + + + + + + +
Get involved
+ + + + Slack + + + + + Report an issue + + + + + Development + + + + + + +
This installation
+ + + + Privacy policy + + + + + Imprint + + + + + + + + + +
) diff --git a/frontend/src/App.module.scss b/frontend/src/App.module.scss index c0d0413..b9e32d5 100644 --- a/frontend/src/App.module.scss +++ b/frontend/src/App.module.scss @@ -1,14 +1,40 @@ @import 'styles.scss'; -.App { +:global(#root) { padding-top: 60px; + + display: flex; + flex-direction: column; + justify-content: stretch; + + html, body, & { + min-height: 100%; + } } -.header { - @include container; - height: 56px; - display: flex; - align-items: center; +.footer { + margin-top: auto; + min-height: 12rem; + padding: 2rem 0; + + background: $obsColorB4; + color: $obsColorW; + + h1, h2, h3, h4, h5, h6 { + &:global(.ui.header) { + color: inherit; + } + } + + a { + &, &:hover { + color: inherit; + } + + &:hover { + text-decoration: underline; + } + } } .avatar { @@ -36,12 +62,12 @@ box-shadow: 0 0 10px -6px black; } -.pageTitle { +.pageTitle a { font-family: 'Open Sans Condensed'; font-weight: 600; font-size: 18pt; - &, a, a:hover { + &, &:hover { color: $obsColorB4; } } diff --git a/frontend/src/components/Page/Page.module.scss b/frontend/src/components/Page/Page.module.scss index 2c519c6..a367418 100644 --- a/frontend/src/components/Page/Page.module.scss +++ b/frontend/src/components/Page/Page.module.scss @@ -1,7 +1,6 @@ @import '../../styles.scss'; .page { - @include container; margin-top: 32px; margin-bottom: 32px; } diff --git a/frontend/src/components/Page/index.js b/frontend/src/components/Page/index.js deleted file mode 100644 index 02112a6..0000000 --- a/frontend/src/components/Page/index.js +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react' -import classnames from 'classnames' - -import styles from './Page.module.scss' - -export default function Page({small, children}) { - return
{children}
-} diff --git a/frontend/src/components/Page/index.tsx b/frontend/src/components/Page/index.tsx new file mode 100644 index 0000000..8c99fa9 --- /dev/null +++ b/frontend/src/components/Page/index.tsx @@ -0,0 +1,13 @@ +import React from 'react' +import classnames from 'classnames' +import {Container} from 'semantic-ui-react' + +import styles from './Page.module.scss' + +export default function Page({small, children}: {small?: boolean, children: ReactNode}) { + return ( +
+ {children} +
+ ) +} diff --git a/frontend/src/config.dev.json b/frontend/src/config.dev.json index 9a07ac0..3f101af 100644 --- a/frontend/src/config.dev.json +++ b/frontend/src/config.dev.json @@ -5,5 +5,7 @@ "clientId": "b730f8d2-d93c-4c68-9ff0-dfac8da76ee2", "scope": "*", "redirectUri": "http://localhost:3001/redirect" - } + }, + "imprintUrl": "https://example.com/imprint", + "privacyPolicyUrl": "https://example.com/privacy" } diff --git a/frontend/src/config.json.example b/frontend/src/config.json.example index 58e91f8..8ea08fb 100644 --- a/frontend/src/config.json.example +++ b/frontend/src/config.json.example @@ -5,5 +5,7 @@ "clientId": "CHANGEME", "scope": "*", "redirectUri": "https://example.com/redirect" - } + }, + "imprintUrl": "https://example.com/imprint", + "privacyPolicyUrl": "https://example.com/privacy" } diff --git a/frontend/src/pages/HomePage.module.scss b/frontend/src/pages/HomePage.module.scss index 32a71d5..9380b30 100644 --- a/frontend/src/pages/HomePage.module.scss +++ b/frontend/src/pages/HomePage.module.scss @@ -1,9 +1,9 @@ .welcomeMap { height: 60rem; - max-height: 80vh; + max-height: 70vh; @media screen and (max-width: 767px) { margin: -35px -32px 0 -32px; - max-height: 70vh; + max-height: 70vh; } }