diff options
Diffstat (limited to 'animism-align/frontend/app')
8 files changed, 197 insertions, 104 deletions
diff --git a/animism-align/frontend/app/views/viewer/nav/viewer.nav.js b/animism-align/frontend/app/views/viewer/nav/viewer.nav.js index e1613b4..7b5a4c7 100644 --- a/animism-align/frontend/app/views/viewer/nav/viewer.nav.js +++ b/animism-align/frontend/app/views/viewer/nav/viewer.nav.js @@ -1,18 +1,18 @@ import React, { Component } from 'react' // import { Link } from 'react-router-dom' -// import { bindActionCreators } from 'redux' import { connect } from 'react-redux' import actions from 'app/actions' -// import * as uploadActions from './upload.actions' class ViewerNav extends Component { componentDidMount() { } + render() { const { } = this.props return ( - <div className="viewerNav"> + <div className="viewer-nav"> + Viewer nav </div> ) } @@ -21,8 +21,10 @@ class ViewerNav extends Component { const mapStateToProps = state => ({ }) -const mapDispatchToProps = dispatch => ({ - // uploadActions: bindActionCreators({ ...uploadActions }, dispatch), -}) +export default connect(mapStateToProps)(ViewerNav) -export default connect(mapStateToProps, mapDispatchToProps)(ViewerNav) +/* +- section name, number +- next link +- player +*/ diff --git a/animism-align/frontend/app/views/viewer/player/player.container.js b/animism-align/frontend/app/views/viewer/player/player.container.js new file mode 100644 index 0000000..86b8896 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/player.container.js @@ -0,0 +1,30 @@ +import React, { Component } from 'react' +// import { Link } from 'react-router-dom' +import { connect } from 'react-redux' + +import actions from 'app/actions' + +class PlayerContainer extends Component { + componentDidMount() { + } + + render() { + const { } = this.props + return ( + <div className="player"> + Player container + </div> + ) + } +} + +const mapStateToProps = state => ({ +}) + +export default connect(mapStateToProps)(PlayerContainer) + +/* +- section name, number +- next link +- player +*/ diff --git a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.image.js b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.image.js index c2477ee..f005fc0 100644 --- a/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.image.js +++ b/animism-align/frontend/app/views/viewer/transcript/components/elementTypes.image.js @@ -6,7 +6,6 @@ export const MediaCitation = ({ media }) => { <span dangerouslySetInnerHTML={{ _html: media.citation }} /> ) } - console.log(media) return ( <span> {media.author} diff --git a/animism-align/frontend/app/views/viewer/transcript/transcript.container.js b/animism-align/frontend/app/views/viewer/transcript/transcript.container.js index a5e25dd..e6d7d09 100644 --- a/animism-align/frontend/app/views/viewer/transcript/transcript.container.js +++ b/animism-align/frontend/app/views/viewer/transcript/transcript.container.js @@ -8,14 +8,18 @@ import actions from 'app/actions' import ParagraphList from 'app/views/paragraph/components/paragraph.list' import { transcriptElementLookup } from './components' -const noop = () => {} - class Transcript extends Component { constructor(props){ super(props) this.handleClose = this.handleClose.bind(this) + this.handleAnnotationClick = this.handleAnnotationClick.bind(this) + this.handleParagraphDoubleClick = this.handleParagraphDoubleClick.bind(this) + } + handleAnnotationClick(e, annotation) { + console.log(annotation) } - componentDidMount() { + handleParagraphDoubleClick(e, paragraph) { + return } handleClose() { actions.viewer.hideSection('transcript') @@ -27,8 +31,8 @@ class Transcript extends Component { <div className='content'> <ParagraphList paragraphElementLookup={transcriptElementLookup} - onAnnotationClick={noop} - onParagraphDoubleClick={noop} + onAnnotationClick={this.handleAnnotationClick} + onParagraphDoubleClick={this.handleParagraphDoubleClick} /> </div> <div diff --git a/animism-align/frontend/app/views/viewer/transcript/transcript.css b/animism-align/frontend/app/views/viewer/transcript/transcript.css new file mode 100644 index 0000000..38af9f5 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/transcript/transcript.css @@ -0,0 +1,108 @@ +/* transcript */ + +.transcript { + position: absolute; + top: 0; + right: 0; + width: 31.875rem; + max-width: 100vw; + height: 100%; + overflow: hidden; + background: white; + color: black; + border-left: 1px solid #000; + font-size: 18px; + line-height: 1.45; + transform: translateZ(0) translateX(100%); + transition: transform 0.2s; + pointer-events: none; + user-select: none; +} +.transcript.visible { + pointer-events: auto; + user-select: auto; + transform: translateZ(0) translateX(0); +} + +/* general paragraph styles */ + +.transcript .content { + overflow-x: hidden; + overflow-y: hidden; + width: 100%; + height: 100%; + padding: 1.5rem 2rem 6rem 1.5rem; + position: relative; +} +.transcript.visible .content { + overflow-y: scroll; +} + +.transcript .content > div { + margin-bottom: 16px; +} + +/* transcript scroll bar */ + +.transcript .content::-webkit-scrollbar { + cursor: pointer; + user-select: none; + width: 4px +} +.transcript .content::-webkit-scrollbar-button { + display: block; + width: 0; + height: 0; +} +.transcript .content::-webkit-scrollbar-track-piece { + background:rgba(211,211,211,0.8); +} +.transcript .content::-webkit-scrollbar-thumb { + display: block; + background: #000; +} + +/* paragraph subtypes */ + +.transcript .header { + text-align: center; + padding-top: 2rem; +} +.transcript .header:first-of-type { + padding-top: 0; +} +.transcript .header span { + border-bottom: 1px solid; +} + +.transcript .paragraph, +.transcript .hidden { +} + +.transcript .blockquote { + padding-left: 2rem; + line-height: 1.45; +} + +/* sentences */ + +.transcript span { + margin-right: 4px; + box-shadow: 0 0 0 rgba(255,255,255,0.0); +} +.transcript .media span { + margin-right: 0; + border-bottom: 1px solid; + cursor: pointer; +} + +.transcript .paragraph .current { + box-shadow: -2px -1px 0 #e8e8e8, + 2px -1px 0 #e8e8e8, + -2px 1px 0 #e8e8e8, + 2px 1px 0 #e8e8e8; + box-decoration-break: clone; + background: #e8e8e8; + color: #000; + transition: all 0.2s; +} diff --git a/animism-align/frontend/app/views/viewer/viewer.container.js b/animism-align/frontend/app/views/viewer/viewer.container.js index ea2f08c..779ec93 100644 --- a/animism-align/frontend/app/views/viewer/viewer.container.js +++ b/animism-align/frontend/app/views/viewer/viewer.container.js @@ -5,12 +5,16 @@ import { connect } from 'react-redux' import './viewer.fonts.css' import './viewer.css' +import './viewer.nav.css' +import './transcript/transcript.css' import actions from 'app/actions' import { Loader } from 'app/common' import Transcript from './transcript/transcript.container' +import ViewerNav from './nav/viewer.nav' import ViewerRouter from './nav/viewer.router' +import Player from './player/player.container' class ViewerContainer extends Component { constructor(props) { @@ -46,13 +50,20 @@ class ViewerContainer extends Component { } } render() { - if (!this.props.loaded) { - return <div className='viewer body loading'><Loader /></div> + const { loaded, viewer } = this.props + if (!loaded) { + return <div className='viewer loading'><Loader /></div> } return ( - <div className='viewer body'> - <Transcript /> - <Route exact path='/viewer/:component/' component={ViewerRouter} /> + <div> + <div className='viewer'> + <div className={viewer.transcript ? 'viewer-container transcript-open' : 'viewer-container'}> + <Player /> + <ViewerNav /> + </div> + <Transcript /> + <Route exact path='/viewer/:component/' component={ViewerRouter} /> + </div> </div> ) } @@ -63,7 +74,8 @@ const mapStateToProps = state => ({ !!state.annotation.index.lookup && !!state.paragraph.index.lookup && !!state.media.index.lookup - ) + ), + viewer: state.viewer, }) const mapDispatchToProps = dispatch => ({ diff --git a/animism-align/frontend/app/views/viewer/viewer.css b/animism-align/frontend/app/views/viewer/viewer.css index 87506f6..d22da10 100644 --- a/animism-align/frontend/app/views/viewer/viewer.css +++ b/animism-align/frontend/app/views/viewer/viewer.css @@ -1,101 +1,36 @@ -.body.viewer { - height: calc(100% - 3.125rem); +.viewer { + position: relative; + overflow: hidden; + width: 100vw; + height: calc(100vh - 3.125rem); background: #fff; color: #000; font-family: "Neue Haas Unica", sans-serif; } +.viewer.loading { + display: flex; + justify-content: center; + align-items: center; +} .close { position: absolute; - top: 1.5rem; right: 1rem; - width: 2rem; - height: 2rem; - background-image: url('/static/img/close-black.png'); + top: 2rem; right: 2rem; + width: 1.375rem; + height: 1.375rem; + background-image: url('/static/img/close_black.svg'); background-color: rgba(255,255,255,1.0); - background-size: 1.5rem 1.5rem; + background-size: 1.375rem 1.375rem; background-position: center center; background-repeat: no-repeat; cursor: pointer; } -/* transcript */ - -.transcript { - position: absolute; - top: 0; - right: 0; - width: 30rem; - max-width: 100vw; - height: 100%; - overflow: hidden; - background: white; - color: black; - border-left: 1px solid #000; - font-size: 16px; - line-height: 1.45; - transform: translateZ(0) translateX(100%); - transition: transform 0.2s; -} - -.transcript.visible { +.viewer-container { transform: translateZ(0) translateX(0); + transition: transform 0.2s; } -/* general paragraph styles */ - -.transcript .content { - overflow: scroll; - width: 100%; - height: 100%; - padding: 1.5rem 2rem 6rem 1.5rem; - position: relative; -} - -.transcript .content > div { - margin-bottom: 16px; -} - -/* paragraph subtypes */ - -.transcript .header { - text-align: center; - padding-top: 2rem; -} -.transcript .header:first-of-type { - padding-top: 0; -} -.transcript .header span { - border-bottom: 1px solid; -} - -.transcript .paragraph, -.transcript .hidden { -} - -.transcript .blockquote { - padding-left: 3rem; - line-height: 1.45; -} - -/* sentences */ - -.transcript span { - margin-right: 4px; - box-shadow: 0 0 0 rgba(255,255,255,0.0); -} -.transcript .media span { - margin-right: 0; - border-bottom: 1px solid; - cursor: pointer; -} - -.transcript .paragraph .current { - box-shadow: -2px -1px 0 #e8e8e8, - 2px -1px 0 #e8e8e8, - -2px 1px 0 #e8e8e8, - 2px 1px 0 #e8e8e8; - box-decoration-break: clone; - background: #e8e8e8; - color: #000; - transition: all 0.2s; -} +.viewer-container.transcript-open { + transform: translateZ(0) translateX(-31.875rem); +}
\ No newline at end of file diff --git a/animism-align/frontend/app/views/viewer/viewer.nav.css b/animism-align/frontend/app/views/viewer/viewer.nav.css new file mode 100644 index 0000000..377a4bb --- /dev/null +++ b/animism-align/frontend/app/views/viewer/viewer.nav.css @@ -0,0 +1,3 @@ +.viewer-nav { + +} |