From 91360a4ac3b909142f8bb00563b9c464fe318516 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 20 Nov 2020 17:40:43 +0100 Subject: mobile layout begins. testing in iphone simulator --- .../views/viewer/checklist/checklist.content.js | 2 +- .../views/viewer/checklist/credits.components.js | 2 +- .../frontend/app/views/viewer/nav/nav.parent.js | 2 +- .../frontend/app/views/viewer/nav/viewer.icons.js | 8 + .../player/components.inline/inline.utility.js | 13 +- .../app/views/viewer/player/player.fullscreen.css | 6 +- .../app/views/viewer/player/player.transcript.css | 22 ++- .../frontend/app/views/viewer/viewer.container.js | 1 + .../frontend/app/views/viewer/viewer.mobile.css | 202 +++++++++++++++++++++ 9 files changed, 250 insertions(+), 8 deletions(-) create mode 100644 animism-align/frontend/app/views/viewer/viewer.mobile.css diff --git a/animism-align/frontend/app/views/viewer/checklist/checklist.content.js b/animism-align/frontend/app/views/viewer/checklist/checklist.content.js index 4194d4a..ba44a1b 100644 --- a/animism-align/frontend/app/views/viewer/checklist/checklist.content.js +++ b/animism-align/frontend/app/views/viewer/checklist/checklist.content.js @@ -54,7 +54,7 @@ class ChecklistContent extends Component { {mediaItem.media.title} {mediaItem.media.post_title && (' ' + mediaItem.media.post_title)}
- {mediaItem.media.year} + {mediaItem.media.title.indexOf(String(mediaItem.media.date)) !== -1 && mediaItem.media.date}
{mediaItem.media.medium} {mediaItem.media.settings.duration && (', ' + mediaItem.media.settings.duration)} diff --git a/animism-align/frontend/app/views/viewer/checklist/credits.components.js b/animism-align/frontend/app/views/viewer/checklist/credits.components.js index 3e03ace..c090a1b 100644 --- a/animism-align/frontend/app/views/viewer/checklist/credits.components.js +++ b/animism-align/frontend/app/views/viewer/checklist/credits.components.js @@ -59,7 +59,7 @@ const CreditsVenue = ({ venue, open, setOpen }) => { return (
setOpen(isOpen ? -1 : venue.id)}> -
+
{venue.title}
{venue.date}
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.parent.js b/animism-align/frontend/app/views/viewer/nav/nav.parent.js index 321d54f..f1ae01e 100644 --- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js +++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js @@ -105,7 +105,7 @@ class NavParent extends Component { )}
-
+
) + +// mobile phone icon +export const MobilePhoneIcon = ( + + + + +) 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 }) => {

{'Presented here in its digital iteration, '} {'the exhibition will be released in four episodes starting November 2020.'} +

+ {isMobile && ( +
+ {MobilePhoneIcon} +
+ {'Optimized for a large screen. '} + {'Please view on a desktop or tablet for the complete experience.'} +
+
+ )}
Episodes
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 diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js index c81b79e..6068f80 100644 --- a/animism-align/frontend/app/views/viewer/viewer.container.js +++ b/animism-align/frontend/app/views/viewer/viewer.container.js @@ -19,6 +19,7 @@ import './player/player.container.css' import './player/player.fullscreen.css' import './player/player.transcript.css' import './player/components.media/media.css' +import './viewer.mobile.css' import { Loader } from 'app/common/loader.component' import { ENV_DEVELOPMENT } from 'app/constants' diff --git a/animism-align/frontend/app/views/viewer/viewer.mobile.css b/animism-align/frontend/app/views/viewer/viewer.mobile.css new file mode 100644 index 0000000..40b4e7a --- /dev/null +++ b/animism-align/frontend/app/views/viewer/viewer.mobile.css @@ -0,0 +1,202 @@ +@media (max-width: 600px) { + + /* document sizing */ + + body { + min-height: 100vh; + /* mobile viewport bug fix */ + min-height: -webkit-fill-available; + } + html { + height: -webkit-fill-available; + } + .app > div { + height: 100vh; + height: -webkit-fill-available; + } + .viewer-nav > .nav-row > div.nav-player-container { + display: none; + } + .viewer-nav > .main-nav > div:nth-child(1) { + width: 75%; + } + .viewer-nav > .main-nav > div:nth-child(3) { + width: 25%; + } + + /* basically everything is a single column with some side padding */ + + .credits, + .schedule, + .schedule-about, + .player-transcript .paragraph, + .player-transcript .paragraph.intro_paragraph, + .player-transcript .media .citation { + width: 100%; + padding-left: 1.0rem; + padding-right: 1.0rem; + } + + /* font settings for body text */ + + .player-transcript .section_heading { + font-size: 2rem; + } + .player-transcript .paragraph.intro_paragraph { + font-size: 1.8rem; + line-height: 1.1; + } + .player-transcript .paragraph { + max-width: none; + } + .speaker-icon { + display: none; + } + + /* logo and header icons */ + + .eflux-nav .transcript-icon { + display: none; + } + .eflux-nav .playToggle, + .eflux-nav .transcript-icon { + width: 2.5rem; + height: 2.5rem; + } + .eflux-logo { + left: 50%; + transform: translateX(-50%); + } + .growl-tooltip { + display: none; + } + + /* nav */ + + .viewer-nav { + position: fixed; + } + .viewer-sections { + position: fixed; + } + .sections-nav.viewer-nav > .nav-row > div { + + } + .sections-nav > .nav-row > div.credits-element, + .sections-nav > .nav-row > div.checklist-element { + + } + .sections-nav > .nav-row > div.subscribe-link, + .sections-nav > .nav-row > div.footnotes-link, + .sections-nav > .nav-row > div.transcript-link { + display: none; + } + .checklist-open .viewer-sections { + transform: translateZ(0) translateY(calc(3rem - 100%)); + height: 100%; + } + + /* checklist */ + + .checklist-dropdown-column { + } + .checklist-inner { + width: 100%; + } + .checklist-section { + border-top: 0; + } + .checklist-row { + position: relative; + flex-direction: column; + border-top: 1px solid; + } + .checklist-dropdown-placeholder { + display: none; + } + .checklist-row > div { + width: calc(50vmin - 0.5rem); + padding-left: 1rem; + } + .checklist-row .media-image { + position: absolute; + top: 0.75rem; + right: 1rem; + width: calc(50vmin - 1.5rem); + max-height: 8rem; + } + .checklist-table { + width: 100%; + margin: 1rem 0; + } + .checklist-row { + line-height: 1.2; + margin-bottom: 1.0rem; + } + .checklist-row .media-id, + .checklist-row .media-section { + margin-bottom: 1.0rem; + } + .checklist-row .media-thumbnail img { + max-width: 100%; + } + + /* transcript, should we show it */ + + .transcript { + width: 100vw; + } + .transcript .content { + border-left: 0; + } + + + /* schedule and credits */ + + .schedule-row { + flex-direction: column; + } + .schedule-title { + width: 100%; + } + .credits { + flex-flow: row wrap; + justify-content: space-between; + } + .credits > div { + width: calc(50% - 0.5rem); + margin-right: 0; + } + .open ~ .artist-columns { + height: 100%; + } + .schedule .credits { + padding-left: 0; + padding-right: 0; + } + .schedule .credits { + flex-flow: row wrap; + justify-content: space-between; + } + .schedule .credits > div { + width: 100%; + margin-right: 0; + padding: 0; + padding-right: 0.5rem; + } + .schedule .credits > div:first-child { + padding-top: 0.375rem; + } + + /* site credits */ + + .site-credits { + width: 100%; + padding: 0 1rem; + } + .venue-name { + padding-bottom: 0.75rem; + } + + +} -- cgit v1.2.3-70-g09d2