[FIX] web_editor, website(_*): fix bs4

[FIX] web_editor: adapt col size to avoid too small select

We should avoid col-md-3 in col-md-9 as the menu dialog is instanciated at 2
places:
  - When creating a link in the editor
  - When editing website navbar menu

In the second case, there is a hack in `content.js` to remove `modal-lg`
lowering the width of the modal and making the select too small.

[FIX] website: lower navbar font size

With BS4, font-size of navbar element went from 13px to ~17px (rem unit
computation).

14px seems better than previous 13px as the frontend content size is
higher than the backend one. Thus, 13px looks too small in contrast with the
frontend page content.

[FIX] website_crm_partner_assign, website_customer, website_membership: fix layout

This commit fixes multiple layout issues, mainly by aligning code of the 3
modules:
  - Add margin right to avoid text to be against image
  - Using image_medium everywhere
  - Fixing search input width

publish toggle red + odoo primary is weird -> gray
navbar now has a background & float-right not working since flex
-> remove navbar class, use d-flex and ml-auto so the right element will be floating since using all available width

task-1878150

11 files changed, 35 insertions, 34 deletions

diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index fe51450dac9..1b1e5e16f68 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -249,7 +249,7 @@
                 <div class="form-group row">
                     <label class="col-form-label col-md-3">Size</label>
                     <div class="col-md-9">
-                        <select name="link_style_size" class="form-control col-md-3 link-style">
+                        <select name="link_style_size" class="form-control link-style">
                             <option value="xs">Extra Small</option>
                             <option value="sm">Small</option>
                             <option value="" selected="selected">Medium</option>
@@ -260,7 +260,7 @@
                 <div class="form-group row">
                     <label class="col-form-label col-md-3">Style</label>
                     <div class="col-md-9">
-                        <select name="link_style_shape" class="form-control col-md-3 link-shape">
+                        <select name="link_style_shape" class="form-control link-shape">
                             <option value="" selected="selected">Default</option>
                             <option value="outline">Outline</option>
                             <option value="rounded-circle">Rounded</option>
diff --git a/addons/website/static/src/scss/website.ui.scss b/addons/website/static/src/scss/website.ui.scss
index 093a0da8524..c843803e556 100644
--- a/addons/website/static/src/scss/website.ui.scss
+++ b/addons/website/static/src/scss/website.ui.scss
@@ -16,7 +16,7 @@ body.o_connected_user {
     z-index: $zindex-modal - 10;
 
     font-family: $o-we-font-family;
-    font-size: $o-font-size-base;
+    font-size: 14px;
     a:hover, a:focus {
         text-decoration: none;
     }
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index fe918f22daa..45d171fbbbd 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -90,9 +90,9 @@
 
 <!-- Layout -->
 <template id="submenu" name="Submenu">
-    <li t-if="submenu.is_visible and not submenu.child_id.filtered(lambda menu: menu.is_visible)" class="nav-item">
+    <li t-if="submenu.is_visible and not submenu.child_id.filtered(lambda menu: menu.is_visible)" t-attf-class="#{('%s-item ' % submenu_type) if submenu_type else ''}">
         <a t-att-href="submenu.clean_url()"
-            t-attf-class="nav-link#{' active' if submenu.clean_url() and unslug_url(request.httprequest.path) == unslug_url(submenu.clean_url()) else ''}"
+            t-attf-class="#{'nav-link' if submenu_type != 'breadcrumb' else ''} #{' active' if submenu.clean_url() and unslug_url(request.httprequest.path) == unslug_url(submenu.clean_url()) else ''}"
             role="menuitem"
             t-ignore="true"
             t-att-target="'_blank' if submenu.new_window else None">
@@ -397,7 +397,7 @@
         <div t-attf-class="btn-group #{btn_class} js_publish_management #{object.website_published and 'css_published' or 'css_unpublished'}" t-att-data-id="object.id" t-att-data-object="object._name" t-att-data-controller="publish_controller">
             <button class="btn btn-danger js_publish_btn">Unpublished</button>
             <button class="btn btn-success js_publish_btn">Published</button>
-            <button type="button" t-attf-class="btn btn-secondary dropdown-toggle dropdown-toggle-split" t-att-id="'dopprod-%s' % object.id" data-toggle="dropdown"/>
+            <button type="button" t-attf-class="btn btn-default dropdown-toggle dropdown-toggle-split" t-att-id="'dopprod-%s' % object.id" data-toggle="dropdown"/>
             <div class="dropdown-menu" role="menu" t-att-aria-labelledby="'dopprod-%s' % object.id">
                 <t t-raw="0"/>
                 <a role="menuitem" t-attf-href="/web#return_label=Website&amp;view_type=form&amp;model=#{object._name}&amp;id=#{object.id}&amp;action=#{action}"
diff --git a/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml b/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
index eddcb1cafcb..1df963c77a1 100644
--- a/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
+++ b/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml
@@ -59,21 +59,19 @@
             </div>
 
             <div class="col-lg-8 offset-lg-1" id="ref_content">
-                <div class='navbar'>
-                    <div>
-                        <t t-call="website.pager"/>
-                        <form action="" method="get" class="navbar-search float-right pagination form-inline"><!-- FIXME -->
-                            <div class="form-group float-right">
-                                <input type="text" name="search" class="search-query col-lg-2 mt4 form-control" placeholder="Search" t-att-value="searches.get('search', '')"/>
-                            </div>
-                        </form>
-                    </div>
+                <div class='d-flex m-2'>
+                    <t t-call="website.pager"/>
+                    <form action="" method="get" class="navbar-search ml-auto pagination form-inline">
+                        <div class="form-group float-right">
+                            <input type="text" name="search" class="search-query form-control" placeholder="Search" t-att-value="searches.get('search', '')"/>
+                        </div>
+                    </form>
                 </div>
                 <div>
                     <p t-if="not partners">No result found</p>
                     <t t-foreach="partners" t-as="partner">
                         <t t-if="last_grade != partner.grade_id.id">
-                            <h3 class="text-center">
+                            <h3 class="text-center mt-4">
                                 <span t-field="partner.grade_id"/> Partners
                                 <t t-call="website.publish_management">
                                     <t t-set="object" t-value="partner.grade_id"/>
@@ -82,10 +80,10 @@
                             </h3>
                             <t t-set="last_grade" t-value="partner.grade_id.id"/>
                         </t>
-                        <div class="media">
+                        <div class="media mt-3">
                             <a t-attf-href="/partners/#{slug(partner)}?#{current_grade and 'grade_id=%s&amp;' % current_grade.id}#{current_country and 'country_id=%s' % current_country.id}"
                                t-field="partner.image_medium"
-                               t-options='{"widget": "image"}'
+                               t-options='{"widget": "image", "class": "mr-3"}'
                             ></a>
                             <div class="media-body o_partner_body" style="min-height: 64px;">
                                 <a t-attf-href="/partners/#{slug(partner)}?#{current_grade and 'grade_id=%s&amp;' % current_grade.id}#{current_country and 'country_id=%s' % current_country.id}">
@@ -165,10 +163,10 @@
 <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="media">
+        <div t-foreach="partner.implemented_partner_ids" t-as="reference" class="media mt-3">
           <t t-if="reference.website_published">
             <a t-attf-href="/customers/#{slug(reference)}">
-                <span t-field="reference.image_small" t-options='{"widget": "image", "class": "d-block mx-auto"}'/>
+                <span t-field="reference.image_medium" t-options='{"widget": "image", "class": "d-block mr-3"}'/>
             </a>
             <div class="media-body" style="min-height: 64px;">
                 <a t-attf-href="/customers/#{slug(reference)}">
diff --git a/addons/website_customer/views/website_customer_templates.xml b/addons/website_customer/views/website_customer_templates.xml
index d27dc19b146..d07989ac645 100644
--- a/addons/website_customer/views/website_customer_templates.xml
+++ b/addons/website_customer/views/website_customer_templates.xml
@@ -18,11 +18,11 @@
                     <div class="col-lg-3 mb32" id="ref_left_column">
                     </div>
                     <div class="col-lg-8 offset-lg-1" id="ref_content">
-                        <div class='navbar mb0'>
+                        <div class='d-flex m-2'>
                             <t t-call="website.pager">
                                <t t-set="classname" t-value="'float-left'"/>
                             </t>
-                            <form action="" method="get" class="navbar-search float-right pagination form-inline"><!-- FIXME -->
+                            <form action="" method="get" class="navbar-search ml-auto pagination form-inline">
                                 <div class="form-group">
                                     <input type="text" name="search" class="search-query form-control"
                                         placeholder="Search" t-att-value="post.get('search', '')"/>
@@ -36,8 +36,8 @@
                     <t t-foreach="partners" t-as="partner">
                         <div class="media mt-3">
                             <a t-attf-href="/customers/#{slug(partner)}"
-                               t-field="partner.image_small"
-                               t-options='{"widget": "image"}'
+                               t-field="partner.image_medium"
+                               t-options='{"widget": "image", "class": "mr-3"}'
                             ></a>
                             <div class="media-body" style="min-height: 64px;">
                                 <a t-attf-href="/customers/#{slug(partner)}">
@@ -218,7 +218,7 @@
             <div t-foreach="partner.implemented_partner_ids" t-as="reference" class="media mt-3">
               <t t-if="reference.website_published">
                 <a t-attf-href="/customers/#{slug(reference)}">
-                    <span t-field="reference.image_small" t-options='{"widget": "image", "class": "d-block mx-auto"}'/>
+                    <span t-field="reference.image_medium" t-options='{"widget": "image", "class": "d-block mr-3"}'/>
                 </a>
                 <div class="media-body" style="min-height: 64px;">
                     <a t-attf-href="/customers/#{slug(reference)}">
diff --git a/addons/website_event/views/event_templates.xml b/addons/website_event/views/event_templates.xml
index cd00dc5ef91..5ef56dee25e 100644
--- a/addons/website_event/views/event_templates.xml
+++ b/addons/website_event/views/event_templates.xml
@@ -267,7 +267,7 @@
 <template id="event_details">
     <t t-call="website_event.layout">
         <div itemscope="itemscope" itemtype="http://schema.org/Event" class="container">
-            <h1 itemprop="name" class="text-center" t-field="event.name"></h1>
+            <h1 itemprop="name" class="text-center mt-3 mb-2" t-field="event.name"></h1>
             <div class="text-center">
                 <small t-if="event.is_participating" class="badge badge-info">Participating</small>
             </div>
diff --git a/addons/website_forum/data/forum_data.xml b/addons/website_forum/data/forum_data.xml
index 60928475354..bcf9b79e7cb 100644
--- a/addons/website_forum/data/forum_data.xml
+++ b/addons/website_forum/data/forum_data.xml
@@ -6,7 +6,7 @@
         </record>
 
         <record id="menu_website_forums" model="website.menu">
-            <field name="name">Forums</field>
+            <field name="name">Forum</field>
             <field name="url">/forum</field>
             <field name="parent_id" ref="website.main_menu"/>
             <field name="sequence" type="int">35</field>
diff --git a/addons/website_forum/static/src/js/website_forum.js b/addons/website_forum/static/src/js/website_forum.js
index 5731c56fdec..568caedabe5 100644
--- a/addons/website_forum/static/src/js/website_forum.js
+++ b/addons/website_forum/static/src/js/website_forum.js
@@ -182,7 +182,7 @@ odoo.define('website_forum.website_forum', function (require) {
             })
             .done(function() {
                 var left = $('.o_js_validation_queue:visible').length;
-                var type = $('h2.o_page_header li.active a').data('type');
+                var type = $('h2.o_page_header a.active').data('type');
                 $('#count_post').text(left);
                 $('#moderation_tools a[href*="/'+type+'_"]').find('strong').text(left);
             });
diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml
index 4bf4e25e4bc..1838b63d775 100644
--- a/addons/website_forum/views/website_forum.xml
+++ b/addons/website_forum/views/website_forum.xml
@@ -1354,7 +1354,7 @@
     <t t-call="website_forum.header">
         <h1 class="o_page_header mt0">
             <span t-field="user.name"/>
-            <small>profile</small>
+            <small class="text-muted">profile</small>
         </h1>
         <div class="row">
             <div class="col-md-2">
diff --git a/addons/website_forum_doc/views/website_doc.xml b/addons/website_forum_doc/views/website_doc.xml
index 00824929168..86337ea9602 100644
--- a/addons/website_forum_doc/views/website_doc.xml
+++ b/addons/website_forum_doc/views/website_doc.xml
@@ -14,7 +14,7 @@
             <t t-foreach="titles" t-as="title">
                 <div t-attf-class="h#{str(level) + (level&lt;3 and ' o_page_header' or '')}">
                     <t t-esc="title.name"/>
-                    <small t-if="len(title.post_ids)">
+                    <small t-if="len(title.post_ids)" class="text-muted">
                         <t t-esc="len(title.post_ids)"/>
                         <t t-if="len(title.post_ids)==1">essay</t>
                         <t t-if="len(title.post_ids)&gt;1">essays</t>
@@ -144,7 +144,10 @@
                                         from the Q&amp;A section where you can
                                         discuss it and get feedback.
                                     </div>
-                                    <a t-attf-href="/forum/#{slug(forum)}/question/#{slug(post)}" class="fa fa-arrow-right mt16 ml8"> Related question</a>
+                                    <a t-attf-href="/forum/#{slug(forum)}/question/#{slug(post)}" class="mt16 ml8">
+                                        <i class="fa fa-arrow-right"/>
+                                        Related question
+                                    </a>
                                 </div>
                             </div>
                         </div>
diff --git a/addons/website_membership/views/website_membership_templates.xml b/addons/website_membership/views/website_membership_templates.xml
index 5883be37029..e1e447faad5 100644
--- a/addons/website_membership/views/website_membership_templates.xml
+++ b/addons/website_membership/views/website_membership_templates.xml
@@ -33,11 +33,11 @@
                 </ul>
             </div>
             <div class="col-lg-8" id="ref_content">
-                <div class='navbar'>
+                <div class='d-flex m-2'>
                     <t t-call="website.pager">
                        <t t-set="classname">float-left</t>
                     </t>
-                    <form action="" method="get" class="navbar-search float-right pagination form-inline">
+                    <form action="" method="get" class="navbar-search ml-auto pagination form-inline">
                         <t t-call="website.website_search_box">
                             <t t-set="search" t-value="post.get('search', '')"/>
                         </t>
@@ -55,7 +55,7 @@
                                 <div class="media mt-3">
                                     <a t-attf-href="/members/#{slug(partner)}"
                                        t-field="partner.image_small"
-                                       t-options='{"widget": "image", "class": "media-object"}'
+                                       t-options='{"widget": "image", "class": "media-object mr-3"}'
                                     ></a>
                                     <div class="media-body" style="min-height: 64px;">
                                         <a t-attf-href="/members/#{slug(partner)}">