From 73fcbbd378220b28b80a12e6af68cd8d15eaafa0 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 22 Apr 2021 16:15:46 +0200 Subject: some home styling --- frontend/app/views/tile/handles/tile.text.js | 10 +++++-- frontend/site/projects/museum/app.js | 2 ++ frontend/site/projects/museum/subtitles.js | 1 + .../projects/museum/views/landscape.warning.js | 11 +++++--- frontend/site/projects/museum/views/mobile.css | 31 ++++++++++++++++++++-- frontend/site/projects/museum/views/nav.overlay.js | 1 - .../site/projects/museum/views/titles.overlay.js | 5 ++++ 7 files changed, 52 insertions(+), 9 deletions(-) diff --git a/frontend/app/views/tile/handles/tile.text.js b/frontend/app/views/tile/handles/tile.text.js index 46d285d..c747957 100644 --- a/frontend/app/views/tile/handles/tile.text.js +++ b/frontend/app/views/tile/handles/tile.text.js @@ -2,6 +2,8 @@ import React from 'react' import { generateTransform, unitsDimension, hexToRgb, pickCursor } from 'app/views/tile/tile.utils' import Marquee from "react-fast-marquee" +import { isMobile } from 'app/utils' + const VERTICAL_MARQUEE_DIRECTION = { up: "left", down: "right", @@ -28,13 +30,17 @@ export default function TileText({ tile, box, bounds, videoBounds, cursors, view style.cursor = cursorStyle } - + let { font_size } = tile.settings + if (isMobile) { + font_size *= 0.75 + } + let content = className += ' ' + tile.settings.align style.width = unitsDimension(tile, 'width', bounds, videoBounds) style.height = unitsDimension(tile, 'height', bounds, videoBounds) style.fontFamily = tile.settings.font_family - style.fontSize = tile.settings.font_size + 'px' + style.fontSize = font_size + 'px' style.lineHeight = 1.5 style.fontWeight = (tile.settings.font_style || "").indexOf('bold') !== -1 ? 'bold' : 'normal' style.fontStyle = (tile.settings.font_style || "").indexOf('italic') !== -1 ? 'italic' : 'normal' diff --git a/frontend/site/projects/museum/app.js b/frontend/site/projects/museum/app.js index 2c9dfe8..2506591 100644 --- a/frontend/site/projects/museum/app.js +++ b/frontend/site/projects/museum/app.js @@ -11,6 +11,8 @@ import Credits from './views/credits' import NavOverlay from './views/nav.overlay' import StlOverlay from './views/stl.overlay' +import "./views/mobile.css" + import { loadMuseum } from './museum.actions' class App extends Component { diff --git a/frontend/site/projects/museum/subtitles.js b/frontend/site/projects/museum/subtitles.js index fe45036..3189baa 100644 --- a/frontend/site/projects/museum/subtitles.js +++ b/frontend/site/projects/museum/subtitles.js @@ -69,6 +69,7 @@ export const SUBTITLES = { 'stankievech-6': { title: 'The Desert Turned to Glass', popup: "trinity", + cursor: "/last-museum/static/uploads/3/cursor/The_Last_Museum_-_Symbols-137.png", audio_url: "/last-museum/static/uploads/3/audio/Frame06-46sec.mp3", text: { en: "My anarchy obeys subterraneously a law in which I deal occultly with astronomy, mathematics and mechanics. And my hunger is fed by these putrefying beings in decomposition. My rite is a purifier of forces. But malignancy exists in the jungle. I swallow a mouthful of blood that fills me entirely. I hear cymbals and trumpets and tambourines that fill the air with noise and uproar drowning out the silence of the disc of the sun and its marvel. I want a cloak woven from threads of solar gold. The sun is the magical tension of the silence. On my journey to the mysteries I hear the carnivorous plant that laments times immemorial: and I have obscene nightmares beneath the sick winds. I am enchanted, seduced, transfixed by furtive voices. The almost unintelligible cuneiform inscriptions speak of how to conceive and give formulae about how to feed from the force of darkness. They speak of naked and crawling females. And the solar eclipse causes secret terror that nonetheless announces a splendor of heart.", diff --git a/frontend/site/projects/museum/views/landscape.warning.js b/frontend/site/projects/museum/views/landscape.warning.js index eeb504c..7f03724 100644 --- a/frontend/site/projects/museum/views/landscape.warning.js +++ b/frontend/site/projects/museum/views/landscape.warning.js @@ -2,6 +2,7 @@ import React, { Component } from 'react' import './landscape.warning.css' +import { isMobile } from 'app/utils' import { LastMuseumLogoNoBlur } from '../icons' const PhoneIcon = ( @@ -18,13 +19,15 @@ const RotateIcon = ( export default class LandscapeWarning extends Component { state = { - landscape: false, + landscape: !isMobile || window.innerWidth > window.innerHeight, } constructor(props) { super(props) this.handleResize = this.handleResize.bind(this) - window.addEventListener("resize", this.handleResize) - this.handleResize() + if (isMobile) { + window.addEventListener("resize", this.handleResize) + setTimeout(this.handleResize, 100) + } } handleResize() { @@ -36,7 +39,7 @@ export default class LandscapeWarning extends Component { render() { const { landscape } = this.state - if (!landscape) return null + if (landscape) return null return (
{RotateIcon} diff --git a/frontend/site/projects/museum/views/mobile.css b/frontend/site/projects/museum/views/mobile.css index cb43929..c9574ee 100644 --- a/frontend/site/projects/museum/views/mobile.css +++ b/frontend/site/projects/museum/views/mobile.css @@ -1,4 +1,6 @@ @media only screen and (max-device-height: 500px) { + /* main nav */ + .page .home-link, .museum-nav .home-link { font-size: 0.8rem } @@ -13,12 +15,21 @@ margin: 0; } .museum-nav .home-link.language-link { - padding: 1rem 0.5rem; + padding: 1rem 0.5rem 1rem 0; + } + .museum-nav .home-link.language-link:first-child { + padding-left: 1rem; + } + .page .home-link.language-link { + top: 2rem; + padding-top: 0.5rem; } .museum-nav .mute svg { width: 1.2rem; height: 1.2rem; } + + /* footer */ .footer, .footer-gradient { height: 3rem; @@ -40,8 +51,19 @@ width: 1.2rem; height: 1.2rem; } + .footer.no-artist { + pointer-events: none; + } + + /* artist pages */ + .page-artists .artist-location { + bottom: 0.5rem; + } + + /* charles */ .charles-text { - font-size: 1.7rem; + width: 90vw; + font-size: 0.8rem; } .chapter-headphones { font-size: 0.8rem; @@ -51,4 +73,9 @@ .chapter-title { top: 1.0625rem; } + + /* nora */ + .text-overlay { + padding: 10vw; + } } \ 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 60f5e59..6d06fc3 100644 --- a/frontend/site/projects/museum/views/nav.overlay.js +++ b/frontend/site/projects/museum/views/nav.overlay.js @@ -4,7 +4,6 @@ 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' diff --git a/frontend/site/projects/museum/views/titles.overlay.js b/frontend/site/projects/museum/views/titles.overlay.js index 7f254ab..a7aae17 100644 --- a/frontend/site/projects/museum/views/titles.overlay.js +++ b/frontend/site/projects/museum/views/titles.overlay.js @@ -3,6 +3,8 @@ import { connect } from 'react-redux' import { HEADPHONES } from '../constants.js' import { SUBTITLES } from '../subtitles.js' +import { isMobile } from 'app/utils' +import actions from 'site/actions' import './titles.css' @@ -73,6 +75,9 @@ 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, -- cgit v1.2.3-70-g09d2