handheld should go up to 760 pixels on a side, or so. ipad is 768, iphone pro is 736. make corner section link text open the nav...

4 files changed, 10 insertions, 5 deletions

diff --git a/animism-align/frontend/app/utils/index.js b/animism-align/frontend/app/utils/index.js
index 4519861..016bb76 100644
--- a/animism-align/frontend/app/utils/index.js
+++ b/animism-align/frontend/app/utils/index.js
@@ -16,8 +16,8 @@ export const isiPhone = !!((navigator.userAgent.match(/iPhone/i)) || (navigator.
 export const isiPad = !!(navigator.userAgent.match(/iPad/i))
 export const isAndroid = !!(navigator.userAgent.match(/Android/i))
 export const isMobile = isiPhone || isiPad || isAndroid
-export const isHandheld = isiPhone || (isAndroid && window.innerWidth <= 640)
-export const isTablet = isMobile && window.innerWidth > 640
+export const isHandheld = isiPhone || (isAndroid && window.innerWidth <= 760)
+export const isTablet = isMobile && window.innerWidth > 760
 export const isDesktop = !isMobile
 
 const htmlClassList = document.body.parentNode.classList
diff --git a/animism-align/frontend/app/views/viewer/nav/nav.css b/animism-align/frontend/app/views/viewer/nav/nav.css
index 4a1b8e7..dfbb093 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.css
+++ b/animism-align/frontend/app/views/viewer/nav/nav.css
@@ -99,7 +99,7 @@
   text-overflow: ellipsis;
 }
 .viewer-nav .link.section-link {
-  cursor: crosshair;
+  cursor: pointer;
 }
 .viewer-nav .link.section-link > span {
   align-items: flex-start;
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 3fc2678..467907d 100644
--- a/animism-align/frontend/app/views/viewer/nav/nav.parent.js
+++ b/animism-align/frontend/app/views/viewer/nav/nav.parent.js
@@ -24,6 +24,7 @@ class NavParent extends Component {
     this.handleMouseLeaveNext = this.handleMouseLeaveNext.bind(this)
     this.handleNavBarClick = this.handleNavBarClick.bind(this)
     this.handleSectionLinkClick = this.handleSectionLinkClick.bind(this)
+    this.handleSectionLinkTextClick = this.handleSectionLinkTextClick.bind(this)
     this.goToNextSection = this.goToNextSection.bind(this)
   }
   handleMouseEnter(){
@@ -71,6 +72,10 @@ class NavParent extends Component {
     e && e.stopPropagation()
     actions.viewer.toggleComponent('nav')
   }
+  handleSectionLinkTextClick(e) {
+    e && e.stopPropagation()
+    actions.viewer.toggleComponent('nav')
+  }
   handleMouseMove(e) {
     e && e.stopPropagation()
   }
@@ -97,7 +102,7 @@ class NavParent extends Component {
       <div ref={this.navbarRef} className={containerClassName} onMouseMove={this.handleMouseMove} onMouseLeave={this.handleMouseLeave}>
         <div className={navClassName} onClick={this.handleNavBarClick}>
           <div className='nav-section-name' onMouseEnter={this.handleMouseEnter}>
-            <span className="section-link link">
+            <span className="section-link link" onClick={this.handleSectionLinkTextClick}>
               <Arrow type={viewer.nav ? 'down' : 'up'} onClick={this.handleSectionLinkClick} />
               {currentSection && (
                 viewer.mediaTitle
diff --git a/animism-align/frontend/app/views/viewer/viewer.mobile.css b/animism-align/frontend/app/views/viewer/viewer.mobile.css
index ce75471..b7676b6 100644
--- a/animism-align/frontend/app/views/viewer/viewer.mobile.css
+++ b/animism-align/frontend/app/views/viewer/viewer.mobile.css
@@ -1,4 +1,4 @@
-@media (max-device-width: 600px) {
+@media (max-device-width: 760px) {
 
   /* document sizing */