diff --git a/api/config.py.example b/api/config.py.example index 5cdcf63..faca230 100644 --- a/api/config.py.example +++ b/api/config.py.example @@ -37,6 +37,7 @@ FRONTEND_CONFIG = { "imprintUrl": "https://example.com/imprint", "privacyPolicyUrl": "https://example.com/privacy", "mapHome": {"zoom": 6, "longitude": 10.2, "latitude": 51.3}, + "banner": {"text": "This is a test installation.", "style": "warning"}, } # If the API should serve generated tiles, this is the path where the tiles are diff --git a/frontend/src/App.module.less b/frontend/src/App.module.less index 58debe8..be1b03a 100644 --- a/frontend/src/App.module.less +++ b/frontend/src/App.module.less @@ -1,8 +1,6 @@ @import 'styles.less'; :global(#root) { - padding-top: @menuHeight; - display: flex; flex-direction: column; justify-content: stretch; @@ -72,7 +70,10 @@ } } -.menu { +.menu.menu { + flex: 0 0 auto; + margin: 0; + > :global(.ui.container) { height: @menuHeight; align-items: stretch; @@ -81,7 +82,10 @@ align-items: center; justify-content: center; color: white; - flex: 1 0 auto; + border-radius: 0; + border-right: 0; + border-left: 0; + border-top: 0; ul { margin: 0; @@ -106,3 +110,20 @@ } } } + +.banner { + padding: 8px; + z-index: 100; + border-bottom: 1px solid #DDD; + + &.warning { + background: #FFD54F; + border-color: #FBC02D; + color: #263238; + } + &.info { + background: #4FC3F7; + border-color: #0D47A1; + color: #0D47A1; + } +} diff --git a/frontend/src/App.js b/frontend/src/App.tsx similarity index 95% rename from frontend/src/App.js rename to frontend/src/App.tsx index 360c28a..c2edc73 100644 --- a/frontend/src/App.js +++ b/frontend/src/App.tsx @@ -1,4 +1,5 @@ import React from 'react' +import classnames from 'classnames' import {connect} from 'react-redux' import {List, Grid, Container, Menu, Header, Dropdown} from 'semantic-ui-react' import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom' @@ -50,6 +51,10 @@ function DropdownItemForLink({navigate, ...props}) { ) } +function Banner({text, style = 'warning'}: {text: string, style: 'warning' | 'info'}) { + return