diff options
5 files changed, 78 insertions, 1 deletions
diff --git a/animism-align/frontend/app/views/editor/editor.container.js b/animism-align/frontend/app/views/editor/editor.container.js index 2d4b036..af1959f 100644 --- a/animism-align/frontend/app/views/editor/editor.container.js +++ b/animism-align/frontend/app/views/editor/editor.container.js @@ -2,10 +2,11 @@ import React, { Component } from 'react' import { Route } from 'react-router' import EditorGate from 'app/views/editor/editor.gate' +import OverviewContainer from 'app/views/editor/overview/overview.container' import AlignContainer from 'app/views/editor/align/align.container' import ParagraphContainer from 'app/views/editor/paragraph/paragraph.container' import MediaContainer from 'app/views/editor/media/media.container' -import OverviewContainer from 'app/views/editor/overview/overview.container' +import FootnotesContainer from 'app/views/editor/footnotes/footnotes.container' import ViewerContainer from 'app/views/viewer/viewer.container' export default class Router extends Component { @@ -15,6 +16,7 @@ export default class Router extends Component { <Route path={"/editor/:episode_id/timeline/"} component={AlignContainer} /> <Route path={"/editor/:episode_id/transcript/"} component={ParagraphContainer} /> <Route path={"/editor/:episode_id/media/"} component={MediaContainer} /> + <Route path={"/editor/:episode_id/footnotes/"} component={FootnotesContainer} /> <Route path={"/editor/:episode_id/viewer/"} component={ViewerContainer} /> <Route path={"/editor/:episode_id/"} exact component={OverviewContainer} /> </EditorGate> diff --git a/animism-align/frontend/app/views/editor/footnotes/components/footnote.form.js b/animism-align/frontend/app/views/editor/footnotes/components/footnote.form.js new file mode 100644 index 0000000..3cd909d --- /dev/null +++ b/animism-align/frontend/app/views/editor/footnotes/components/footnote.form.js @@ -0,0 +1,19 @@ +import React, { Component } from 'react' + +export default class FootnoteForm extends Component { + state = { + editing: false, + } + + render() { + const { footnote, index } = this.props + return ( + <div className='footnote-form'> + <div className='footnote-index'> + {index}{'. '} + </div> + <div className='footnote-text' dangerouslySetInnerHTML={{ __html: footnote.text }} /> + </div> + ) + } +} diff --git a/animism-align/frontend/app/views/editor/footnotes/footnotes.container.js b/animism-align/frontend/app/views/editor/footnotes/footnotes.container.js new file mode 100644 index 0000000..d17f2eb --- /dev/null +++ b/animism-align/frontend/app/views/editor/footnotes/footnotes.container.js @@ -0,0 +1,39 @@ +import React, { Component } from 'react' +import { connect } from 'react-redux' + +import './footnotes.css' + +import FootnoteForm from './components/footnote.form' + +class FootnotesContainer extends Component { + render() { + const { annotation } = this.props + const { order, lookup } = annotation + const footnote_ids = order.filter(id => lookup[id].type === 'footnote') + + return ( + <div className='overview'> + <div className='project-top'> + <div className='project-heading'> + <h2>Footnotes</h2> + </div> + {footnote_ids.map((footnote_id, index) => ( + <FootnoteForm + key={footnote_id} + footnote={lookup[footnote_id]} + index={index + 1} + /> + ))} + </div> + </div> + ) + } +} + +const mapStateToProps = state => ({ + project: state.site.project, + episode: state.site.episode, + annotation: state.annotation.index, +}) + +export default connect(mapStateToProps)(FootnotesContainer) diff --git a/animism-align/frontend/app/views/editor/footnotes/footnotes.css b/animism-align/frontend/app/views/editor/footnotes/footnotes.css new file mode 100644 index 0000000..e7eb790 --- /dev/null +++ b/animism-align/frontend/app/views/editor/footnotes/footnotes.css @@ -0,0 +1,16 @@ +.footnote-form { + display: flex; + justify-content: flex-start; + align-items: flex-start; +} +.footnote-index { + width: 80px; + text-align: right; + margin: 0; + padding: 0 1rem 0 0; +} +.footnote-text { + padding: 0 0 0.5rem 0; + flex: 1; + max-width: 500px; +} diff --git a/animism-align/frontend/app/views/nav/header.component.js b/animism-align/frontend/app/views/nav/header.component.js index 9ec12ac..b3c6460 100644 --- a/animism-align/frontend/app/views/nav/header.component.js +++ b/animism-align/frontend/app/views/nav/header.component.js @@ -26,6 +26,7 @@ function Header(props) { <Link to={`/editor/${episode_id}/timeline/`}>Timeline</Link> <Link to={`/editor/${episode_id}/transcript/`}>Transcript</Link> <Link to={`/editor/${episode_id}/media/`}>Media</Link> + <Link to={`/editor/${episode_id}/footnotes/`}>Footnotes</Link> <Link to={`/editor/${episode_id}/viewer/`}>Viewer</Link> </div> <div> |