mobile layout begins. testing in iphone simulator

2 files changed, 9 insertions, 1 deletions

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>
+)