width of these elements

2 files changed, 44 insertions, 29 deletions

diff --git a/animism-align/frontend/app/views/viewer/sections/sections.css b/animism-align/frontend/app/views/viewer/sections/sections.css
index 9e3bcda..fd48f55 100644
--- a/animism-align/frontend/app/views/viewer/sections/sections.css
+++ b/animism-align/frontend/app/views/viewer/sections/sections.css
@@ -32,16 +32,22 @@
   background: black;
   padding: 0;
 }
+.sections-nav.viewer-nav > .nav-row > div {
+  width: auto;
+}
 .sections-nav .link {
   position: relative;
   height: 3rem;
   padding: 0.25rem 1rem 0.25rem 0.25rem;
 }
+.sections-nav .credits-link {
+  border-left: 1px solid white;
+}
 .sections-nav .subscribe-link {
-  border-right: 1px solid white;
+  border-left: 1px solid white;
 }
 .sections-nav .share-link {
-  border-right: 1px solid white;
+  border-left: 1px solid white;
 }
 .sections-nav .footnotes-link {
   border-left: 1px solid white;
@@ -50,8 +56,11 @@
   padding-left: 1rem;
   border-left: 1px solid white;
 }
-.sections-nav .checklist-element {
+.sections-nav > .nav-row > div.credits-element,
+.sections-nav > .nav-row > div.checklist-element {
   cursor: pointer;
+  flex: 1;
+  justify-content: flex-start;
 }
 
 /* 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 1825732..f4162ba 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
@@ -14,40 +14,46 @@ class ViewerSectionsNav extends Component {
     return (
       <div className="viewer-nav sections-nav">
         <div className='nav-row'>
-          <div>
-            <div className="share-link link">
-              <ViewerSectionsShare />
-              <span onClick={() => actions.viewer.showNavComponent('share')}>
-                <Arrow type={'up'} />
-                {'Share'}
-              </span>
-            </div>
-            <div className="subscribe-link link">
-              <ViewerSectionsSubscribe />
-              <span onClick={() => actions.viewer.showNavComponent('subscribe')}>
-                <Arrow type={viewer.subscribe ? 'down' : 'up'} />
-                {'Subscribe'}
-              </span>
-            </div>
-          </div>
+
           <div className="checklist-element" onClick={() => actions.viewer.toggleNavComponent('checklist')}>
             <div className="checklist-link link">
               <Arrow type={viewer.checklist ? 'down': 'up'} />
               {'Checklist'}
             </div>
           </div>
-          <div className='footnotes-element'>
-            <div className="footnotes-link link">
-              <span onClick={() => actions.viewer.showNavComponent('footnotes')}>
-                <Arrow type={viewer.footnotes ? 'down' : 'up'} />
-                {'Notes'}
-              </span>
-            </div>
-            <div className="transcript-link link" onClick={() => actions.viewer.openTranscript()}>
-              {'Transcript'}
+
+          <div className="credits-element" onClick={() => actions.viewer.toggleNavComponent('credits')}>
+            <div className="credits-link link">
+              <Arrow type={viewer.credits ? 'down': 'up'} />
+              {'Credits'}
             </div>
-            <ViewerSectionsFootnotes />
           </div>
+
+          <div className="subscribe-link link">
+            <ViewerSectionsSubscribe />
+            <span onClick={() => actions.viewer.showNavComponent('subscribe')}>
+              <Arrow type={viewer.subscribe ? 'down' : 'up'} />
+              {'Subscribe'}
+            </span>
+          </div>
+          <div className="share-link link">
+            <ViewerSectionsShare />
+            <span onClick={() => actions.viewer.showNavComponent('share')}>
+              <Arrow type={'up'} />
+              {'Share'}
+            </span>
+          </div>
+          <div className="footnotes-link link">
+            <span onClick={() => actions.viewer.showNavComponent('footnotes')}>
+              <Arrow type={viewer.footnotes ? 'down' : 'up'} />
+              {'Notes'}
+            </span>
+          </div>
+          <div className="transcript-link link" onClick={() => actions.viewer.openTranscript()}>
+            {'Transcript'}
+          </div>
+          <ViewerSectionsFootnotes />
+
         </div>
       </div>
     )