diff options
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') } |