diff options
Diffstat (limited to 'animism-align/frontend/app')
4 files changed, 40 insertions, 25 deletions
diff --git a/animism-align/frontend/app/views/paragraph/components/paragraphTypes/index.js b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/index.js index dd53f0b..5180d5e 100644 --- a/animism-align/frontend/app/views/paragraph/components/paragraphTypes/index.js +++ b/animism-align/frontend/app/views/paragraph/components/paragraphTypes/index.js @@ -20,7 +20,7 @@ export const paragraphElementLookup = { pullquote: React.memo(Paragraph), big_text: React.memo(Paragraph), section_heading: React.memo(ParagraphHeading), - heading_text: React.memo(ParagraphHeading), + // heading_text: React.memo(ParagraphHeading), video: React.memo(MediaVideo), image: React.memo(MediaImage), } diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.router.js b/animism-align/frontend/app/views/viewer/nav/viewer.router.js index b177d2d..651bbb6 100644 --- a/animism-align/frontend/app/views/viewer/nav/viewer.router.js +++ b/animism-align/frontend/app/views/viewer/nav/viewer.router.js @@ -37,6 +37,10 @@ class ViewerRouter extends Component { case 'credits': actions.viewer.showCredits() break + case 'footnotes': + actions.viewer.showComponent('nav') + actions.viewer.showComponent('footnotes') + break case 'end': break } diff --git a/animism-align/frontend/app/views/viewer/sections/footnotes.css b/animism-align/frontend/app/views/viewer/sections/footnotes.css index bf7a308..a6003de 100644 --- a/animism-align/frontend/app/views/viewer/sections/footnotes.css +++ b/animism-align/frontend/app/views/viewer/sections/footnotes.css @@ -4,6 +4,7 @@ position: relative; } .nav-footnotes { + flex-direction: column; position: absolute; bottom: 0; right: -1px; @@ -34,9 +35,19 @@ .nav-footnotes-close { text-align: right; height: 1rem; + margin-bottom: 0.5rem; cursor: pointer; + width: 100%; +} +.nav-footnotes-close svg { + width: 0.75rem; + height: 0.75rem; +} +.nav-footnotes-close svg line { + stroke: white; } .nav-footnotes-scroll { + min-height: 10rem; max-height: calc(50vh - 5rem); max-width: 100%; overflow-x: hidden; @@ -72,4 +83,9 @@ text-decoration: none; border-bottom: 1px dotted; cursor: pointer; +} +.nav-footnotes .nav-return { + position: absolute; + bottom: 0; + left: 0; }
\ 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 index de60987..6c6ef31 100644 --- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js +++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js @@ -1,40 +1,29 @@ import React, { Component } from 'react' +import { connect } from 'react-redux' import actions from 'app/actions' import { Arrow } from '../nav/viewer.icons' +import { EfluxClose } from '../nav/eflux.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 { +class ViewerSectionsFootnotes extends Component { render() { + const { footnoteList } = this.props return ( <div className='nav-footnotes'> <div className='nav-footnotes-close' onClick={() => actions.viewer.hideNavComponent('footnotes')}> - x + {EfluxClose} </div> <div className='nav-footnotes-scroll'> - {notes.map(note => ( - <div key={note.index} className="note-element"> - <div className="note-number">{note.index}</div> + {footnoteList.map(note => ( + <div key={note.footnote_id} className="note-element"> + <div className="note-number"> + {note.footnote_id} + </div> <div className="note-body"> <div dangerouslySetInnerHTML={{ __html: note.text }} /> - <u>Go to text</u> + <u onClick={() => actions.viewer.seekToTimestamp(note.start_ts)}> + {'Go to text'} + </u> </div> </div> ))} @@ -52,3 +41,9 @@ const FootnotesLink = ({ type }) => ( {'Notes'} </div> ) + +const mapStateToProps = state => ({ + footnoteList: state.viewer.footnoteList, +}) + +export default connect(mapStateToProps)(ViewerSectionsFootnotes) |