dinislage/PrestaShop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

// mobile nav WIP

Browse Source
This commit is contained in:
Kevin Granger
2013-11-07 21:48:55 +01:00
parent 402221ad0f
commit 9c4ee27f20
6 changed files with 202 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin-dev/themes/default/css/admin-theme.css
+2 -2
View File
File diff suppressed because one or more lines are too long
admin-dev/themes/default/js/admin-theme.js
+90 -67
View File
@@ -26,55 +26,54 @@ $( document ).ready(function() {
//nav side bar
function navSidebar(){
$('body.page-topbar').removeClass('page-topbar').addClass('page-sidebar');
$('#nav-topbar').attr('id','nav-sidebar');
$('#nav-sidebar').off();
//$('body.page-topbar').removeClass('page-topbar').addClass('page-sidebar');
//$('#nav-topbar').attr('id','nav-sidebar');
var sidebar = $('#nav-sidebar');
sidebar.off();
$('.expanded').removeClass('expanded');
$('.maintab').not('.active').closest('.submenu').hide();
$('#nav-sidebar li.maintab.has_submenu').append('<span class="submenu_expand"></span>');
$('#nav-sidebar .submenu_expand').on('click',function(){
sidebar.find('li.maintab.has_submenu').append('<span class="submenu_expand"></span>');
sidebar.on('click','.submenu_expand', function(){
var $navId = $(this).parent();
$('.submenu-collapse').remove();
if($('.expanded').length ){
$('.expanded > ul').slideUp(
'fast',
function(){
var $target = $('.expanded');
$target.removeClass('expanded');
$($navId).not($target).not('.active').addClass('expanded');
$($navId).not($target).not('.active').children('ul:first').hide().slideDown();
}
);
$('.expanded > ul').slideUp('fast', function(){
var $target = $('.expanded');
$target.removeClass('expanded');
$($navId).not($target).not('.active').addClass('expanded');
$($navId).not($target).not('.active').children('ul:first').hide().slideDown();
});
}
else {
$($navId).not('.active').addClass('expanded');
$($navId).not('.active').children('ul:first').hide().slideDown();
}
});
//sidebar menu collapse
sidebar.find('.menu-collapse').on('click',function(){
$('body').toggleClass('page-sidebar-closed');
$('.expanded').removeClass('expanded');
});
}
//nav top bar
function navTopbar(){
$('body').removeClass('page-sidebar').removeClass('page-sidebar-closed').addClass('page-topbar');
$('#nav-sidebar').attr('id','nav-topbar');
$('#nav-topbar').off();
//$('body').removeClass('page-sidebar').addClass('page-topbar').removeClass('page-sidebar-closed');
//$('#nav-sidebar').attr('id','nav-topbar');
var topbar = $('#nav-topbar');
topbar.off();
$('span.submenu_expand').remove();
$('.expanded').removeClass('expanded');
// expand elements with submenu
$('#nav-topbar').on('mouseenter', 'li.has_submenu',
function(){
$(this).addClass('expanded');
topbar.on('mouseenter', 'li.has_submenu', function(){
$(this).addClass('expanded');
});
$('#nav-topbar').on('mouseleave', 'li.has_submenu',
function(){
$(this).removeClass('expanded');
topbar.on('mouseleave', 'li.has_submenu', function(){
$(this).removeClass('expanded');
});
// hide element over menu width on load
$('#nav-topbar').find('li.maintab').each(function(){
topbar.find('li.maintab').each(function(){
navEllipsis();
});
//hide element over menu width on resize
$(window).on('resize', function() {
navEllipsis();
@@ -96,11 +95,50 @@ $( document ).ready(function() {
for (var i = 0; i < ellipsed.length; i++) {
$('#ellipsis_submenu').append('<li class="subtab has_submenu">'+ellipsed[i].html()+'</li>');
}
}
}
//nav switch
function mobileNav() {
//clean actual menu type
$('body').removeClass('page-sidebar').removeClass('page-topbar').removeClass('page-sidebar-closed');
// get it in navigation whatever type it is.
var navigation = $('#nav-sidebar,#nav-topbar');
var submenu = "";
// clean trigger
navigation.off().attr('id','nav-mobile');
$('span.menu-collapse').off();
navigation.on('click','span.menu-collapse',function(){
if ($(this).hasClass('expanded')){
$(this).html('<i class="icon-align-justify"></i>');
navigation.find('ul.menu').hide();
$(this).removeClass('expanded');
}
else {
$(this).html('<i class="icon-remove"></i>');
navigation.find('ul.menu').show();
$(this).addClass('expanded');
}
});
//get click for item which has submenu
navigation.on('click','.maintab.has_submenu a.title', function(e){
e.preventDefault();
navigation.find('.menu').hide();
$('#nav-mobile-submenu').remove();
//create submenu
submenu = $('<ul id="nav-mobile-submenu" class="menu"><li><a href="#" id="nav-mobile-submenu-back"><i class="icon-arrow-left"></i> Back</a></li></ul>');
submenu.append($(this).closest('.maintab').find('.submenu').html());
//show submenu
navigation.append(submenu);
submenu.show();
});
navigation.on('click','#nav-mobile-submenu-back',function(e){
e.preventDefault();
submenu.remove();
navigation.find('.menu').show();
});
}
//nav switch - not used for now
function navSwitch(){
if ($('body').hasClass('page-sidebar')||$('body').hasClass('page-sidebar-closed')){
navTopbar();
@@ -112,19 +150,15 @@ $( document ).ready(function() {
//init menu
if ($('body').hasClass('page-sidebar')){
navSidebar();
} else if ($('body').hasClass('page-topbar')) {
}
else if ($('body').hasClass('page-topbar')) {
navTopbar();
}
//tooltip
$('.label-tooltip').tooltip();
//sidebar menu collapse
$('.menu-collapse').click(function(){
$('body').toggleClass('page-sidebar-closed');
$('.expanded').removeClass('expanded');
});
//scroll top
function animateGoTop() {
if ($(window).scrollTop())
{
@@ -135,41 +169,30 @@ $( document ).ready(function() {
}
}
$("#go-top").click(function() {
$("#go-top").on('click',function() {
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
$(window).scroll(function() {
animateGoTop();
});
});
function openModulesList() {
if (!modules_list_loaded)
{
$.ajax({
type: "POST",
url : admin_modules_link,
async: true,
data : {
ajax : "1",
controller : "AdminModules",
action : "getTabModulesList",
tab_modules_list : tab_modules_list,
back_tab_modules_list : window.location.href
},
success : function(data)
{
$('#modules_list_container_tab').html(data).slideDown();
$('#modules_list_loader').hide();
modules_list_loaded = true;
}
});
}
else
{
$('#modules_list_container_tab').slideDown();
$('#modules_list_loader').hide();
}
return false;
}
//media queries - depends of enquire.js
enquire.register("screen and (max-width: 992px)", {
match : function() {
$('body.page-sidebar').addClass('page-sidebar-closed');
},
unmatch : function() {
$('body.page-sidebar').removeClass('page-sidebar-closed');
}
});
enquire.register("screen and (max-width: 480px)", {
match : function() {
mobileNav();
},
unmatch : function() {
}
});
});
admin-dev/themes/default/scss/admin-theme.sass
+5 -7
View File
@@ -18,8 +18,7 @@ html, body
background-image: url('../img/patterns/bedge_grunge.png') // texture
#content
padding: 80px 20px 0
margin-left: 240px
padding: 80px 10px 0
@include transition-property(margin)
@include transition-duration(0.4s)
@include transition-timing-function(ease-out)
@@ -74,11 +73,10 @@ html, body
.panel-danger .panel-heading
background-color: $badge-notif-color!important
form .alert
clear: both
@media (max-width: $screen-tablet)
margin-left: 0
width: 100%
clear: both
@media (max-width: $screen-phone)
margin: 0
padding: 80px 5px 0
//backward
#nobootstrap
admin-dev/themes/default/scss/admin-theme/_admin-header.sass
+1
View File
@@ -52,6 +52,7 @@
background-color: black
border: none
color: white
display: none
#header_employee_box
@extend .nav
@extend .navbar-nav
admin-dev/themes/default/scss/admin-theme/_admin-nav.sass
+73 -6
View File
@@ -1,3 +1,68 @@
#nav-mobile
position: absolute
top: 37px
left: 0
width: 50px
height: 50px
z-index: 500
li > a > i
display: inline-block
height: 30px
width: 30px
font-size: 20px
line-height: 30px
color: white
text-align: center
background: black
@include border-radius(40px)
#nav-mobile-submenu
z-index: 700
ul.menu
z-index: 600
display: none
position: absolute
top: 54px
background: $main-color
width: 480px
margin: 0 0 100px 0
padding: 0
border-top: 1px black solid
list-style: none
li
position: relative
a
display: block
position: relative
padding: 2px 0 2px 20px
border-bottom: 1px solid darken($main-color,10%)
font-size: 12px
line-height: 40px
height: 40px
$color: contrast-color($main-color, white, #333, 10%)
color: mix($main-color, $color, 30%)
background-color: $main-color
text-transform: uppercase
text-decoration: none
@include transition-property(background-color)
@include transition-duration(0.4s)
@include transition-timing-function(ease-out)
i
color: lighten($main-color,25%)
background-color: darken($main-color,25%)
@include transition-property(color)
@include transition-duration(0.4s)
@include transition-timing-function(ease-out)
&:hover
background-color: lighten($main-color,10%)
color: white
i
color: white
ul.submenu
display: none
a#nav-mobile-submenu-back
background-color: darken($main-color,5%)
#nav-sidebar
position: fixed
width: 240px
@@ -120,7 +185,7 @@
color: contrast-color($brand-primary, white, #333, 10%)
background-color: $brand-primary
border-bottom: solid 1px darken($brand-primary,10%)
@media (max-width: $screen-tablet)
@media (max-width: $screen-phone)
display: none
#nav-topbar
@@ -227,7 +292,7 @@
line-height: 55px
display: block
background-color: $main-color
border-bottom: 3px solid darken($main-color,10%)
border-bottom: 4px solid darken($main-color,10%)
color: darken($main-color,30%)
.page-topbar
@@ -243,6 +308,9 @@
.page-head h2.page-title
padding: 0 0 0 20px
.page-sidebar
#content
margin-left: 240px
.page-sidebar-closed
#nav-sidebar
overflow: visible
@@ -269,14 +337,13 @@
left: 50px
width: 200px!important
#content
margin-left: 50px
margin-left: 55px
.page-head h2.page-title
padding: 0 0 0 70px
@media (max-width: $screen-tablet)
@media (max-width: $screen-phone)
padding: 0 0 0 20px
@media (max-width: $screen-tablet)
@media (max-width: $screen-phone)
margin-left: 0
width: 100%
.submenu_expand
display: none