From fbedc9c0b91e1c80b6d94906db2f0523255e3f83 Mon Sep 17 00:00:00 2001
From: Julien Banken <jbn@odoo.com>
Date: Wed, 29 Sep 2021 13:26:17 +0000
Subject: [PATCH] [IMP] website: improve the visitor kanban card of the website
 module

On the page 'Visitors' page of the website module (backend), the cards
can be miss-aligned on small screen size. To improve the responsiveness
of the cards, we will use the `col` and `col-*` classes of Bootstrap
with some specific breakpoints (e.g. `col-sm-*`, `col-lg-*`, etc). We
will also use flex display to reduce the number of custom css rules.

task-2524363

closes odoo/odoo#73355

Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
---
 .../src/scss/website_visitor_views.scss       | 21 +-------
 .../website/views/website_visitor_views.xml   | 48 ++++++++++---------
 .../views/website_visitor_views.xml           |  6 +--
 .../views/website_visitor_views.xml           | 15 +++---
 4 files changed, 36 insertions(+), 54 deletions(-)

diff --git a/addons/website/static/src/scss/website_visitor_views.scss b/addons/website/static/src/scss/website_visitor_views.scss
index ee209181a50..1946d695340 100644
--- a/addons/website/static/src/scss/website_visitor_views.scss
+++ b/addons/website/static/src/scss/website_visitor_views.scss
@@ -4,30 +4,11 @@
         .o_wvisitor_kanban_card {
             width: 100%;
             margin: 0px;
+            padding: 0px;
             border-top: 0px !important;
             &:first-child {
                 border-bottom: 1px solid #dee2e6 !important;
             }
-            .o_kanban_detail_ungrouped {
-                .o_wvisitor_kanban_image {
-                    width: 56px;
-                    height: 56px;
-                    top: 0px;
-                    position: absolute;
-                }
-                .o_wvisitor_name {
-                    padding-left: 72px;
-                }
-                .w_visitor_kanban_actions_ungrouped {
-                    button {
-                        float: right;
-                        margin: 4px;
-                    }
-                }
-                .o_country_flag {
-                    margin-right: 8px;
-                }
-            }
             .oe_kanban_details {
                 display:none !important;
             }
diff --git a/addons/website/views/website_visitor_views.xml b/addons/website/views/website_visitor_views.xml
index 4119e6d9f5b..6b0b46b0b96 100644
--- a/addons/website/views/website_visitor_views.xml
+++ b/addons/website/views/website_visitor_views.xml
@@ -95,45 +95,47 @@
                         <div class="oe_kanban_global_click o_wvisitor_kanban_card">
                             <!-- displayed in ungrouped mode -->
                             <div class="o_kanban_detail_ungrouped row mx-0">
-                                <div class="o_wvisitor_kanban_image">
-                                     <img t-if="record.partner_image.raw_value"
-                                        t-att-src="kanban_image('res.partner', 'avatar_128', record.partner_id.raw_value)"
-                                        width="54px" height="54px" alt="Visitor"/>
-                                     <img t-else=""
-                                        t-attf-src="/base/static/img/avatar_grey.png"
-                                        width="54px" height="54px" alt="Visitor"/>
-                                </div>
-                                <div class="col o_wvisitor_name mr-2">
-                                    <div>
-                                        <b><field name="display_name"/></b>
-                                        <div class="float-right">
-                                            <span class="fa fa-circle text-success" t-if="record.is_connected.raw_value" aria-label="Online" title="Online"/>
-                                            <span class="fa fa-circle text-danger" t-else="" aria-label="Offline" title="Offline"/>
+                                <div class="col-lg-2 col-sm-8 col-12 py-0 my-2 my-lg-0">
+                                    <div class="d-flex">
+                                        <div class="o_wvisitor_kanban_image mr-3">
+                                            <img t-if="record.partner_image.raw_value"
+                                                t-att-src="kanban_image('res.partner', 'avatar_128', record.partner_id.raw_value)"
+                                                width="54px" height="54px" alt="Visitor"/>
+                                            <img t-else=""
+                                                t-attf-src="/base/static/img/avatar_grey.png"
+                                                width="54px" height="54px" alt="Visitor"/>
                                         </div>
-                                        <!-- Double check is necessary for sample view (or error image are shown) -->
-                                        <div t-if="record.country_id.raw_value and record.country_flag.raw_value">
-                                            <img t-att-src="record.country_flag.raw_value"
-                                               class="o_country_flag" alt="Country"/>
+                                        <div class="o_wvisitor_name d-flex flex-grow-1 flex-column my-0 my-lg-2">
+                                            <div class="d-flex align-items-start">
+                                                <b><field name="display_name"/></b>
+                                                <span t-if="record.is_connected.raw_value" class="fa fa-circle text-success ml-2 my-1" aria-label="Online" title="Online"/>
+                                                <span t-else="" class="fa fa-circle text-danger ml-2 my-1" aria-label="Offline" title="Offline"/>
+                                            </div>
+                                            <!-- Double check is necessary for sample view (or error image are shown) -->
+                                            <div t-if="record.country_id.raw_value and record.country_flag.raw_value">
+                                                <img t-att-src="record.country_flag.raw_value"
+                                                    class="o_country_flag" alt="Country"/>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
-                                <div class="col mx-2">
+                                <div class="col-lg col-sm-4 col-6 py-0 my-2">
                                     <b><field name="time_since_last_action"/></b>
                                     <div>Last Action</div>
                                 </div>
-                                <div class="col mx-2">
+                                <div class="col-lg col-sm-4 col-6 py-0 my-2">
                                     <b><field name="visit_count"/></b>
                                     <div>Visits</div>
                                 </div>
-                                <div class="col mx-2">
+                                <div class="col-lg col-sm-4 col-6 py-0 my-2">
                                     <b><field name="last_visited_page_id"/></b>
                                     <div>Last Page</div>
                                 </div>
-                                <div id="wvisitor_visited_page" class="col mx-2">
+                                <div id="wvisitor_visited_page" class="col-lg col-sm-4 col-6 py-0 my-2">
                                     <b><field name="page_count"/></b>
                                     <div>Visited Pages</div>
                                 </div>
-                                <div class="col-3 w_visitor_kanban_actions_ungrouped">
+                                <div class="w_visitor_kanban_actions_ungrouped col-lg-3 col-sm-12 py-0 my-2 text-lg-right">
                                     <button name="action_send_mail" type="object"
                                             class="btn btn-secondary border" attrs="{'invisible': [('email', '=', False)]}">
                                             Email
diff --git a/addons/website_crm/views/website_visitor_views.xml b/addons/website_crm/views/website_visitor_views.xml
index b4647d42b93..e5cf114f4a6 100644
--- a/addons/website_crm/views/website_visitor_views.xml
+++ b/addons/website_crm/views/website_visitor_views.xml
@@ -48,12 +48,12 @@
                 <field name="lead_count"/>
             </field>
             <xpath expr="//div[@id='o_page_count']" position="after">
-                <div>Leads/Opportunities<span class="float-right font-weight-bold"><field name="lead_count"/></span></div>
+                <div>Leads / Opportunities<span class="float-right font-weight-bold"><field name="lead_count"/></span></div>
             </xpath>
             <xpath expr="//div[@id='wvisitor_visited_page']" position="after">
-                <div class="col mx-2">
+                <div class="col-lg col-sm-4 col-6 py-0 my-2">
                     <b><field name="lead_count"/></b>
-                    <div>Leads/Opportunities</div>
+                    <div>Leads / Opportunities</div>
                 </div>
             </xpath>
         </field>
diff --git a/addons/website_livechat/views/website_visitor_views.xml b/addons/website_livechat/views/website_visitor_views.xml
index 7eb5947dc07..b0b16b6aa8d 100644
--- a/addons/website_livechat/views/website_visitor_views.xml
+++ b/addons/website_livechat/views/website_visitor_views.xml
@@ -52,22 +52,21 @@
                 </t>
             </xpath>
             <xpath expr="//div[hasclass('w_visitor_kanban_actions_ungrouped')]" position="before">
-                <div class="col mx-2">
-                    <b>
-                        <field name="session_count"/>
-                    </b>
+                <div class="col-lg col-sm-4 col-6 py-0 my-2">
+                    <b><field name="session_count"/></b>
                     <div>Chats</div>
                 </div>
-                <div class="col mx-2">
-                    <div t-if="record.livechat_operator_id.raw_value" class="font-weight-bold">
+                <div t-if="record.livechat_operator_id.raw_value" class="col-lg col-sm-4 col-6 py-0 my-2">
+                    <div>
                         <img name="livechat_operator_id"
                             class="oe_avatar rounded-circle" width="19" height="19"
                             t-attf-src="/web/image/res.partner/#{record.livechat_operator_id.raw_value}/avatar_128"
                             alt="Operator Avatar"/>
-                        <field name="livechat_operator_name"/>
+                        <b><field name="livechat_operator_name"/></b>
                     </div>
-                    <div t-if="record.livechat_operator_id.raw_value">Speaking With</div>
+                    <div>Speaking With</div>
                 </div>
+                <div t-else="" class="col-lg d-none d-lg-block"/>
             </xpath>
             <xpath expr="//div[hasclass('w_visitor_kanban_actions')]" position="inside">
                 <button name="action_send_chat_request" type="object"