Layout tuning for landscape mobile safari

heikkipora · Jul 29, 2020 · f0d0304 · f0d0304
1 parent 3730493
commit f0d0304
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 8 deletions.
diff --git a/public/client.less b/public/client.less
@@ -15,6 +15,13 @@ html, body {
 @brand-color: #69d2e7;
 @brand-color-darker: #2fc0dd;
 
+#app {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+}
+
 @import "info-panel.less";
 @import "map.less";
 @import "timeline.less";
diff --git a/public/info-panel.less b/public/info-panel.less
@@ -1,5 +1,5 @@
 .info-panel {
-  position: fixed;
+  position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
@@ -33,7 +33,7 @@
 
 .info-panel__content {
   padding: 0 16px;
-  width: 340px;
+  width: 380px;
   display: flex;
   flex-direction: column;
 }

diff --git a/public/map.less b/public/map.less
@@ -1,6 +1,6 @@
 
 #map {
-  position: fixed;
+  position: absolute;
   top: 0;
   bottom: 0;
   left: 0;

diff --git a/public/timeline.less b/public/timeline.less
@@ -1,7 +1,7 @@
 @tick-size: 10px;
 
 .timeline {
-  position: fixed;
+  position: absolute;
   bottom: 40px;
   left: 50%;
   transform: translate(-50%, 0);
@@ -83,7 +83,7 @@
   }
 
   .app--infopanel-expanded .timeline {
-    left: calc(100% - 42px - 310px);
+    left: calc(100% - 42px - 350px);
   }
 
   .timeline__tooltip {

diff --git a/src/client/index.js b/src/client/index.js
@@ -24,6 +24,7 @@ class SataakoApp extends React.Component {
       },
       collapsed: localStorage.getItem('sataako-fi-collapsed') === 'true'
     }
+    this.onResizeHandler = this.onResize.bind(this)
   }
 
   componentDidMount() {
@@ -33,6 +34,7 @@ class SataakoApp extends React.Component {
     this.loadFramesList()
     this.loadFramesInterval = setInterval(this.loadFramesList.bind(this, null), FRAME_LIST_RELOAD_MS)
     this.animateRadarInterval = setInterval(this.animateRadar.bind(this, null), FRAME_DELAY_MS)
+    window.addEventListener('resize', this.onResizeHandler)
 
     if (navigator.geolocation) {
       navigator.geolocation.getCurrentPosition(this.onLocation.bind(this))
@@ -51,13 +53,14 @@ class SataakoApp extends React.Component {
   }
 
   componentWillUnmount() {
+    window.removeEventListener('resize', this.onResizeHandler)
     clearInterval(this.animateRadarInterval)
     clearInterval(this.loadFramesInterval)
   }
 
   render() {
     const className = classNames({'app--infopanel-expanded': !this.state.collapsed})
-    return <div className={className}>
+    return <div className={className} style={{height: window.innerHeight}}>
         <div id="map"></div>
         <InfoPanel collapsed={this.state.collapsed} onInfoPanelToggle={this.onInfoPanelToggle.bind(this)}/>
         {this.state.currentTimestamp && <Timeline
@@ -156,6 +159,10 @@ class SataakoApp extends React.Component {
   onInfoPanelToggle() {
     this.setState(prevState => ({collapsed: !prevState.collapsed}))
   }
+
+  onResize() {
+    this.forceUpdate(() => this.map.updateSize())
+  }
 }
 
 ReactDOM.render(<SataakoApp />, document.getElementById('app'))
diff --git a/src/client/info-panel.js b/src/client/info-panel.js
@@ -24,8 +24,8 @@ export class InfoPanel extends React.PureComponent {
         <p>Live-sadetilanne kätevästi Suomessa ja lähialueilla. Milloin lähteä lenkille, uimarannalle, piknikille tai kalaan? Katso, missä lähin sadepilvi luuraa! Unohda hankalat täsmäsääpalvelut ja tuntiennusteet.</p>
         <p>Sadetutkakuva ja salamatiedot päivittyvät automaattisesti ja jatkuvasti, viiden minuutin välein. Mitä lähempänä väri on punaista, sitä enemmän sataa.</p>
         <p>Tämän palvelun on tehnyt vapaa-ajallaan <a href="https://twitter.com/p0ra" target="_blank" rel="noopener noreferrer" title="Heikki Pora Twitter">Heikki&nbsp;Pora</a>, jonka sade pääsi yllättämään.</p>
-        <p>Kartalla esitetään <a href="https://ilmatieteenlaitos.fi/avoin-data/" target="_blank" rel="noopener noreferrer" title="Ilmatieteenlaitos Avoin Data">Ilmatieteen laitoksen</a> toimittamia tietoaineistoja. Tiedot ovat kaikille avointa tietoa eli <a href="http://www.hri.fi/fi/mita-on-avoin-data/" target="_blank" rel="noopener noreferrer" title="Helsinki Region Infoshare: Mitä on avoin data?">open dataa</a>.</p>
-        <p>Karttamateriaali &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap contributors</a></p>
+        <p>Kartalla esitetään <a href="https://ilmatieteenlaitos.fi/avoin-data/" target="_blank" rel="noopener noreferrer" title="Ilmatieteenlaitos Avoin Data">Ilmatieteen laitoksen</a> toimittamia tietoaineistoja. Tiedot ovat kaikille avointa tietoa eli <a href="http://www.hri.fi/fi/mita-on-avoin-data/" target="_blank" rel="noopener noreferrer" title="Helsinki Region Infoshare: Mitä on avoin data?">open dataa</a>.
+        Karttamateriaali &copy; <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener noreferrer">OpenStreetMap contributors</a></p>
       </div>
     </div>
   }