pub-solar/obs-portal
5
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

frontend: Better style for welcome map on mobile

Browse source
This commit is contained in:
Paul Bienkowski 2021-02-21 11:34:06 +01:00
parent 1e0544802f
commit 6ba29e68a0
3 changed files with 15 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
frontend/src/pages/HomePage.js
View file

@ -1,6 +1,6 @@
import _ from 'lodash' import _ from 'lodash'
import React from 'react' import React from 'react'
import {Tab, Message, Grid, Loader, Statistic, Segment, Header, Item} from 'semantic-ui-react' import {Message, Grid, Loader, Statistic, Segment, Header, Item} from 'semantic-ui-react'
import {useObservable} from 'rxjs-hooks' import {useObservable} from 'rxjs-hooks'
import {of, pipe, from} from 'rxjs' import {of, pipe, from} from 'rxjs'
import {map, switchMap, distinctUntilChanged} from 'rxjs/operators' import {map, switchMap, distinctUntilChanged} from 'rxjs/operators'
@ -11,6 +11,7 @@ import api from '../api'
import {Map, Page} from '../components' import {Map, Page} from '../components'
import {TrackListItem} from './TracksPage' import {TrackListItem} from './TracksPage'
import styles from './HomePage.module.scss'
function formatDuration(seconds) { function formatDuration(seconds) {
return Duration.fromMillis((seconds ?? 0) * 1000) return Duration.fromMillis((seconds ?? 0) * 1000)
@ -20,7 +21,7 @@ function formatDuration(seconds) {
function WelcomeMap() { function WelcomeMap() {
return ( return (
<Map style={{height: '60rem', maxHeight: '80vh'}}> <Map className={styles.welcomeMap}>
<Map.TileLayer /> <Map.TileLayer />
<Map.View maxZoom={22} zoom={6} center={fromLonLat([10, 51])} /> <Map.View maxZoom={22} zoom={6} center={fromLonLat([10, 51])} />
</Map> </Map>
@ -70,7 +71,7 @@ function MostRecentTrack() {
() => () =>
of(null).pipe( of(null).pipe(
switchMap(() => from(api.fetch('/tracks?limit=1'))), switchMap(() => from(api.fetch('/tracks?limit=1'))),
map(({tracks}) => tracks[0]) map((response) => response?.tracks?.[0])
), ),
null, null,
[] []
@ -94,7 +95,7 @@ function MostRecentTrack() {
export default function HomePage() { export default function HomePage() {
return ( return (
<Page> <Page>
<Grid> <Grid stackable>
<Grid.Row> <Grid.Row>
<Grid.Column width={10}> <Grid.Column width={10}>
<WelcomeMap /> <WelcomeMap />

9
frontend/src/pages/HomePage.module.scss Normal file
View file

@ -0,0 +1,9 @@
.welcomeMap {
height: 60rem;
max-height: 80vh;
@media screen and (max-width: 767px) {
margin: -35px -32px 0 -32px;
max-height: 70vh;
}
}

1
frontend/src/styles.scss
View file

@ -1,4 +1,5 @@
@mixin container { @mixin container {
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 0 16px;
} }