mirror of https://github.com/OCA/web.git
New style in apps menu
scss file to change ui variables easily Deleted unnecesary padding remove unnecesary styles unnecesary styles align menu items to left again search results styles and fixes prettier configuration fix newline at end of file (variables.scss) text color calculation for navbar fix in img url requested fixes Transitions and focus fixes fix in js settimeout margin added in search-container Fix in transition Co-authored-by: Jairo Llopis <Yajo@users.noreply.github.com> Remove duplicated csspull/2058/head
Pablo Androetto
Sergey Shebanin
parent
98161e1134
commit
ad3b75b318
|
|
@ -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)",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="2000" height="1128" viewBox="0 0 2000 1128">
|
||||
<polygon fill-opacity=".03" points="0 1077.844 392.627 778.443 1504.99 1127.745 0 1127.745"/>
|
||||
<polygon fill-opacity=".02" points="392.216 778.443 283.294 0 0 0 0 666.504"/>
|
||||
<polygon fill-opacity=".03" points="1000 0 2000 1009.98 2000 439.94 1749.817 0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 366 B |
|
|
@ -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);
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</t>
|
||||
<!-- Search bar -->
|
||||
<t t-jquery="[t-as=app]" t-operation="before">
|
||||
<div class="search-container form-row align-items-center mb-4 col-12">
|
||||
<div class="search-container align-items-center col-12">
|
||||
<div class="search-input col-md-10 ml-auto mr-auto mb-2">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
|
|
@ -34,8 +34,8 @@
|
|||
class="form-control"
|
||||
/>
|
||||
</div>
|
||||
<div class="search-results ml-auto mr-auto rounded" />
|
||||
</div>
|
||||
<div class="search-results col-md-10 ml-auto mr-auto" />
|
||||
</div>
|
||||
</t>
|
||||
</t>
|
||||
|
|
|
|||
Loading…
Reference in New Issue