Rebuilt the mobile navigation.
This commit is contained in:
Samuel Georges
parent
f68eb3f20f
commit
594f9958cb
|
|
@ -662,12 +662,12 @@ body.slim-container .layout.layout-container,body.slim-container .layout .layout
|
|||
.flex-layout-item.width-200{width:200px}
|
||||
.flex-layout-item.width-300{width:300px}
|
||||
body.mainmenu-open{overflow:hidden}
|
||||
.mainmenu-tooltip .tooltip-inner{font-size:16px;padding:6px 16px;border-radius:0}
|
||||
nav#layout-mainmenu{background-color:#111111;padding:0 0 0 20px;line-height:0;white-space:nowrap;vertical-align:top;height:60px}
|
||||
.mainmenu-tooltip .tooltip-inner{font-size:14px;padding:6px 16px;border-radius:0}
|
||||
nav#layout-mainmenu{background-color:#111111;padding:0 0 0 20px;line-height:0;white-space:nowrap;vertical-align:top}
|
||||
nav#layout-mainmenu a{text-decoration:none}
|
||||
nav#layout-mainmenu a:focus{background:transparent}
|
||||
nav#layout-mainmenu ul{margin:0;padding:0;list-style:none;float:left;white-space:nowrap;overflow:hidden}
|
||||
nav#layout-mainmenu ul li{color:#555555;display:inline-block;vertical-align:top;position:relative}
|
||||
nav#layout-mainmenu ul li{color:#555555;display:inline-block;vertical-align:top;position:relative;margin-right:30px}
|
||||
nav#layout-mainmenu ul li a{display:inline-block;font-size:15px;color:inherit;outline:none;padding:14px 0 10px}
|
||||
nav#layout-mainmenu ul li a:hover{background-color:transparent !important}
|
||||
nav#layout-mainmenu ul li a:active,nav#layout-mainmenu ul li a:focus{text-decoration:none;color:#555555}
|
||||
|
|
@ -684,34 +684,14 @@ nav#layout-mainmenu .toolbar-item:after{right:-12px}
|
|||
nav#layout-mainmenu .toolbar-item.scroll-active-before:before{color:#ffffff}
|
||||
nav#layout-mainmenu .toolbar-item.scroll-active-after:after{color:#ffffff}
|
||||
nav#layout-mainmenu ul.mainmenu-toolbar li.mainmenu-preview i{font-size:20px}
|
||||
nav#layout-mainmenu ul.mainmenu-toolbar li.mainmenu-preview a{height:44px;line-height:44px;padding:0 15px;margin:8px 0 8px 11px}
|
||||
nav#layout-mainmenu ul.mainmenu-toolbar li.mainmenu-preview a{padding:0 15px;margin:8px 0 8px 11px}
|
||||
nav#layout-mainmenu ul.mainmenu-toolbar li.mainmenu-account{margin-right:0}
|
||||
nav#layout-mainmenu ul.mainmenu-toolbar li.mainmenu-account > a{height:60px;line-height:60px;padding:0 15px 0 10px;font-size:16px;position:relative;z-index:590}
|
||||
nav#layout-mainmenu ul.mainmenu-toolbar li.mainmenu-account img{width:45px;margin-left:15px}
|
||||
nav#layout-mainmenu ul.mainmenu-toolbar li.mainmenu-account > a{padding:0 15px 0 10px;font-size:14px;position:relative;z-index:590}
|
||||
nav#layout-mainmenu ul.mainmenu-toolbar li.mainmenu-account img.account-avatar{width:45px}
|
||||
nav#layout-mainmenu ul.mainmenu-toolbar li.mainmenu-account .account-name{margin-right:15px}
|
||||
nav#layout-mainmenu ul.mainmenu-toolbar li.mainmenu-account ul{line-height:23px}
|
||||
nav#layout-mainmenu ul.mainmenu-nav li{margin-right:30px}
|
||||
nav#layout-mainmenu ul.mainmenu-nav.nav-inline li a{padding:15px 0}
|
||||
nav#layout-mainmenu ul.mainmenu-nav.nav-inline li a .nav-icon{position:relative;top:-1px;margin-right:5px;width:30px;height:30px}
|
||||
nav#layout-mainmenu ul.mainmenu-nav.nav-inline li a .nav-icon i,nav#layout-mainmenu ul.mainmenu-nav.nav-inline li a .nav-icon img{margin:0}
|
||||
nav#layout-mainmenu ul.mainmenu-nav.nav-inline li a .nav-label{line-height:30px}
|
||||
nav#layout-mainmenu ul.mainmenu-nav.nav-inline li:first-child{margin-left:2px}
|
||||
nav#layout-mainmenu ul.mainmenu-nav.nav-inline li:last-child{margin-right:0}
|
||||
nav#layout-mainmenu ul.mainmenu-nav.nav-tiles li a{position:relative;width:65px;height:65px}
|
||||
nav#layout-mainmenu ul.mainmenu-nav.nav-tiles li a .nav-icon{text-align:center;display:block;position:absolute;top:50%;left:50%;margin-left:-15px;margin-top:-22.5px;width:30px;height:30px}
|
||||
nav#layout-mainmenu ul.mainmenu-nav.nav-tiles li a .nav-icon i,nav#layout-mainmenu ul.mainmenu-nav.nav-tiles li a .nav-icon img{margin:0}
|
||||
nav#layout-mainmenu ul.mainmenu-nav.nav-tiles li a .nav-label{display:block;width:100px;height:20px;line-height:20px;position:absolute;bottom:0;left:50%;padding:0 5px;margin-left:-50px;overflow:hidden;text-overflow:ellipsis;text-align:center}
|
||||
nav#layout-mainmenu ul.mainmenu-nav.nav-tiles li{padding:3px 0}
|
||||
nav#layout-mainmenu ul.mainmenu-nav.nav-tiles li:first-child{margin-left:8px}
|
||||
nav#layout-mainmenu ul.mainmenu-nav.nav-tiles li:last-child{margin-right:0}
|
||||
nav#layout-mainmenu ul.mainmenu-nav.nav-tiles li.active a .nav-label{text-shadow:1px 1px 0 rgba(255,255,255,0.3)}
|
||||
nav#layout-mainmenu ul.mainmenu-nav.nav-tiles li:hover .nav-label{width:auto;min-width:100px;text-overflow:all;overflow:visible;background-color:#111111;z-index:2}
|
||||
nav#layout-mainmenu .menu-toggle{display:inline-block;font-size:15px;color:inherit;outline:none;height:60px;line-height:60px;display:none}
|
||||
nav#layout-mainmenu .menu-toggle:hover{background-color:transparent !important}
|
||||
nav#layout-mainmenu .menu-toggle:active,nav#layout-mainmenu .menu-toggle:focus{text-decoration:none;color:#555555}
|
||||
nav#layout-mainmenu .menu-toggle i{line-height:1;font-size:30px;vertical-align:middle}
|
||||
nav#layout-mainmenu .menu-toggle > i{margin-right:10px}
|
||||
html.svg nav#layout-mainmenu img.svg-icon,html.svg .mainmenu-collapsed img.svg-icon{display:inline-block}
|
||||
nav#layout-mainmenu ul li .mainmenu-accountmenu{position:fixed;top:60px;right:0;background:#2b3e50;z-index:590;display:none}
|
||||
nav#layout-mainmenu ul li .mainmenu-accountmenu{position:fixed;top:0;right:0;background:#2b3e50;z-index:590;display:none}
|
||||
nav#layout-mainmenu ul li .mainmenu-accountmenu.active{display:block}
|
||||
nav#layout-mainmenu ul li .mainmenu-accountmenu:after{content:'';display:block;width:0;height:0;border-left:11px solid transparent;border-right:11px solid transparent;border-bottom:12px solid #2b3e50;right:26px;top:-12px;position:absolute}
|
||||
nav#layout-mainmenu ul li .mainmenu-accountmenu ul{float:none;display:block}
|
||||
|
|
@ -719,27 +699,69 @@ nav#layout-mainmenu ul li .mainmenu-accountmenu li{padding:0;margin:0;font-weigh
|
|||
nav#layout-mainmenu ul li .mainmenu-accountmenu li a{display:block;padding:12px 30px;text-align:left}
|
||||
nav#layout-mainmenu ul li .mainmenu-accountmenu li:hover{background:#3d5265 !important}
|
||||
nav#layout-mainmenu ul li .mainmenu-accountmenu li.divider{height:1px;width:100%;background-color:#4b6372}
|
||||
nav#layout-mainmenu.navbar ul li:hover a:active,.mainmenu-collapsed li:hover a:active,nav#layout-mainmenu.navbar ul li:hover a:focus,.mainmenu-collapsed li:hover a:focus{color:#ffffff !important}
|
||||
.touch .mainmenu-collapsed li a:hover{color:#555555}
|
||||
nav#layout-mainmenu.navbar ul li.active,.mainmenu-collapsed li.active,nav#layout-mainmenu.navbar ul li.highlight,.mainmenu-collapsed li.highlight{color:#ffffff !important}
|
||||
nav#layout-mainmenu.navbar ul li.active a,.mainmenu-collapsed li.active a,nav#layout-mainmenu.navbar ul li.highlight a,.mainmenu-collapsed li.highlight a{color:#ffffff !important}
|
||||
nav#layout-mainmenu.navbar ul li:hover,.mainmenu-collapsed li:hover{color:#ffffff;background:transparent}
|
||||
body.drag nav#layout-mainmenu.navbar ul.nav li:hover,body.drag .mainmenu-collapsed ul li:hover{color:#555555}
|
||||
@media (max-width:769px){nav#layout-mainmenu.navbar ul.nav{display:none}
|
||||
nav#layout-mainmenu.navbar-mode-inline{height:60px}
|
||||
nav#layout-mainmenu.navbar-mode-inline ul.mainmenu-toolbar li.mainmenu-preview a{height:44px;line-height:44px}
|
||||
nav#layout-mainmenu.navbar-mode-inline ul.mainmenu-toolbar li.mainmenu-account > a{height:60px;line-height:60px}
|
||||
nav#layout-mainmenu.navbar-mode-inline ul li .mainmenu-accountmenu{top:60px}
|
||||
nav#layout-mainmenu.navbar-mode-inline ul.mainmenu-nav li a{padding:15px 0}
|
||||
nav#layout-mainmenu.navbar-mode-inline ul.mainmenu-nav li a .nav-icon{position:relative;top:-1px;margin-right:5px;width:30px;height:30px}
|
||||
nav#layout-mainmenu.navbar-mode-inline ul.mainmenu-nav li a .nav-icon i,nav#layout-mainmenu.navbar-mode-inline ul.mainmenu-nav li a .nav-icon img{margin:0}
|
||||
nav#layout-mainmenu.navbar-mode-inline ul.mainmenu-nav li a .nav-label{line-height:30px}
|
||||
nav#layout-mainmenu.navbar-mode-inline ul.mainmenu-nav li:first-child{margin-left:2px}
|
||||
nav#layout-mainmenu.navbar-mode-inline ul.mainmenu-nav li:last-child{margin-right:0}
|
||||
nav#layout-mainmenu.navbar-mode-tiles{height:78px}
|
||||
nav#layout-mainmenu.navbar-mode-tiles ul.mainmenu-toolbar li.mainmenu-preview a{height:62px;line-height:62px}
|
||||
nav#layout-mainmenu.navbar-mode-tiles ul.mainmenu-toolbar li.mainmenu-account > a{height:78px;line-height:78px}
|
||||
nav#layout-mainmenu.navbar-mode-tiles ul li .mainmenu-accountmenu{top:78px}
|
||||
nav#layout-mainmenu.navbar-mode-tiles ul.mainmenu-nav li a{position:relative;width:65px;height:65px}
|
||||
nav#layout-mainmenu.navbar-mode-tiles ul.mainmenu-nav li a .nav-icon{text-align:center;display:block;position:absolute;top:50%;left:50%;margin-left:-15px;margin-top:-22.5px;width:30px;height:30px}
|
||||
nav#layout-mainmenu.navbar-mode-tiles ul.mainmenu-nav li a .nav-icon i,nav#layout-mainmenu.navbar-mode-tiles ul.mainmenu-nav li a .nav-icon img{margin:0}
|
||||
nav#layout-mainmenu.navbar-mode-tiles ul.mainmenu-nav li a .nav-label{display:block;width:100px;height:20px;line-height:20px;position:absolute;bottom:0;left:50%;padding:0 5px;margin-left:-50px;overflow:hidden;text-overflow:ellipsis;text-align:center}
|
||||
nav#layout-mainmenu.navbar-mode-tiles ul.mainmenu-nav li{padding:3px 0}
|
||||
nav#layout-mainmenu.navbar-mode-tiles ul.mainmenu-nav li:first-child{margin-left:8px}
|
||||
nav#layout-mainmenu.navbar-mode-tiles ul.mainmenu-nav li:last-child{margin-right:0}
|
||||
nav#layout-mainmenu.navbar-mode-tiles ul.mainmenu-nav li.active a .nav-label{text-shadow:1px 1px 0 rgba(255,255,255,0.3)}
|
||||
nav#layout-mainmenu.navbar-mode-tiles ul.mainmenu-nav li:hover .nav-label{width:auto;min-width:100px;text-overflow:all;overflow:visible;background-color:#111111;z-index:2}
|
||||
nav#layout-mainmenu .menu-toggle{height:45px;line-height:45px;font-size:16px;display:none}
|
||||
nav#layout-mainmenu .menu-toggle .menu-toggle-icon{background:#333;display:inline-block;height:45px;line-height:45px;width:45px;text-align:center}
|
||||
nav#layout-mainmenu .menu-toggle .menu-toggle-icon i{line-height:1;font-size:30px;vertical-align:middle}
|
||||
nav#layout-mainmenu .menu-toggle .menu-toggle-title{margin-left:10px}
|
||||
nav#layout-mainmenu.navbar-mode-collapse{padding-left:0;height:45px}
|
||||
nav#layout-mainmenu.navbar-mode-collapse ul.mainmenu-toolbar li.mainmenu-preview a{height:29px;line-height:29px}
|
||||
nav#layout-mainmenu.navbar-mode-collapse ul.mainmenu-toolbar li.mainmenu-account > a{height:45px;line-height:45px}
|
||||
nav#layout-mainmenu.navbar-mode-collapse ul li .mainmenu-accountmenu{top:45px}
|
||||
nav#layout-mainmenu.navbar-mode-collapse ul.mainmenu-toolbar li.mainmenu-account > a{padding-right:0}
|
||||
nav#layout-mainmenu.navbar-mode-collapse ul li .mainmenu-accountmenu:after{right:11px}
|
||||
nav#layout-mainmenu.navbar-mode-collapse ul.nav{display:none}
|
||||
nav#layout-mainmenu.navbar-mode-collapse .menu-toggle{display:inline-block;color:#ffffff !important}
|
||||
@media (max-width:769px){nav#layout-mainmenu.navbar{padding-left:0;height:45px}
|
||||
nav#layout-mainmenu.navbar ul.mainmenu-toolbar li.mainmenu-preview a{height:29px;line-height:29px}
|
||||
nav#layout-mainmenu.navbar ul.mainmenu-toolbar li.mainmenu-account > a{height:45px;line-height:45px}
|
||||
nav#layout-mainmenu.navbar ul li .mainmenu-accountmenu{top:45px}
|
||||
nav#layout-mainmenu.navbar ul.mainmenu-toolbar li.mainmenu-account > a{padding-right:0}
|
||||
nav#layout-mainmenu.navbar ul li .mainmenu-accountmenu:after{right:11px}
|
||||
nav#layout-mainmenu.navbar ul.nav{display:none}
|
||||
nav#layout-mainmenu.navbar .menu-toggle{display:inline-block;color:#ffffff !important}
|
||||
.mainmenu-collapsed{position:fixed;height:100%;left:0;top:0;width:0;background:#333333;-webkit-box-shadow:inset -5px 0 3px rgba(0,0,0,0.1);box-shadow:inset -5px 0 3px rgba(0,0,0,0.1);margin:0}
|
||||
.mainmenu-collapsed > div{display:relative;height:100%}
|
||||
.mainmenu-collapsed > div ul{overflow:hidden;padding:0;margin:0}
|
||||
.mainmenu-collapsed > div ul li{text-transform:uppercase;list-style:none;color:#555555}
|
||||
.mainmenu-collapsed > div ul li a{display:inline-block;font-size:15px;color:inherit;outline:none;white-space:nowrap;display:block;padding:15px 20px}
|
||||
}
|
||||
.mainmenu-collapsed{position:absolute;height:100%;top:0;left:0;margin:0;background:#111111}
|
||||
.mainmenu-collapsed > div{display:block;height:100%}
|
||||
.mainmenu-collapsed > div ul.mainmenu-nav li a{position:relative;width:65px;height:65px}
|
||||
.mainmenu-collapsed > div ul.mainmenu-nav li a .nav-icon{text-align:center;display:block;position:absolute;top:50%;left:50%;margin-left:-15px;margin-top:-22.5px;width:30px;height:30px}
|
||||
.mainmenu-collapsed > div ul.mainmenu-nav li a .nav-icon i,.mainmenu-collapsed > div ul.mainmenu-nav li a .nav-icon img{margin:0}
|
||||
.mainmenu-collapsed > div ul.mainmenu-nav li a .nav-label{display:block;width:100px;height:20px;line-height:20px;position:absolute;bottom:0;left:50%;padding:0 5px;margin-left:-50px;overflow:hidden;text-overflow:ellipsis;text-align:center}
|
||||
.mainmenu-collapsed > div ul.mainmenu-nav li{padding:3px 0}
|
||||
.mainmenu-collapsed > div ul.mainmenu-nav li:first-child{margin-left:8px}
|
||||
.mainmenu-collapsed > div ul.mainmenu-nav li:last-child{margin-right:0}
|
||||
.mainmenu-collapsed > div ul.mainmenu-nav li.active a .nav-label{text-shadow:1px 1px 0 rgba(255,255,255,0.3)}
|
||||
.mainmenu-collapsed > div ul.mainmenu-nav li:hover .nav-label{width:auto;min-width:100px;text-overflow:all;overflow:visible;background-color:#111111;z-index:2}
|
||||
.mainmenu-collapsed > div ul.mainmenu-nav li:first-child{margin-left:0}
|
||||
.mainmenu-collapsed > div ul{margin:0;padding:5px 0 15px 30px;overflow:hidden}
|
||||
.mainmenu-collapsed > div ul li{color:#555555;display:inline-block;vertical-align:top;position:relative;margin-right:30px}
|
||||
.mainmenu-collapsed > div ul li a{display:inline-block;font-size:15px;color:inherit;outline:none}
|
||||
.mainmenu-collapsed > div ul li a:hover{background-color:transparent !important}
|
||||
.mainmenu-collapsed > div ul li a:active,.mainmenu-collapsed > div ul li a:focus{text-decoration:none;color:#555555}
|
||||
.mainmenu-collapsed > div ul li a i{line-height:1;font-size:30px;vertical-align:middle}
|
||||
.mainmenu-collapsed > div ul li a:hover{text-decoration:none}
|
||||
.mainmenu-collapsed > div ul li a .nav-icon{margin-right:10px}
|
||||
.mainmenu-collapsed > div ul li a .nav-icon img.svg-icon{position:relative;top:-3px;width:30px;height:30px}
|
||||
.mainmenu-collapsed > div ul li a .nav-icon i{width:30px;text-align:left;display:inline-block}
|
||||
.mainmenu-collapsed > div ul li.active a{padding:9px 20px 11px 20px}
|
||||
.mainmenu-collapsed > div ul li a img.svg-icon{height:30px;width:30px;position:relative;top:0}
|
||||
.mainmenu-collapsed .scroll-marker{position:absolute;left:0;width:100%;height:10px;display:none}
|
||||
.mainmenu-collapsed .scroll-marker:after{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;*margin-right:.3em;content:"\f141";display:block;position:absolute;left:50%;margin-left:-3px;top:0;height:9px;font-size:10px;color:#555555}
|
||||
.mainmenu-collapsed .scroll-marker.before{top:0}
|
||||
|
|
@ -747,11 +769,13 @@ nav#layout-mainmenu.navbar .menu-toggle{display:inline-block;color:#ffffff !impo
|
|||
.mainmenu-collapsed .scroll-marker.after:after{top:2px}
|
||||
.mainmenu-collapsed.scroll-before .scroll-marker.before{display:block}
|
||||
.mainmenu-collapsed.scroll-after .scroll-marker.after{display:block}
|
||||
}
|
||||
body.mainmenu-open .mainmenu-collapsed ul{position:fixed;left:0;top:10px;bottom:10px}
|
||||
@media (min-width:770px){#layout-canvas{position:static !important}
|
||||
.mainmenu-collapsed{display:none !important}
|
||||
}
|
||||
body.mainmenu-open .mainmenu-collapsed ul{position:absolute;left:0;top:10px;bottom:10px}
|
||||
nav#layout-mainmenu.navbar ul li:hover a:active,.mainmenu-collapsed li:hover a:active,nav#layout-mainmenu.navbar ul li:hover a:focus,.mainmenu-collapsed li:hover a:focus{color:#ffffff !important}
|
||||
.touch .mainmenu-collapsed li a:hover{color:#555555}
|
||||
nav#layout-mainmenu.navbar ul li.active,.mainmenu-collapsed li.active,nav#layout-mainmenu.navbar ul li.highlight,.mainmenu-collapsed li.highlight{color:#ffffff !important}
|
||||
nav#layout-mainmenu.navbar ul li.active a,.mainmenu-collapsed li.active a,nav#layout-mainmenu.navbar ul li.highlight a,.mainmenu-collapsed li.highlight a{color:#ffffff !important}
|
||||
nav#layout-mainmenu.navbar ul li:hover,.mainmenu-collapsed li:hover{color:#ffffff;background:transparent}
|
||||
body.drag nav#layout-mainmenu.navbar ul.nav li:hover,body.drag .mainmenu-collapsed ul li:hover{color:#555555}
|
||||
#layout-sidenav{background-color:#31495f;position:absolute;height:100%;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
|
||||
#layout-sidenav ul{position:relative;margin:0;padding:0;height:100%;overflow:hidden}
|
||||
#layout-sidenav ul,#layout-sidenav ul li:first-child a{-webkit-box-shadow:inset 0 6px 3px -3px rgba(0,0,0,0.1);box-shadow:inset 0 6px 3px -3px rgba(0,0,0,0.1)}
|
||||
|
|
|
|||
|
|
@ -845,14 +845,16 @@ return result?result:this}
|
|||
$.fn.scrollpad.Constructor=Scrollpad
|
||||
$.fn.scrollpad.noConflict=function(){$.fn.scrollpad=old
|
||||
return this}
|
||||
$(document).on('render',function(){$('div[data-control=scrollpad]').scrollpad()})}(window.jQuery);+function($){"use strict";var VerticalMenu=function(element,toggle,options){this.body=$('body')
|
||||
$(document).on('render',function(){$('div[data-control=scrollpad]').scrollpad()})}(window.jQuery);+function($){"use strict";var VerticalMenu=function(element,toggle,options){this.$el=$(element)
|
||||
this.body=$('body')
|
||||
this.toggle=$(toggle)
|
||||
this.options=options||{}
|
||||
this.options=$.extend({},VerticalMenu.DEFAULTS,this.options)
|
||||
this.wrapper=$(this.options.contentWrapper)
|
||||
this.breakpoint=options.breakpoint
|
||||
this.menuPanel=$('<div></div>').appendTo('body').addClass(this.options.collapsedMenuClass).css('width',0)
|
||||
this.menuContainer=$('<div></div>').appendTo(this.menuPanel).css('display','none')
|
||||
this.menuElement=$(element).clone().appendTo(this.menuContainer).css('width','auto')
|
||||
this.menuElement=this.$el.clone().appendTo(this.menuContainer).css('width','auto')
|
||||
var self=this
|
||||
this.toggle.click(function(){if(!self.body.hasClass(self.options.bodyMenuOpenClass)){var wrapperWidth=self.wrapper.outerWidth()
|
||||
self.menuElement.dragScroll('goToStart')
|
||||
|
|
@ -860,11 +862,12 @@ self.wrapper.css({'position':'absolute','min-width':self.wrapper.width(),'height
|
|||
self.body.addClass(self.options.bodyMenuOpenClass)
|
||||
self.menuContainer.css('display','block')
|
||||
self.wrapper.animate({'left':self.options.menuWidth},{duration:200,queue:false})
|
||||
self.menuPanel.animate({'width':self.options.menuWidth},{duration:200,queue:false,complete:function(){self.menuElement.css('width',self.options.menuWidth)}})}else{closeMenu()}
|
||||
self.menuPanel.animate({'width':self.options.menuWidth},{duration:200,queue:false,complete:function(){self.menuElement.css('width',self.options.menuWidth)}})}
|
||||
else{closeMenu()}
|
||||
return false})
|
||||
this.wrapper.click(function(){if(self.body.hasClass(self.options.bodyMenuOpenClass)){closeMenu()
|
||||
return false}})
|
||||
$(window).resize(function(){if(self.body.hasClass(self.options.bodyMenuOpenClass)){if($(window).width()>self.options.breakpoint){hideMenu()}}})
|
||||
$(window).resize(function(){if(self.body.hasClass(self.options.bodyMenuOpenClass)){if($(window).width()>self.breakpoint){hideMenu()}}})
|
||||
this.menuElement.dragScroll({vertical:true,start:function(){self.menuElement.addClass('drag')},stop:function(){self.menuElement.removeClass('drag')},scrollClassContainer:self.menuPanel,scrollMarkerContainer:self.menuContainer})
|
||||
this.menuElement.on('click',function(){if(self.menuElement.hasClass('drag'))
|
||||
return false})
|
||||
|
|
@ -876,7 +879,7 @@ self.menuContainer.css('display','none')}
|
|||
function closeMenu(){self.wrapper.animate({'left':0},{duration:200,queue:false})
|
||||
self.menuPanel.animate({'width':0},{duration:200,queue:false,complete:hideMenu})
|
||||
self.menuElement.animate({'width':0},{duration:200,queue:false})}}
|
||||
VerticalMenu.DEFAULTS={menuWidth:250,minContentWidth:769,breakpoint:769,bodyMenuOpenClass:'mainmenu-open',collapsedMenuClass:'mainmenu-collapsed',contentWrapper:'#layout-canvas'}
|
||||
VerticalMenu.DEFAULTS={menuWidth:230,breakpoint:769,bodyMenuOpenClass:'mainmenu-open',collapsedMenuClass:'mainmenu-collapsed',contentWrapper:'#layout-canvas'}
|
||||
var old=$.fn.verticalMenu
|
||||
$.fn.verticalMenu=function(toggleSelector,option){return this.each(function(){var $this=$(this)
|
||||
var data=$this.data('oc.verticalMenu')
|
||||
|
|
@ -886,8 +889,8 @@ if(typeof option=='string')data[option].call($this)})}
|
|||
$.fn.verticalMenu.Constructor=VerticalMenu
|
||||
$.fn.verticalMenu.noConflict=function(){$.fn.verticalMenu=old
|
||||
return this}}(window.jQuery);(function($){$(window).load(function(){$('nav.navbar').each(function(){var
|
||||
navbar=$(this),nav=$('ul.nav',navbar)
|
||||
nav.verticalMenu($('a.menu-toggle',navbar))
|
||||
navbar=$(this),nav=$('ul.nav',navbar),collapseMode=navbar.hasClass('navbar-mode-collapse')
|
||||
nav.verticalMenu($('a.menu-toggle',navbar),{breakpoint:collapseMode?Infinity:769})
|
||||
$('li.with-tooltip:not(.active) > a',navbar).tooltip({container:'body',placement:'bottom',template:'<div class="tooltip mainmenu-tooltip" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'})
|
||||
$('[data-calculate-width]',navbar).one('oc.widthFixed',function(){var dragScroll=$('[data-control=toolbar]',navbar).data('oc.dragScroll')
|
||||
if(dragScroll){dragScroll.goToElement($('ul.nav > li.active',navbar),undefined,{'duration':0})}})})})})(jQuery);+function($){"use strict";if($.oc===undefined)
|
||||
|
|
|
|||
|
|
@ -14,9 +14,12 @@
|
|||
$('nav.navbar').each(function(){
|
||||
var
|
||||
navbar = $(this),
|
||||
nav = $('ul.nav', navbar)
|
||||
nav = $('ul.nav', navbar),
|
||||
collapseMode = navbar.hasClass('navbar-mode-collapse')
|
||||
|
||||
nav.verticalMenu($('a.menu-toggle', navbar))
|
||||
nav.verticalMenu($('a.menu-toggle', navbar), {
|
||||
breakpoint: collapseMode ? Infinity : 769
|
||||
})
|
||||
|
||||
$('li.with-tooltip:not(.active) > a', navbar).tooltip({
|
||||
container: 'body',
|
||||
|
|
|
|||
|
|
@ -10,18 +10,20 @@
|
|||
+function ($) { "use strict";
|
||||
|
||||
var VerticalMenu = function (element, toggle, options) {
|
||||
this.$el = $(element)
|
||||
this.body = $('body')
|
||||
this.toggle = $(toggle)
|
||||
this.options = options || {}
|
||||
this.options = $.extend({}, VerticalMenu.DEFAULTS, this.options)
|
||||
this.wrapper = $(this.options.contentWrapper)
|
||||
this.breakpoint = options.breakpoint
|
||||
|
||||
/*
|
||||
* Insert the menu
|
||||
*/
|
||||
this.menuPanel = $('<div></div>').appendTo('body').addClass(this.options.collapsedMenuClass).css('width', 0)
|
||||
this.menuContainer = $('<div></div>').appendTo(this.menuPanel).css('display', 'none')
|
||||
this.menuElement = $(element).clone().appendTo(this.menuContainer).css('width', 'auto')
|
||||
this.menuElement = this.$el.clone().appendTo(this.menuContainer).css('width', 'auto')
|
||||
|
||||
var self = this
|
||||
|
||||
|
|
@ -43,15 +45,15 @@
|
|||
self.menuContainer.css('display', 'block')
|
||||
|
||||
self.wrapper.animate({'left': self.options.menuWidth}, { duration: 200, queue: false })
|
||||
self.menuPanel.animate({'width': self.options.menuWidth},
|
||||
{
|
||||
self.menuPanel.animate({'width': self.options.menuWidth}, {
|
||||
duration: 200,
|
||||
queue: false,
|
||||
complete: function() {
|
||||
self.menuElement.css('width', self.options.menuWidth)
|
||||
}
|
||||
})
|
||||
} else {
|
||||
}
|
||||
else {
|
||||
closeMenu()
|
||||
}
|
||||
|
||||
|
|
@ -70,7 +72,7 @@
|
|||
*/
|
||||
$(window).resize(function() {
|
||||
if (self.body.hasClass(self.options.bodyMenuOpenClass)) {
|
||||
if ($(window).width() > self.options.breakpoint) {
|
||||
if ($(window).width() > self.breakpoint) {
|
||||
hideMenu()
|
||||
}
|
||||
}
|
||||
|
|
@ -120,8 +122,7 @@
|
|||
}
|
||||
|
||||
VerticalMenu.DEFAULTS = {
|
||||
menuWidth: 250,
|
||||
minContentWidth: 769,
|
||||
menuWidth: 230,
|
||||
breakpoint: 769,
|
||||
bodyMenuOpenClass: 'mainmenu-open',
|
||||
collapsedMenuClass: 'mainmenu-collapsed',
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@
|
|||
@color-mainmenu: #111111;
|
||||
@color-mainmenu-inactive: #555555;
|
||||
@color-mainmenu-active: #ffffff;
|
||||
@color-mainmenu-collapsed: #333333;
|
||||
@color-mainmenu-collapsed: #111111;
|
||||
|
||||
@color-accountmenu-bg: #2b3e50;
|
||||
@color-accountmenu-divider: #4b6372;
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
// Top navigation bar
|
||||
// --------------------------------------------------
|
||||
|
||||
//mainmenu-height: 78px;
|
||||
@mainmenu-height: 60px;
|
||||
@mainmenu-icon-dimension: 30px;
|
||||
@mainmenu-mode-tiles-height: 78px;
|
||||
@mainmenu-mode-inline-height: 60px;
|
||||
@mainmenu-mode-collapse-height: 45px;
|
||||
|
||||
// Stacked nav
|
||||
@mainmenu-icon-dimension: 30px;
|
||||
@mainmenu-tile-dimension: 65px;
|
||||
@mainmenu-tile-label-height: 20px;
|
||||
@mainmenu-tile-label-width: 100px;
|
||||
|
|
@ -37,9 +37,33 @@ body.mainmenu-open {
|
|||
}
|
||||
}
|
||||
|
||||
.mainmenu-set-height(@height) {
|
||||
height: @height;
|
||||
|
||||
ul.mainmenu-toolbar {
|
||||
li.mainmenu-preview {
|
||||
a {
|
||||
height: @height - 16px;
|
||||
line-height: @height - 16px;
|
||||
}
|
||||
}
|
||||
|
||||
li.mainmenu-account {
|
||||
> a {
|
||||
height: @height;
|
||||
line-height: @height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul li .mainmenu-accountmenu {
|
||||
top: @height;
|
||||
}
|
||||
}
|
||||
|
||||
.mainmenu-tooltip {
|
||||
.tooltip-inner {
|
||||
font-size: @font-size-base + 2;
|
||||
font-size: @font-size-base;
|
||||
padding: 6px 16px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
|
@ -51,7 +75,6 @@ nav#layout-mainmenu {
|
|||
line-height: 0;
|
||||
white-space: nowrap;
|
||||
vertical-align: top;
|
||||
height: @mainmenu-height;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
|
|
@ -73,6 +96,7 @@ nav#layout-mainmenu {
|
|||
display: inline-block;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
margin-right: 30px;
|
||||
|
||||
a {
|
||||
.mainmenu-item-link();
|
||||
|
|
@ -134,8 +158,6 @@ nav#layout-mainmenu {
|
|||
}
|
||||
|
||||
a {
|
||||
height: @mainmenu-height - 16px;
|
||||
line-height: @mainmenu-height - 16px;
|
||||
padding: 0 15px;
|
||||
margin: 8px 0 8px 11px;
|
||||
}
|
||||
|
|
@ -145,18 +167,19 @@ nav#layout-mainmenu {
|
|||
margin-right: 0;
|
||||
|
||||
> a {
|
||||
height: @mainmenu-height;
|
||||
line-height: @mainmenu-height;
|
||||
padding: 0 15px 0 10px;
|
||||
font-size: 16px;
|
||||
font-size: @font-size-base;
|
||||
position: relative;
|
||||
// z-index: 200; // Previous value 590 was overlappnig with drop-down menus on small screens
|
||||
z-index: 590; // @todo Investigate: This causes the button to dim without 590
|
||||
}
|
||||
|
||||
img {
|
||||
img.account-avatar {
|
||||
width: 45px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.account-name {
|
||||
margin-right: 15px;
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
@ -166,7 +189,7 @@ nav#layout-mainmenu {
|
|||
}
|
||||
|
||||
//
|
||||
// Menu items
|
||||
// Fading animation (disabled)
|
||||
//
|
||||
|
||||
&:hover {
|
||||
|
|
@ -180,18 +203,87 @@ nav#layout-mainmenu {
|
|||
//.opacity(.65);
|
||||
//.transition(opacity 5s ease);
|
||||
//.transition-delay(5s);
|
||||
margin-right: 30px;
|
||||
|
||||
&.active {
|
||||
//.opacity(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Menu items (Inline mode)
|
||||
//
|
||||
//
|
||||
// SVG support
|
||||
//
|
||||
|
||||
ul.mainmenu-nav.nav-inline {
|
||||
html.svg {
|
||||
nav#layout-mainmenu,
|
||||
.mainmenu-collapsed {
|
||||
img.svg-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// User account menu
|
||||
//
|
||||
|
||||
nav#layout-mainmenu ul li .mainmenu-accountmenu {
|
||||
position: fixed;
|
||||
top: 0; // See mode for this value
|
||||
right: 0;
|
||||
background: @color-accountmenu-bg;
|
||||
z-index: 590;
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:after {
|
||||
.triangle(up, 22px, 12px, @color-accountmenu-bg);
|
||||
right: 26px;
|
||||
top: -12px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
ul {
|
||||
float: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
display: block;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 12px 30px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #3d5265!important;
|
||||
}
|
||||
}
|
||||
|
||||
li.divider {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: @color-accountmenu-divider;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Navbar (Inline mode)
|
||||
//
|
||||
|
||||
nav#layout-mainmenu.navbar-mode-inline {
|
||||
.mainmenu-set-height(@mainmenu-mode-inline-height);
|
||||
|
||||
ul.mainmenu-nav {
|
||||
li a {
|
||||
padding: 15px 0;
|
||||
|
||||
|
|
@ -218,12 +310,19 @@ nav#layout-mainmenu {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Menu items (Tile mode)
|
||||
//
|
||||
//
|
||||
// Navbar (Tiles mode)
|
||||
//
|
||||
|
||||
ul.mainmenu-nav.nav-tiles {
|
||||
nav#layout-mainmenu.navbar-mode-tiles {
|
||||
.mainmenu-set-height(@mainmenu-mode-tiles-height);
|
||||
.mainmenu-navbar-tiles();
|
||||
}
|
||||
|
||||
.mainmenu-navbar-tiles() {
|
||||
ul.mainmenu-nav {
|
||||
li a {
|
||||
position: relative;
|
||||
width: @mainmenu-tile-dimension;
|
||||
|
|
@ -287,82 +386,138 @@ nav#layout-mainmenu {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Mobile
|
||||
//
|
||||
//
|
||||
// Mobile (Collapsed mode)
|
||||
//
|
||||
|
||||
nav#layout-mainmenu {
|
||||
.menu-toggle {
|
||||
height: @mainmenu-mode-collapse-height;
|
||||
line-height: @mainmenu-mode-collapse-height;
|
||||
font-size: @font-size-base + 2;
|
||||
display: none;
|
||||
|
||||
.menu-toggle-icon {
|
||||
background: #333;
|
||||
display: inline-block;
|
||||
height: @mainmenu-mode-collapse-height;
|
||||
line-height: @mainmenu-mode-collapse-height;
|
||||
width: @mainmenu-mode-collapse-height;
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
line-height: 1;
|
||||
font-size: 30px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-toggle-title {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
nav#layout-mainmenu.navbar-mode-collapse {
|
||||
.mainmenu-navbar-collapse();
|
||||
}
|
||||
|
||||
@media (max-width: @menu-breakpoint-max) {
|
||||
nav#layout-mainmenu.navbar {
|
||||
.mainmenu-navbar-collapse();
|
||||
}
|
||||
}
|
||||
|
||||
// This logic is implemented in the october.navbar.js script,
|
||||
// it prevents the collapse mode from working beyond the min
|
||||
// breakpoint. Leaving this code just in case, remove later.
|
||||
// -SG
|
||||
@media (min-width: @menu-breakpoint-min) {
|
||||
// #layout-canvas { position: static !important; }
|
||||
// .mainmenu-collapsed { display: none !important; }
|
||||
}
|
||||
|
||||
.mainmenu-navbar-collapse() {
|
||||
padding-left: 0;
|
||||
|
||||
.mainmenu-set-height(@mainmenu-mode-collapse-height);
|
||||
|
||||
ul.mainmenu-toolbar li.mainmenu-account > a {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
ul li .mainmenu-accountmenu:after {
|
||||
right: 11px;
|
||||
}
|
||||
|
||||
ul.nav { display: none; }
|
||||
|
||||
.menu-toggle {
|
||||
.mainmenu-item-link();
|
||||
height: @mainmenu-height;
|
||||
line-height: @mainmenu-height;
|
||||
display: none;
|
||||
|
||||
> i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
html.svg {
|
||||
nav#layout-mainmenu,
|
||||
.mainmenu-collapsed {
|
||||
img.svg-icon {
|
||||
display: inline-block;
|
||||
}
|
||||
color: @color-mainmenu-active !important;
|
||||
}
|
||||
}
|
||||
|
||||
nav#layout-mainmenu ul li .mainmenu-accountmenu {
|
||||
position: fixed;
|
||||
top: @mainmenu-height;
|
||||
right: 0;
|
||||
background: @color-accountmenu-bg;
|
||||
z-index: 590;
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:after {
|
||||
.triangle(up, 22px, 12px, @color-accountmenu-bg);
|
||||
right: 26px;
|
||||
top: -12px;
|
||||
.mainmenu-collapsed {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
background: @color-mainmenu-collapsed;
|
||||
|
||||
> div {
|
||||
display: block;
|
||||
height: 100%;
|
||||
|
||||
.mainmenu-navbar-tiles();
|
||||
|
||||
ul.mainmenu-nav li:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
float: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
display: block;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 12px 30px;
|
||||
text-align: left;
|
||||
padding: 5px 0 15px 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: #3d5265!important;
|
||||
ul li {
|
||||
color: @color-mainmenu-inactive;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
margin-right: 30px;
|
||||
}
|
||||
|
||||
ul li a {
|
||||
.mainmenu-item-link();
|
||||
|
||||
img.svg-icon {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
li.divider {
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background-color: @color-accountmenu-divider;
|
||||
}
|
||||
.vertical-scroll-marker(@color-mainmenu-inactive);
|
||||
}
|
||||
|
||||
body.mainmenu-open .mainmenu-collapsed ul {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
//
|
||||
// Misc
|
||||
//
|
||||
|
||||
nav#layout-mainmenu.navbar ul li:hover,
|
||||
.mainmenu-collapsed li:hover {
|
||||
a {
|
||||
|
|
@ -398,90 +553,3 @@ body.drag {
|
|||
li:hover { color: @color-mainmenu-inactive; }
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @menu-breakpoint-max) {
|
||||
nav#layout-mainmenu.navbar {
|
||||
ul.nav { display: none; }
|
||||
|
||||
.menu-toggle {
|
||||
display: inline-block;
|
||||
color: @color-mainmenu-active!important;
|
||||
}
|
||||
}
|
||||
|
||||
.mainmenu-collapsed {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 0;
|
||||
background: @color-mainmenu-collapsed;
|
||||
.box-shadow(inset -5px 0 3px rgba(0,0,0,0.1));
|
||||
|
||||
margin: 0;
|
||||
|
||||
> div {
|
||||
display: relative;
|
||||
height: 100%;
|
||||
|
||||
ul {
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
text-transform: uppercase;
|
||||
list-style: none;
|
||||
color: @color-mainmenu-inactive;
|
||||
|
||||
a {
|
||||
.mainmenu-item-link();
|
||||
|
||||
white-space: nowrap;
|
||||
display: block;
|
||||
padding: 15px 20px;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.nav-icon {
|
||||
margin-right: 10px;
|
||||
|
||||
img.svg-icon {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
i {
|
||||
width: 30px;
|
||||
text-align: left;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active a {
|
||||
padding: 9px 20px 11px 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-scroll-marker(@color-mainmenu-inactive);
|
||||
}
|
||||
}
|
||||
|
||||
body.mainmenu-open .mainmenu-collapsed ul {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
|
||||
@media (min-width: @menu-breakpoint-min) {
|
||||
#layout-canvas { position: static!important; }
|
||||
.mainmenu-collapsed { display: none!important; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,21 @@
|
|||
<?php
|
||||
$activeItem = BackendMenu::getActiveMainMenuItem();
|
||||
$mySettings = System\Classes\SettingsManager::instance()->listItems('mysettings');
|
||||
$navbarMode = 'navbar-mode-inline'; // Supported: inline, tiles, collapse.
|
||||
?>
|
||||
<nav class="navbar control-toolbar" id="layout-mainmenu" role="navigation">
|
||||
<nav class="navbar control-toolbar <?= $navbarMode ?>" id="layout-mainmenu" role="navigation">
|
||||
<div class="toolbar-item toolbar-primary">
|
||||
<div data-control="toolbar">
|
||||
<a class="menu-toggle" href="javascript:;">
|
||||
<span class="menu-toggle-icon">
|
||||
<i class="icon-bars"></i>
|
||||
</span>
|
||||
<span class="menu-toggle-title">
|
||||
<?= $activeItem ? e(trans($activeItem->label)) : 'CMS' ?>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<ul class="nav mainmenu-nav nav-inline">
|
||||
<ul class="nav mainmenu-nav">
|
||||
<?php foreach (BackendMenu::listMainMenuItems() as $item): ?>
|
||||
<?php
|
||||
$isActive = BackendMenu::isMainMenuItemActive($item);
|
||||
|
|
@ -40,15 +45,15 @@
|
|||
href="<?= URL::to('/') ?>"
|
||||
target="_blank"
|
||||
title="<?= e(trans('backend::lang.tooltips.preview_website')) ?>">
|
||||
<i class="icon-crosshairs"></i>
|
||||
<i class="icon-eye"></i>
|
||||
</a>
|
||||
</li>
|
||||
<li class="mainmenu-account highlight">
|
||||
<a href="javascript:;" onclick="$.oc.layout.toggleAccountMenu(this)">
|
||||
<span class="hidden-xs">
|
||||
<span class="account-name hidden-xs">
|
||||
<?= e($this->user->first_name.' '.$this->user->last_name) ?>
|
||||
</span>
|
||||
<img src="<?= $this->user->getAvatarThumb(90, ['mode' => 'crop', 'extension' => 'png']) ?>">
|
||||
<img src="<?= $this->user->getAvatarThumb(90, ['mode' => 'crop', 'extension' => 'png']) ?>" class="account-avatar" />
|
||||
</a>
|
||||
<div class="mainmenu-accountmenu">
|
||||
<ul>
|
||||
|
|
|
|||
Loading…
Reference in New Issue