From b737fa9a346082459cd746b7127db4984b350c04 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Tue, 20 Oct 2020 22:48:05 +0200
Subject: actually scrolling to footnotes

---
 animism-align/frontend/app/views/viewer/sections/footnotes.css     | 4 ++++
 .../app/views/viewer/sections/viewer.sections.footnotes.js         | 7 +++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

(limited to 'animism-align')

diff --git a/animism-align/frontend/app/views/viewer/sections/footnotes.css b/animism-align/frontend/app/views/viewer/sections/footnotes.css
index 3c2d5b8..74426c3 100644
--- a/animism-align/frontend/app/views/viewer/sections/footnotes.css
+++ b/animism-align/frontend/app/views/viewer/sections/footnotes.css
@@ -50,6 +50,7 @@
   stroke: white;
 }
 .nav-footnotes-scroll {
+  position: relative;
   min-height: 10rem;
   max-height: calc(50vh - 5rem);
   max-width: 100%;
@@ -94,6 +95,9 @@
   bottom: 0;
   left: 0;
 }
+.nav-footnotes .note-spacer {
+  height: 10vh;
+}
 .viewer-nav .nav-footnotes .nav-return .arrow polygon {
   fill: #fff;
 }
diff --git a/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js b/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js
index fa5142f..1582d82 100644
--- a/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js
+++ b/animism-align/frontend/app/views/viewer/sections/viewer.sections.footnotes.js
@@ -14,6 +14,9 @@ class ViewerSectionsFootnotes extends Component {
     super(props)
     this.scrollRef = React.createRef()
   }
+  componentDidMount() {
+    this.cacheScrollPositions()
+  }
   componentDidUpdate(prevProps) {
     if (this.props.footnoteList !== prevProps.footnoteList) {
       this.cacheScrollPositions()
@@ -30,8 +33,7 @@ class ViewerSectionsFootnotes extends Component {
   }
   scrollToFootnote() {
     const { currentFootnote } = this.props
-    const id = currentFootnote - 1
-    const pos = this.state.scrollPositions[id]
+    const pos = this.state.scrollPositions[currentFootnote - 1]
     this.scrollRef.current.scrollTo(0, pos - 5)
   }
   render() {
@@ -55,6 +57,7 @@ class ViewerSectionsFootnotes extends Component {
               </div>
             </div>
           ))}
+          <div className='note-spacer' />
         </div>
         <div className='nav-footnotes-gradient' />
         <FootnotesLink type='down' />
-- 
cgit v1.2.3-70-g09d2