diff options
Diffstat (limited to 'animism-align/frontend')
8 files changed, 32 insertions, 8 deletions
diff --git a/animism-align/frontend/app/constants.js b/animism-align/frontend/app/constants.js index c4523d5..db7034c 100644 --- a/animism-align/frontend/app/constants.js +++ b/animism-align/frontend/app/constants.js @@ -96,6 +96,7 @@ export const CURTAIN_COLOR_SELECT_OPTIONS = CURTAIN_COLORS.map(color => ({ export const CURTAIN_COLOR_LOOKUP = CURTAIN_COLORS.reduce((a,b) => { a[b.label] = b + a[b.label].name = b.label.replace(" ", "-") return a }, {}) 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 53a1f54..6c61223 100644 --- a/animism-align/frontend/app/views/viewer/nav/viewer.router.js +++ b/animism-align/frontend/app/views/viewer/nav/viewer.router.js @@ -14,7 +14,7 @@ class ViewerRouter extends Component { const { component } = this.props.match.params if (component.match('section_')) { const sectionParts = component.split('_') - const sectionIndex = parseInt(sectionParts[1]) + const sectionIndex = parseInt(sectionParts[1]) - 1 actions.viewer.seekToSection(getSection(sectionIndex)) const seek_ts = timestampToSeconds(sectionParts[2]) if (seek_ts) { diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js index 61dd4e8..68fad1e 100644 --- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js +++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js @@ -13,7 +13,7 @@ export const InlineVitrine = ({ paragraph, media, onAnnotationClick }) => { } return ( <div - className='inline-element media vitrine' + className={'inline-element media vitrine ' + color.name} style={style} > {annotation.settings.title && <div className='heading'>{annotation.settings.title}</div>} diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js index 85af05e..d7cc967 100644 --- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js +++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js @@ -14,7 +14,6 @@ export const MediaVideo = ({ paragraph, media, currentParagraph, onAnnotationCli const item = media.lookup[annotation.settings.media_id] if (!item) return <div>Media not found: {annotation.settings.media_id}</div> const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white - const width = window.innerWidth const height = window.innerHeight - (17 * 16) let style = { color: color.textColor, diff --git a/animism-align/frontend/app/views/viewer/player/components.media/media.css b/animism-align/frontend/app/views/viewer/player/components.media/media.css index 45a2670..8cfeb54 100644 --- a/animism-align/frontend/app/views/viewer/player/components.media/media.css +++ b/animism-align/frontend/app/views/viewer/player/components.media/media.css @@ -250,9 +250,10 @@ justify-content: space-between; height: calc(45vh - 7.5rem); } -.inline-element .vitrine { +.inline-element.vitrine { margin-top: 1rem; margin-bottom: 1rem; + padding: 1rem 0; } .inline-element .vitrine-item { margin-bottom: 1rem; @@ -299,6 +300,21 @@ opacity: 1.0; } +.inline-element.vitrine.white .vitrine-item .zoomPlus .ring { + stroke: #ddd; +} +.inline-element.vitrine.white .vitrine-item .zoomPlus .cross { + stroke: #ddd; +} +.inline-element.vitrine.white .vitrine-item:hover .zoomPlus .ring-inner { + stroke: #000; + stroke-width: 1.0; +} +.inline-element.vitrine.white .vitrine-item:hover .zoomPlus .cross { + stroke: #000; + stroke-width: 0.5; +} + /* video scrubber */ .video-scrubber { 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 6a2473c..3725372 100644 --- a/animism-align/frontend/app/views/viewer/player/player.transcript.css +++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css @@ -78,7 +78,7 @@ .player-transcript .hidden { } -.player-transcript .paragraph:last-child { +.player-transcript.scrollable .content > div:last-child { margin-bottom: 10rem; } @@ -206,6 +206,7 @@ .player-transcript .media .citation { text-align: left; width: 45rem; + min-height: 5rem; margin: 0 auto; padding: 1rem 0; font-family: "Neue Haas Unica"; @@ -228,7 +229,7 @@ background-position: center center; background-repeat: no-repeat; width: 100%; - height: calc(100vh - 15rem) !important; + height: calc(100vh - 17rem) !important; padding: 1rem 0; } diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.js b/animism-align/frontend/app/views/viewer/player/player.transcript.js index a5e4d12..44c5bb2 100644 --- a/animism-align/frontend/app/views/viewer/player/player.transcript.js +++ b/animism-align/frontend/app/views/viewer/player/player.transcript.js @@ -56,10 +56,13 @@ class PlayerTranscript extends Component { } render() { - const { paragraphs, color } = this.props.section + const { paragraphs, color, inlineParagraphCount } = this.props.section + const className = "player-transcript " + color + " " + ( + inlineParagraphCount > 2 ? 'scrollable' : '' + ) return ( <div - className={"player-transcript " + color} + className={className} ref={this.containerRef} onScroll={this.handleScroll} > diff --git a/animism-align/frontend/app/views/viewer/viewer.actions.js b/animism-align/frontend/app/views/viewer/viewer.actions.js index b111879..1385da4 100644 --- a/animism-align/frontend/app/views/viewer/viewer.actions.js +++ b/animism-align/frontend/app/views/viewer/viewer.actions.js @@ -186,6 +186,10 @@ export const loadSections = () => dispatch => { currentSection.duration = currentSection.end_ts - currentSection.start_ts } + sections.forEach((section) => { + section.inlineParagraphCount = section.paragraphs.filter(p => !p.hidden).length + // console.log(i, section.inlineParagraphCount) + }) // console.log(sections) // console.log(footnoteList) // console.log(fullscreenTimeline) |