From 3c3402b0ae4c2f70cc421d97ad9605a9abeb9398 Mon Sep 17 00:00:00 2001
From: Annabel Dunstone <annabel.dunstone@gmail.com>
Date: Tue, 24 May 2016 11:30:53 -0500
Subject: [PATCH] Add fade out to left side of layout nav; remove dropdown nav
 helper; remove controls button from mobile

---
 app/assets/javascripts/layout_nav.js.coffee |  6 +-
 app/assets/stylesheets/framework/nav.scss   | 64 ++++++++++-----------
 app/helpers/nav_helper.rb                   |  4 --
 app/views/layouts/_page.html.haml           |  2 +-
 app/views/layouts/nav/_group.html.haml      |  3 +-
 app/views/layouts/nav/_profile.html.haml    |  3 +-
 6 files changed, 38 insertions(+), 44 deletions(-)

diff --git a/app/assets/javascripts/layout_nav.js.coffee b/app/assets/javascripts/layout_nav.js.coffee
index 2f14e3f35ac..43dc941a82f 100644
--- a/app/assets/javascripts/layout_nav.js.coffee
+++ b/app/assets/javascripts/layout_nav.js.coffee
@@ -1,11 +1,13 @@
 class @LayoutNav
   $ ->
+    $('.fade-left').addClass('end-scroll')
     $('#scrolling-tabs').on 'scroll', ->
       currentPosition = $(this).scrollLeft()
-      return if currentPosition is 0
+      $('.fade-left').toggleClass('end-scroll', currentPosition is 0)
+
       mobileScreenWidth = 480
       controlBtnWidth = $('.controls').width()
       maxPosition = $(this)[0].scrollWidth - $(this).parent().width()
       maxPosition += controlBtnWidth if $('.nav-control').length and $(window).width() > mobileScreenWidth
 
-      $('.fade-out').toggleClass('end-scroll', currentPosition is maxPosition)
+      $('.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 bf5981bef8b..260127e3111 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -1,3 +1,24 @@
+@mixin fade($gradient-direction) {
+  visibility: visible;
+  opacity: 1;
+  position: absolute;
+  bottom: 16px;
+  width: 43px;
+  height: 30px;
+  transition-duration: .3s;
+  -webkit-transform: translateZ(0);
+  background: -webkit-linear-gradient($gradient-direction, rgba(250, 250, 250, 0.4), $background-color 45%);
+  background: -o-linear-gradient($gradient-direction, rgba(250, 250, 250, 0.4), $background-color 45%);
+  background: -moz-linear-gradient($gradient-direction, rgba(250, 250, 250, 0.4), $background-color 45%);
+  background: linear-gradient($gradient-direction, rgba(250, 250, 250, 0.4), $background-color 45%);
+
+  &.end-scroll {
+    visibility: hidden;
+    opacity: 0;
+    transition-duration: .3s;
+  }
+}
+
 .nav-links {
   padding: 0;
   margin: 0;
@@ -210,12 +231,7 @@
     padding: 7px 0 0;
 
     @media (max-width: $screen-xs-min) {
-      float: none;
-      padding: 0 9px;
-
-      .dropdown-new {
-        width: 100%;
-      }
+      display: none;
     }
 
     i {
@@ -256,31 +272,14 @@
       display: none;
     }
 
-    .fade-out {
-      visibility: visible;
-      opacity: 1;
-      position: absolute;
-      bottom: 16px;
+    .fade-right {
+      @include fade(left);
       right: 0;
-      width: 43px;
-      height: 30px;
-      -webkit-transform: translateZ(0);
-      background: -webkit-linear-gradient(left, rgba(250, 250, 250, 0.4), $background-color 45%);
-      background: -o-linear-gradient(left, rgba(250, 250, 250, 0.4), $background-color 45%);
-      background: -moz-linear-gradient(left, rgba(250, 250, 250, 0.4), $background-color 45%);
-      background: linear-gradient(left, rgba(250, 250, 250, 0.4), $background-color 45%);
-
-      &.end-scroll {
-        visibility: hidden;
-        opacity: 0;
-        transition-duration: .3s;
-      }
     }
 
-    @media (max-width: 790px) {
-      .fade-out {
-        transition-duration: .3s;
-      }
+    .fade-left {
+      @include fade(right);
+      left: 0;
     }
 
     li {
@@ -306,7 +305,8 @@
   }
 
   .nav-control {
-    .fade-out {
+
+    .fade-right {
       right: 58px;
 
       @media (min-width: $screen-xs-max) {
@@ -322,12 +322,6 @@
 .page-with-layout-nav {
   margin-top: $header-height + 2;
 
-  &.controls-dropdown-visible {
-    @media (max-width: $screen-xs-min) {
-      margin-top: 96px;
-    }
-  }
-
   .right-sidebar {
     top: ($header-height * 2) + 2;
   }
diff --git a/app/helpers/nav_helper.rb b/app/helpers/nav_helper.rb
index 597a12cd53b..f685e547537 100644
--- a/app/helpers/nav_helper.rb
+++ b/app/helpers/nav_helper.rb
@@ -48,10 +48,6 @@ module NavHelper
     "page-with-layout-nav" if defined?(nav) && nav
   end
 
-  def layout_dropdown_class
-    "controls-dropdown-visible" if current_user
-  end
-
   def nav_control_class
     "nav-control" if current_user
   end
diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml
index 5be0b546a62..1e961853c70 100644
--- a/app/views/layouts/_page.html.haml
+++ b/app/views/layouts/_page.html.haml
@@ -25,7 +25,7 @@
     .layout-nav
       .container-fluid
         = render "layouts/nav/#{nav}"
-  .content-wrapper{ class: "#{layout_nav_class} #{layout_dropdown_class}" }
+  .content-wrapper{ class: "#{layout_nav_class}" }
     = render "layouts/broadcast"
     = render "layouts/flash"
     = yield :flash_message
diff --git a/app/views/layouts/nav/_group.html.haml b/app/views/layouts/nav/_group.html.haml
index ba4a7092655..9b8319c51ca 100644
--- a/app/views/layouts/nav/_group.html.haml
+++ b/app/views/layouts/nav/_group.html.haml
@@ -2,6 +2,7 @@
   = render 'layouts/nav/group_settings'
 
   %ul.nav-links#scrolling-tabs
+    .fade-left
     = nav_link(path: 'groups#show', html_options: {class: 'home'}) do
       = link_to group_path(@group), title: 'Home' do
         = icon('group fw')
@@ -36,4 +37,4 @@
         = icon('users fw')
         %span
           Members
-    .fade-out
+    .fade-right
diff --git a/app/views/layouts/nav/_profile.html.haml b/app/views/layouts/nav/_profile.html.haml
index d3d733d5999..a31584c7f81 100644
--- a/app/views/layouts/nav/_profile.html.haml
+++ b/app/views/layouts/nav/_profile.html.haml
@@ -1,4 +1,5 @@
 %ul.nav-links#scrolling-tabs
+  .fade-left
   = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
     = link_to profile_path, title: 'Profile Settings' do
       = icon('user fw')
@@ -47,4 +48,4 @@
       = icon('history fw')
       %span
         Audit Log
-  .fade-out
+  .fade-right