From 6ba29e68a0143bfe0b2797229d90e716218ed1f1 Mon Sep 17 00:00:00 2001
From: Paul Bienkowski <pb@opatut.de>
Date: Sun, 21 Feb 2021 11:34:06 +0100
Subject: [PATCH] frontend: Better style for welcome map on mobile

---
 frontend/src/pages/HomePage.js          | 9 +++++----
 frontend/src/pages/HomePage.module.scss | 9 +++++++++
 frontend/src/styles.scss                | 1 +
 3 files changed, 15 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/pages/HomePage.module.scss

diff --git a/frontend/src/pages/HomePage.js b/frontend/src/pages/HomePage.js
index 951dc19..bc88bd2 100644
--- a/frontend/src/pages/HomePage.js
+++ b/frontend/src/pages/HomePage.js
@@ -1,6 +1,6 @@
 import _ from 'lodash'
 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 {of, pipe, from} from 'rxjs'
 import {map, switchMap, distinctUntilChanged} from 'rxjs/operators'
@@ -11,6 +11,7 @@ import api from '../api'
 import {Map, Page} from '../components'
 
 import {TrackListItem} from './TracksPage'
+import styles from './HomePage.module.scss'
 
 function formatDuration(seconds) {
   return Duration.fromMillis((seconds ?? 0) * 1000)
@@ -20,7 +21,7 @@ function formatDuration(seconds) {
 
 function WelcomeMap() {
   return (
-    <Map style={{height: '60rem', maxHeight: '80vh'}}>
+    <Map className={styles.welcomeMap}>
       <Map.TileLayer />
       <Map.View maxZoom={22} zoom={6} center={fromLonLat([10, 51])} />
     </Map>
@@ -70,7 +71,7 @@ function MostRecentTrack() {
     () =>
       of(null).pipe(
         switchMap(() => from(api.fetch('/tracks?limit=1'))),
-        map(({tracks}) => tracks[0])
+        map((response) => response?.tracks?.[0])
       ),
     null,
     []
@@ -94,7 +95,7 @@ function MostRecentTrack() {
 export default function HomePage() {
   return (
     <Page>
-      <Grid>
+      <Grid stackable>
         <Grid.Row>
           <Grid.Column width={10}>
             <WelcomeMap />
diff --git a/frontend/src/pages/HomePage.module.scss b/frontend/src/pages/HomePage.module.scss
new file mode 100644
index 0000000..32a71d5
--- /dev/null
+++ b/frontend/src/pages/HomePage.module.scss
@@ -0,0 +1,9 @@
+.welcomeMap {
+  height: 60rem;
+  max-height: 80vh;
+
+  @media screen and (max-width: 767px) {
+    margin: -35px -32px 0 -32px;
+  max-height: 70vh;
+  }
+}
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 3398b85..d65caf5 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -1,4 +1,5 @@
 @mixin container {
   max-width: 1200px;
   margin: 0 auto;
+  padding: 0 16px;
 }