From 008c10e0a1abde2bbc22b6b6f265ac23c14d8b19 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Fri, 2 Oct 2020 16:33:20 +0200
Subject: footnotes

---
 .../app/views/viewer/sections/footnotes.css        | 75 ++++++++++++++++++++++
 .../viewer/sections/viewer.sections.footnotes.js   | 54 ++++++++++++++++
 .../views/viewer/sections/viewer.sections.nav.js   |  6 +-
 .../views/viewer/sections/viewer.sections.share.js | 12 ++--
 .../viewer/sections/viewer.sections.subscribe.js   | 12 ++--
 .../frontend/app/views/viewer/viewer.container.js  |  1 +
 6 files changed, 150 insertions(+), 10 deletions(-)
 create mode 100644 animism-align/frontend/app/views/viewer/sections/footnotes.css
 create mode 100644 animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js

(limited to 'animism-align/frontend/app')

diff --git a/animism-align/frontend/app/views/viewer/sections/footnotes.css b/animism-align/frontend/app/views/viewer/sections/footnotes.css
new file mode 100644
index 0000000..bf7a308
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/sections/footnotes.css
@@ -0,0 +1,75 @@
+/* subscription form */
+
+.footnotes-element {
+  position: relative;
+}
+.nav-footnotes {
+  position: absolute;
+  bottom: 0;
+  right: -1px;
+  width: 15rem;
+  max-height: 50vh;
+  transform: translateY(100vh) translateZ(0);
+  transition: opacity 0.01s, transform 0.2s;
+  padding: 0.5rem 0.75rem 0 0.75rem;
+  background: black;
+  border-top: 1px solid white;
+  border-right: 1px solid white;
+  border-left: 1px solid white;
+  color: white;
+}
+.checklist-open .nav-footnotes {
+  top: 0rem;
+  z-index: 21;
+  transform: translateY(-100vh) translateZ(0);
+  border-top: 0;
+  border-bottom: 1px solid white;
+  bottom: auto;
+}
+.footnotes-open .nav-footnotes {
+  transform: translateY(0) translateZ(0);
+  opacity: 1;
+  z-index: 10;
+}
+.nav-footnotes-close {
+  text-align: right;
+  height: 1rem;
+  cursor: pointer;
+}
+.nav-footnotes-scroll {
+  max-height: calc(50vh - 5rem);
+  max-width: 100%;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  font-size: 14px;
+  line-height: 1.3;
+  font-family: "Freight Text", serif;
+  padding: 0.25rem 0;
+}
+.nav-footnotes-gradient {
+  position: absolute;
+  bottom: 3rem;
+  left: 0;
+  width: 100%;
+  height: 2rem;
+  background: linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,1.0));
+}
+.nav-footnotes .note-element {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  margin-bottom: 1rem;
+}
+.nav-footnotes .note-number {
+  text-align: right;
+  width: 1.5rem;
+  padding-right: 0.5rem;
+}
+.nav-footnotes .note-body {
+  flex: 1;
+}
+.nav-footnotes u {
+  text-decoration: none;
+  border-bottom: 1px dotted;
+  cursor: pointer;
+}
\ No newline at end of file
diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js
new file mode 100644
index 0000000..de60987
--- /dev/null
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js
@@ -0,0 +1,54 @@
+import React, { Component } from 'react'
+
+import actions from 'app/actions'
+import { Arrow } from '../nav/viewer.icons'
+
+const notes = [
+  { index: 1, text: "<i>Lorem ipsum</i>, p. 156." },
+  { index: 2, text: "Ibid." },
+  { index: 3, text: "Ibid." },
+  { index: 4, text: "Cicero, <i>De finibus bonorum et malorum</i>, 1.10.32." },
+  { index: 5, text: "Ibid." },
+  { index: 6, text: "Ibid." },
+  { index: 7, text: "<i>Lorem Ipsum: The Prosody of Verismillitude</i>, p. 72." },
+  { index: 8, text: "Ibid." },
+  { index: 9, text: "Ibid." },
+  { index: 10, text: "Ibid." },
+  { index: 11, text: "Ibid." },
+  { index: 12, text: "Ibid." },
+  { index: 13, text: "Ibid." },
+  { index: 14, text: "Ibid." },
+]
+
+
+export default class ViewerSectionsFootnotes extends Component {
+  render() {
+    return (
+      <div className='nav-footnotes'>
+        <div className='nav-footnotes-close' onClick={() => actions.viewer.hideNavComponent('footnotes')}>
+          x
+        </div>
+        <div className='nav-footnotes-scroll'>
+          {notes.map(note => (
+            <div key={note.index} className="note-element">
+              <div className="note-number">{note.index}</div>
+              <div className="note-body">
+                <div dangerouslySetInnerHTML={{ __html: note.text }} />
+                <u>Go to text</u>
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className='nav-footnotes-gradient' />
+        <FootnotesLink type='down' />
+      </div>
+    )
+  }
+}
+
+const FootnotesLink = ({ type }) => (
+  <div className="nav-return" onClick={() => actions.viewer.hideNavComponent('footnotes')}>
+    <Arrow type={type} />
+    {'Notes'}
+  </div>
+)
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 4506664..1825732 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
@@ -6,6 +6,7 @@ import actions from 'app/actions'
 import { Arrow } from '../nav/viewer.icons'
 import ViewerSectionsShare from './viewer.sections.share'
 import ViewerSectionsSubscribe from './viewer.sections.subscribe'
+import ViewerSectionsFootnotes from './viewer.sections.footnotes'
 
 class ViewerSectionsNav extends Component {
   render() {
@@ -35,16 +36,17 @@ class ViewerSectionsNav extends Component {
               {'Checklist'}
             </div>
           </div>
-          <div>
+          <div className='footnotes-element'>
             <div className="footnotes-link link">
               <span onClick={() => actions.viewer.showNavComponent('footnotes')}>
                 <Arrow type={viewer.footnotes ? 'down' : 'up'} />
-                {'Footnotes'}
+                {'Notes'}
               </span>
             </div>
             <div className="transcript-link link" onClick={() => actions.viewer.openTranscript()}>
               {'Transcript'}
             </div>
+            <ViewerSectionsFootnotes />
           </div>
         </div>
       </div>
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 fbf496e..953c2d0 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,11 +61,15 @@ export default class ViewerSectionsShare extends Component {
             <span className="share-success">success</span>
           </div>
         </div>
-        <div className="nav-return" onClick={() => actions.viewer.hideNavComponent('share')}>
-          <Arrow type={'down'} />
-          {'Share'}
-        </div>
+        <ShareLink type={'down'} />
       </div>
     )
   }
 }
+
+const ShareLink = ({ type }) => (
+  <div className="nav-return" onClick={() => actions.viewer.hideNavComponent('share')}>
+    <Arrow type={type} />
+    {'Share'}
+  </div>
+)
\ No newline at end of file
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 4b7d848..31d44ba 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
@@ -10,12 +10,16 @@ export default class ViewerSectionsShare extends Component {
       <div className='nav-subscribe'>
         <div>
           <SubscriptionForm />
-        </div>
-        <div className="nav-return" onClick={() => actions.viewer.hideNavComponent('subscribe')}>
-          <Arrow type={'down'} />
-          {'Subscribe'}
+          <SubscribeLink type='down' />
         </div>
       </div>
     )
   }
 }
+
+const SubscribeLink = ({ type }) => (
+  <div className="nav-return" onClick={() => actions.viewer.hideNavComponent('subscribe')}>
+    <Arrow type={type} />
+    {'Subscribe'}
+  </div>
+)
diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js
index ea271d5..c26f513 100644
--- a/animism-align/frontend/app/views/viewer/viewer.container.js
+++ b/animism-align/frontend/app/views/viewer/viewer.container.js
@@ -9,6 +9,7 @@ import './nav/eflux.css'
 import './sections/sections.css'
 import './sections/share.css'
 import './sections/subscribe.css'
+import './sections/footnotes.css'
 import './transcript/transcript.css'
 import './checklist/checklist.css'
 import './modals/modals.css'
-- 
cgit v1.2.3-70-g09d2