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

Remove arrows from mobile scroll fade out

parent 84fee47a
class @LayoutNav
$(document).ready ->
$ ->
$('#scrolling-tabs').on 'scroll', ->
cur = $(this).scrollLeft()
if cur == 0
return
currentPosition = $(this).scrollLeft()
return if currentPosition == 0
if $('.nav-control').length
maxPosition = $(this)[0].scrollWidth - $(this).parent().width() + 59
else
max = 289
console.log "MAX:" + max
console.log "CUR:" + cur
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
maxPosition = $(this)[0].scrollWidth - $(this).parent().width()
$('.fade-out').toggleClass('end-scroll', currentPosition is maxPosition)
......@@ -256,14 +256,18 @@
display: none;
}
.fa-arrow-right {
display: none;
.fade-out {
opacity: 1;
position: absolute;
color: #7e7c7c;
bottom: 11px;
bottom: 10px;
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: -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 {
opacity: 0;
......@@ -272,10 +276,7 @@
}
@media (max-width: 790px) {
margin-right: 19px;
.fa-arrow-right {
display: block;
.fade-out {
transition-duration: .3s;
}
}
......@@ -300,13 +301,20 @@
color: $gl-icon-color;
}
}
}
&.end-scroll {
margin-right: 0;
transition-duration: .3s;
.nav-control {
.fade-out {
right: 58px;
@media (min-width: $screen-xs-max) {
right: 67px;
}
@media (max-width: $screen-xs-min) {
right: 0;
}
}
}
}
.page-with-layout-nav {
......
......@@ -324,7 +324,7 @@
.layout-nav {
@media (max-width: $screen-xs-min) {
padding-right: 0;;
padding-right: 0;
}
@media (min-width: $screen-xs-min) and (max-width: $screen-md-min) {
......
......@@ -51,4 +51,8 @@ module NavHelper
def layout_dropdown_class
"controls-dropdown-visible" if current_user
end
def nav_control_class
"nav-control" if current_user
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
= link_to group_path(@group), title: 'Home' do
= icon('group fw')
......@@ -35,4 +36,4 @@
= icon('users fw')
%span
Members
= icon('arrow-right')
.fade-out
%ul.nav-links
%ul.nav-links#scrolling-tabs
= nav_link(path: 'profiles#show', html_options: {class: 'home'}) do
= link_to profile_path, title: 'Profile Settings' do
= icon('user fw')
......@@ -47,3 +47,4 @@
= icon('history fw')
%span
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