diff --git a/web_responsive/__manifest__.py b/web_responsive/__manifest__.py index 2ff39a827..4e77e78d9 100644 --- a/web_responsive/__manifest__.py +++ b/web_responsive/__manifest__.py @@ -6,7 +6,7 @@ { "name": "Web Responsive", "summary": "Responsive web client, community-supported", - "version": "13.0.2.1.0", + "version": "13.0.2.2.0", "category": "Website", "website": "https://github.com/OCA/web", "author": "LasLabs, Tecnativa, " "Odoo Community Association (OCA)", diff --git a/web_responsive/static/src/css/web_responsive.scss b/web_responsive/static/src/css/web_responsive.scss index 0c5b162d2..617f6b56f 100644 --- a/web_responsive/static/src/css/web_responsive.scss +++ b/web_responsive/static/src/css/web_responsive.scss @@ -9,8 +9,8 @@ $chatter_zone_width: 35%; display: flex; flex-direction: column; height: calc(100vh - #{$o-navbar-height}); - max-height: calc(100vh - #{$o-navbar-height}); position: fixed; + margin: 0; width: 100vw; z-index: 100; // Inline style will override our `top`, so we need !important here @@ -131,16 +131,47 @@ $chatter_zone_width: 35%; } } } +.o_main_navbar { + color: color-yiq($o-brand-odoo); + > ul > li > a, + > ul > li > label { + color: color-yiq($o-brand-odoo); + } + .dropdown-menu.show { + max-height: calc(100vh - #{$o-navbar-height}); + } +} // Iconized full screen apps menu .o_menu_apps { .search-input:focus { border-color: $o-brand-primary; } + a.full { + width: $o-navbar-height; + text-align: center; + } + .dropdown-menu.show { + opacity: 1; + visibility: visible; + } + + .dropdown-menu { @include full-screen-dropdown(); + opacity: 0; + visibility: hidden; + transition: visibility 100ms ease, opacity 100ms ease; + background: url("../img/home-menu-bg-overlay.svg"), + linear-gradient( + to bottom, + $o-brand-odoo, + desaturate(lighten($o-brand-odoo, 20%), 15) + ); + background-size: cover; + border-radius: 0; // Display apps in a grid align-content: flex-start; display: flex; @@ -160,6 +191,12 @@ $chatter_zone_width: 35%; display: flex; flex-direction: column; justify-content: flex-start; + background: none; + img { + box-shadow: none; + transition: 300ms ease; + transition-property: box-shadow, transform; + } // Size depends on screen width: 33.33333333%; @@ -171,6 +208,11 @@ $chatter_zone_width: 35%; } } + .o_app:hover img { + transform: translateY(-3px); + box-shadow: 0 9px 12px -4px rgba(0, 0, 0, 0.3); + } + // Hide app icons when searching .has-results ~ .o_app { display: none; @@ -178,9 +220,15 @@ $chatter_zone_width: 35%; .o-app-icon { height: auto; - max-width: 7rem; + max-width: 6rem; } + .o-app-name { + color: white; + margin-top: 4px; + font-size: 1.25rem; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4); + } // Search input for menus .form-row { width: 100%; @@ -197,17 +245,22 @@ $chatter_zone_width: 35%; white-space: normal; } + .search-container { + margin-bottom: 1.5rem; + } // Allow to scroll only on results, keeping static search box above .search-container.has-results { height: 100%; - - .search-input { - height: 3em; - } - + margin-bottom: 0; .search-results { - height: calc(100% - 3em); + max-height: calc(100vh - 47px - 4em); + overflow-y: hidden; + overflow-x: scroll; overflow: auto; + background: url("../img/home-menu-bg-overlay.svg"), + linear-gradient(to bottom, gray("200"), gray("white")); + background-position: center; + background-size: cover; } } } diff --git a/web_responsive/static/src/img/home-menu-bg-overlay.svg b/web_responsive/static/src/img/home-menu-bg-overlay.svg new file mode 100644 index 000000000..b9fe251bc --- /dev/null +++ b/web_responsive/static/src/img/home-menu-bg-overlay.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/web_responsive/static/src/js/web_responsive.js b/web_responsive/static/src/js/web_responsive.js index e32032a0f..244c867a6 100644 --- a/web_responsive/static/src/js/web_responsive.js +++ b/web_responsive/static/src/js/web_responsive.js @@ -172,7 +172,8 @@ odoo.define("web_responsive", function(require) { */ _searchFocus: function() { if (!config.device.isMobile) { - this.$search_input.focus(); + // This timeout is necessary since the menu has a 100ms fading animation + setTimeout(() => this.$search_input.focus(), 100); } }, diff --git a/web_responsive/static/src/xml/apps.xml b/web_responsive/static/src/xml/apps.xml index 1f194ae0f..f64535d93 100644 --- a/web_responsive/static/src/xml/apps.xml +++ b/web_responsive/static/src/xml/apps.xml @@ -19,7 +19,7 @@ - + @@ -34,8 +34,8 @@ class="form-control" /> + -