mobile layout begins. testing in iphone simulator

9 files changed, 250 insertions, 8 deletions

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 {
                       <i>{mediaItem.media.title}</i>
                       {mediaItem.media.post_title && (' ' + mediaItem.media.post_title)}
                       <br />
-                      {mediaItem.media.year}
+                      {mediaItem.media.title.indexOf(String(mediaItem.media.date)) !== -1 && mediaItem.media.date}
                       <div className='media-type'>
                         {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 (
     <div className={isOpen ? 'venue open' : 'venue'}>
       <div className='venue-header' onClick={() => setOpen(isOpen ? -1 : venue.id)}>
-        <div>
+        <div className='venue-name'>
           {venue.title}<br />
           {venue.date}
         </div>
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 {
               )}
             </span>
           </div>
-          <div onMouseEnter={this.handleMouseEnter}>
+          <div className='nav-player-container' onMouseEnter={this.handleMouseEnter}>
             <NavPlayer />
           </div>
           <div
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
index 5ff5650..31910b7 100644
--- a/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
+++ b/animism-align/frontend/app/views/viewer/nav/viewer.icons.js
@@ -122,3 +122,11 @@ export const SpeakerIcon = (
     C27.89,15.59,29.11,17.86,29.11,20.37z M10.89,15.5v9h5.02l5.4,4.38V11.12l-5.4,4.38H10.89z"/>
   </svg>
 )
+
+// mobile phone icon
+export const MobilePhoneIcon = (
+  <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16">
+    <path fillRule="evenodd" d="M11 1H5a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"/>
+    <path fillRule="evenodd" d="M8 14a1 1 0 1 0 0-2a1 1 0 0 0 0 2z"/>
+  </svg>
+)
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
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;
+  }
+
+
+}