diff options
| author | Jules Laplace <julescarbon@gmail.com> | 2020-08-13 18:35:58 +0200 |
|---|---|---|
| committer | Jules Laplace <julescarbon@gmail.com> | 2020-08-13 18:35:58 +0200 |
| commit | 24661f00461f0ea56c290770c698f8671e66bb37 (patch) | |
| tree | 6b3385430c4ea7e48d409f98641da835a7227a14 /animism-align/frontend/app/views/viewer/sections/viewer.sections.js | |
| parent | 268ae2f8a416527f5d71c0f53345da4c267c8216 (diff) | |
scrolling viewer sections
Diffstat (limited to 'animism-align/frontend/app/views/viewer/sections/viewer.sections.js')
| -rw-r--r-- | animism-align/frontend/app/views/viewer/sections/viewer.sections.js | 44 |
1 files changed, 23 insertions, 21 deletions
diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js index f4abbd6..4bb61ec 100644 --- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.js +++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.js @@ -12,29 +12,31 @@ class ViewerSections extends Component { const { sections } = this.props return ( <div className="viewer-sections"> - {sections.map(section => { - // console.log(section) - return ( - <div - className="viewer-section" - key={section.index} - onClick={() => actions.viewer.seekToSection(section)} - > - <div> - <div className="section-thumbnail" style={{ - backgroundImage: section.media.length && 'url(' + thumbnailURL(section.media[0].media) + ')', - }}/> - <div className="section-title"> - {ROMAN_NUMERALS[section.index]}<br /> - {section.title} - </div> - <div className="section-media"> - {section.mediaLabels} + <div className="viewer-sections-scroll"> + {sections.map(section => { + // console.log(section) + return ( + <div + className="viewer-section" + key={section.index} + onClick={() => actions.viewer.seekToSection(section)} + > + <div> + <div className="section-thumbnail" style={{ + backgroundImage: section.media.length && 'url(' + thumbnailURL(section.media[0].media) + ')', + }}/> + <div className="section-title"> + {ROMAN_NUMERALS[section.index]}<br /> + {section.title} + </div> + <div className="section-media"> + {section.mediaLabels} + </div> </div> </div> - </div> - ) - })} + ) + })} + </div> <ViewerSectionsNav /> </div> ) |
