Commit 65a175bb authored by Annabel Dunstone's avatar Annabel Dunstone

Remove arrows from mobile scroll fade out

parent 84fee47a
class @LayoutNav class @LayoutNav
$(document).ready -> $ ->
$('#scrolling-tabs').on 'scroll', -> $('#scrolling-tabs').on 'scroll', ->
cur = $(this).scrollLeft() currentPosition = $(this).scrollLeft()
if cur == 0 return if currentPosition == 0
return if $('.nav-control').length
maxPosition = $(this)[0].scrollWidth - $(this).parent().width() + 59
else else
max = 289 maxPosition = $(this)[0].scrollWidth - $(this).parent().width()
console.log "MAX:" + max
console.log "CUR:" + cur $('.fade-out').toggleClass('end-scroll', currentPosition is maxPosition)
if cur == max
$('.fa-arrow-right').addClass('end-scroll')
$('.nav-links').addClass('end-scroll')
else
$('.fa-arrow-right').removeClass('end-scroll')
$('.nav-links').removeClass('end-scroll')
return
$('#scrolling-tabs').trigger 'scroll'
return
...@@ -256,14 +256,18 @@ ...@@ -256,14 +256,18 @@
display: none; display: none;
} }
.fa-arrow-right { .fade-out {
display: none; opacity: 1;
position: absolute; position: absolute;
color: #7e7c7c; bottom: 10px;
bottom: 11px;
right: 0; right: 0;
padding: 10px 10px 10px 25px; width: 43px;
height: 35px;
-webkit-transform: translateZ(0);
background: -webkit-linear-gradient(left, rgba(250, 250, 250, 0.4), $background-color 45%); 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 { &.end-scroll {
opacity: 0; opacity: 0;
...@@ -272,10 +276,7 @@ ...@@ -272,10 +276,7 @@
} }
@media (max-width: 790px) { @media (max-width: 790px) {
margin-right: 19px; .fade-out {
.fa-arrow-right {
display: block;
transition-duration: .3s; transition-duration: .3s;
} }
} }
...@@ -300,13 +301,20 @@ ...@@ -300,13 +301,20 @@
color: $gl-icon-color; color: $gl-icon-color;
} }
} }
}
&.end-scroll { .nav-control {
margin-right: 0; .fade-out {
transition-duration: .3s; right: 58px;
@media (min-width: $screen-xs-max) {
right: 67px;
}
@media (max-width: $screen-xs-min) {
right: 0;
}
} }
} }
} }
.page-with-layout-nav { .page-with-layout-nav {
......
...@@ -324,7 +324,7 @@ ...@@ -324,7 +324,7 @@
.layout-nav { .layout-nav {
@media (max-width: $screen-xs-min) { @media (max-width: $screen-xs-min) {
padding-right: 0;; padding-right: 0;
} }
@media (min-width: $screen-xs-min) and (max-width: $screen-md-min) { @media (min-width: $screen-xs-min) and (max-width: $screen-md-min) {
......
...@@ -51,4 +51,8 @@ module NavHelper ...@@ -51,4 +51,8 @@ module NavHelper
def layout_dropdown_class def layout_dropdown_class
"controls-dropdown-visible" if current_user "controls-dropdown-visible" if current_user
end end
def nav_control_class
"nav-control" if current_user
end
end end
= render 'layouts/nav/group_settings' %div{ class: nav_control_class }
= render 'layouts/nav/group_settings'
%ul.nav-links#scrolling-tabs %ul.nav-links#scrolling-tabs
= nav_link(path: 'groups#show', html_options: {class: 'home'}) do = nav_link(path: 'groups#show', html_options: {class: 'home'}) do
= link_to group_path(@group), title: 'Home' do = link_to group_path(@group), title: 'Home' do
= icon('group fw') = icon('group fw')
...@@ -35,4 +36,4 @@ ...@@ -35,4 +36,4 @@
= icon('users fw') = icon('users fw')
%span %span
Members Members
= icon('arrow-right') .fade-out
%ul.nav-links %ul.nav-links#scrolling-tabs
= nav_link(path: 'profiles#show', html_options: {class: 'home'}) do = nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
= link_to profile_path, title: 'Profile Settings' do = link_to profile_path, title: 'Profile Settings' do
= icon('user fw') = icon('user fw')
...@@ -47,3 +47,4 @@ ...@@ -47,3 +47,4 @@
= icon('history fw') = icon('history fw')
%span %span
Audit Log Audit Log
.fade-out
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment