TPS
/
ORIENT
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tweak main menu to behave more like tiles

This commit is contained in:
Samuel Georges 2016-03-02 18:05:52 +11:00
parent 9c59dd58d3
commit 852785960b
6 changed files with 254 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
modules/backend/assets/css/october.css
View File

@ -586,6 +586,7 @@ body{webkit-font-smoothing:antialiased;font-family:sans-serif;background:#f9f9f9
.layout > .layout-row > .layout-cell{display:table-cell;vertical-align:top;height:100%}
.layout > .layout-row > .layout-cell.width-100{width:100px}
.layout > .layout-row > .layout-cell.width-120{width:120px}
.layout > .layout-row > .layout-cell.width-130{width:130px}
.layout > .layout-row > .layout-cell.width-140{width:140px}
.layout > .layout-row > .layout-cell.width-200{width:200px}
.layout > .layout-row > .layout-cell.width-300{width:300px}
@ -600,6 +601,7 @@ body{webkit-font-smoothing:antialiased;font-family:sans-serif;background:#f9f9f9
.layout > .layout-row > .layout-cell.middle{vertical-align:middle}
.layout > .layout-row > .layout-cell.width-100{width:100px}
.layout > .layout-row > .layout-cell.width-120{width:120px}
.layout > .layout-row > .layout-cell.width-130{width:130px}
.layout > .layout-row > .layout-cell.width-140{width:140px}
.layout > .layout-row > .layout-cell.width-200{width:200px}
.layout > .layout-row > .layout-cell.width-300{width:300px}
@ -616,6 +618,7 @@ body{webkit-font-smoothing:antialiased;font-family:sans-serif;background:#f9f9f9
.layout > .layout-cell{display:table-cell;vertical-align:top;height:100%}
.layout > .layout-cell.width-100{width:100px}
.layout > .layout-cell.width-120{width:120px}
.layout > .layout-cell.width-130{width:130px}
.layout > .layout-cell.width-140{width:140px}
.layout > .layout-cell.width-200{width:200px}
.layout > .layout-cell.width-300{width:300px}
@ -658,42 +661,51 @@ 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}
nav#layout-mainmenu{background-color:#111111;padding:0 0 0 20px;line-height:0;white-space:nowrap;vertical-align:top}
.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:78px}
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;margin-right:30px;position:relative; }
nav#layout-mainmenu ul li a{padding:19px 0 15px;display:inline-block;font-size:16px;color:inherit;outline:none}
nav#layout-mainmenu ul li{color:#555555;display:inline-block;vertical-align:top;position:relative}
nav#layout-mainmenu ul li a{display:inline-block;font-size:14px;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}
nav#layout-mainmenu ul li a i{position:relative;top:-2px;line-height:1;font-size:30px;vertical-align:middle;margin-right:10px}
nav#layout-mainmenu ul li a i{line-height:1;font-size:30px;vertical-align:middle}
nav#layout-mainmenu ul li a img.svg-icon{height:30px;width:30px;margin-right:10px;position:relative;top:0}
nav#layout-mainmenu ul li a .nav-label{display:none}
nav#layout-mainmenu ul li:last-child{margin-right:0}
nav#layout-mainmenu ul li.active .nav-label{display:inline}
nav#layout-mainmenu ul li.icon{margin-right:0}
nav#layout-mainmenu ul li.icon i{margin-right:0}
nav#layout-mainmenu ul li.icon a{padding:14px}
nav#layout-mainmenu ul li.power-off i,nav#layout-mainmenu ul li.preview i{font-size:20px}
nav#layout-mainmenu ul li.power-off a,nav#layout-mainmenu ul li.preview a{padding:25px 10px 19px 21px}
nav#layout-mainmenu ul li.account{margin-right:0}
nav#layout-mainmenu ul li.account > a{padding:16px 20px 13px 10px;font-size:18px;position:relative;z-index:200}
nav#layout-mainmenu ul li.account img{width:35px;margin-right:15px;position:relative;top:-1px}
nav#layout-mainmenu ul li.account ul{line-height:23px}
nav#layout-mainmenu ul li.icon-only{margin-right:0}
nav#layout-mainmenu ul li.icon-only a{padding:14px}
nav#layout-mainmenu ul li.icon-only i{margin-right:0}
nav#layout-mainmenu ul.nav{display:inline-block}
nav#layout-mainmenu .menu-toggle{padding:19px 0 15px;display:inline-block;font-size:16px;color:inherit;outline:none;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{position:relative;top:-2px;line-height:1;font-size:30px;vertical-align:middle;margin-right:10px}
nav#layout-mainmenu .toolbar-item{padding-right:0}
nav#layout-mainmenu .toolbar-item:before,nav#layout-mainmenu .toolbar-item:after{margin-top:0}
nav#layout-mainmenu .toolbar-item:before{left:-12px}
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:62px;line-height:62px;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:78px;line-height:78px;padding:0 20px 0 10px;font-size:16px;letter-spacing:-1px;font-weight:bold;position:relative;z-index:590}
nav#layout-mainmenu ul.mainmenu-toolbar li.mainmenu-account img{width:40px;margin-right:15px;border-radius:999px}
nav#layout-mainmenu ul.mainmenu-toolbar li.mainmenu-account ul{line-height:23px}
nav#layout-mainmenu:hover ul.mainmenu-nav li{-webkit-transition:opacity 0.15s ease;transition:opacity 0.15s ease;opacity:1}
nav#layout-mainmenu ul.mainmenu-nav li a{position:relative;width:65px;height:65px}
nav#layout-mainmenu 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 ul.mainmenu-nav li a .nav-icon i,nav#layout-mainmenu ul.mainmenu-nav li a .nav-icon img{margin:0}
nav#layout-mainmenu 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;font-size:15px;overflow:hidden;text-overflow:ellipsis;text-align:center}
nav#layout-mainmenu ul.mainmenu-nav li{opacity:.65;-webkit-transition:opacity 5s ease;transition:opacity 5s ease;-webkit-transition-delay:5s;transition-delay:5s;margin-right:30px;padding:3px 0}
nav#layout-mainmenu ul.mainmenu-nav li:first-child{margin-left:8px}
nav#layout-mainmenu ul.mainmenu-nav li:last-child{margin-right:0}
nav#layout-mainmenu ul.mainmenu-nav li.active{opacity:1}
nav#layout-mainmenu ul.mainmenu-nav li.active a .nav-label{text-shadow:1px 1px 0 rgba(255,255,255,0.3)}
nav#layout-mainmenu 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{display:inline-block;font-size:14px;color:inherit;outline:none;height:78px;line-height:78px;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:64px;right:0;background:#2b3e50;z-index:590;display:none}
nav#layout-mainmenu ul li .mainmenu-accountmenu{position:fixed;top:78px;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:40px;top:-12px;position:absolute}
nav#layout-mainmenu ul li .mainmenu-accountmenu ul{float:none;display:block}
@ -715,13 +727,14 @@ nav#layout-mainmenu.navbar .menu-toggle{display:inline-block;color:#ffffff !impo
.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{padding:19px 0 15px;display:inline-block;font-size:16px;color:inherit;outline:none;white-space:nowrap;display:block;padding:15px 20px}
.mainmenu-collapsed > div ul li a{display:inline-block;font-size:14px;color:inherit;outline:none;white-space:nowrap;display:block;padding:15px 20px}
.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{position:relative;top:-2px;line-height:1;font-size:30px;vertical-align:middle;margin-right:10px}
.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 img.svg-icon{margin-right:10px;position:relative;top:-3px;width:30px;height:30px}
.mainmenu-collapsed > div ul li a i{width:40px;text-align:left;display:inline-block}
.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 .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}
@ -737,14 +750,17 @@ body.mainmenu-open .mainmenu-collapsed ul{position:fixed;left:0;top:10px;bottom:
}
#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)}
#layout-sidenav ul:after{content:'';position:absolute;top:0;right:0;width:10px;height:100%;-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)}
#layout-sidenav ul li{display:block;text-align:center;position:relative}
#layout-sidenav ul li a{padding:20px 13px;display:block;font-size:15px;color:rgba(255,255,255,0.35);font-weight:normal;position:relative}
#layout-sidenav ul li a{padding:20px 10px;display:block;font-size:14px;color:rgba(255,255,255,0.35);font-weight:normal;position:relative}
#layout-sidenav ul li a:hover{text-decoration:none;background-color:transparent}
#layout-sidenav ul li a:focus{background:transparent}
#layout-sidenav ul li a i{color:rgba(255,255,255,0.35);display:block;margin-bottom:5px;font-size:28px}
#layout-sidenav ul li.active a,#layout-sidenav ul li a:hover{background:#1f99dc;color:#ffffff}
#layout-sidenav ul li.active a,#layout-sidenav ul li a:hover{color:#ffffff}
#layout-sidenav ul li.active a i,#layout-sidenav ul li a:hover i{color:#ffffff}
#layout-sidenav ul li.active a{background:#1f99dc;text-shadow:1px 1px 0 rgba(0,0,0,0.2)}
#layout-sidenav ul li.active a > i{text-shadow:none}
#layout-sidenav ul li span.counter{display:block;position:absolute;top:15px;right:15px;padding:2px 6px 3px 4px;background-color:#d9350f;color:#ffffff;font-size:11px;line-height:100%;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;opacity:1;filter:alpha(opacity=100);-webkit-transform:scale(1,);-ms-transform:scale(1,);transform:scale(1,);-webkit-transition:all 0.3s;transition:all 0.3s}
#layout-sidenav ul li span.counter.empty{opacity:0;filter:alpha(opacity=0);-webkit-transform:scale(0,);-ms-transform:scale(0,);transform:scale(0,)}
#layout-sidenav.layout-sidenav ul.drag li:not(.active) a:hover,.touch #layout-sidenav.layout-sidenav li:not(.active) a:hover{color:rgba(255,255,255,0.35) !important}

1
modules/backend/assets/less/layout/layout.less
View File

@ -74,6 +74,7 @@ body {
&.width-100 { width: 100px; }
&.width-120 { width: 120px; }
&.width-130 { width: 130px; }
&.width-140 { width: 140px; }
&.width-200 { width: 200px; }
&.width-300 { width: 300px; }

288
modules/backend/assets/less/layout/mainmenu.less
View File

@ -2,14 +2,19 @@
// Top navigation bar
// --------------------------------------------------
@mainmenu-height: 78px;
@mainmenu-tile-dimension: 65px;
@mainmenu-tile-icon-dimension: 30px;
@mainmenu-tile-label-height: 20px;
@mainmenu-tile-label-width: 100px;
body.mainmenu-open {
overflow: hidden;
}
.main-menu-item-link() {
padding: 19px 0 15px;
.mainmenu-item-link() {
display: inline-block;
font-size: 16px;
font-size: 14px;
color: inherit;
outline: none;
@ -23,12 +28,9 @@ body.mainmenu-open {
}
i {
position: relative;
top: -2px;
line-height: 1;
font-size: 30px;
vertical-align: middle;
margin-right: 10px;
}
}
@ -36,6 +38,7 @@ body.mainmenu-open {
.tooltip-inner {
font-size: 16px;
padding: 6px 16px;
border-radius: 0;
}
}
@ -45,6 +48,7 @@ nav#layout-mainmenu {
line-height: 0;
white-space: nowrap;
vertical-align: top;
height: @mainmenu-height;
a {
text-decoration: none;
@ -65,11 +69,11 @@ nav#layout-mainmenu {
color: @color-mainmenu-inactive;
display: inline-block;
vertical-align: top;
margin-right: 30px;
position: relative;
a {
.main-menu-item-link();
.mainmenu-item-link();
padding: 14px 0 10px;
img.svg-icon {
height: 30px;
@ -78,89 +82,12 @@ nav#layout-mainmenu {
position: relative;
top: 0;
}
.nav-label {
display: none;
}
}
&:last-child {
&.icon-only {
margin-right: 0;
}
&.active {
.nav-label {
display: inline;
}
}
/*
&.active {
&:after {
content: ' ';
position: absolute;
bottom: 0;
left: 50%;
margin-left: -8.5px;
}
a {
font-size: 18px;
padding-top: 13px;
padding-bottom: 8px;
i {
font-size: 40px;
}
img.svg-icon {
height: 40px;
width: 40px;
}
}
}
*/
&.icon {
margin-right: 0;
i {
margin-right: 0;
}
a {
padding: 14px;
}
}
&.power-off, &.preview {
i {
font-size: 20px;
}
a {
padding: 25px 10px 19px 21px;
}
}
&.account {
margin-right: 0;
> a {
padding: 16px 20px 13px 10px;
font-size: 18px;
position: relative;
z-index: 200; // Previous value 590 was overlappnig with drop-down menus on small screens
}
img {
width: 35px;
margin-right: 15px;
position: relative;
top: -1px;
}
ul {
line-height: 23px;
}
a { padding: 14px; }
i { margin-right: 0; }
}
}
@ -169,11 +96,6 @@ nav#layout-mainmenu {
}
}
.menu-toggle {
.main-menu-item-link();
display: none;
}
.toolbar-item {
padding-right: 0;
@ -197,6 +119,151 @@ nav#layout-mainmenu {
color: @color-mainmenu-active;
}
}
//
// Toolbar
//
ul.mainmenu-toolbar {
li.mainmenu-preview {
i {
font-size: 20px;
}
a {
height: @mainmenu-height - 16px;
line-height: @mainmenu-height - 16px;
padding: 0 15px;
margin: 8px 0 8px 11px;
}
}
li.mainmenu-account {
margin-right: 0;
> a {
height: @mainmenu-height;
line-height: @mainmenu-height;
padding: 0 20px 0 10px;
font-size: 16px;
letter-spacing: -1px;
font-weight: bold;
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 {
width: 40px;
margin-right: 15px;
border-radius: 999px;
}
ul {
line-height: 23px;
}
}
}
//
// Tiles
//
&:hover {
ul.mainmenu-nav li {
.transition(opacity .15s ease);
opacity: 1;
}
}
ul.mainmenu-nav {
li a {
position: relative;
width: @mainmenu-tile-dimension;
height: @mainmenu-tile-dimension;
.nav-icon {
text-align: center;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-left: -(@mainmenu-tile-icon-dimension / 2);
margin-top: -(@mainmenu-tile-dimension - @mainmenu-tile-label-height) / 2;
width: @mainmenu-tile-icon-dimension;
height: @mainmenu-tile-icon-dimension;
i, img { margin: 0; }
}
.nav-label {
display: block;
width: @mainmenu-tile-label-width;
height: @mainmenu-tile-label-height;
line-height: @mainmenu-tile-label-height;
position: absolute;
bottom: 0;
left: 50%;
padding: 0 5px;
margin-left: -(@mainmenu-tile-label-width / 2);
font-size: 15px;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
}
li {
opacity: .65;
.transition(opacity 5s ease);
.transition-delay(5s);
margin-right: 30px;
padding: 3px 0;
&:first-child {
margin-left: 8px;
}
&:last-child {
margin-right: 0;
}
&.active {
opacity: 1;
a .nav-label {
text-shadow: 1px 1px 0 rgba(255,255,255,.3);
}
}
&:hover {
.nav-label {
width: auto;
min-width: @mainmenu-tile-label-width;
text-overflow: all;
overflow: visible;
background-color: @color-mainmenu;
z-index: 2;
}
}
}
}
//
// Mobile
//
.menu-toggle {
.mainmenu-item-link();
height: @mainmenu-height;
line-height: @mainmenu-height;
display: none;
> i {
margin-right: 10px;
}
}
}
html.svg {
@ -210,7 +277,7 @@ html.svg {
nav#layout-mainmenu ul li .mainmenu-accountmenu {
position: fixed;
top: 64px;
top: @mainmenu-height;
right: 0;
background: @color-accountmenu-bg;
z-index: 590;
@ -301,7 +368,7 @@ body.drag {
@media (max-width: @menu-breakpoint-max) {
nav#layout-mainmenu.navbar {
ul.nav {display: none;}
ul.nav { display: none; }
.menu-toggle {
display: inline-block;
@ -335,7 +402,7 @@ body.drag {
color: @color-mainmenu-inactive;
a {
.main-menu-item-link();
.mainmenu-item-link();
white-space: nowrap;
display: block;
@ -345,18 +412,21 @@ body.drag {
text-decoration: none;
}
img.svg-icon {
.nav-icon {
margin-right: 10px;
position: relative;
top: -3px;
width: 30px;
height: 30px;
}
i {
width: 40px;
text-align: left;
display: inline-block;
img.svg-icon {
position: relative;
top: -3px;
width: 30px;
height: 30px;
}
i {
width: 30px;
text-align: left;
display: inline-block;
}
}
}
@ -379,6 +449,6 @@ body.mainmenu-open .mainmenu-collapsed ul {
}
@media (min-width: @menu-breakpoint-min) {
#layout-canvas {position: static!important;}
.mainmenu-collapsed {display: none!important;}
}
#layout-canvas { position: static!important; }
.mainmenu-collapsed { display: none!important; }
}

34
modules/backend/assets/less/layout/sidenav.less
View File

@ -3,6 +3,13 @@
// --------------------------------------------------
#layout-sidenav {
background-color: @color-sidebarnav-bg;
position: absolute;
height: 100%;
width: 100%;
.box-sizing(border-box);
.sidenav-shadow-element() {
content: '';
position: absolute;
@ -11,16 +18,9 @@
right: 0;
width: 10px;
height: 100%;
.box-shadow(inset -5px 0 3px rgba(0,0,0,0.1));
.box-shadow(inset -5px 0 3px rgba(0,0,0,.1));
}
background-color: @color-sidebarnav-bg;
position: absolute;
height: 100%;
width: 100%;
.box-sizing(border-box);
ul {
position: relative;
margin: 0;
@ -28,6 +28,10 @@
height: 100%;
overflow: hidden;
&, li:first-child a {
.box-shadow(inset 0 6px 3px -3px rgba(0,0,0,.1));
}
&:after {
.sidenav-shadow-element();
}
@ -38,9 +42,9 @@
position: relative;
a {
padding: 20px 13px;
padding: 20px 10px;
display: block;
font-size: 15px;
font-size: 14px;
color: @color-sidebarnav-inactive-text;
font-weight: normal;
position: relative;
@ -63,12 +67,18 @@
}
&.active a, a:hover {
background: @color-sidebarnav-active-bg;
color: @color-sidebarnav-active-text;
i { color: @color-sidebarnav-active-icon; }
}
&.active a {
background: @color-sidebarnav-active-bg;
text-shadow: 1px 1px 0 rgba(0,0,0,.2);
> i {
text-shadow: none;
}
}
span.counter {
display: block;
position: absolute;

14
modules/backend/layouts/_mainmenu.htm
View File

@ -10,13 +10,13 @@
<?= $activeItem ? e(trans($activeItem->label)) : 'CMS' ?>
</a>
<ul class="nav">
<ul class="nav mainmenu-nav">
<?php foreach (BackendMenu::listMainMenuItems() as $item): ?>
<?php
$isActive = BackendMenu::isMainMenuItemActive($item);
?>
<li class="<?= $isActive ? 'active' : null ?> svg-icon-container svg-active-effects with-tooltip">
<a href="<?= $item->url ?>" title="<?= e(trans($item->label)) ?>">
<li class="<?= $isActive ? 'active' : null ?> svg-icon-container svg-active-effects">
<a href="<?= $item->url ?>">
<span class="nav-icon">
<?php if ($item->iconSvg): ?>
<img class="svg-icon" src="<?= URL::asset($item->iconSvg) ?>">
@ -34,8 +34,8 @@
</div>
</div>
<div class="toolbar-item" data-calculate-width>
<ul>
<li class="icon preview with-tooltip">
<ul class="mainmenu-toolbar">
<li class="mainmenu-preview icon-only with-tooltip">
<a
href="<?= URL::to('/') ?>"
target="_blank"
@ -43,9 +43,9 @@
<i class="icon-crosshairs"></i>
</a>
</li>
<li class="highlight account">
<li class="mainmenu-account highlight">
<a href="javascript:;" onclick="$.oc.layout.toggleAccountMenu(this)">
<img src="<?= $this->user->getAvatarThumb(35, ['extension' => 'png']) ?>">
<img src="<?= $this->user->getAvatarThumb(80, ['mode' => 'crop', 'extension' => 'png']) ?>">
<span class="hidden-xs">
<?= e($this->user->first_name.' '.$this->user->last_name) ?>
</span>

2
modules/backend/layouts/_sidenav.htm
View File

@ -7,7 +7,7 @@
$sideMenuItems = BackendMenu::listSideMenuItems();
?>
<?php if ($sideMenuItems): ?>
<div class="layout-cell width-140">
<div class="layout-cell width-130">
<div class="layout-relative">
<nav class="layout-sidenav" id="layout-sidenav" data-control="sidenav">
<ul class="nav">