mobile footer ui

2 files changed, 24 insertions, 10 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 f1ae01e..3fc2678 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -3,6 +3,7 @@ import { connect } from 'react-redux'
 
 import actions from 'app/actions'
 import { ROMAN_NUMERALS } from 'app/constants'
+import { isMobile } from 'app/utils'
 import { Arrow } from './viewer.icons'
 import NavPlayer from './nav.player'
 import { thumbnailURL, sectionProgressPercentage, sectionOffsetSeconds } from 'app/utils/annotation.utils'
@@ -53,14 +54,18 @@ class NavParent extends Component {
   }
   handleNavBarClick(e) {
     e && e.stopPropagation()
-    // console.log('>> CLICK NAV')
-    // actions.viewer.toggleComponent('nav')
-    const percent = (e.pageX / this.navbarRef.current.offsetWidth)
-    const seconds = sectionOffsetSeconds(this.props.currentSection, percent)
-    console.log(e.pageX, this.navbarRef.current.offsetWidth, percent)
-    console.log(this.props.currentSection)
-    console.log(">>", seconds)
-    actions.viewer.seekToTimestamp(seconds)
+    if (isMobile) {
+      actions.viewer.toggleComponent('nav')
+    } else {
+      // console.log('>> CLICK NAV')
+      // actions.viewer.toggleComponent('nav')
+      const percent = (e.pageX / this.navbarRef.current.offsetWidth)
+      const seconds = sectionOffsetSeconds(this.props.currentSection, percent)
+      console.log(e.pageX, this.navbarRef.current.offsetWidth, percent)
+      console.log(this.props.currentSection)
+      console.log(">>", seconds)
+      actions.viewer.seekToTimestamp(seconds)
+    }
   }
   handleSectionLinkClick(e) {
     e && e.stopPropagation()
diff --git a/animism-align/frontend/app/views/viewer/viewer.mobile.css b/animism-align/frontend/app/views/viewer/viewer.mobile.css
index f1a96e7..be61d57 100644
--- a/animism-align/frontend/app/views/viewer/viewer.mobile.css
+++ b/animism-align/frontend/app/views/viewer/viewer.mobile.css
@@ -89,6 +89,7 @@
   .sections-nav > .nav-row > div.checklist-element {
     
   }
+  .viewer-nav .link.next-link,
   .sections-nav > .nav-row > div.subscribe-link,
   .sections-nav > .nav-row > div.footnotes-link,
   .sections-nav > .nav-row > div.transcript-link {
@@ -202,11 +203,19 @@
   }
 
   /* subscription form */
+  .credits-content .subscription-form {
+    width: 100%;
+    padding: 0 1rem;
+  }
   .credits-content .subscription-form input[type='email'] {
     padding-right: 5.8rem;
   }
   .credits-content .subscription-form .arrow {
-    top: 0.3rem;
+    top: 0rem;
+    right: 0rem;
+  }
+  .credits-content button.subscription-submit {
+    padding-top: 0.25rem;
+    padding-right: 1.0rem;
   }
-
 }