Add fade out to left side of layout nav; remove dropdown nav helper; remove controls button from mobile
This commit is contained in:
parent
77c7fb1469
commit
3c3402b0ae
|
@ -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)
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue