diff options
Diffstat (limited to 'frontend')
| -rw-r--r-- | frontend/site/projects/museum/icons.js | 13 | ||||
| -rw-r--r-- | frontend/site/projects/museum/views/credits.js | 18 | ||||
| -rw-r--r-- | frontend/site/projects/museum/views/landscape.warning.css | 32 | ||||
| -rw-r--r-- | frontend/site/projects/museum/views/landscape.warning.js | 49 | ||||
| -rw-r--r-- | frontend/site/projects/museum/views/mobile.css | 54 | ||||
| -rw-r--r-- | frontend/site/projects/museum/views/nav.css | 2 | ||||
| -rw-r--r-- | frontend/site/projects/museum/views/nav.overlay.js | 5 |
7 files changed, 167 insertions, 6 deletions
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 = ( </svg> ) +const LastMuseumPath = ( + <path fill="#ffffff" d="M12.8604 7.88L6.19045 49.05H26.4304L5.96044 179H50.3504L70.8205 49.05H91.2904L97.7304 7.88H12.8604ZM133.53 113.45H143.42L133.07 179H177.69L204.83 7.88H160.21L150.78 66.3H140.89L150.32 7.88H105.7L78.5596 179H123.18L133.53 113.45ZM214.015 7.88L186.875 179H265.535L272.205 137.37H237.935L242.075 111.61H269.445L276.115 69.52H248.975L252.195 49.05H285.085L291.525 7.88H214.015ZM329.123 7.88L301.983 179H375.583L382.253 136.45H353.273L373.743 7.88H329.123ZM431.41 179H474.65L477.41 7.88H421.06L372.3 179H410.94L416.23 157.84H432.56L431.41 179ZM425.66 119.43L436.93 74.58L434.63 119.43H425.66ZM534.833 181.53C567.033 181.53 580.143 164.97 584.513 137.37L585.893 128.63C588.423 110.92 583.133 97.35 563.583 77.11L549.553 62.85C544.723 57.56 543.343 54.34 544.263 49.05L544.953 44.68C545.643 40.31 546.563 38.7 550.013 38.7C553.233 38.7 554.613 40.54 554.153 44.22L551.853 59.17H594.173L597.163 41.69C600.383 22.37 589.803 5.34999 557.373 5.34999H547.023C516.663 5.34999 503.093 19.84 499.413 43.07L498.263 50.43C495.733 66.76 500.333 81.48 516.893 98.96L530.463 113.22C536.903 119.89 538.973 122.88 537.363 131.39L536.443 137.14C535.523 142.43 534.603 144.73 530.923 144.73C527.243 144.73 525.863 141.74 526.783 137.14L529.773 117.59H486.073L482.853 138.75C478.483 166.12 494.583 181.53 524.023 181.53H534.833ZM609.414 7.88L602.744 49.05H622.984L602.514 179H646.904L667.374 49.05H687.844L694.284 7.88H609.414ZM703.468 179H740.498L754.068 93.9L753.838 179H769.478L795.928 93.9L782.358 179H820.078L846.988 7.88H795.928L777.528 80.79L781.208 7.88H730.608L703.468 179ZM836.208 134.61C831.838 162.21 846.098 181.99 880.368 181.99H887.268C919.928 181.99 934.188 160.37 938.558 134.61L958.568 7.88H911.878L892.558 132.08C891.868 136.68 889.798 138.98 886.808 138.98C883.358 138.98 882.208 136.68 882.898 132.08L902.448 7.88H856.218L836.208 134.61ZM997.349 181.53C1029.55 181.53 1042.66 164.97 1047.03 137.37L1048.41 128.63C1050.94 110.92 1045.65 97.35 1026.1 77.11L1012.07 62.85C1007.24 57.56 1005.86 54.34 1006.78 49.05L1007.47 44.68C1008.16 40.31 1009.08 38.7 1012.53 38.7C1015.75 38.7 1017.13 40.54 1016.67 44.22L1014.37 59.17H1056.69L1059.68 41.69C1062.9 22.37 1052.32 5.34999 1019.89 5.34999H1009.54C979.179 5.34999 965.609 19.84 961.929 43.07L960.779 50.43C958.249 66.76 962.849 81.48 979.409 98.96L992.979 113.22C999.419 119.89 1001.49 122.88 999.879 131.39L998.959 137.14C998.039 142.43 997.119 144.73 993.439 144.73C989.759 144.73 988.379 141.74 989.299 137.14L992.289 117.59H948.589L945.369 138.75C940.999 166.12 957.099 181.53 986.539 181.53H997.349ZM1075.1 7.88L1047.96 179H1126.62L1133.29 137.37H1099.02L1103.16 111.61H1130.53L1137.2 69.52H1110.06L1113.28 49.05H1146.17L1152.61 7.88H1075.1ZM1141.84 134.61C1137.47 162.21 1151.73 181.99 1186 181.99H1192.9C1225.56 181.99 1239.82 160.37 1244.19 134.61L1264.2 7.88H1217.51L1198.19 132.08C1197.5 136.68 1195.43 138.98 1192.44 138.98C1188.99 138.98 1187.84 136.68 1188.53 132.08L1208.08 7.88H1161.85L1141.84 134.61ZM1246.17 179H1283.2L1296.77 93.9L1296.54 179H1312.18L1338.63 93.9L1325.06 179H1362.78L1389.69 7.88H1338.63L1320.23 80.79L1323.91 7.88H1273.31L1246.17 179Z" /> +) + +export const LastMuseumLogoNoBlur = ( + <svg viewBox="0 0 1395 187" fill="none" xmlns="http://www.w3.org/2000/svg" className="last-museum-logo"> + {LastMuseumPath} + </svg> +) export const LastMuseumLogo = ( - <svg viewBox="0 0 1395 187" fill="none" xmlns="http://www.w3.org/2000/svg"> + <svg viewBox="0 0 1395 187" fill="none" xmlns="http://www.w3.org/2000/svg" className="last-museum-logo"> <g filter="url(#filter0_d)"> - <path fill="#ffffff" d="M12.8604 7.88L6.19045 49.05H26.4304L5.96044 179H50.3504L70.8205 49.05H91.2904L97.7304 7.88H12.8604ZM133.53 113.45H143.42L133.07 179H177.69L204.83 7.88H160.21L150.78 66.3H140.89L150.32 7.88H105.7L78.5596 179H123.18L133.53 113.45ZM214.015 7.88L186.875 179H265.535L272.205 137.37H237.935L242.075 111.61H269.445L276.115 69.52H248.975L252.195 49.05H285.085L291.525 7.88H214.015ZM329.123 7.88L301.983 179H375.583L382.253 136.45H353.273L373.743 7.88H329.123ZM431.41 179H474.65L477.41 7.88H421.06L372.3 179H410.94L416.23 157.84H432.56L431.41 179ZM425.66 119.43L436.93 74.58L434.63 119.43H425.66ZM534.833 181.53C567.033 181.53 580.143 164.97 584.513 137.37L585.893 128.63C588.423 110.92 583.133 97.35 563.583 77.11L549.553 62.85C544.723 57.56 543.343 54.34 544.263 49.05L544.953 44.68C545.643 40.31 546.563 38.7 550.013 38.7C553.233 38.7 554.613 40.54 554.153 44.22L551.853 59.17H594.173L597.163 41.69C600.383 22.37 589.803 5.34999 557.373 5.34999H547.023C516.663 5.34999 503.093 19.84 499.413 43.07L498.263 50.43C495.733 66.76 500.333 81.48 516.893 98.96L530.463 113.22C536.903 119.89 538.973 122.88 537.363 131.39L536.443 137.14C535.523 142.43 534.603 144.73 530.923 144.73C527.243 144.73 525.863 141.74 526.783 137.14L529.773 117.59H486.073L482.853 138.75C478.483 166.12 494.583 181.53 524.023 181.53H534.833ZM609.414 7.88L602.744 49.05H622.984L602.514 179H646.904L667.374 49.05H687.844L694.284 7.88H609.414ZM703.468 179H740.498L754.068 93.9L753.838 179H769.478L795.928 93.9L782.358 179H820.078L846.988 7.88H795.928L777.528 80.79L781.208 7.88H730.608L703.468 179ZM836.208 134.61C831.838 162.21 846.098 181.99 880.368 181.99H887.268C919.928 181.99 934.188 160.37 938.558 134.61L958.568 7.88H911.878L892.558 132.08C891.868 136.68 889.798 138.98 886.808 138.98C883.358 138.98 882.208 136.68 882.898 132.08L902.448 7.88H856.218L836.208 134.61ZM997.349 181.53C1029.55 181.53 1042.66 164.97 1047.03 137.37L1048.41 128.63C1050.94 110.92 1045.65 97.35 1026.1 77.11L1012.07 62.85C1007.24 57.56 1005.86 54.34 1006.78 49.05L1007.47 44.68C1008.16 40.31 1009.08 38.7 1012.53 38.7C1015.75 38.7 1017.13 40.54 1016.67 44.22L1014.37 59.17H1056.69L1059.68 41.69C1062.9 22.37 1052.32 5.34999 1019.89 5.34999H1009.54C979.179 5.34999 965.609 19.84 961.929 43.07L960.779 50.43C958.249 66.76 962.849 81.48 979.409 98.96L992.979 113.22C999.419 119.89 1001.49 122.88 999.879 131.39L998.959 137.14C998.039 142.43 997.119 144.73 993.439 144.73C989.759 144.73 988.379 141.74 989.299 137.14L992.289 117.59H948.589L945.369 138.75C940.999 166.12 957.099 181.53 986.539 181.53H997.349ZM1075.1 7.88L1047.96 179H1126.62L1133.29 137.37H1099.02L1103.16 111.61H1130.53L1137.2 69.52H1110.06L1113.28 49.05H1146.17L1152.61 7.88H1075.1ZM1141.84 134.61C1137.47 162.21 1151.73 181.99 1186 181.99H1192.9C1225.56 181.99 1239.82 160.37 1244.19 134.61L1264.2 7.88H1217.51L1198.19 132.08C1197.5 136.68 1195.43 138.98 1192.44 138.98C1188.99 138.98 1187.84 136.68 1188.53 132.08L1208.08 7.88H1161.85L1141.84 134.61ZM1246.17 179H1283.2L1296.77 93.9L1296.54 179H1312.18L1338.63 93.9L1325.06 179H1362.78L1389.69 7.88H1338.63L1320.23 80.79L1323.91 7.88H1273.31L1246.17 179Z" /> + {LastMuseumPath} </g> <defs> <filter id="filter0_d" x="0.959961" y="0.349609" width="1393.73" height="186.64" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB"> 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> ) } |
