pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] website: improve the visitor kanban card of the website module

Browse Source 
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>
This commit is contained in:
Julien Banken
2021-10-05 12:35:52 +00:00
parent 71213bdb77
commit fbedc9c0b9
4 changed files with 36 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/scss/website_visitor_views.scss
+1 -20
View File
@@ -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;
}
addons/website/views/website_visitor_views.xml
+25 -23
View File
@@ -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
addons/website_crm/views/website_visitor_views.xml
+3 -3
View File
@@ -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>
addons/website_livechat/views/website_visitor_views.xml
+7 -8
View File
@@ -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"