diff options
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 { |