2 files changed, 51 insertions, 23 deletions
diff --git a/animism-align/frontend/app/views/viewer/sections/sections.css b/animism-align/frontend/app/views/viewer/sections/sections.css
index a94b712..0ca84a2 100644
--- a/animism-align/frontend/app/views/viewer/sections/sections.css
+++ b/animism-align/frontend/app/views/viewer/sections/sections.css
@@ -8,7 +8,6 @@
   background: black;
   color: white;
   display: block;
-  white-space: nowrap;
   transition: transform 0.2s;
   transform: translateZ(0) translateY(25rem);
   border-top: 1px solid #fff;
@@ -17,10 +16,37 @@
   transform: translateZ(0) translateY(0);
 }
 .checklist-open .viewer-sections {
-  transform: translateZ(0) translateY(calc(3rem - 100vh));
+  transform: translateZ(0) translateY(calc(3rem - 100vh - 4px));
   z-index: 20;
 }
 
+/* scrolling part */
+
+.viewer-sections .viewer-sections-scroll {
+  width: 100%;
+  white-space: nowrap;
+  overflow-y: auto;
+}
+.viewer-sections-scroll::-webkit-scrollbar {
+  cursor: pointer;
+  user-select: none;
+  height: 4px
+}
+.viewer-sections-scroll::-webkit-scrollbar-button {
+  display: block;
+  width: 0;
+  height: 0;
+}
+.viewer-sections-scroll::-webkit-scrollbar-track-piece {
+  background:rgba(211,211,211,0.8);
+}
+.viewer-sections-scroll::-webkit-scrollbar-thumb {
+  display: block;
+  background: #000;
+}
+
+/* clickable section indicators */
+
 .viewer-sections .viewer-section {
   display: inline-flex;
   white-space: normal;
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>
     )