diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer/player')
3 files changed, 36 insertions, 5 deletions
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js index 9204a04..b8a4e59 100644 --- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js +++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js @@ -1,8 +1,9 @@ import React, { Component } from 'react' import { connect } from 'react-redux' +import { isMobile } from 'app/utils' import { MediaCitation } from '../components.media' -import { Arrow } from 'app/views/viewer/nav/viewer.icons' +import { Arrow, MobilePhoneIcon } from 'app/views/viewer/nav/viewer.icons' import { CreditsColumns, ArtistColumns } from 'app/views/viewer/checklist/credits.components' export const Intro = ({ paragraph, media, onAnnotationClick }) => { @@ -56,6 +57,16 @@ const ScheduleComponent = ({ episodes }) => { <br/><br/> {'Presented here in its digital iteration, '} {'the exhibition will be released in four episodes starting November 2020.'} + <br/><br/> + {isMobile && ( + <div className="mobile-warning"> + {MobilePhoneIcon} + <div> + {'Optimized for a large screen. '} + {'Please view on a desktop or tablet for the complete experience.'} + </div> + </div> + )} </div> <div className='schedule'> <div className='schedule-heading'>Episodes</div> diff --git a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css index 63112e7..6c62a40 100644 --- a/animism-align/frontend/app/views/viewer/player/player.fullscreen.css +++ b/animism-align/frontend/app/views/viewer/player/player.fullscreen.css @@ -156,7 +156,7 @@ iframe { .fullscreen-element.curtain div { font-family: "Freight Text", serif; max-width: 96%; - font-size: 10vh; + font-size: 10vmin; line-height: 1; white-space: pre-line; text-align: center; @@ -164,9 +164,9 @@ iframe { } .fullscreen-element.curtain div.flashing_light_warning { line-height: 1.2; - font-size: 4vh; + font-size: 4vmin; max-width: 60rem; - margin-top: 5vh; + margin-top: 5vmin; } .fullscreen-element.text-plate span { font-family: "Freight Text", serif; diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css index 766395f..caac222 100644 --- a/animism-align/frontend/app/views/viewer/player/player.transcript.css +++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css @@ -349,7 +349,7 @@ align-items: center; color: white; font-family: "Freight Text", serif; - font-size: 12vh; + font-size: 12vmin; line-height: 1; text-align: center; } @@ -416,4 +416,24 @@ } .schedule .credits { padding-top: 0rem; +} +.schedule-about .mobile-warning { + display: flex; + flex-direction: row; + justify-content: center; + align-items: center; + opacity: 0.5; +} +.schedule-about .mobile-warning div { + flex: 1; + text-align: left; + padding-left: 0.5rem; +} +.schedule-about .mobile-warning svg { + display: block; + width: 1.25rem; + height: 1.25rem; +} +.schedule-about .mobile-warning svg path { + fill: #000; }
\ No newline at end of file |