footnotes in intro and normal paragraphs

4 files changed, 46 insertions, 13 deletions

diff --git a/animism-align/frontend/app/views/viewer/checklist/credits.css b/animism-align/frontend/app/views/viewer/checklist/credits.css
index 32bf897..aecc914 100644
--- a/animism-align/frontend/app/views/viewer/checklist/credits.css
+++ b/animism-align/frontend/app/views/viewer/checklist/credits.css
@@ -3,11 +3,6 @@
 .credits-content {
   font-size: 0.875rem;
 }
-.credits a {
-  color: #000;
-  text-decoration: none;
-  border-bottom: 1px solid;
-}
 .credits {
   display: flex;
   flex-direction: row;
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js
index d978465..d257090 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js
@@ -15,14 +15,26 @@ export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAn
       className={className}
     >
       <div className="speaker-icon" onClick={e => onAnnotationClick(e, paragraph, firstAnnotation)}>{SpeakerIcon}</div>
-      {paragraph.annotations.map(annotation => (
-        <span
-          key={annotation.id}
-          className={annotation.id === currentAnnotation ? 'current' : ''}
-          onClick={e => onAnnotationClick(e, paragraph, firstAnnotation)}
-          dangerouslySetInnerHTML={{ __html: ' ' + annotation.text + ' ' }}
-        />
-      ))}
+      {paragraph.annotations.map(annotation => {
+        if (annotation.type === 'footnote') {
+          return (
+            <span
+              key={annotation.id}
+              className='footnote'
+              onClick={e => onAnnotationClick(e, paragraph, annotation)}
+              dangerouslySetInnerHTML={{ __html: annotation.footnote_id }}
+            />
+          )
+        }
+        return (
+          <span
+            key={annotation.id}
+            className={annotation.id === currentAnnotation ? 'current' : ''}
+            onClick={e => onAnnotationClick(e, paragraph, firstAnnotation)}
+            dangerouslySetInnerHTML={{ __html: ' ' + annotation.text + ' ' }}
+          />
+        )
+      })}
     </div>
   )
 }
diff --git a/animism-align/frontend/app/views/viewer/player/player.container.css b/animism-align/frontend/app/views/viewer/player/player.container.css
index 4a0d539..bc75fa7 100644
--- a/animism-align/frontend/app/views/viewer/player/player.container.css
+++ b/animism-align/frontend/app/views/viewer/player/player.container.css
@@ -16,3 +16,9 @@
   /*transform: translateZ(0) translateX(-31.875rem);*/
   height: calc(100vh - 25rem);
 }
+
+.viewer-parent a {
+  color: #000;
+  /*text-decoration: none;*/
+  /*border-bottom: 1px solid;*/
+}
diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css
index 0ac1a0c..4266abc 100644
--- a/animism-align/frontend/app/views/viewer/player/player.transcript.css
+++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css
@@ -233,6 +233,26 @@
   fill: black;
 }
 
+/* footnotes */
+
+.player-transcript .intro_paragraph .footnote {
+  font-size: 2.5rem;
+  position: relative;
+  top: -1.4rem;
+  left: -1rem;
+  margin-right: -0.5rem;
+  cursor: pointer;
+}
+
+.player-transcript .paragraph .footnote {
+  font-size: 1rem;
+  position: relative;
+  top: -0.5rem;
+  left: -0.4rem;
+  margin-right: -0.2rem;
+  cursor: pointer;
+}
+
 /* intro */
 
 .site-intro {