diff options
Diffstat (limited to 'animism-align/frontend/app/views/viewer/transcript')
3 files changed, 117 insertions, 6 deletions
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; +} |