last minute mobile fixes

5 files changed, 36 insertions, 15 deletions

diff --git a/frontend/site/projects/museum/views/landscape.warning.css b/frontend/site/projects/museum/views/landscape.warning.css
index 030f4ab..c88d442 100644
--- a/frontend/site/projects/museum/views/landscape.warning.css
+++ b/frontend/site/projects/museum/views/landscape.warning.css
@@ -1,7 +1,8 @@
 .landscape-warning {
   position: fixed;
   top: 0; left: 0;
-  width: 100vw; height: 100vh;
+  z-index: 3;
+  width: 100%; height: 100%;
   background: #111111;
   color: #ff790d;
   text-shadow: 0 0 3px #ff790d;
@@ -14,6 +15,7 @@
 }
 .landscape-warning .landscape-message {
   margin: 2rem 0;
+  text-align: center;
 }
 .landscape-warning path {
   fill: #ff790d;
diff --git a/frontend/site/projects/museum/views/landscape.warning.js b/frontend/site/projects/museum/views/landscape.warning.js
index a0b6e64..a5f794e 100644
--- a/frontend/site/projects/museum/views/landscape.warning.js
+++ b/frontend/site/projects/museum/views/landscape.warning.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 
 import './landscape.warning.css'
 
-import { isMobile } from 'app/utils'
+import { isMobile, isiPhone } from 'app/utils'
 import { LastMuseumLogoNoBlur } from '../icons'
 
 const PhoneIcon = (
@@ -46,8 +46,16 @@ export default class LandscapeWarning extends Component {
         {RotateIcon}
         {PhoneIcon}
         {LastMuseumLogoNoBlur}
-        <div className="landscape-message">{'Please rotate your device'}</div>
+        {isiPhone && <div className="landscape-message">{'Please tap '}<small>A</small>{'A and Hide Toolbar'}{ToolbarSymbol}<br/>{'then rotate your device.'}</div>}
+        {!isiPhone && <div className="landscape-message">{'Please rotate your device'}</div>}
       </div>
     )
   }
-}
\ No newline at end of file
+}
+
+const ToolbarSymbol = (
+  <img
+    src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAkCAMAAADM4ogkAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAA81BMVEX/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3/eQ3////VdBauAAAAT3RSTlMAI7z14jOM9vnH1eTy/vA8jgIOEQP4mqYE1pixB+UBo7kI8666Bra7CQ+3Erjf77AshDf8r/qQkzgF8b0WtBSyq6Hnlteoi8icj0DjxpE1VSRjywAAAAFiS0dEUONuTLwAAAAHdElNRQflBB4UJQFLwE0gAAABKUlEQVQ4y7XUbTPDQBAH8JVQWg3SBqERPdomaGlpkVL1/FTs9/82/kkwedPbGGPf3M7cb5LZu9sl+peYMUz+jtk5DTQ4EwUNnMf+QrG0WLaYl5Y1MPnSChK7UnVIC1ch12yxGOZiAXLdleEGbULWPBFukb8NWVcS3CFydiEbSoCMYpstrEEowD0s3r4ksX8Qr14bmaGRHT5Mz1nVIY+mw27v+CtTDeYT+eARYX9wmsch/Jzud/ps0Fd5nGtlbvO8150uazildvpCoiF3NLVfQLYSeYmMBDlqIrvSw1SOI/xagBTGrXntJJ1Hsrzx6VaCpEaQd3QvQooeIB+fZEj2MyedrDNutYLX5r8ks0HjXofMVnlSeosng6mB79mxFWjgx+SHmYEO/iE+AdeHRiu0e9zXAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIxLTA0LTMwVDE4OjM3OjExKzAyOjAw3aDYlgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMS0wNC0zMFQxODozNzowMSswMjowMGBXYLQAAAAASUVORK5CYII="
+    style={{ width: '14px', height: '14px', marginLeft: '4px', }}
+  />
+)
\ No newline at end of file
diff --git a/frontend/site/projects/museum/views/mobile.css b/frontend/site/projects/museum/views/mobile.css
index ca1776b..a6c61e6 100644
--- a/frontend/site/projects/museum/views/mobile.css
+++ b/frontend/site/projects/museum/views/mobile.css
@@ -24,11 +24,16 @@
   text-shadow: 0 0 5px rgba(255, 120, 13, 1.0);
 }
 
-@media only screen and (max-device-height: 500px) {
+@media only screen and (max-height: 500px) {
   /* site container */
+  .app {
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+  }
   .container {
-    height: 100vh;
-    width: 100vw;
+    height: 100%;
+    width: 100%;
     overflow: hidden;
     position: absolute;
     top: 0;
@@ -173,7 +178,7 @@
   /* charles */
   .charles-text {
     width: 90vw;
-    font-size: 0.8rem;
+    font-size: 0.4rem;
   }
   .chapter-headphones {
     font-size: 0.8rem;
diff --git a/frontend/site/projects/museum/views/nav.overlay.js b/frontend/site/projects/museum/views/nav.overlay.js
index 37d30d3..82b9151 100644
--- a/frontend/site/projects/museum/views/nav.overlay.js
+++ b/frontend/site/projects/museum/views/nav.overlay.js
@@ -148,7 +148,12 @@ class NavOverlay extends Component {
   
   preloadNextPages() {
     const { page_name } = this.props.match.params
-    const page_path = ["", "thelastmuseum", page_name].join('/')
+    const { pages, home_page, path: graph_name } = this.props.graph
+    let page_path = ["", graph_name, page_name].join('/')
+    if (!pages[page_path]) {
+      page_path = home_page
+    }
+    const page = pages[page_path]
     console.log("preload", page_path)
     console.log(this.props.graph)
     console.log(this.props.graph.pages[page_path])
@@ -316,11 +321,10 @@ class NavOverlay extends Component {
 }
 
 function exitLink(language) {
-  let link = 'https://www.kw-berlin.de/home/'
   if (language === 'en') {
-    link += 'en/'
+    return 'https://www.kw-berlin.de/en/home/'
   }
-  return link
+  return 'https://www.kw-berlin.de/home/'
 }
 
 const mapStateToProps = state => ({
diff --git a/frontend/site/projects/museum/views/titles.overlay.js b/frontend/site/projects/museum/views/titles.overlay.js
index 32e7344..5c51924 100644
--- a/frontend/site/projects/museum/views/titles.overlay.js
+++ b/frontend/site/projects/museum/views/titles.overlay.js
@@ -68,6 +68,11 @@ class TitlesOverlay extends Component {
     const { page_name } = this.props.match.params
     clearTimeout(this.titleTimeout)
     this.props.audio.player.stop("text-overlay")
+    if (isMobile) {
+      setTimeout(() => {
+        actions.site.setPopups({ text: true })
+      }, 100)
+    }
     if (SUBTITLES[page_name]) {
       this.setState({
         content: SUBTITLES[page_name],
@@ -75,9 +80,6 @@ class TitlesOverlay extends Component {
         showVideo: false,
       })
       setTimeout(SUBTITLES[page_name].headphones ? this.showHeadphones : this.showTitle, 0)
-      if (isMobile) {
-        actions.site.setPopups({ text: true })
-      }
     } else {
       this.setState({
         content: null,