[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 menues

web_responsive/readme/CONTRIBUTORS.rst

@@ -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>

web_responsive/static/src/css/web_responsive.scss

@@ -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 {
+    user-select: none;
-        border-color: $o-brand-primary;
-    }
 
     a.full {
         width: $o-navbar-height;
@@ -181,23 +179,32 @@ $chatter_zone_width: 35%;
 
         @include media-breakpoint-up(lg) {
             padding: {
-                left: 20vw;
+                left: calc((100vw - 850px) / 2);
-                right: 20vw;
+                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;

web_responsive/static/src/xml/apps.xml

@@ -8,6 +8,7 @@
             <attribute
                 name="t-attf-href"
             >#menu_id=#{app.menuID}&amp;action_id=#{app.actionID}</attribute>
+            <attribute name="draggable">false</attribute>
         </t>
         <!-- App icons should be more than a text -->
         <t t-jquery=".o_app &gt; 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">
+                            <span class="fa fa-search" />
-                                <i class="fa fa-search" />
-                            </div>
                         </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>