From ee5876553c7091f62641ebfcb8b504860b999a4c Mon Sep 17 00:00:00 2001 From: Mikael Vaaltola Date: Fri, 28 Aug 2020 12:10:26 +0300 Subject: [PATCH 01/12] Display fullscreen --- public/index.html | 5 +++-- public/manifest.json | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/public/index.html b/public/index.html index aa069f2..ccec0bf 100644 --- a/public/index.html +++ b/public/index.html @@ -5,9 +5,10 @@ + - React App + aukiGO diff --git a/public/manifest.json b/public/manifest.json index 080d6c7..e6b8424 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -19,7 +19,7 @@ } ], "start_url": ".", - "display": "standalone", + "display": "fullscreen", "theme_color": "#000000", "background_color": "#ffffff" } From ed414e1d2f954dd23bfff0d1046de12203645324 Mon Sep 17 00:00:00 2001 From: Mikael Vaaltola Date: Fri, 28 Aug 2020 12:11:19 +0300 Subject: [PATCH 02/12] Update styles --- src/components/header.tsx | 34 +++++++++--------- src/components/layerselector.tsx | 60 +++++++++++++++++++++----------- src/theme.ts | 20 +++++++++-- 3 files changed, 74 insertions(+), 40 deletions(-) diff --git a/src/components/header.tsx b/src/components/header.tsx index dc9a251..78955ae 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -1,14 +1,13 @@ import React from 'react'; import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; -import IconButton from '@material-ui/core/IconButton'; import Typography from '@material-ui/core/Typography'; import InputBase from '@material-ui/core/InputBase'; import { - createStyles, fade, Theme, makeStyles, + createStyles, Theme, makeStyles, } from '@material-ui/core/styles'; import { Search, Settings } from '@material-ui/icons'; -import { Grid } from '@material-ui/core'; +import { Grid, Fab } from '@material-ui/core'; interface HeaderProps { onToggleBasemap: Function @@ -16,7 +15,7 @@ interface HeaderProps { const useStyles = makeStyles((theme: Theme) => createStyles({ root: { - backgroundColor: theme.palette.primary.main, + backgroundColor: theme.palette.primary.dark, flexGrow: 1, margin: '30px auto 0 auto', pointerEvents: 'auto', @@ -31,6 +30,7 @@ const useStyles = makeStyles((theme: Theme) => createStyles({ marginRight: theme.spacing(2), }, title: { + color: '#EDF6F9ff', marginLeft: '16px', flexGrow: 1, pointerEvents: 'none', @@ -42,12 +42,10 @@ const useStyles = makeStyles((theme: Theme) => createStyles({ }, search: { position: 'relative', - borderRadius: theme.shape.borderRadius, - backgroundColor: fade(theme.palette.common.white, 0.15), - '&:hover': { - backgroundColor: fade(theme.palette.common.white, 0.25), - }, - margin: '8px 0 8px 8px', + borderRadius: '50px', + backgroundColor: theme.palette.primary.light, + color: '#333333', + margin: '8px', width: '100%', [theme.breakpoints.up('sm')]: { marginLeft: theme.spacing(1), @@ -63,9 +61,6 @@ const useStyles = makeStyles((theme: Theme) => createStyles({ alignItems: 'center', justifyContent: 'center', }, - inputRoot: { - color: 'inherit', - }, inputInput: { padding: theme.spacing(2, 1, 2, 0), // vertical padding + font size from searchIcon @@ -79,6 +74,12 @@ const useStyles = makeStyles((theme: Theme) => createStyles({ }, }, }, + settings: { + position: 'absolute', + right: '30px', + marginTop: '10px', + color: theme.palette.primary.light, + }, })); export default function Header({ onToggleBasemap }: HeaderProps) { @@ -104,17 +105,16 @@ export default function Header({ onToggleBasemap }: HeaderProps) { - onToggleBasemap()}> - - + onToggleBasemap()}> + + ); } diff --git a/src/components/layerselector.tsx b/src/components/layerselector.tsx index 237acef..7d6490a 100644 --- a/src/components/layerselector.tsx +++ b/src/components/layerselector.tsx @@ -13,7 +13,6 @@ interface LayerSelectorProps { const useStyles = makeStyles((theme: Theme) => ( createStyles({ root: { - backgroundColor: theme.palette.primary.main, zIndex: 100, margin: 'auto', pointerEvents: 'auto', @@ -25,7 +24,17 @@ const useStyles = makeStyles((theme: Theme) => ( }, }, layerSelButton: { + borderRadius: '50%', + backgroundColor: theme.palette.primary.light, + width: '100px', + }, + layerSelIconButton: { minWidth: '100%', + color: theme.palette.primary.main, + }, + layerSelIcon: { + width: '2em', + height: '2em', }, }) )); @@ -45,47 +54,56 @@ export default function LayerSelector({ onToggleLayer }: LayerSelectorProps) { sm={11} xs={12} > - - + + - onToggleLayer('Lodging')}> - + onToggleLayer('Lodging')}> + - - + + - onToggleLayer('Shops')}> - + onToggleLayer('Shops')}> + - - + + - onToggleLayer('Finance')}> - + onToggleLayer('Finance')}> + - - + + - onToggleLayer('Health')}> - + onToggleLayer('Health')}> + + + + + + + + + onToggleLayer('Attractions')}> + - - + + - onToggleLayer('Attractions')}> - + onToggleLayer('Attractions')}> + diff --git a/src/theme.ts b/src/theme.ts index 0733036..c4bff1c 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -16,8 +16,24 @@ declare module '@material-ui/core/styles/createMuiTheme' { const defaultTheme = createMuiTheme({ palette: { - primary: blue, - secondary: orange, + primary: { + main: '#006D77', + dark: '#114B5F', + light: '#EEEEEE', + contrastText: '#333333', + }, + }, + typography: { + fontFamily: [ + 'montserrat', + 'sans-serif', + ].join(','), + h1: { + fontSize: '24px', + }, + body1: { + lineHeight: '1.5', + }, }, custom: { variable: '#000', From 6795b62557be0c78b5eb9660e0bf379c50d59222 Mon Sep 17 00:00:00 2001 From: Mikael Vaaltola Date: Fri, 28 Aug 2020 15:51:53 +0300 Subject: [PATCH 03/12] Improve header styles --- src/components/header.tsx | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/components/header.tsx b/src/components/header.tsx index 78955ae..9edb52a 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -15,7 +15,6 @@ interface HeaderProps { const useStyles = makeStyles((theme: Theme) => createStyles({ root: { - backgroundColor: theme.palette.primary.dark, flexGrow: 1, margin: '30px auto 0 auto', pointerEvents: 'auto', @@ -26,6 +25,9 @@ const useStyles = makeStyles((theme: Theme) => createStyles({ paddingRight: 0, }, }, + appBar: { + backgroundColor: theme.palette.primary.dark, + }, menuButton: { marginRight: theme.spacing(2), }, @@ -61,6 +63,9 @@ const useStyles = makeStyles((theme: Theme) => createStyles({ alignItems: 'center', justifyContent: 'center', }, + inputRoot: { + width: '100%', + }, inputInput: { padding: theme.spacing(2, 1, 2, 0), // vertical padding + font size from searchIcon @@ -76,9 +81,13 @@ const useStyles = makeStyles((theme: Theme) => createStyles({ }, settings: { position: 'absolute', - right: '30px', - marginTop: '10px', + right: '42px', + marginTop: '12px', color: theme.palette.primary.light, + backgroundColor: theme.palette.primary.dark, + [theme.breakpoints.down('xs')]: { + right: '10px', + }, }, })); @@ -93,7 +102,7 @@ export default function Header({ onToggleBasemap }: HeaderProps) { sm={11} xs={12} > - + aukigo @@ -105,6 +114,7 @@ export default function Header({ onToggleBasemap }: HeaderProps) { - onToggleBasemap()}> + onToggleBasemap()}> From c2791969b6474ea96e803770753804a88f2ab04e Mon Sep 17 00:00:00 2001 From: Mikael Vaaltola Date: Fri, 28 Aug 2020 15:52:20 +0300 Subject: [PATCH 04/12] Refactor and restyle layer selector --- src/components/layerselectionbutton.tsx | 50 ++++++++++++++ src/components/layerselector.tsx | 92 ++++++++----------------- 2 files changed, 80 insertions(+), 62 deletions(-) create mode 100644 src/components/layerselectionbutton.tsx diff --git a/src/components/layerselectionbutton.tsx b/src/components/layerselectionbutton.tsx new file mode 100644 index 0000000..4243421 --- /dev/null +++ b/src/components/layerselectionbutton.tsx @@ -0,0 +1,50 @@ +import React, { ReactElement } from 'react'; +import { + createStyles, + IconButton, Paper, Theme, Tooltip, +} from '@material-ui/core'; +import { makeStyles } from '@material-ui/styles'; + +interface LayerSelProps { + children: ReactElement + onToggleLayer: Function + name: string +} + +const useStyles = makeStyles((theme: Theme) => ( + createStyles({ + root: { + color: theme.palette.primary.main, + }, + layerSelButton: { + borderRadius: '50%', + backgroundColor: theme.palette.primary.light, + width: '50px', + height: '50px', + margin: 'auto', + }, + layerSelIconButton: { + color: theme.palette.primary.main, + // margin: '13px', + margin: 'auto', + width: '100%', + height: '100%', + padding: 0, + }, + }) +)); + +const LayerSelectionButton = ({ children, onToggleLayer, name }: LayerSelProps) => { + const classes = useStyles(); + return ( + + + onToggleLayer(name)}> + {children} + + + + ); +}; + +export default LayerSelectionButton; diff --git a/src/components/layerselector.tsx b/src/components/layerselector.tsx index 7d6490a..b40b471 100644 --- a/src/components/layerselector.tsx +++ b/src/components/layerselector.tsx @@ -1,10 +1,11 @@ import React from 'react'; import { - Grid, makeStyles, createStyles, IconButton, Paper, Theme, Tooltip, + Grid, makeStyles, createStyles, Theme, } from '@material-ui/core'; import { - AcUnit, Accessible, AccountBalance, AccountCircle, Apartment, + Apartment, ShoppingCart, Restaurant, PhotoCamera, LocalHospital, DirectionsBus, } from '@material-ui/icons'; +import LayerSelectionButton from './layerselectionbutton'; interface LayerSelectorProps { onToggleLayer: Function @@ -14,7 +15,7 @@ const useStyles = makeStyles((theme: Theme) => ( createStyles({ root: { zIndex: 100, - margin: 'auto', + margin: '20px auto', pointerEvents: 'auto', flexGrow: 1, [theme.breakpoints.up('md')]: { @@ -23,18 +24,9 @@ const useStyles = makeStyles((theme: Theme) => ( right: '30px', }, }, - layerSelButton: { - borderRadius: '50%', - backgroundColor: theme.palette.primary.light, - width: '100px', - }, - layerSelIconButton: { - minWidth: '100%', - color: theme.palette.primary.main, - }, layerSelIcon: { - width: '2em', - height: '2em', + margin: '0 auto', + width: '60%', }, }) )); @@ -54,59 +46,35 @@ export default function LayerSelector({ onToggleLayer }: LayerSelectorProps) { sm={11} xs={12} > - - - - onToggleLayer('Lodging')}> - - - - + + + + - - - - onToggleLayer('Shops')}> - - - - + + + + - - - - onToggleLayer('Finance')}> - - - - + + + + - - - - onToggleLayer('Health')}> - - - - + + + + - - - - onToggleLayer('Attractions')}> - - - - + + + + - - - - onToggleLayer('Attractions')}> - - - - + + + + ); From 7eebf186520bbc9670f83c132da130384a320886 Mon Sep 17 00:00:00 2001 From: Mikael Vaaltola Date: Mon, 31 Aug 2020 12:13:44 +0300 Subject: [PATCH 05/12] Add logo to header --- src/components/header.tsx | 25 +++++---- src/requests/getcapabilities.rest | 2 +- {logo => src/static}/AukiGO_logo.svg | 0 yarn.lock | 81 ++++++++++++++++++++++++++++ 4 files changed, 94 insertions(+), 14 deletions(-) rename {logo => src/static}/AukiGO_logo.svg (100%) diff --git a/src/components/header.tsx b/src/components/header.tsx index 9edb52a..4c6464a 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -1,13 +1,13 @@ import React from 'react'; import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; -import Typography from '@material-ui/core/Typography'; import InputBase from '@material-ui/core/InputBase'; import { createStyles, Theme, makeStyles, } from '@material-ui/core/styles'; import { Search, Settings } from '@material-ui/icons'; import { Grid, Fab } from '@material-ui/core'; +import logo from '../static/AukiGO_logo.svg'; interface HeaderProps { onToggleBasemap: Function @@ -31,16 +31,15 @@ const useStyles = makeStyles((theme: Theme) => createStyles({ menuButton: { marginRight: theme.spacing(2), }, - title: { - color: '#EDF6F9ff', - marginLeft: '16px', + logoDiv: { + float: 'left', flexGrow: 1, + }, + logo: { + color: '#EDF6F9ff', + height: '50px', + margin: '0 16px', pointerEvents: 'none', - userSelect: 'none', - display: 'none', - [theme.breakpoints.up('sm')]: { - display: 'block', - }, }, search: { position: 'relative', @@ -104,15 +103,15 @@ export default function Header({ onToggleBasemap }: HeaderProps) { > - - aukigo - +
+ aukiGo +
Date: Tue, 1 Sep 2020 12:53:57 +0300 Subject: [PATCH 06/12] Update theme colors --- src/theme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme.ts b/src/theme.ts index c4bff1c..b04da78 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -19,7 +19,7 @@ const defaultTheme = createMuiTheme({ primary: { main: '#006D77', dark: '#114B5F', - light: '#EEEEEE', + light: '#E8EBDD', contrastText: '#333333', }, }, From c449cc0c623f03c5d8b9cad8234875abc12a2645 Mon Sep 17 00:00:00 2001 From: anniinakovalainen Date: Tue, 1 Sep 2020 12:54:29 +0300 Subject: [PATCH 07/12] Update sizes --- src/components/layerselector.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/layerselector.tsx b/src/components/layerselector.tsx index b40b471..6bb80c9 100644 --- a/src/components/layerselector.tsx +++ b/src/components/layerselector.tsx @@ -26,7 +26,8 @@ const useStyles = makeStyles((theme: Theme) => ( }, layerSelIcon: { margin: '0 auto', - width: '60%', + height: '30px', + width: '100%', }, }) )); From a4e3525374ddce5a26f0c3d0cbe188f7ad4ab831 Mon Sep 17 00:00:00 2001 From: anniinakovalainen Date: Tue, 1 Sep 2020 12:54:54 +0300 Subject: [PATCH 08/12] Update buttons --- src/components/layerselectionbutton.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/layerselectionbutton.tsx b/src/components/layerselectionbutton.tsx index 4243421..cde22a3 100644 --- a/src/components/layerselectionbutton.tsx +++ b/src/components/layerselectionbutton.tsx @@ -19,9 +19,13 @@ const useStyles = makeStyles((theme: Theme) => ( layerSelButton: { borderRadius: '50%', backgroundColor: theme.palette.primary.light, - width: '50px', - height: '50px', + width: '70px', + height: '70px', margin: 'auto', + boxShadow: '0px 0px 10px -2px #999999', + '&:active': { + backgroundColor: theme.palette.primary.main, + }, }, layerSelIconButton: { color: theme.palette.primary.main, @@ -30,6 +34,9 @@ const useStyles = makeStyles((theme: Theme) => ( width: '100%', height: '100%', padding: 0, + '&:active': { + color: theme.palette.primary.light, + }, }, }) )); From 0ddd1bf1f655936d8c9c85112fa2b09ba6de25a0 Mon Sep 17 00:00:00 2001 From: anniinakovalainen Date: Tue, 1 Sep 2020 12:55:20 +0300 Subject: [PATCH 09/12] Update header, search and settings --- src/components/header.tsx | 33 +++++++++++++++++++++++++-------- 1 file changed, 25 insertions(+), 8 deletions(-) diff --git a/src/components/header.tsx b/src/components/header.tsx index 4c6464a..ff17e81 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -16,8 +16,9 @@ interface HeaderProps { const useStyles = makeStyles((theme: Theme) => createStyles({ root: { flexGrow: 1, - margin: '30px auto 0 auto', + margin: '0px', pointerEvents: 'auto', + minHeight: '80px', [theme.breakpoints.up('md')]: { margin: '30px 30px 0 auto', }, @@ -27,6 +28,11 @@ const useStyles = makeStyles((theme: Theme) => createStyles({ }, appBar: { backgroundColor: theme.palette.primary.dark, + minHeight: '80px', + boxShadow: '0px 0px 10px 5px #999999', + }, + toolbar: { + minHeight: '80px', }, menuButton: { marginRight: theme.spacing(2), @@ -45,9 +51,10 @@ const useStyles = makeStyles((theme: Theme) => createStyles({ position: 'relative', borderRadius: '50px', backgroundColor: theme.palette.primary.light, - color: '#333333', - margin: '8px', + color: '#006D77', + margin: '20px', width: '100%', + height: '40px', [theme.breakpoints.up('sm')]: { marginLeft: theme.spacing(1), width: 'auto', @@ -64,6 +71,7 @@ const useStyles = makeStyles((theme: Theme) => createStyles({ }, inputRoot: { width: '100%', + height: '40px' }, inputInput: { padding: theme.spacing(2, 1, 2, 0), @@ -71,6 +79,7 @@ const useStyles = makeStyles((theme: Theme) => createStyles({ paddingLeft: `calc(1em + ${theme.spacing(4)}px)`, transition: theme.transitions.create('width'), width: '100%', + height: '40px', [theme.breakpoints.up('sm')]: { width: '12ch', '&:focus': { @@ -81,12 +90,20 @@ const useStyles = makeStyles((theme: Theme) => createStyles({ settings: { position: 'absolute', right: '42px', - marginTop: '12px', - color: theme.palette.primary.light, - backgroundColor: theme.palette.primary.dark, + marginTop: '16px', + color: theme.palette.primary.dark, + backgroundColor: theme.palette.primary.light, + boxShadow: '0px 0px 10px -2px #999999', [theme.breakpoints.down('xs')]: { right: '10px', }, + '&:active': { + color: theme.palette.primary.light, + backgroundColor: theme.palette.primary.main, + boxShadow: '0px 0px 10px 5px #999999', + }, + '&:hover': { + } }, })); @@ -102,9 +119,9 @@ export default function Header({ onToggleBasemap }: HeaderProps) { xs={12} > - +
- aukiGo + AukiGO
From 2aecc6bb783e8c54c7af2d4702c900a2b8d2485e Mon Sep 17 00:00:00 2001 From: anniinakovalainen Date: Tue, 1 Sep 2020 13:17:11 +0300 Subject: [PATCH 10/12] Update shadow effects --- src/components/header.tsx | 4 ++-- src/components/layerselectionbutton.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/header.tsx b/src/components/header.tsx index ff17e81..d4d12c6 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -93,14 +93,14 @@ const useStyles = makeStyles((theme: Theme) => createStyles({ marginTop: '16px', color: theme.palette.primary.dark, backgroundColor: theme.palette.primary.light, - boxShadow: '0px 0px 10px -2px #999999', + boxShadow: '1px 2px 5px 2px rgba(9,9,9,0.18)', [theme.breakpoints.down('xs')]: { right: '10px', }, '&:active': { color: theme.palette.primary.light, backgroundColor: theme.palette.primary.main, - boxShadow: '0px 0px 10px 5px #999999', + boxShadow: '1px 2px 5px 2px rgba(9,9,9,0.18)', }, '&:hover': { } diff --git a/src/components/layerselectionbutton.tsx b/src/components/layerselectionbutton.tsx index cde22a3..311ed21 100644 --- a/src/components/layerselectionbutton.tsx +++ b/src/components/layerselectionbutton.tsx @@ -22,7 +22,7 @@ const useStyles = makeStyles((theme: Theme) => ( width: '70px', height: '70px', margin: 'auto', - boxShadow: '0px 0px 10px -2px #999999', + boxShadow: '1px 2px 5px 2px rgba(9,9,9,0.18)', '&:active': { backgroundColor: theme.palette.primary.main, }, From 74d4e890ed5a16438fe56532b0eca03846b41773 Mon Sep 17 00:00:00 2001 From: Mikael Vaaltola Date: Tue, 1 Sep 2020 16:22:01 +0300 Subject: [PATCH 11/12] Fix layer names --- src/components/layerselector.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/layerselector.tsx b/src/components/layerselector.tsx index 6bb80c9..f20e385 100644 --- a/src/components/layerselector.tsx +++ b/src/components/layerselector.tsx @@ -53,12 +53,12 @@ export default function LayerSelector({ onToggleLayer }: LayerSelectorProps) { - + - + From 8cc2a553c3b2eb66543ac05edf3b63f2534a3a49 Mon Sep 17 00:00:00 2001 From: Mikael Vaaltola Date: Tue, 1 Sep 2020 16:23:59 +0300 Subject: [PATCH 12/12] Improve header styles --- src/components/header.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/header.tsx b/src/components/header.tsx index d4d12c6..1521535 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -16,7 +16,7 @@ interface HeaderProps { const useStyles = makeStyles((theme: Theme) => createStyles({ root: { flexGrow: 1, - margin: '0px', + margin: 'auto', pointerEvents: 'auto', minHeight: '80px', [theme.breakpoints.up('md')]: { @@ -43,6 +43,7 @@ const useStyles = makeStyles((theme: Theme) => createStyles({ }, logo: { color: '#EDF6F9ff', + filter: 'invert()', height: '50px', margin: '0 16px', pointerEvents: 'none', @@ -71,7 +72,7 @@ const useStyles = makeStyles((theme: Theme) => createStyles({ }, inputRoot: { width: '100%', - height: '40px' + height: '40px', }, inputInput: { padding: theme.spacing(2, 1, 2, 0), @@ -103,7 +104,7 @@ const useStyles = makeStyles((theme: Theme) => createStyles({ boxShadow: '1px 2px 5px 2px rgba(9,9,9,0.18)', }, '&:hover': { - } + }, }, }));