From 1efdb96227dab8f1b3bcb8e8854dbad5dd874e69 Mon Sep 17 00:00:00 2001
From: "Antoine (anso)" <anso@odoo.com>
Date: Fri, 20 Jan 2023 14:30:19 +0000
Subject: [PATCH] [IMP] website_customer: layout improvements

The structure of this module was adapted
as it was broken and not appealing:

- Text alignments and font sizes were improved
- Card structure instead of a list
- Filters and search are now grouped on top and take less space in
the page

A specific mobile view for the filters was implemented off canvas as
the current one was not optimized.

All these changes were made to make this module more consistent with
the rest of the front-end modules.

The option to show the map is now visible/not visible depending on if
the database contains a google maps API

task-3083706

Part-of: odoo/odoo#109752
---
 addons/website_customer/models/res_partner.py |   4 +-
 addons/website_customer/views/snippets.xml    |  12 +-
 .../views/website_customer_templates.xml      | 374 +++++++++++-------
 3 files changed, 243 insertions(+), 147 deletions(-)

diff --git a/addons/website_customer/models/res_partner.py b/addons/website_customer/models/res_partner.py
index 24592b3965b..61a5556fc19 100644
--- a/addons/website_customer/models/res_partner.py
+++ b/addons/website_customer/models/res_partner.py
@@ -22,12 +22,12 @@ class Tags(models.Model):
 
     @api.model
     def get_selection_class(self):
-        classname = ['default', 'primary', 'success', 'warning', 'danger']
+        classname = ['light', 'primary', 'success', 'warning', 'danger']
         return [(x, str.title(x)) for x in classname]
 
     name = fields.Char('Category Name', required=True, translate=True)
     partner_ids = fields.Many2many('res.partner', 'res_partner_res_partner_tag_rel', 'tag_id', 'partner_id', string='Partners')
-    classname = fields.Selection('get_selection_class', 'Class', default='default', help="Bootstrap class to customize the color", required=True)
+    classname = fields.Selection('get_selection_class', 'Class', default='light', help="Bootstrap class to customize the color", required=True)
     active = fields.Boolean('Active', default=True)
 
     def _default_is_published(self):
diff --git a/addons/website_customer/views/snippets.xml b/addons/website_customer/views/snippets.xml
index c21fd8955e6..a524999ab69 100644
--- a/addons/website_customer/views/snippets.xml
+++ b/addons/website_customer/views/snippets.xml
@@ -3,7 +3,7 @@
 
 <template id="snippet_options" inherit_id="website.snippet_options" name="Customer Snippet Options">
     <xpath expr="." position="inside">
-        <div data-selector="main:has(#ref_left_column)" data-page-options="true" groups="website.group_website_designer" data-no-check="true" string="References Page">
+        <div data-selector=".o_wcrm_filters_top" data-page-options="true" groups="website.group_website_designer" data-no-check="true" string="References Page">
             <we-checkbox string="Countries Filter"
                          data-customize-website-views="website_customer.opt_country_list"
                          data-no-preview="true"
@@ -16,10 +16,12 @@
                          data-customize-website-views="website_customer.opt_tag_list"
                          data-no-preview="true"
                          data-reload="/"/>
-            <we-checkbox string="Show Map"
-                         data-customize-website-views="website_customer.opt_country"
-                         data-no-preview="true"
-                         data-reload="/"/>
+            <t t-if="google_maps_api_key">
+                <we-checkbox string="Show Map"
+                            data-customize-website-views="website_customer.opt_country"
+                            data-no-preview="true"
+                            data-reload="/"/>
+            </t>
         </div>
     </xpath>
 </template>
diff --git a/addons/website_customer/views/website_customer_templates.xml b/addons/website_customer/views/website_customer_templates.xml
index ee5310d7e46..4dc17b59071 100644
--- a/addons/website_customer/views/website_customer_templates.xml
+++ b/addons/website_customer/views/website_customer_templates.xml
@@ -4,66 +4,163 @@
 <template id="index" name="Our References">
     <t t-call="website.layout">
         <div id="wrap">
-            <div class="oe_structure">
-                <section>
-                    <h1 class="text-center">
-                        Our References
-                    </h1><h2 class="text-center text-muted">
-                        Trusted by millions worldwide
-                    </h2>
-                </section>
-            </div>
-            <div class="container">
-                <div class="row">
-                    <div class="col-lg-3 mb32" id="ref_left_column">
+            <div class="container my-4"> 
+                <div class="o_wcrm_filters_top d-flex d-print-none align-items-center justify-content-end flex-wrap gap-2 w-100">
+                    <h4 class="my-0 me-auto pe-sm-4">Our references</h4>
+                    <div class="o_wcrm_search d-flex w-100 w-lg-auto">
+                        <form action="" method="get" class="flex-grow-1">
+                            <div class="input-group" role="search">
+                                <input type="text" name="search" class="search-query form-control border-0 bg-light" placeholder="Search" t-att-value="post.get('search', '')"/>                           
+                                <button type="submit" aria-label="Search" title="Search" class="oe_search_button btn btn-light">
+                                    <i class="oi oi-search"/>
+                                </button>
+                            </div>
+                        </form>
+                        <button class="btn btn-light position-relative ms-2 d-lg-none"
+                            data-bs-toggle="offcanvas"
+                            data-bs-target="#o_wc_offcanvas">
+                            <i class="fa fa-sliders"/>
+                        </button>
                     </div>
-                    <div class="col-lg-8 offset-lg-1" id="ref_content">
-                        <div class='d-flex m-2'>
-                            <t t-call="website.pager">
-                               <t t-set="classname" t-value="'float-start'"/>
-                            </t>
-                            <form action="" method="get" class="navbar-search ms-auto pagination">
-                                <div class="mb-3">
-                                    <input type="text" name="search" class="search-query form-control"
-                                        placeholder="Search" t-att-value="post.get('search', '')"/>
+                </div>
+                <!-- Off canvas filters on mobile-->
+                <div id="o_wc_offcanvas" class="o_website_offcanvas offcanvas offcanvas-end d-lg-none p-0 overflow-visible">
+                    <div class="offcanvas-header">
+                        <h5 class="offcanvas-title">Filters</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"/>
+                    </div>
+                    <div class="offcanvas-body p-0">
+                        <div class="accordion accordion-flush">
+                            <div class="accordion-item">
+                                <h2 class="accordion-header">
+                                    <button class="accordion-button border-top collapsed"
+                                        type="button"
+                                        data-bs-toggle="collapse"
+                                        data-bs-target=".o_wc_offcanvas_industry"
+                                        aria-expanded="false"
+                                        aria-controls="wc_offcanvas_industry">
+                                        Filter by Industry
+                                    </button>
+                                </h2>
+                                <div class="o_wc_offcanvas_industry accordion-collapse collapse">
+                                    <div class="accordion-body pt-0">
+                                        <ul class="list-group list-group-flush">
+                                            <t t-foreach="industries" t-as="industry_dict">
+                                                <t t-if="industry_dict['industry_id']">
+                                                    <li class="list-group-item d-flex justify-content-between align-items-center ps-0 pb-0 border-0">
+                                                        <a t-attf-href="/customers/#{ industry_dict['industry_id'][0] and 'industry/%s/' % slug(industry_dict['industry_id']) or '' }#{ current_country_id and 'country/%s' % current_country_id or '' }#{ search_path }" 
+                                                            class="text-reset" aria-label="See industries filters">
+                                                            <div class="form-check">
+                                                                <input class="form-check-input" type="radio" t-attf-name="#{industry_dict['industry_id'][1]}" t-att-checked="industry_dict['industry_id'][0] == current_industry_id and true or false"/>
+                                                                <label class="form-check-label" t-attf-for="#{industry_dict['industry_id'][1]}" t-out="industry_dict['industry_id'][1]"/>
+                                                            </div>
+                                                        </a>
+                                                    </li>
+                                                </t>
+                                            </t>
+                                        </ul>
+                                    </div>
                                 </div>
-                            </form>
+                            </div>
+                            <div class="accordion-item">
+                                <h2 class="accordion-header">
+                                    <button class="accordion-button border-top collapsed"
+                                        type="button"
+                                        data-bs-toggle="collapse"
+                                        data-bs-target=".o_wc_offcanvas_country"
+                                        aria-expanded="false"
+                                        aria-controls="offcanvas_country">
+                                        Filter by Country
+                                    </button>
+                                </h2>
+                                <div class="o_wc_offcanvas_country accordion-collapse collapse">
+                                    <div class="accordion-body pt-0">
+                                        <ul class="list-group list-group-flush ">
+                                            <t t-foreach="countries" t-as="country_dict">
+                                                <t t-if="country_dict['country_id']">
+                                                    <li class="list-group-item d-flex justify-content-between align-items-center ps-0 pb-0 border-0">
+                                                        <a t-attf-href="/customers/#{ current_industry_id and 'industry/%s/' % slug(current_industry) or '' }#{ country_dict['country_id'][0] and 'country/%s' % slug(country_dict['country_id']) or '' }#{ search_path }"
+                                                            class="text-reset" aria-label="See countries filters">
+                                                            <div class="form-check">
+                                                                <input class="form-check-input" type="radio" t-attf-name="{country_dict['country_id'][1]}" t-att-checked="country_dict['country_id'][0] == current_country_id and true or false"/>
+                                                                <label class="form-check-label" t-attf-for="{country_dict['country_id'][1]}" t-out="country_dict['country_id'][1]"/>
+                                                            </div>
+                                                        </a>
+                                                    </li>
+                                                </t>
+                                            </t>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="accordion-item" t-if="len(tags)">
+                                <h2 class="accordion-header">
+                                    <button class="accordion-button border-top collapsed"
+                                        type="button"
+                                        data-bs-toggle="collapse"
+                                        data-bs-target=".o_wc_offcanvas_tags"
+                                        aria-expanded="false"
+                                        aria-controls="o_wc_offcanvas_tags">
+                                        Filter by Tags
+                                    </button>
+                                </h2>
+                                <div class="o_wc_offcanvas_tags accordion-collapse collapse">
+                                    <div class="accordion-body">
+                                        <div class="d-flex flex-wrap align-items-center gap-1 mb-4" t-if="len(tags)">
+                                            <a class="me-2" t-attf-href="/customers/#{ current_industry_id and 'industry/%s/' % slug(current_industry) or '' }#{ current_country_id and 'country/%s' % slug(current_country) or '' }">
+                                                <span class="fa fa-1x fa-tags"/> All </a>
+                                            <t t-foreach="tags" t-as="o_tag">
+                                                <a t-attf-class="bg-#{o_tag.classname} badge" t-out="o_tag.name" t-att-style="tag and tag.id==o_tag.id and 'text-decoration: underline'"
+                                                t-attf-href="/customers/#{ current_industry_id and 'industry/%s/' % slug(current_industry) or '' }#{ current_country_id and 'country/%s' % slug(current_country) or '' }?tag_id=#{slug(o_tag)}"/>
+                                            </t>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
-
-                        <div>
-
-                    <p t-if="not partners">No result found</p>
+                    </div>
+                </div>
+                <div class="row mt-4">
+                    <div class="my-5 py-5 text-center" t-if="not partners">
+                        <h5>No results found for "<span t-out="post.get('search', '')"/>"</h5>
+                        <a href="/customers">See all customers</a>
+                    </div>
                     <t t-foreach="partners" t-as="partner">
-                        <div class="d-flex mt-3">
-                            <a t-attf-href="/customers/#{slug(partner)}"
-                               t-field="partner.avatar_128"
-                               class="d-block me-3 text-center o_width_128"
-                               t-options='{"widget": "image", "qweb_img_responsive": False, "class": "o_image_128_max"}'
-                            ></a>
-                            <div class="flex-grow-1" style="min-height: 64px;">
-                                <a t-attf-href="/customers/#{slug(partner)}">
-                                    <span t-field="partner.display_name"/>
+                        <div class="col-md-4 col-xl-3 col-12 mb-4">
+                            <div class="card h-100 text-decoration-none">
+                                <a class="text-decoration-none" t-attf-href="/customers/#{slug(partner)}" aria-label="Go to customer">
+                                    <div t-field="partner.avatar_1920"
+                                        class="card-img-top border-bottom"
+                                        t-options='{"widget": "image", "qweb_img_responsive": False, "class": "img img-fluid h-100 w-100 mw-100 object-fit-cover", "style": "max-height: 208px; object-fit: cover"}'
+                                    />
+                                    <div class="card-body">
+                                        <h5 class="card-title" t-field="partner.display_name"/>
+                                        <small class="o_wcrm_short_description text-muted overflow-hidden" t-field="partner.website_short_description"/>
+                                        <small t-if="not partner.website_short_description" class="css_editable_mode_hidden text-muted fst-italic" groups="website.group_website_restricted_editor">
+                                            Enter a short description
+                                        </small>
+                                        <t t-if="partner.industry_id">
+                                            <a class="badge mt-3 text-bg-secondary" t-attf-href="/customers/#{ 'industry/%s/' % slug(partner.industry_id) }#{ current_country_id and 'country/%s' % slug(current_country) or '' }" t-out="partner.industry_id.name"/>
+                                        </t>
+                                    </div>
                                 </a>
-                                <t t-if="partner.industry_id">
-                                    <a class="badge text-bg-secondary" t-attf-href="/customers/#{ 'industry/%s/' % slug(partner.industry_id) }#{ current_country_id and 'country/%s' % slug(current_country) or '' }" t-esc="partner.industry_id.name"/>
-                                </t>
-                                <div t-field="partner.website_short_description"/>
                             </div>
                         </div>
                     </t>
-                        </div>
-                    </div>
-
+                </div>
+                <div class="navbar">
+                    <t t-call="website.pager">
+                        <t t-set="classname" t-value="'mx-auto'"/>
+                    </t>
                 </div>
             </div>
-            <div class="oe_structure"/>
         </div>
     </t>
 </template>
 
-<!-- Option: left column: World Map -->
+<!-- Option: top filters: World Map -->
 <template id="opt_country" inherit_id="website_customer.index" name="Show Map">
-    <xpath expr="//div[@id='ref_left_column']" position="inside">
+    <xpath expr="//div[hasclass('o_wcrm_search')]" position="inside">
         <t t-if="google_maps_api_key">
             <!-- modal for large map -->
             <div role="dialog" class="modal fade customer_map_modal" tabindex="-1">
@@ -71,74 +168,80 @@
                 <div class="modal-content">
                     <header class="modal-header">
                         <h4 class="modal-title">World Map</h4>
-                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"/>
                     </header>
                     <iframe t-attf-src="/google_map/?width=898&amp;height=485&amp;partner_ids=#{ google_map_partner_ids }&amp;partner_url=/customers/"
-                    style="width:898px; height:485px; border:0; padding:0; margin:0;"></iframe>
+                    style="height:485px;"/>
                 </div>
               </div>
             </div>
             <!-- modal end -->
-            <h3>World Map<button class="btn btn-link" data-bs-toggle="modal" data-bs-target=".customer_map_modal"><span class="fa fa-external-link" role="img" aria-label="External link" title="External link"/></button></h3>
-            <ul class="nav">
-                <iframe t-attf-src="/google_map?width=260&amp;height=240&amp;partner_ids=#{ google_map_partner_ids }&amp;partner_url=/customers/"
-                    style="width:260px; height:240px; border:0; padding:0; margin:0;" scrolling="no"></iframe>
-            </ul>
+            <div class="btn-group ms-2">
+                <button class="btn btn-light border-primary active">
+                    <i class="fa fa-th-large"/>
+                </button>
+                <button class="btn btn-light" data-bs-toggle="modal" data-bs-target=".customer_map_modal">
+                    <i class="fa fa-map-marker" role="img" aria-label="Open map" title="Open map"/>
+                </button>
+            </div>
         </t>
     </xpath>
 </template>
 
 <template id="opt_industry_list" inherit_id="website_customer.index" name="Filter on Industry" priority="20">
-    <xpath expr="//div[@id='ref_left_column']" position="inside">
-        <h3>References by Industries</h3>
-        <ul class="nav nav-pills flex-column mt16 mb32">
-            <t t-foreach="industries" t-as="industry_dict">
-                <t t-if="industry_dict['industry_id']">
-                    <li class="nav-item">
-                        <a t-attf-href="/customers/#{ industry_dict['industry_id'][0] and 'industry/%s/' % slug(industry_dict['industry_id']) or '' }#{ current_country_id and 'country/%s' % current_country_id or '' }#{ search_path }"
-                           t-attf-class="nav-link#{industry_dict['industry_id'][0] == current_industry_id and ' active' or ''}">
-                            <span class="badge rounded-pill float-end" t-esc="industry_dict['industry_id_count'] or '0'"/>
-                            <t t-esc="industry_dict['industry_id'][1]"/>
-                        </a>
-                    </li>
+    <xpath expr="//div[hasclass('o_wcrm_search')]" position="before">
+        <div class="dropdown d-none d-lg-block">
+            <a role="button" href="#" data-bs-toggle="dropdown" t-attf-class="dropdown-toggle btn btn-light" aria-expanded="true" aria-label="Open industries dropdown">
+                <t t-foreach="industries" t-as="industry_dict">
+                    <label class="cursor-pointer" t-if="industry_dict['industry_id'] and industry_dict['industry_id'][0] == current_industry_id and true or false" t-out="industry_dict['industry_id'][1]"/>
                 </t>
-            </t>
-        </ul>
+            </a>
+            <div class="dropdown-menu">
+                <t t-foreach="industries" t-as="industry_dict">
+                    <t t-if="industry_dict['industry_id']">
+                        <a t-attf-href="/customers/#{ industry_dict['industry_id'][0] and 'industry/%s/' % slug(industry_dict['industry_id']) or '' }#{ current_country_id and 'country/%s' % current_country_id or '' }#{ search_path }"
+                        class="dropdown-item" t-out="industry_dict['industry_id'][1]"/>
+                    </t>
+                </t>
+            </div>
+        </div>
     </xpath>
 </template>
 
 <template id="opt_country_list" inherit_id="website_customer.index" name="Filter on Countries" priority="30">
-    <xpath expr="//div[@id='ref_left_column']" position="inside">
-        <h3>References by Country</h3>
-        <ul class="nav nav-pills flex-column mt16 mb32">
-            <t t-foreach="countries" t-as="country_dict">
-                <t t-if="country_dict['country_id']">
-                    <li class="nav-item">
-                        <a t-attf-href="/customers/#{ current_industry_id and 'industry/%s/' % slug(current_industry) or '' }#{ country_dict['country_id'][0] and 'country/%s' % slug(country_dict['country_id']) or '' }#{ search_path }"
-                           t-attf-class="nav-link#{country_dict['country_id'][0] == current_country_id and ' active' or ''}">
-                            <span class="badge rounded-pill float-end" t-esc="country_dict['country_id_count'] or '0'"/>
-                            <t t-esc="country_dict['country_id'][1]"/>
-                        </a>
-                    </li>
+    <xpath expr="//div[hasclass('o_wcrm_search')]" position="before">
+        <div class="dropdown d-none d-lg-block">
+            <a role="button" href="#" data-bs-toggle="dropdown" t-attf-class="dropdown-toggle btn btn-light" aria-expanded="true" aria-label="Open countries dropdown">
+                <t t-foreach="countries" t-as="country_dict">
+                    <label class="cursor-pointer" t-if="country_dict['country_id'] and current_country_id == country_dict['country_id'][0]">
+                        <t t-out="country_dict['country_id'][1]"/>
+                    </label>
                 </t>
-            </t>
-        </ul>
+            </a>
+            <div class="dropdown-menu">
+                <t t-foreach="countries" t-as="country_dict">
+                    <t t-if="country_dict['country_id']">
+                        <a t-attf-href="/customers/#{ current_industry_id and 'industry/%s/' % slug(current_industry) or '' }#{ country_dict['country_id'][0] and 'country/%s' % slug(country_dict['country_id']) or '' }#{ search_path }"
+                        class="dropdown-item" t-out="country_dict['country_id'][1]"/>
+                    </t>
+                </t>
+            </div>
+        </div>
     </xpath>
 </template>
 
 
 <template id="opt_tag_list" inherit_id="website_customer.index" name="Filter on Tags" priority="40">
-    <xpath expr="//div[@id='ref_left_column']" position="inside">
-
-        <h3 t-if="len(tags)">References by Tag</h3>
-        <ul class="nav nav-pills flex-column mt16 mb32" t-if="len(tags)">
-            <li class="nav-item"><a class="nav-link mr8" t-attf-href="/customers/#{ current_industry_id and 'industry/%s/' % slug(current_industry) or '' }#{ current_country_id and 'country/%s' % slug(current_country) or '' }">
-                <span class="fa fa-1x fa-tags"/> All </a></li>
-            <li t-foreach="tags" t-as="o_tag" class="nav-item">
-                <a t-attf-class="nav-link badge bg-#{o_tag.classname}" t-esc="o_tag.name" t-att-style="tag and tag.id==o_tag.id and 'text-decoration: underline'"
-                    t-attf-href="/customers/#{ current_industry_id and 'industry/%s/' % slug(current_industry) or '' }#{ current_country_id and 'country/%s' % slug(current_country) or '' }?tag_id=#{slug(o_tag)}"/>
-            </li>
-        </ul>
+    <xpath expr="//div[hasclass('o_wcrm_filters_top')]" position="after">
+        <div class="d-flex align-items-center gap-2 my-4" t-if="len(tags)">
+            <a class="badge text-bg-light" t-attf-href="/customers/#{ current_industry_id and 'industry/%s/' % slug(current_industry) or '' }#{ current_country_id and 'country/%s' % slug(current_country) or '' }">
+                <span class="fa fa-1x fa-tags"/> All 
+            </a>
+            <t t-foreach="tags" t-as="o_tag">
+                <a t-attf-class="text-bg-#{o_tag.classname} badge" t-out="o_tag.name" t-att-style="tag and tag.id==o_tag.id and 'text-decoration: underline'"
+                t-attf-href="/customers/#{ current_industry_id and 'industry/%s/' % slug(current_industry) or '' }#{ current_country_id and 'country/%s' % slug(current_country) or '' }?tag_id=#{slug(o_tag)}"/>
+            </t>
+        </div>
     </xpath>
 </template>
 
@@ -146,18 +249,12 @@
   <t t-call="website.layout">
     <div id="wrap">
         <div class="oe_structure" id="oe_structure_website_customer_details_1"/>
-        <div class="container mt16">
+        <div class="container my-4">
             <div class="row">
-                <div class="col-lg-5">
-                    <ol t-if="not edit_page" class="breadcrumb">
-                        <li class="breadcrumb-item"><a href="/customers">Our References</a></li>
-                        <li class="breadcrumb-item active"><span t-field="partner.display_name"/></li>
-                    </ol>
+                <div class="mb-3" t-if="not edit_page">
+                    <a t-attf-href="/customers" aria-label="Back to references list"><i class="fa fa-chevron-left me-2"/>Back to references</a>
                 </div>
                 <t t-call="website_partner.partner_detail">
-                    <t t-set="left_column">
-                        <div id="left_column"><t t-call="website_customer.implemented_by_block"/></div>
-                    </t>
                     <t t-set="right_column">
                         <div id="right_column"><t t-call="website_customer.references_block"/></div>
                     </t>
@@ -177,38 +274,31 @@
 </template>
 
 <template id="partner_detail" inherit_id="website_partner.partner_detail" name="Partner Details">
-    <xpath expr="//address" position="inside">
+    <xpath expr="//div[hasclass('o_wcrm_contact_details')]" position="inside">
         <t t-if="partner.industry_id">
-            <span class="badge text-bg-secondary"><t t-esc="partner.industry_id.name"/></span>
+            <span class="badge text-bg-secondary"><t t-out="partner.industry_id.name"/></span>
         </t>
     </xpath>
 </template>
 
 <template id="implemented_by_block" name="Partner Implemented By Block">
         <t t-if="partner.assigned_partner_id and partner.assigned_partner_id.website_published">
-            <div class="card">
-                <div class="card-header">
-                    <h4>Implemented By</h4>
+            <div class="d-flex align-items-center">
+                <div>
+                    <a t-attf-href="/partners/#{slug(partner.assigned_partner_id)}"
+                    t-field="partner.assigned_partner_id.avatar_128"
+                    class="d-block me-2 p-1 border rounded-circle shadow-sm"
+                    style="width: 42px; height: 42px"
+                    t-options='{"widget": "image", "qweb_img_responsive": False, "class": "img-fluid h-100 w-100 rounded-circle"}'
+                    />
                 </div>
-                <div class="card-body text-center">
-        <h4>
-            <a t-attf-href="/partners/#{slug(partner.assigned_partner_id)}">
-              <span t-field="partner.assigned_partner_id"/>
-              <span class="small"> (<t t-esc="len([p for p in partner.assigned_partner_id.implemented_partner_ids if p.website_published])"/> reference(s))</span>
-            </a>
-        </h4>
-        <div><a t-attf-href="/partners/#{slug(partner.assigned_partner_id)}"
-                t-field="partner.assigned_partner_id.avatar_128"
-                class="d-block"
-                t-options='{"widget": "image", "qweb_img_responsive": False, "class": "o_image_128_max"}'
-             />
-        </div>
-        <address class="text-start">
-             <div t-field="partner.assigned_partner_id" t-options='{
-                 "widget": "contact",
-                 "fields": ["address", "website", "phone", "email"]
-             }'/>
-        </address>
+                <div>
+                    <span class="small text-muted">Implemented by</span>
+                    <div>
+                        <a t-attf-href="/partners/#{slug(partner.assigned_partner_id)}">
+                            <span t-field="partner.assigned_partner_id"/>
+                        </a>
+                    </div>
                 </div>
             </div>
         </t>
@@ -217,21 +307,25 @@
 <template id="references_block" name="Partner References Block">
         <t t-if="any(p.website_published for p in partner.implemented_partner_ids)">
             <h3 id="references">References</h3>
-            <div t-foreach="partner.implemented_partner_ids" t-as="reference" class="d-flex mt-3">
-              <t t-if="reference.website_published">
-                <a t-attf-href="/customers/#{slug(reference)}">
-                    <span t-field="reference.avatar_128" class="d-block me-3 text-center o_width_128" t-options='{"widget": "image", "qweb_img_responsive": False, "class": "o_image_128_max"}'/>
-                </a>
-                <div class="flex-grow-1" style="min-height: 64px;">
-                    <a t-attf-href="/customers/#{slug(reference)}">
-                        <span t-field="reference.self"/>
-                    </a>
-                    <t t-if="reference.industry_id">
-                        <span class="badge text-bg-secondary"><t t-esc="reference.industry_id.name"/></span>
-                    </t>
-                    <div t-field='reference.website_short_description'/>
-                </div>
-              </t>
+            <div t-foreach="partner.implemented_partner_ids" t-as="reference" class="card mt-3 border-0">
+                <t t-if="reference.website_published">
+                    <div class="row">
+                        <div class="col-md-2">
+                            <span t-field="reference.avatar_128" 
+                                class="d-flex justify-content-center justify-content-center h-100" 
+                                t-options='{"widget": "image", "qweb_img_responsive": False, "class": "img-fluid rounded"}'/>
+                        </div>
+                        <div class="card-body col-md-10">
+                            <a t-attf-href="/customers/#{slug(reference)}">
+                                <span t-field="reference.self"/>
+                            </a>
+                            <t t-if="reference.industry_id">
+                                <span class="badge ms-1 text-bg-secondary"><t t-out="reference.industry_id.name"/></span>
+                            </t>
+                            <div t-field='reference.website_short_description'/>
+                        </div>
+                    </div>
+                </t>
             </div>
         </t>
 </template>
@@ -240,7 +334,7 @@
     <xpath expr="//div/span" position="replace">
         <a t-attf-href="/customers/#{slug(reference)}">$0</a>
     </xpath>
-    <xpath expr="//div[hasclass('flex-grow-1')]/span" position="replace">
+    <xpath expr="//div[hasclass('card-body')]/span" position="replace">
         <a t-attf-href="/customers/#{slug(reference)}">$0</a>
     </xpath>
 </template>