mirror of
https://github.com/OCA/web.git
synced 2025-02-22 13:21:25 +02:00
Web responsive menu improvements (#513)
* Bold titles for apps in the app-drawer * Remove z-index from Control Panel buttons, so it doesn't overlap the menu. * Better responsive menus * Move systray icons/menus out of the menu and up to the top bar. * Increase avatar size and visibility. * Other minor menu behavior fixes. * Changes to fit odoo variables * And a little margin adjust on navbar-right * Top menu always thick * Removed overflow:hidden!important from main.less * Local patch: prevent body overflow auto * Stop using `style=` on `<body>` * Fix jquery drawer in anticipation of: https://github.com/blivesta/drawer/pull/36
This commit is contained in:
Daniel Torres
committed by
Angel Moya Pardo
Angel Moya Pardo
parent
cb95d5e815
commit
a620134d47
@@ -1,33 +1,178 @@
|
||||
/* Copyright 2016 LasLabs Inc.
|
||||
* License LGPL-3.0 or later (http://www.gnu.org/licenses/lgpl). */
|
||||
|
||||
.main-nav {
|
||||
header {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
margin-bottom: 0;
|
||||
min-height: @app-drawer-navbar-height;
|
||||
z-index: 1;
|
||||
border: none;
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: @navbar-padding-horizontal / 2;
|
||||
}
|
||||
|
||||
ul.nav > li > a {
|
||||
padding: @app-drawer-navbar-padding-vertical @app-drawer-padding-horizontal;
|
||||
}
|
||||
|
||||
}
|
||||
> .main-nav {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
|
||||
.oe_topbar_avatar {
|
||||
margin-top: -@app-drawer-padding-horizontal;
|
||||
height: @app-drawer-navbar-height;
|
||||
border-radius: 50%;
|
||||
.navbar-systray {
|
||||
white-space: nowrap;
|
||||
@media (max-width: @screen-xs-max) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 56px;
|
||||
}
|
||||
> .oe_user_menu_placeholder > li > a {
|
||||
> .oe_topbar_avatar {
|
||||
border-radius: 50%;
|
||||
margin-top: -8px;
|
||||
max-height: 36px;
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
}
|
||||
.oe_topbar_name {
|
||||
position: relative;
|
||||
top: -3px;
|
||||
@media (max-width: @screen-xs-max) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.caret {
|
||||
position: relative;
|
||||
top: -3.5px;
|
||||
}
|
||||
}
|
||||
> .oe_systray > li > a {
|
||||
.fa {
|
||||
position: relative;
|
||||
top: 3px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.caret {
|
||||
position: relative;
|
||||
top: 0.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-right {
|
||||
float: right;
|
||||
> li {
|
||||
float: left;
|
||||
}
|
||||
@media (max-width: @screen-xs-max) {
|
||||
.navbar-nav .open .dropdown-menu {
|
||||
position: fixed;
|
||||
top: 46px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: auto;
|
||||
float: left;
|
||||
background-color: @odoo-view-background-color;
|
||||
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container-fluid:before, .container-fluid:after, .navbar-collapse:before, .navbar-collapse:after {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
> .container-fluid {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
> .navbar-collapse {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
&.collapsing {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .navbar-header {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
> .drawer-toggle, .navbar-toggle {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 1px solid @nav-tabs-active-link-hover-border-color;
|
||||
> i.fa, div.fa {
|
||||
padding: 16px 14px 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.o_sub_menu > .o_sub_menu_content > .oe_secondary_menu {
|
||||
ul.dropdown-menu > li.dropdown-header {
|
||||
color: @odoo-view-background-color;
|
||||
text-decoration: none;
|
||||
background-color: @odoo-main-color-muted;
|
||||
font-weight: bold;
|
||||
}
|
||||
@media (min-width: @screen-sm-min) {
|
||||
height: @navbar-height;
|
||||
}
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
> li {
|
||||
@media (min-width: @screen-sm-min) {
|
||||
height: @navbar-height;
|
||||
}
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
&.app-name {
|
||||
display: block;
|
||||
padding: 7px 8px;
|
||||
> .oe_menu_text {
|
||||
font-size: 20px;
|
||||
}
|
||||
@media (min-width: @screen-sm-min) {
|
||||
padding: 8.5px 12px;
|
||||
}
|
||||
}
|
||||
> a {
|
||||
margin: 0;
|
||||
@media (min-width: @screen-sm-min) {
|
||||
height: @navbar-height;
|
||||
padding: 14px 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .navbar-right.o_menu_systray {
|
||||
display: inline;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
> ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
> li > a {
|
||||
margin: 0;
|
||||
padding: 13px 8px;
|
||||
height: @navbar-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: @navbar-padding-horizontal / 2;
|
||||
}
|
||||
|
||||
ul.nav > li > a {
|
||||
padding: @app-drawer-navbar-padding-vertical @app-drawer-padding-horizontal;
|
||||
}
|
||||
|
||||
.o_planner_systray > .progress {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.navbar-collapse.collapse {
|
||||
@media (min-width: @screen-sm) {
|
||||
@media (min-width: @screen-sm-min) {
|
||||
padding-bottom: @app-drawer-navbar-padding-vertical;
|
||||
padding-top: @app-drawer-navbar-padding-vertical;
|
||||
}
|
||||
@@ -36,11 +181,3 @@ a.navbar-collapse.collapse {
|
||||
.dropdown-scrollable {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: @screen-xs-max) {
|
||||
#odooMenuBarNav[aria-expanded="false"] {
|
||||
/* Hack to hide the visibly expanded mobile menu on load. */
|
||||
position: absolute;
|
||||
z-index: -9999;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user