From facc64b23f0c28fb45d9d1cdb9096a88ee581a31 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 22 Apr 2021 15:23:43 +0200 Subject: landscape stuff --- frontend/site/projects/museum/icons.js | 13 +++++- frontend/site/projects/museum/views/credits.js | 18 +++++++- .../projects/museum/views/landscape.warning.css | 32 +++++++++++++ .../projects/museum/views/landscape.warning.js | 49 ++++++++++++++++++++ frontend/site/projects/museum/views/mobile.css | 54 ++++++++++++++++++++++ frontend/site/projects/museum/views/nav.css | 2 +- frontend/site/projects/museum/views/nav.overlay.js | 5 +- 7 files changed, 167 insertions(+), 6 deletions(-) create mode 100644 frontend/site/projects/museum/views/landscape.warning.css create mode 100644 frontend/site/projects/museum/views/landscape.warning.js create mode 100644 frontend/site/projects/museum/views/mobile.css diff --git a/frontend/site/projects/museum/icons.js b/frontend/site/projects/museum/icons.js index db0f5f5..4517787 100644 --- a/frontend/site/projects/museum/icons.js +++ b/frontend/site/projects/museum/icons.js @@ -693,11 +693,20 @@ export const Globe = ( ) +const LastMuseumPath = ( + +) + +export const LastMuseumLogoNoBlur = ( + + {LastMuseumPath} + +) export const LastMuseumLogo = ( - + - + {LastMuseumPath} 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: ` Juliana Cerqueira Leite
Untitled
- Location: Santa Ifigênia, São Paulo, Brasil
- Videography & Sound design: Juliana Cerqueira Leite
+ Location: Santa Ifigênia, São Paulo, Brazil.
+ Videography & Sound design: Juliana Cerqueira Leite
+ Camera: Yllan Carvalho
+ Driver & Sculpture Grip: Raul Fiuza
+ Location Scouting & Support: Junae Andreazza
+ Thanks to: Andy Cabos & Wellington Xavier
+ Econote, ZWP Informática, Cenateca
+ Erica Ferrari & Cacá Mousinho
+ and the community of Santa Ifigênia

Zohra Opoku
The Myths of Eternal Life
@@ -229,6 +236,13 @@ const CREDITS_STRINGS = { Untitled
Location: Santa Ifigênia, São Paulo, Brasilien
Videografie & Sound Design: Juliana Cerqueira Leite
+ Kamera: Yllan Carvalho
+ Fahrer & Skulpturengriff: Raul Fiuza
+ Location Scouting & Support: Junae Andreazza
+ Dank an: Andy Cabos & Wellington Xavier
+ Econote, ZWP Informática, Cenateca
+ Erica Ferrari & Cacá Mousinho
+ und die Community von Santa Ifigênia

Zohra Opoku
The Myths of Eternal Life
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 = ( + + + +) + +const RotateIcon = ( + + + +) + +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 ( +
+ {RotateIcon} + {PhoneIcon} + {LastMuseumLogoNoBlur} +
{'Please rotate your device'}
+
+ ) + } +} \ 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 { )} {showLanguage && ( -
+
{this.props.language === "de" ? ( de / en ) : ( @@ -220,6 +222,7 @@ class NavOverlay extends Component { )} +
) } -- cgit v1.2.3-70-g09d2