convoluted forms of UI click logic

9 files changed, 45 insertions, 18 deletions

diff --git a/animism-align/frontend/app/types.js b/animism-align/frontend/app/types.js
index 282289f..75da7ed 100644
--- a/animism-align/frontend/app/types.js
+++ b/animism-align/frontend/app/types.js
@@ -27,7 +27,7 @@ export const audio = with_type('audio', [
 ])
 
 export const viewer = with_type('viewer', [
-  'load_sections', 'toggle_component',
+  'load_sections', 'toggle_component', 'toggle_nav_component',
   'set_current_section', 'reached_end_of_section',
   'set_nav_style', 'set_media_title',
   'open_vitrine_modal', 'close_vitrine_modal', 'set_vitrine_index',
diff --git a/animism-align/frontend/app/views/viewer/checklist/checklist.css b/animism-align/frontend/app/views/viewer/checklist/checklist.css
index 53aeaa3..efb4de3 100644
--- a/animism-align/frontend/app/views/viewer/checklist/checklist.css
+++ b/animism-align/frontend/app/views/viewer/checklist/checklist.css
@@ -1,5 +1,5 @@
 .checklist {
-  z-index: 20;
+  z-index: 19;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
diff --git a/animism-align/frontend/app/views/viewer/sections/sections.css b/animism-align/frontend/app/views/viewer/sections/sections.css
index b357efe..9e3bcda 100644
--- a/animism-align/frontend/app/views/viewer/sections/sections.css
+++ b/animism-align/frontend/app/views/viewer/sections/sections.css
@@ -50,6 +50,9 @@
   padding-left: 1rem;
   border-left: 1px solid white;
 }
+.sections-nav .checklist-element {
+  cursor: pointer;
+}
 
 /* scrolling part */
 
diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js
index 56046c3..4506664 100644
--- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.nav.js
@@ -16,28 +16,28 @@ class ViewerSectionsNav extends Component {
           <div>
             <div className="share-link link">
               <ViewerSectionsShare />
-              <span onClick={() => actions.viewer.toggleComponent('share')}>
+              <span onClick={() => actions.viewer.showNavComponent('share')}>
                 <Arrow type={'up'} />
                 {'Share'}
               </span>
             </div>
             <div className="subscribe-link link">
               <ViewerSectionsSubscribe />
-              <span onClick={() => actions.viewer.toggleComponent('subscribe')}>
+              <span onClick={() => actions.viewer.showNavComponent('subscribe')}>
                 <Arrow type={viewer.subscribe ? 'down' : 'up'} />
                 {'Subscribe'}
               </span>
             </div>
           </div>
-          <div>
-            <div className="checklist-link link" onClick={() => actions.viewer.toggleComponent('checklist')}>
+          <div className="checklist-element" onClick={() => actions.viewer.toggleNavComponent('checklist')}>
+            <div className="checklist-link link">
               <Arrow type={viewer.checklist ? 'down': 'up'} />
               {'Checklist'}
             </div>
           </div>
           <div>
             <div className="footnotes-link link">
-              <span onClick={() => actions.viewer.toggleComponent('footnotes')}>
+              <span onClick={() => actions.viewer.showNavComponent('footnotes')}>
                 <Arrow type={viewer.footnotes ? 'down' : 'up'} />
                 {'Footnotes'}
               </span>
diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.share.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.share.js
index 607d4d5..fbf496e 100644
--- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.share.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.share.js
@@ -61,7 +61,7 @@ export default class ViewerSectionsShare extends Component {
             <span className="share-success">success</span>
           </div>
         </div>
-        <div className="nav-return" onClick={() => actions.viewer.hideComponent('share')}>
+        <div className="nav-return" onClick={() => actions.viewer.hideNavComponent('share')}>
           <Arrow type={'down'} />
           {'Share'}
         </div>
diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.subscribe.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.subscribe.js
index 24ccf99..4b7d848 100644
--- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.subscribe.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.subscribe.js
@@ -11,7 +11,7 @@ export default class ViewerSectionsShare extends Component {
         <div>
           <SubscriptionForm />
         </div>
-        <div className="nav-return" onClick={() => actions.viewer.hideComponent('subscribe')}>
+        <div className="nav-return" onClick={() => actions.viewer.hideNavComponent('subscribe')}>
           <Arrow type={'down'} />
           {'Subscribe'}
         </div>
diff --git a/animism-align/frontend/app/views/viewer/transcript/transcript.css b/animism-align/frontend/app/views/viewer/transcript/transcript.css
index 0ffcf32..fbaa13f 100644
--- a/animism-align/frontend/app/views/viewer/transcript/transcript.css
+++ b/animism-align/frontend/app/views/viewer/transcript/transcript.css
@@ -11,7 +11,6 @@
   overflow: hidden;
   background: white;
   color: black;
-  border-left: 1px solid #000;
   font-size: 18px;
   line-height: 1.45;
   transform: translateZ(0) translateX(100%);
@@ -31,7 +30,7 @@
   position: absolute;
   bottom: 0;
   left: 0;
-  height: 3rem;
+  height: calc(3rem + 1px);
   width: 100%;
   background: black;
   color: white;
@@ -39,6 +38,7 @@
   justify-content: center;
   align-items: center;
   text-decoration: none;
+  border-top: 1px solid white;
 }
 
 /* general paragraph styles */
@@ -49,6 +49,7 @@
   width: 100%;
   height: 100%;
   padding: 1.5rem 2rem 6rem 1.5rem;
+  border-left: 1px solid #000;
   position: relative;
 }
 .transcript-open .transcript .content {
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 5fb2e8f..b7490b5 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -225,6 +225,18 @@ export const hideComponent = key => dispatch => {
   dispatch({ type: types.viewer.toggle_component, key, value: false })
 }
 
+export const showNavComponent = key => dispatch => {
+  dispatch({ type: types.viewer.toggle_nav_component, key, value: true })
+}
+
+export const hideNavComponent = key => dispatch => {
+  dispatch({ type: types.viewer.toggle_nav_component, key, value: false })
+}
+
+export const toggleNavComponent = key => dispatch => {
+  dispatch({ type: types.viewer.toggle_nav_component, key, value: !store.getState().viewer[key] })
+}
+
 export const toggleComponent = key => dispatch => {
   const state = store.getState().viewer
   if (key !== "share" && state.share) {
@@ -234,8 +246,7 @@ export const toggleComponent = key => dispatch => {
 }
 
 export const openTranscript = () => dispatch => {
-  actions.viewer.hideComponent('checklist')
-  actions.viewer.hideComponent('share')
+  actions.viewer.hideNavComponent('share')
   actions.viewer.toggleComponent('transcript')
 }
 
diff --git a/animism-align/frontend/app/views/viewer/viewer.reducer.js b/animism-align/frontend/app/views/viewer/viewer.reducer.js
index bb36d61..d8ffd34 100644
--- a/animism-align/frontend/app/views/viewer/viewer.reducer.js
+++ b/animism-align/frontend/app/views/viewer/viewer.reducer.js
@@ -1,15 +1,20 @@
 import * as types from 'app/types'
 import { GROWL } from 'app/constants'
 
+const navComponents = {
+  /* UI components that close if anything else opens */
+  share: false,
+  subscribe: false,
+  footnotes: false,
+}
+
 const initialState = {
   /* UI component display state */
-  transcript: false,
-  checklist: false,
+  ...navComponents,
   nav: false,
-  share: false,
   credits: false,
-  subscribe: false,
-  footnotes: false,
+  checklist: false,
+  transcript: false,
 
   /* section look and navigation */
   sections: { loading: true },
@@ -47,6 +52,13 @@ export default function viewerReducer(state = initialState, action) {
         [action.key]: action.value,
       }
 
+    case types.viewer.toggle_nav_component:
+      return {
+        ...state,
+        ...navComponents,
+        [action.key]: action.value,
+      }
+
     case types.audio.play:
       return {
         ...state,