From ec6d456b5023b4a0700a4c9ad8a17ed64b0470e6 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone <annabel.dunstone@gmail.com>
Date: Wed, 25 May 2016 17:12:39 -0500
Subject: Change to xs breakpoint, layout_nav updates

---
 app/assets/javascripts/layout_nav.js.coffee | 17 +++++++++--------
 app/assets/stylesheets/framework/nav.scss   |  5 ++---
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/app/assets/javascripts/layout_nav.js.coffee b/app/assets/javascripts/layout_nav.js.coffee
index 3c39ec32f26..6adac6dac97 100644
--- a/app/assets/javascripts/layout_nav.js.coffee
+++ b/app/assets/javascripts/layout_nav.js.coffee
@@ -1,13 +1,14 @@
 class @LayoutNav
   $ ->
     $('.fade-left').addClass('end-scroll')
-    $('.scrolling-tabs').scroll (event) ->
-      el = $(event.target)
-      currentPosition = $(this).scrollLeft()
-      mobileScreenWidth = 480
+    $('.scrolling-tabs').on 'scroll', (event) ->
+      $this = $(this)
+      $el = $(event.target)
+      currentPosition = $this.scrollLeft()
+      size = bp.getBreakpointSize()
       controlBtnWidth = $('.controls').width()
-      maxPosition = $(this)[0].scrollWidth - $(this).parent().width()
-      maxPosition += controlBtnWidth if $('.nav-control').length and $(window).width() > mobileScreenWidth
+      maxPosition = $this.get(0).scrollWidth - $this.parent().width()
+      maxPosition += controlBtnWidth if size isnt 'xs' and $('.nav-control').length
 
-      el.find('.fade-left').toggleClass('end-scroll', currentPosition is 0)
-      el.find('.fade-right').toggleClass('end-scroll', currentPosition is maxPosition)
+      $el.find('.fade-left').toggleClass('end-scroll', currentPosition is 0)
+      $el.find('.fade-right').toggleClass('end-scroll', currentPosition is maxPosition)
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index fdd60d85db8..adfe5540704 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -2,7 +2,7 @@
   visibility: visible;
   opacity: 1;
   position: absolute;
-  bottom: 16px;
+  bottom: 12px;
   width: 43px;
   height: 30px;
   transition-duration: .3s;
@@ -240,7 +240,7 @@
     float: right;
     padding: 7px 0 0;
 
-    @media (max-width: $screen-xs-min) {
+    @media (max-width: $screen-xs-max) {
       display: none;
     }
 
@@ -310,7 +310,6 @@
 
   .nav-control {
     .fade-right {
-      right: 58px;
 
       @media (min-width: $screen-xs-max) {
         right: 67px;
-- 
cgit v1.2.1