mirror of https://github.com/OCA/web.git
[IMP] Improve responsiveness in large screens: don't let the icons separate too much from each other
[FIX] Display of long search result items in mobile [IMP] AppMenu searchbar style [IMP] Add vertical padding to icons, to increase separation [IMP] Add focus style on app icons [IMP] Prevent user selection on menu [IMP] Prevent dragging the menuespull/2405/head
Ivàn Todorovich
anjeel.haria
parent
25c2ffbbe9
commit
9f962c4c1c
|
|
@ -4,3 +4,4 @@
|
|||
* Sergio Teruel <sergio.teruel@tecnativa.com>
|
||||
* Alexandre Díaz <dev@redneboa.es>
|
||||
* Mathias Markl <mathias.markl@mukit.at>
|
||||
* Iván Todorovich <ivan.todorovich@gmail.com>
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ $chatter_zone_width: 35%;
|
|||
display: flex;
|
||||
|
||||
.navbar-toggler {
|
||||
color: white;
|
||||
color: gray("white");
|
||||
}
|
||||
|
||||
.o_menu_sections,
|
||||
|
|
@ -144,9 +144,7 @@ $chatter_zone_width: 35%;
|
|||
}
|
||||
// Iconized full screen apps menu
|
||||
.o_menu_apps {
|
||||
.search-input:focus {
|
||||
border-color: $o-brand-primary;
|
||||
}
|
||||
user-select: none;
|
||||
|
||||
a.full {
|
||||
width: $o-navbar-height;
|
||||
|
|
@ -181,23 +179,32 @@ $chatter_zone_width: 35%;
|
|||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding: {
|
||||
left: 20vw;
|
||||
right: 20vw;
|
||||
left: calc((100vw - 850px) / 2);
|
||||
right: calc((100vw - 850px) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
.o_app {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
padding: 10px 0;
|
||||
border-radius: 4px;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
background: none;
|
||||
transition: 300ms ease;
|
||||
transition-property: background-color;
|
||||
|
||||
img {
|
||||
box-shadow: none;
|
||||
transition: 300ms ease;
|
||||
transition-property: box-shadow, transform;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
background-color: rgba(gray("white"), 0.05);
|
||||
}
|
||||
|
||||
// Size depends on screen
|
||||
width: 33.33333333%;
|
||||
@include media-breakpoint-up(sm) {
|
||||
|
|
@ -210,7 +217,7 @@ $chatter_zone_width: 35%;
|
|||
|
||||
.o_app:hover img {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 9px 12px -4px rgba(0, 0, 0, 0.3);
|
||||
box-shadow: 0 9px 12px -4px rgba(gray("black"), 0.3);
|
||||
}
|
||||
|
||||
// Hide app icons when searching
|
||||
|
|
@ -224,10 +231,10 @@ $chatter_zone_width: 35%;
|
|||
}
|
||||
|
||||
.o-app-name {
|
||||
color: white;
|
||||
color: gray("white");
|
||||
margin-top: 4px;
|
||||
font-size: 1.25rem;
|
||||
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4);
|
||||
text-shadow: 1px 1px 1px rgba(gray("black"), 0.4);
|
||||
}
|
||||
// Search input for menus
|
||||
.form-row {
|
||||
|
|
@ -240,20 +247,61 @@ $chatter_zone_width: 35%;
|
|||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding-left: 3rem;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
margin-bottom: 1.5rem;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1.5rem;
|
||||
|
||||
.search-input {
|
||||
margin-bottom: 0 !important;
|
||||
padding: 0;
|
||||
|
||||
.input-group {
|
||||
box-shadow: inset 0 1px 0 rgba(gray("white"), 0.1),
|
||||
0 1px 0 rgba(gray("black"), 0.1);
|
||||
text-shadow: 0 1px 0 rgba(gray("black"), 0.5);
|
||||
border-radius: 4px;
|
||||
padding: 0.4rem 0.8rem;
|
||||
background-color: rgba(gray("white"), 0.1);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: 0.8rem 1.2rem;
|
||||
}
|
||||
|
||||
.input-group-prepend {
|
||||
span.fa {
|
||||
color: gray("white");
|
||||
font-size: 1.5rem;
|
||||
margin-right: 1rem;
|
||||
padding-top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
height: 2rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: gray("white");
|
||||
display: block;
|
||||
padding: 1px 2px 2px 2px;
|
||||
box-shadow: none;
|
||||
|
||||
&::placeholder {
|
||||
color: gray("white");
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Allow to scroll only on results, keeping static search box above
|
||||
.search-container.has-results {
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
.search-results {
|
||||
max-height: calc(100vh - 47px - 4em);
|
||||
max-height: calc(100vh - 47px - 6em);
|
||||
overflow-y: hidden;
|
||||
overflow-x: scroll;
|
||||
overflow: auto;
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
<attribute
|
||||
name="t-attf-href"
|
||||
>#menu_id=#{app.menuID}&action_id=#{app.actionID}</attribute>
|
||||
<attribute name="draggable">false</attribute>
|
||||
</t>
|
||||
<!-- App icons should be more than a text -->
|
||||
<t t-jquery=".o_app > t" t-operation="replace">
|
||||
|
|
@ -20,12 +21,10 @@
|
|||
<!-- Search bar -->
|
||||
<t t-jquery="[t-as=app]" t-operation="before">
|
||||
<div class="search-container align-items-center col-12">
|
||||
<div class="search-input col-md-10 ml-auto mr-auto mb-2">
|
||||
<div class="search-input">
|
||||
<div class="input-group">
|
||||
<div class="input-group-prepend">
|
||||
<div class="input-group-text">
|
||||
<i class="fa fa-search" />
|
||||
</div>
|
||||
<span class="fa fa-search" />
|
||||
</div>
|
||||
<input
|
||||
type="search"
|
||||
|
|
@ -43,6 +42,7 @@
|
|||
<t t-name="web_responsive.AppIcon">
|
||||
<img
|
||||
class="o-app-icon"
|
||||
draggable="false"
|
||||
t-attf-src="data:image/png;base64,#{app.web_icon_data}"
|
||||
/>
|
||||
<span class="o-app-name">
|
||||
|
|
@ -60,6 +60,7 @@
|
|||
t-att-data-menu-id="menu.id"
|
||||
t-att-data-action-id="menu.action_id"
|
||||
t-att-data-parent-id="menu.parent_id[0]"
|
||||
draggable="false"
|
||||
t-raw="result.string"
|
||||
/>
|
||||
</t>
|
||||
|
|
|
|||
Loading…
Reference in New Issue