Footer nav tweaks

app/assets/javascripts/discourse/mixins/mobile-scroll-direction.js.es6

@@ -13,6 +13,9 @@ export default Ember.Mixin.create({
     if (delta <= MOBILE_SCROLL_TOLERANCE && delta >= -MOBILE_SCROLL_TOLERANCE)
       return;
 
+    // don't calculate when resetting offset (i.e. going to /latest or to next topic in suggested list)
+    if (offset === 0) return;
+
     const prevDirection = this.mobileScrollDirection;
     const currDirection = delta > 0 ? "down" : null;
 

app/assets/stylesheets/common/components/footer-nav.scss

@@ -4,11 +4,8 @@
 
 $footer-nav-height: 55px;
 
-body.with-footer-nav {
-  padding-bottom: $footer-nav-height + 15;
-}
-
 body.footer-nav-visible {
+  padding-bottom: $footer-nav-height + 15;
   #topic-progress-wrapper,
   #reply-control.draft {
     bottom: $footer-nav-height;
@@ -53,6 +50,6 @@ body.footer-nav-visible {
 @supports (-webkit-backdrop-filter: blur(10px)) {
   .footer-nav {
     background-color: rgba($header_background, 0.7);
-    -webkit-backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(20px);
   }
 }

app/assets/stylesheets/common/foundation/variables.scss

@@ -130,7 +130,7 @@ $box-shadow: (
   "card": 0 4px 14px rgba(0, 0, 0, 0.15),
   "dropdown": 0 2px 3px 0 rgba(0, 0, 0, 0.2),
   "header": 0 2px 4px -1px rgba(0, 0, 0, 0.25),
-  "footer-nav": 0 2px 4px 1px rgba(0, 0, 0, 0.25),
+  "footer-nav": 0 0 2px 0 rgba(0, 0, 0, 0.25),
   "kbd": (
     0 2px 0 rgba(0, 0, 0, 0.2),
     0 0 0 1px dark-light-choose(#fff, #000) inset