mobile layout begins. testing in iphone simulator

1 files changed, 12 insertions, 1 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>