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
6 changed files with 38 additions and 44 deletions
|
@ -1,11 +1,13 @@
|
||||||
class @LayoutNav
|
class @LayoutNav
|
||||||
$ ->
|
$ ->
|
||||||
|
$('.fade-left').addClass('end-scroll')
|
||||||
$('#scrolling-tabs').on 'scroll', ->
|
$('#scrolling-tabs').on 'scroll', ->
|
||||||
currentPosition = $(this).scrollLeft()
|
currentPosition = $(this).scrollLeft()
|
||||||
return if currentPosition is 0
|
$('.fade-left').toggleClass('end-scroll', currentPosition is 0)
|
||||||
|
|
||||||
mobileScreenWidth = 480
|
mobileScreenWidth = 480
|
||||||
controlBtnWidth = $('.controls').width()
|
controlBtnWidth = $('.controls').width()
|
||||||
maxPosition = $(this)[0].scrollWidth - $(this).parent().width()
|
maxPosition = $(this)[0].scrollWidth - $(this).parent().width()
|
||||||
maxPosition += controlBtnWidth if $('.nav-control').length and $(window).width() > mobileScreenWidth
|
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 {
|
.nav-links {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@ -210,12 +231,7 @@
|
||||||
padding: 7px 0 0;
|
padding: 7px 0 0;
|
||||||
|
|
||||||
@media (max-width: $screen-xs-min) {
|
@media (max-width: $screen-xs-min) {
|
||||||
float: none;
|
display: none;
|
||||||
padding: 0 9px;
|
|
||||||
|
|
||||||
.dropdown-new {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
i {
|
i {
|
||||||
|
@ -256,31 +272,14 @@
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fade-out {
|
.fade-right {
|
||||||
visibility: visible;
|
@include fade(left);
|
||||||
opacity: 1;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 16px;
|
|
||||||
right: 0;
|
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-left {
|
||||||
.fade-out {
|
@include fade(right);
|
||||||
transition-duration: .3s;
|
left: 0;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
li {
|
li {
|
||||||
|
@ -306,7 +305,8 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-control {
|
.nav-control {
|
||||||
.fade-out {
|
|
||||||
|
.fade-right {
|
||||||
right: 58px;
|
right: 58px;
|
||||||
|
|
||||||
@media (min-width: $screen-xs-max) {
|
@media (min-width: $screen-xs-max) {
|
||||||
|
@ -322,12 +322,6 @@
|
||||||
.page-with-layout-nav {
|
.page-with-layout-nav {
|
||||||
margin-top: $header-height + 2;
|
margin-top: $header-height + 2;
|
||||||
|
|
||||||
&.controls-dropdown-visible {
|
|
||||||
@media (max-width: $screen-xs-min) {
|
|
||||||
margin-top: 96px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.right-sidebar {
|
.right-sidebar {
|
||||||
top: ($header-height * 2) + 2;
|
top: ($header-height * 2) + 2;
|
||||||
}
|
}
|
||||||
|
|
|
@ -48,10 +48,6 @@ module NavHelper
|
||||||
"page-with-layout-nav" if defined?(nav) && nav
|
"page-with-layout-nav" if defined?(nav) && nav
|
||||||
end
|
end
|
||||||
|
|
||||||
def layout_dropdown_class
|
|
||||||
"controls-dropdown-visible" if current_user
|
|
||||||
end
|
|
||||||
|
|
||||||
def nav_control_class
|
def nav_control_class
|
||||||
"nav-control" if current_user
|
"nav-control" if current_user
|
||||||
end
|
end
|
||||||
|
|
|
@ -25,7 +25,7 @@
|
||||||
.layout-nav
|
.layout-nav
|
||||||
.container-fluid
|
.container-fluid
|
||||||
= render "layouts/nav/#{nav}"
|
= render "layouts/nav/#{nav}"
|
||||||
.content-wrapper{ class: "#{layout_nav_class} #{layout_dropdown_class}" }
|
.content-wrapper{ class: "#{layout_nav_class}" }
|
||||||
= render "layouts/broadcast"
|
= render "layouts/broadcast"
|
||||||
= render "layouts/flash"
|
= render "layouts/flash"
|
||||||
= yield :flash_message
|
= yield :flash_message
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
= render 'layouts/nav/group_settings'
|
= render 'layouts/nav/group_settings'
|
||||||
|
|
||||||
%ul.nav-links#scrolling-tabs
|
%ul.nav-links#scrolling-tabs
|
||||||
|
.fade-left
|
||||||
= 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')
|
||||||
|
@ -36,4 +37,4 @@
|
||||||
= icon('users fw')
|
= icon('users fw')
|
||||||
%span
|
%span
|
||||||
Members
|
Members
|
||||||
.fade-out
|
.fade-right
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
%ul.nav-links#scrolling-tabs
|
%ul.nav-links#scrolling-tabs
|
||||||
|
.fade-left
|
||||||
= 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,4 +48,4 @@
|
||||||
= icon('history fw')
|
= icon('history fw')
|
||||||
%span
|
%span
|
||||||
Audit Log
|
Audit Log
|
||||||
.fade-out
|
.fade-right
|
||||||
|
|
Loading…
Reference in a new issue