diff options
author | Annabel Dunstone <annabel.dunstone@gmail.com> | 2016-05-24 19:30:53 +0300 |
---|---|---|
committer | Annabel Dunstone <annabel.dunstone@gmail.com> | 2016-05-26 01:14:28 +0300 |
commit | 3c3402b0ae4c2f70cc421d97ad9605a9abeb9398 (patch) | |
tree | a2155f2f0e6fa633fcbdda0e09cf23600db547be /app | |
parent | 77c7fb1469446c76c84ce5883d99e0e3debaf515 (diff) |
Add fade out to left side of layout nav; remove dropdown nav helper; remove controls button from mobile
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/layout_nav.js.coffee | 6 | ||||
-rw-r--r-- | app/assets/stylesheets/framework/nav.scss | 64 | ||||
-rw-r--r-- | app/helpers/nav_helper.rb | 4 | ||||
-rw-r--r-- | app/views/layouts/_page.html.haml | 2 | ||||
-rw-r--r-- | app/views/layouts/nav/_group.html.haml | 3 | ||||
-rw-r--r-- | 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 |