updating css of section nav elements when checklist is open

5 files changed, 62 insertions, 21 deletions

diff --git a/animism-align/frontend/app/views/viewer/sections/footnotes.css b/animism-align/frontend/app/views/viewer/sections/footnotes.css
index 7a45e37..e484ae5 100644
--- a/animism-align/frontend/app/views/viewer/sections/footnotes.css
+++ b/animism-align/frontend/app/views/viewer/sections/footnotes.css
@@ -3,6 +3,10 @@
 .footnotes-element {
   position: relative;
 }
+.viewer-nav > .nav-row > div.nav-footnotes {
+  align-items: flex-start;
+  justify-content: flex-start;
+}
 .nav-footnotes {
   flex-direction: column;
   position: absolute;
@@ -12,7 +16,7 @@
   max-height: 50vh;
   transform: translateY(100vh) translateZ(0);
   transition: opacity 0.01s, transform 0.2s;
-  padding: 0.5rem 0.75rem 0 0.75rem;
+  padding: 0 0.75rem 0 0.75rem;
   background: black;
   border-top: 1px solid white;
   border-right: 1px solid white;
@@ -27,6 +31,14 @@
   border-bottom: 1px solid white;
   bottom: auto;
 }
+.checklist-open.footnotes-open .nav-footnotes {
+  display: flex;
+  flex-direction: column-reverse;
+  transform: translateZ(0) translateY(0);
+}
+.checklist-open .nav-footnotes .nav-return {
+  padding-top: 0.25rem;
+}
 .footnotes-open .nav-footnotes {
   transform: translateZ(0) translateY(-25rem);
 }
@@ -35,8 +47,19 @@
   opacity: 1;
   z-index: 10;
 }
+
+.checklist-open .nav-footnotes-close {
+  display: none;
+}
+.checklist-open .nav-footnotes-gradient {
+  bottom: 0;
+}
+
+/* close footnotes */
+
 .nav-footnotes-close {
   text-align: right;
+  margin-top: 0.5rem;
   height: 1rem;
   margin-bottom: 0.5rem;
   cursor: pointer;
@@ -49,6 +72,9 @@
 .nav-footnotes-close svg line {
   stroke: white;
 }
+
+/* scrolling element */
+
 .nav-footnotes-scroll {
   position: relative;
   min-height: 10rem;
@@ -60,7 +86,6 @@
   line-height: 1.3;
   font-family: "Freight Text", serif;
   padding: 0.25rem 0;
-  margin-bottom: 3rem;
 }
 .nav-footnotes-gradient {
   position: absolute;
@@ -90,14 +115,10 @@
   border-bottom: 1px dotted;
   cursor: pointer;
 }
-.nav-footnotes .nav-return {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
 .nav-footnotes .note-spacer {
   height: 10vh;
 }
+
 .viewer-nav .nav-footnotes .nav-return .arrow polygon {
   fill: #fff;
 }
diff --git a/animism-align/frontend/app/views/viewer/sections/share.css b/animism-align/frontend/app/views/viewer/sections/share.css
index fe3aaf7..a686255 100644
--- a/animism-align/frontend/app/views/viewer/sections/share.css
+++ b/animism-align/frontend/app/views/viewer/sections/share.css
@@ -17,11 +17,16 @@
 }
 .checklist-open .nav-share {
   top: 0rem;
+  left: -1px;
   z-index: 21;
   transform: translateY(-30rem) translateZ(0);
   border-top: 0;
   border-bottom: 1px solid white;
   bottom: auto;
+  padding-top: 0;
+  padding-bottom: 0.5rem;
+  display: flex;
+  flex-direction: column-reverse;
 }
 .share-open .nav-share {
   transform: translateY(0) translateZ(0);
diff --git a/animism-align/frontend/app/views/viewer/sections/subscribe.css b/animism-align/frontend/app/views/viewer/sections/subscribe.css
index 2b43fe2..88a7b94 100644
--- a/animism-align/frontend/app/views/viewer/sections/subscribe.css
+++ b/animism-align/frontend/app/views/viewer/sections/subscribe.css
@@ -7,7 +7,7 @@
   width: 29.6rem;
   transform: translateY(30rem) translateZ(0);
   transition: opacity 0.01s, transform 0.2s;
-  padding: 0.5rem 0.75rem 0 0.75rem;
+  padding: 0 0.75rem 0 0.75rem;
   background: black;
   border-top: 1px solid white;
   border-right: 1px solid white;
@@ -23,18 +23,30 @@
   border-bottom: 1px solid white;
   bottom: auto;
 }
+.checklist-open .nav-subscribe > div {
+  display: flex;
+  flex-direction: column-reverse;
+}
 .subscribe-open .nav-subscribe {
   transform: translateY(0) translateZ(0);
   opacity: 1;
   z-index: 10;
 }
 
+.checklist-open .nav-subscribe .subscription-form {
+  padding-top: 0;
+}
+.checklist-open .nav-subscribe form label.subscription-privacy {
+  margin-bottom: 1rem;
+}
+
 /* subscription form */
 
 .nav-subscribe .subscription-form {
   width: 100%;
   white-space: normal;
   position: relative;
+  padding-top: 0.5rem;
 }
 .nav-subscribe .subscription-form input[type='email'] {
   font-size: 18px;
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 953c2d0..8170a7e 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
@@ -46,19 +46,21 @@ export default class ViewerSectionsShare extends Component {
     )
     return (
       <div className={className}>
-        <div className="share-option">
-          <a href={mailtoURL}>Email</a>
-        </div>
-        <div className="share-option">
-          <a href={facebookURL}>Facebook</a>
-        </div>
-        <div className="share-option">
-          <a href={twitterURL}>Twitter</a>
-        </div>
-        <div className="share-option">
-          <div className="share-copy" onClick={this.copyToClipboard}>
-            Copy Link
-            <span className="share-success">success</span>
+        <div>
+          <div className="share-option">
+            <a href={mailtoURL}>Email</a>
+          </div>
+          <div className="share-option">
+            <a href={facebookURL}>Facebook</a>
+          </div>
+          <div className="share-option">
+            <a href={twitterURL}>Twitter</a>
+          </div>
+          <div className="share-option">
+            <div className="share-copy" onClick={this.copyToClipboard}>
+              Copy Link
+              <span className="share-success">success</span>
+            </div>
           </div>
         </div>
         <ShareLink type={'down'} />
diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js
index 3fbe47b..b111879 100644
--- a/animism-align/frontend/app/views/viewer/viewer.actions.js
+++ b/animism-align/frontend/app/views/viewer/viewer.actions.js
@@ -275,6 +275,7 @@ export const hideNavElementsNotMatchedBy = key => dispatch => {
 
 export const openTranscript = () => dispatch => {
   actions.viewer.hideNavComponent('share')
+  actions.viewer.hideNavComponent('checklist')
   actions.viewer.toggleComponent('transcript')
 }