From 49a4646c13b4b722d06f94f738fc3ad3d55f81e7 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sat, 21 Nov 2020 18:43:41 +0100 Subject: handheld warning modal at the end of the first chapter --- .../frontend/app/views/viewer/modals/modals.css | 143 --------------------- .../app/views/viewer/modals/modals.handheld.css | 46 +++++++ .../app/views/viewer/modals/modals.handheld.js | 43 +++++++ .../app/views/viewer/modals/modals.vitrine.css | 143 +++++++++++++++++++++ .../app/views/viewer/player/player.transcript.js | 7 +- .../views/viewer/sections/viewer.sections.list.js | 2 +- .../frontend/app/views/viewer/viewer.container.js | 7 +- .../frontend/app/views/viewer/viewer.mobile.css | 18 ++- 8 files changed, 257 insertions(+), 152 deletions(-) delete mode 100644 animism-align/frontend/app/views/viewer/modals/modals.css create mode 100644 animism-align/frontend/app/views/viewer/modals/modals.handheld.css create mode 100644 animism-align/frontend/app/views/viewer/modals/modals.handheld.js create mode 100644 animism-align/frontend/app/views/viewer/modals/modals.vitrine.css (limited to 'animism-align/frontend/app/views') diff --git a/animism-align/frontend/app/views/viewer/modals/modals.css b/animism-align/frontend/app/views/viewer/modals/modals.css deleted file mode 100644 index c541962..0000000 --- a/animism-align/frontend/app/views/viewer/modals/modals.css +++ /dev/null @@ -1,143 +0,0 @@ -/* vitrine modal */ - -.vitrine-modal { - position: fixed; - top: 0; left: 0; - width: 100vw; - height: 100vh; - z-index: 20; - opacity: 0; - pointer-events: none; - transition: opacity 0.2s; - background: white; -} -.vitrine-modal.open { - opacity: 1; - pointer-events: auto; -} -.vitrine-modal .vitrine-modal-content { - display: flex; - flex-flow: row; - justify-content: flex-start; - align-items: flex-start; - width: 100%; - height: 100%; -} -.vitrine-modal .vitrine-modal-content > div { - width: 50%; - height: 100%; -} -.vitrine-modal .vitrine-image { - background-size: contain; - background-position: center center; - background-repeat: no-repeat; - background-color: #eee; -} -.vitrine-modal .vitrine-text { - background: white; - color: black; - font-family: "Freight Text", serif; - font-size: 1.2rem; - line-height: 1.5; - overflow-x: hidden; - overflow-y: auto; -} -.vitrine-modal .vitrine-text > div { - max-width: 45vw; - padding: 1.5rem 1.5rem 1.5rem 1.5rem; -} -.vitrine-modal .vitrine-text-content { - white-space: pre-wrap; -} -.vitrine-modal .vitrine-caption { - margin-bottom: 1.5rem; -} -.vitrine-modal .vitrine-close { - position: absolute; - top: 23px; - right: 32px; -} -.vitrine-modal .vitrine-close svg { - cursor: pointer; - width: 26px; - height: 20px; -} -.vitrine-modal .vitrine-close svg line { - stroke: #000; -} - -/* vitrine prev/next buttons */ - -.vitrine-nav { - position: absolute; - bottom: 0; - transition: 0.1s transform; - transform: translateZ(0) translateY(9rem); - cursor: pointer; - color: #000; - font-size: 18px; -} -.vitrine-nav:hover { - transform: translateZ(0) translateY(0); -} -.vitrine-nav.nav-close, -.vitrine-nav.nav-close:hover { - transition: 0; - transform: translateZ(0) translateY(0); -} -.vitrine-nav.prev { - left: 0; -} -.vitrine-nav.next { - right: 0; -} -.vitrine-nav .vitrine-nav-content { - display: flex; - flex-direction: row; - white-space: nowrap; - height: 3rem; -} -.vitrine-nav.prev .vitrine-nav-content { - align-items: center; - justify-content: flex-start; -} -.vitrine-nav.next .vitrine-nav-content { - align-items: center; - justify-content: flex-end; -} -.vitrine-nav .vitrine-nav-thumbnail { - width: 12rem; - height: 8rem; - margin: 0.5rem; - border-radius: 1rem; - background-size: contain; - background-position: center center; - background-repeat: no-repeat; - background-color: #eee; -} -.vitrine-nav .arrow { - display: inline-block; - width: 2.5rem; - height: 2.5rem; - display: flex; - justify-content: center; - align-items: center; -} -.vitrine-nav .arrow.left, -.vitrine-nav .arrow.right { - width: 1.25rem; -} -.vitrine-nav .arrow svg { - width: 100%; - height: 100%; -} - -.vitrine-nav.black { - color: #fff; -} -.vitrine-nav.black .arrow svg polygon { - fill: #fff; -} -.vitrine-nav .vitrine-nav-thumbnail.black { - background-color: #000; -} diff --git a/animism-align/frontend/app/views/viewer/modals/modals.handheld.css b/animism-align/frontend/app/views/viewer/modals/modals.handheld.css new file mode 100644 index 0000000..26f875b --- /dev/null +++ b/animism-align/frontend/app/views/viewer/modals/modals.handheld.css @@ -0,0 +1,46 @@ +.modal { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 10; + background: rgba(0,0,0,0.8); + display: flex; + justify-content: center; + align-items: center; + opacity: 0.0; + transition: opacity 1.0s; + pointer-events: none; +} +.modal.visible { + opacity: 1.0; + pointer-events: auto; +} +.modal.handheld-modal { + background: #fff; +} +.modal.handheld-modal > div { + background: transparent; + padding: 1.5rem; +} +.modal.handheld-modal p { + font-family: "Freight Text", serif; + font-size: 1.6rem; + text-align: center; + line-height: 1.1; + color: #000; +} +.modal.handheld-modal .ok { + position: absolute; + bottom: 0; + right: 0; + width: 100%; + height: 3rem; + padding-right: 1rem; + font-family: "Neue Haas Unica", sans-serif; + font-size: 18px; + text-align: right; + color: #000; + cursor: pointer; +} \ No newline at end of file diff --git a/animism-align/frontend/app/views/viewer/modals/modals.handheld.js b/animism-align/frontend/app/views/viewer/modals/modals.handheld.js new file mode 100644 index 0000000..a8b40b8 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/modals/modals.handheld.js @@ -0,0 +1,43 @@ +import React, { Component } from 'react' +import { connect } from 'react-redux' + +import actions from 'app/actions' + +import { EfluxClose } from '../nav/eflux.icons' +import { Arrow } from '../nav/viewer.icons' + +class HandheldModal extends Component { + state = { + visible: false, + } + componentDidUpdate(prevProps) { + if (prevProps.showAtEndOfSection !== this.props.showAtEndOfSection && this.props.showAtEndOfSection) { + this.setState({ visible: true }) + } + } + render() { + const { showAtEndOfSection } = this.props + const { visible } = this.state + console.log(showAtEndOfSection, visible) + return ( +
+
+

+ {"The full episode is not currently supported on mobile devices."} +

+

+ {"To continue viewing, please switch to your computer."} +

+
this.setState({ visible: false })} className='ok'>OK
+
+
+ ) + } +} + +const mapStateToProps = state => ({ + showAtEndOfSection: state.viewer.onlyEnableFirstSection && state.viewer.atEndOfSection, +}) + +export default connect(mapStateToProps)(HandheldModal) + diff --git a/animism-align/frontend/app/views/viewer/modals/modals.vitrine.css b/animism-align/frontend/app/views/viewer/modals/modals.vitrine.css new file mode 100644 index 0000000..c541962 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/modals/modals.vitrine.css @@ -0,0 +1,143 @@ +/* vitrine modal */ + +.vitrine-modal { + position: fixed; + top: 0; left: 0; + width: 100vw; + height: 100vh; + z-index: 20; + opacity: 0; + pointer-events: none; + transition: opacity 0.2s; + background: white; +} +.vitrine-modal.open { + opacity: 1; + pointer-events: auto; +} +.vitrine-modal .vitrine-modal-content { + display: flex; + flex-flow: row; + justify-content: flex-start; + align-items: flex-start; + width: 100%; + height: 100%; +} +.vitrine-modal .vitrine-modal-content > div { + width: 50%; + height: 100%; +} +.vitrine-modal .vitrine-image { + background-size: contain; + background-position: center center; + background-repeat: no-repeat; + background-color: #eee; +} +.vitrine-modal .vitrine-text { + background: white; + color: black; + font-family: "Freight Text", serif; + font-size: 1.2rem; + line-height: 1.5; + overflow-x: hidden; + overflow-y: auto; +} +.vitrine-modal .vitrine-text > div { + max-width: 45vw; + padding: 1.5rem 1.5rem 1.5rem 1.5rem; +} +.vitrine-modal .vitrine-text-content { + white-space: pre-wrap; +} +.vitrine-modal .vitrine-caption { + margin-bottom: 1.5rem; +} +.vitrine-modal .vitrine-close { + position: absolute; + top: 23px; + right: 32px; +} +.vitrine-modal .vitrine-close svg { + cursor: pointer; + width: 26px; + height: 20px; +} +.vitrine-modal .vitrine-close svg line { + stroke: #000; +} + +/* vitrine prev/next buttons */ + +.vitrine-nav { + position: absolute; + bottom: 0; + transition: 0.1s transform; + transform: translateZ(0) translateY(9rem); + cursor: pointer; + color: #000; + font-size: 18px; +} +.vitrine-nav:hover { + transform: translateZ(0) translateY(0); +} +.vitrine-nav.nav-close, +.vitrine-nav.nav-close:hover { + transition: 0; + transform: translateZ(0) translateY(0); +} +.vitrine-nav.prev { + left: 0; +} +.vitrine-nav.next { + right: 0; +} +.vitrine-nav .vitrine-nav-content { + display: flex; + flex-direction: row; + white-space: nowrap; + height: 3rem; +} +.vitrine-nav.prev .vitrine-nav-content { + align-items: center; + justify-content: flex-start; +} +.vitrine-nav.next .vitrine-nav-content { + align-items: center; + justify-content: flex-end; +} +.vitrine-nav .vitrine-nav-thumbnail { + width: 12rem; + height: 8rem; + margin: 0.5rem; + border-radius: 1rem; + background-size: contain; + background-position: center center; + background-repeat: no-repeat; + background-color: #eee; +} +.vitrine-nav .arrow { + display: inline-block; + width: 2.5rem; + height: 2.5rem; + display: flex; + justify-content: center; + align-items: center; +} +.vitrine-nav .arrow.left, +.vitrine-nav .arrow.right { + width: 1.25rem; +} +.vitrine-nav .arrow svg { + width: 100%; + height: 100%; +} + +.vitrine-nav.black { + color: #fff; +} +.vitrine-nav.black .arrow svg polygon { + fill: #fff; +} +.vitrine-nav .vitrine-nav-thumbnail.black { + background-color: #000; +} diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.js b/animism-align/frontend/app/views/viewer/player/player.transcript.js index 1743350..4f3361b 100644 --- a/animism-align/frontend/app/views/viewer/player/player.transcript.js +++ b/animism-align/frontend/app/views/viewer/player/player.transcript.js @@ -67,16 +67,17 @@ class PlayerTranscript extends Component { } handleScroll(e) { + const { viewer } = this.props if (isHandheld) { const isScrolledPastIntro = this.containerRef.current.scrollTop > 100 - if (xor(this.props.viewer.navGradient, isScrolledPastIntro)) { + if (xor(viewer.navGradient, isScrolledPastIntro)) { // console.log('toggle nav gradient', isScrolledPastIntro) actions.viewer.toggleNavGradient(isScrolledPastIntro) } } - if (this.props.viewer.growlOpen) { + if (viewer.growlOpen && !viewer.atEndOfSection) { actions.viewer.closeGrowl() - if (this.props.viewer.currentSection.index === 0) { + if (viewer.currentSection.index === 0) { actions.audio.play() } } diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.list.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.list.js index 8fc1238..800cef4 100644 --- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.list.js +++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.list.js @@ -37,7 +37,7 @@ class ViewerSectionsList extends Component { this.scrollRef.current.scrollLeft += delta } handleSectionClick(e, section) { - if (this.props.onlyEnableFirstSection) { + if (this.props.onlyEnableFirstSection && section.index !== 0) { this.setState({ selectedSectionIndex: section.index }) clearTimeout(this.warningFadeTimeout) this.warningFadeTimeout = setTimeout(() => { diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js index 67592ca..5bc95f0 100644 --- a/animism-align/frontend/app/views/viewer/viewer.container.js +++ b/animism-align/frontend/app/views/viewer/viewer.container.js @@ -13,7 +13,8 @@ import './sections/footnotes.css' import './transcript/transcript.css' import './checklist/checklist.css' import './checklist/credits.css' -import './modals/modals.css' +import './modals/modals.vitrine.css' +import './modals/modals.handheld.css' import './forms/forms.css' import './player/player.container.css' import './player/player.fullscreen.css' @@ -23,6 +24,7 @@ import './viewer.mobile.css' import { Loader } from 'app/common/loader.component' import { ENV_DEVELOPMENT } from 'app/constants' +import { isHandheld } from 'app/utils' import NavParent from './nav/nav.parent' import ViewerSections from './sections/viewer.sections' @@ -32,6 +34,7 @@ import Player from './player/player.container' import Transcript from './transcript/transcript.container' import Checklist from './checklist/checklist.container' import VitrineModal from './modals/modals.vitrine' +import HandheldModal from './modals/modals.handheld' class ViewerContainer extends Component { render() { @@ -65,7 +68,6 @@ class ViewerContainer extends Component { if (viewer.onlyEnableFirstSection) { className += ' first-section-only' } - viewer.onlyEnableFirstSection && viewer.atEndOfSection return (
@@ -79,6 +81,7 @@ class ViewerContainer extends Component { {ENV_DEVELOPMENT && }
+ {isHandheld && }
) diff --git a/animism-align/frontend/app/views/viewer/viewer.mobile.css b/animism-align/frontend/app/views/viewer/viewer.mobile.css index 5f3eebb..9694df6 100644 --- a/animism-align/frontend/app/views/viewer/viewer.mobile.css +++ b/animism-align/frontend/app/views/viewer/viewer.mobile.css @@ -81,7 +81,6 @@ .eflux-header .transcript-icon { width: 2.5rem; height: 2.5rem; - box-shadow: 0.3px 0.6px 2.6px rgba(0,0,0,0.3); } .eflux-logo { left: 50%; @@ -95,7 +94,6 @@ top: 1rem; left: 1.25rem; margin-left: 0; - box-shadow: 0 0 0 rgba(0,0,0,0.0); background: transparent; } .eflux-header .fullscreen-close svg { @@ -141,7 +139,11 @@ /* checklist */ - .checklist-dropdown-column { + .checklist-dropdown-container { + position: static; + left: auto; + width: calc(100% - 2rem); + margin: 1rem 1rem 0 1rem; } .checklist-inner { width: 100%; @@ -262,6 +264,16 @@ } } +/* mobile landscape mode */ + +@media (max-device-width: 760px) and (orientation: landscape) { + .viewer-fullscreen .video .videoPlayer { + padding-top: 4rem; + } + .site-intro { + background-size: 100% auto; + } +} /* if the introduction is the only section that's enabled... */ -- cgit v1.2.3-70-g09d2