Better autoscrolling (responsive) when opening an entry

amatriain · Aug 9, 2018 · 896a6df · 896a6df
1 parent dbdf166
commit 896a6df
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/app/assets/javascripts/ng-services/ng-AnimationsSvc.js.coffee b/app/assets/javascripts/ng-services/ng-AnimationsSvc.js.coffee
@@ -180,8 +180,10 @@ angular.module('feedbunch').service 'animationsSvc',
 
       # Set height back to 0px and animate the transition to its final height
       # After finishing opening animation, scroll to show as much of the entry content as possible.
-      # We leave an offset so that part of the entry above is still visible under the navbar.
-      topOffset = -120
+      # We leave an offset so that navbar doesn't overlap the entry.
+      entry_link = $("#entry-#{entry.id}-link")
+      topOffset = -1 * ($("#navbar").height() + entry_link.outerHeight(true) + 2)
+
       entry_summary
         .css('height', '0')
         .velocity 'scroll', {offset: topOffset, duration: 0}

diff --git a/app/views/layouts/navbar/_navbar.html.erb b/app/views/layouts/navbar/_navbar.html.erb
@@ -1,6 +1,6 @@
 <% cache "navbar-#{I18n.locale}" do %>
 
-  <div class="navbar navbar-default navbar-fixed-top">
+  <div id="navbar" class="navbar navbar-default navbar-fixed-top">
 
     <div class="navbar-header">
 

diff --git a/app/views/read/_entries.html.erb b/app/views/read/_entries.html.erb
@@ -22,7 +22,8 @@
          id="entry-{{entry.id}}"
          class="entry">
 
-      <a data-entry-id="{{entry.id}}"
+      <a id="entry-{{entry.id}}-link"
+         data-entry-id="{{entry.id}}"
          class="list-group-item open-entry-link"
          ng-class="{'highlighted-entry':$first, 'entry-read':entry.read && !entry.changing_state, 'entry-unread': !entry.read && !entry.changing_state, 'entry-becoming-read':entry.read && entry.changing_state, 'entry-becoming-unread':!entry.read && entry.changing_state}"
          ng-mouseover="highlight_entry(entry)"