landscape stuff

6 files changed, 156 insertions, 4 deletions

diff --git a/frontend/site/projects/museum/views/credits.js b/frontend/site/projects/museum/views/credits.js
index 0f4f100..dcc799b 100644
--- a/frontend/site/projects/museum/views/credits.js
+++ b/frontend/site/projects/museum/views/credits.js
@@ -205,8 +205,15 @@ const CREDITS_STRINGS = {
     en: `
       <b>Juliana Cerqueira Leite</b><br/>
       <i>Untitled</i><br/>
-      Location: Santa Ifigênia, São Paulo, Brasil<br/>
-      Videography & Sound design: Juliana Cerqueira Leite <br/>
+      Location: Santa Ifigênia, São Paulo, Brazil.<br/>
+      Videography & Sound design: Juliana Cerqueira Leite<br/>
+      Camera: Yllan Carvalho<br/>
+      Driver & Sculpture Grip: Raul Fiuza<br/>
+      Location Scouting & Support: Junae Andreazza<br/>
+      Thanks to: Andy Cabos & Wellington Xavier<br/>
+      Econote, ZWP Informática, Cenateca<br/>
+      Erica Ferrari & Cacá Mousinho<br/>
+      and the community of Santa Ifigênia<br/>
       <br/>
       <b>Zohra Opoku</b><br/>
       <i>The Myths of Eternal Life</i><br/>
@@ -229,6 +236,13 @@ const CREDITS_STRINGS = {
       <i>Untitled</i><br/>
       Location: Santa Ifigênia, São Paulo, Brasilien<br/>
       Videografie & Sound Design: Juliana Cerqueira Leite <br/>
+      Kamera: Yllan Carvalho<br/>
+      Fahrer & Skulpturengriff: Raul Fiuza<br/>
+      Location Scouting & Support: Junae Andreazza<br/>
+      Dank an: Andy Cabos & Wellington Xavier<br/>
+      Econote, ZWP Informática, Cenateca<br/>
+      Erica Ferrari & Cacá Mousinho<br/>
+      und die Community von Santa Ifigênia<br/>
       <br/>
       <b>Zohra Opoku</b><br/>
       <i>The Myths of Eternal Life</i><br/>
diff --git a/frontend/site/projects/museum/views/landscape.warning.css b/frontend/site/projects/museum/views/landscape.warning.css
new file mode 100644
index 0000000..704ef04
--- /dev/null
+++ b/frontend/site/projects/museum/views/landscape.warning.css
@@ -0,0 +1,32 @@
+.landscape-warning {
+  position: fixed;
+  top: 0; left: 0;
+  width: 100vw; height: 100vh;
+  background: #111111;
+  color: #ff790d;
+  font-family: "Helvetica", sans-serif;
+  font-size: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.landscape-warning .landscape-message {
+  margin: 2rem 0;
+}
+.landscape-warning path {
+  fill: #ff790d;
+}
+.landscape-warning .rotate-icon {
+  width: 2rem;
+  height: 2rem;
+  margin-bottom: -0.5rem;
+}
+.landscape-warning .phone-icon {
+  width: 3rem;
+  height: 3rem;
+  transform: rotate(90deg);
+}
+.landscape-warning .last-museum-logo {
+  width: 8rem;
+}
diff --git a/frontend/site/projects/museum/views/landscape.warning.js b/frontend/site/projects/museum/views/landscape.warning.js
new file mode 100644
index 0000000..eeb504c
--- /dev/null
+++ b/frontend/site/projects/museum/views/landscape.warning.js
@@ -0,0 +1,49 @@
+import React, { Component } from 'react'
+
+import './landscape.warning.css'
+
+import { LastMuseumLogoNoBlur } from '../icons'
+
+const PhoneIcon = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="phone-icon">
+    <path d="M15.5 1h-8C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23 7.5 23h8c1.38 0 2.5-1.12 2.5-2.5v-17C18 2.12 16.88 1 15.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z"/>
+  </svg>
+)
+
+const RotateIcon = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" className="rotate-icon">
+    <path d="M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z"/>
+  </svg>
+)
+
+export default class LandscapeWarning extends Component {
+  state = {
+    landscape: false,
+  }
+  constructor(props) {
+    super(props)
+    this.handleResize = this.handleResize.bind(this)
+    window.addEventListener("resize", this.handleResize)
+    this.handleResize()
+  }
+
+  handleResize() {
+    const landscape = window.innerWidth > window.innerHeight
+    if (landscape !== this.state.landscape) {
+      this.setState({ landscape })
+    }
+  }
+
+  render() {
+    const { landscape } = this.state
+    if (!landscape) return null
+    return (
+      <div className="landscape-warning">
+        {RotateIcon}
+        {PhoneIcon}
+        {LastMuseumLogoNoBlur}
+        <div className="landscape-message">{'Please rotate your device'}</div>
+      </div>
+    )
+  }
+}
\ No newline at end of file
diff --git a/frontend/site/projects/museum/views/mobile.css b/frontend/site/projects/museum/views/mobile.css
new file mode 100644
index 0000000..cb43929
--- /dev/null
+++ b/frontend/site/projects/museum/views/mobile.css
@@ -0,0 +1,54 @@
+@media only screen and (max-device-height: 500px) {
+  .museum-nav .home-link {
+    font-size: 0.8rem
+  }
+  .site-close {
+    padding: 1rem;
+  }
+  .site-close span {
+    display: none;
+  }
+  .site-close img {
+    width: 1rem;
+    margin: 0;
+  }
+  .museum-nav .home-link.language-link {
+    padding: 1rem 0.5rem;
+  }
+  .museum-nav .mute svg {
+    width: 1.2rem;
+    height: 1.2rem;
+  }
+  .footer,
+  .footer-gradient {
+    height: 3rem;
+  }
+  .footer .artist-desc {
+    padding-bottom: 0.25rem;
+  }
+  .footer .artist-name {
+    font-size: 0.7rem;
+  }
+  .footer .artist-location {
+    font-size: 0.7rem;
+  }
+  .nav-arrow {
+    width: 3rem;
+    height: 2.25rem;
+  }
+  .nav-arrow svg {
+    width: 1.2rem;
+    height: 1.2rem;
+  }
+  .charles-text {
+    font-size: 1.7rem;
+  }
+  .chapter-headphones {
+    font-size: 0.8rem;
+    line-height: 1rem;
+    top: 0;
+  }
+  .chapter-title {
+    top: 1.0625rem;
+  }
+}
\ No newline at end of file
diff --git a/frontend/site/projects/museum/views/nav.css b/frontend/site/projects/museum/views/nav.css
index 424c193..dd9fac2 100644
--- a/frontend/site/projects/museum/views/nav.css
+++ b/frontend/site/projects/museum/views/nav.css
@@ -154,6 +154,6 @@
   color: #FF790D;
 }
 .site-close img {
-  width: 32px;
+  width: 2rem;
   margin-left: 1.5rem;
 }
\ No newline at end of file
diff --git a/frontend/site/projects/museum/views/nav.overlay.js b/frontend/site/projects/museum/views/nav.overlay.js
index 2fd6eff..60f5e59 100644
--- a/frontend/site/projects/museum/views/nav.overlay.js
+++ b/frontend/site/projects/museum/views/nav.overlay.js
@@ -4,12 +4,14 @@ import { connect } from 'react-redux'
 import actions from 'site/actions'
 
 import "./nav.css"
+import "./mobile.css"
 
 import TextOverlay from './text.overlay'
 import JakrawalLinks from './jakrawal.links'
 import TitlesOverlay from './titles.overlay'
 import Flash from './flash'
 import Marquee from './marquee'
+import LandscapeWarning from './landscape.warning'
 import { ARTISTS, ARTIST_ORDER, PROJECT_PAGE_SET, BACK_TO_KW } from "site/projects/museum/constants"
 import { ArrowLeft, ArrowRight } from "site/projects/museum/icons"
 import MuteButton from "site/audio/mute.button"
@@ -201,7 +203,7 @@ class NavOverlay extends Component {
             </div>
           )}
           {showLanguage && (
-            <div className="home-link" onClick={this.changeLanguage}>
+            <div className="home-link language-link" onClick={this.changeLanguage}>
               {this.props.language === "de" ? (
                 <span><b>de</b> / en</span>
               ) : (
@@ -220,6 +222,7 @@ class NavOverlay extends Component {
           </a>
         )}
         <Flash location={this.props.location} match={this.props.match} />
+        <LandscapeWarning />
       </div>
     )
   }