From 8c052e2b2ee314160c00057b9998f9beb5012a25 Mon Sep 17 00:00:00 2001
From: Elisabeth Dickinson <edi@odoo.com>
Date: Thu, 16 Nov 2023 11:36:57 +0100
Subject: [PATCH] [IMP] website_forum: align the offcanvas button in the header
 on mobile

The offcanvas button was not vertically aligned on mobile. This is
fixed by aligning it to the baseline, its size has also been increased.

Another issue was the breadcrumb items not being the same size
as the `/` when it the heading size is changed in the editor.
The `h5` have been removed and we apply the font size to the wrapping
`.breadcrumb` instead.

task-3555851

Part-of: odoo/odoo#145891
---
 .../views/forum_forum_templates_layout.xml    | 28 +++++++++----------
 .../views/forum_forum_templates.xml           | 20 ++++++-------
 2 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/addons/website_forum/views/forum_forum_templates_layout.xml b/addons/website_forum/views/forum_forum_templates_layout.xml
index 12e13813520..9031167e3d3 100644
--- a/addons/website_forum/views/forum_forum_templates_layout.xml
+++ b/addons/website_forum/views/forum_forum_templates_layout.xml
@@ -23,17 +23,17 @@
     <t t-set="_forum_name" t-value="forum.name if forum else _all_forums"/>
     <!-- allows to be overridden such as in website_slides_forum -->
     <t t-set="breadcrumb_kind" t-valuef="base"/>
-    <nav id="o_wforum_nav" t-attf-class="navbar d-flex align-items-baseline gap-2 #{ 'mw-xl-75 mw-xxl-100' if _page_name == 'single_question' else '' } px-0" aria-label="breadcrumb">
+    <nav id="o_wforum_nav" t-attf-class="navbar d-flex gap-2 #{ 'mw-xl-75 mw-xxl-100' if _page_name == 'single_question' else '' } px-0" aria-label="breadcrumb">
         <t t-if="_page_name == 'single_question'">
             <div class="flex-grow-1">
                 <div class="o_wforum_breadcrumb_root_single row g-0">
                     <div t-if="breadcrumb_kind == 'base'" class="col-10">
-                        <a class="btn btn-lg btn-link px-0 pb-2" t-attf-href="/forum/#{ _forum_slug }">
+                        <a class="btn btn-link px-0 pb-2 fs-5" t-attf-href="/forum/#{ _forum_slug }">
                             <i class="d-inline-block oi oi-chevron-left me-1 small lh-50"/><t t-out="_forum_name"/>
                         </a>
                     </div>
                     <div class="d-lg-none col-2 text-end">
-                        <button class="btn position-relative ms-auto" data-bs-toggle="offcanvas" data-bs-target="#o_wforum_offcanvas">
+                        <button class="btn position-relative ms-auto fs-5" data-bs-toggle="offcanvas" data-bs-target="#o_wforum_offcanvas">
                             <i class="fa fa-navicon"/>
                         </button>
                     </div>
@@ -69,27 +69,27 @@
         <t t-elif="_page_name == 'list_questions' or is_edit">
             <t t-set="target" t-value="post.parent_id if is_answer else post"/>
             <div class="o_wforum_breadcrumb_root_list_or_edit d-flex">
-                <div t-if="breadcrumb_kind=='base'" class="col-10 col-lg flex-grow-1">
-                    <h5 t-if="not is_edit" class="fw-bold mb-0" t-out="_forum_name"/>
-                    <h5 t-elif="not is_answer" class="fw-bold mb-0">Edit Question</h5>
-                    <h5 t-else="is_answer" class="fw-bold mb-0">Edit Answer</h5>
+                <div t-if="breadcrumb_kind=='base'" class="col-10 col-lg flex-grow-1 fs-5">
+                    <span t-if="not is_edit" class="fw-bold mb-0" t-out="_forum_name"/>
+                    <span t-elif="not is_answer" class="fw-bold mb-0">Edit Question</span>
+                    <span t-else="is_answer" class="fw-bold mb-0">Edit Answer</span>
                 </div>
             </div>
         </t>
-        <ol t-else="" class="breadcrumb col-10 col-lg flex-grow-1 mb-0 p-0">
-            <li class="o_wforum_breadcrumb_root breadcrumb-item text-nowrap">
-                <h5 class="mb-0"><a t-attf-href="/forum/#{ _forum_slug }" t-out="_forum_name"/></h5>
+        <ol t-else="" class="breadcrumb col-10 col-lg flex-grow-1 flex-nowrap my-0 p-0 fs-5">
+            <li class="o_wforum_breadcrumb_root breadcrumb-item text-nowrap text-truncatet">
+                <a t-attf-href="/forum/#{ _forum_slug }" t-out="_forum_name"/>
             </li>
             <li t-if="queue_type" class="breadcrumb-item text-nowrap d-none d-lg-flex">
-                <h5 class="mb-0">Moderation</h5>
+                <span>Moderation</span>
             </li>
-            <li class="breadcrumb-item text-nowrap">
-                <h5 class="fw-bold mb-0" t-out="_page_name_label"/>
+            <li class="breadcrumb-item text-nowrap text-truncate">
+                <span class="fw-bold text-truncate" t-out="_page_name_label"/>
             </li>
         </ol>
         <t t-if="_page_name != 'single_question'">
             <div class="d-lg-none text-end">
-                <button class="btn position-relative ms-auto" data-bs-toggle="offcanvas" data-bs-target="#o_wforum_offcanvas">
+                <button class="btn position-relative ms-auto fs-5" data-bs-toggle="offcanvas" data-bs-target="#o_wforum_offcanvas">
                     <i class="fa fa-navicon"/>
                 </button>
             </div>
diff --git a/addons/website_slides_forum/views/forum_forum_templates.xml b/addons/website_slides_forum/views/forum_forum_templates.xml
index e0661bc4c6b..c6081572570 100644
--- a/addons/website_slides_forum/views/forum_forum_templates.xml
+++ b/addons/website_slides_forum/views/forum_forum_templates.xml
@@ -19,27 +19,23 @@
         <xpath expr="//nav[@id='o_wforum_nav']" position="before">
             <t t-if="forum and forum.slide_channel_id" t-set="breadcrumb_kind" t-value="'slides'"/>
         </xpath>
-        <xpath expr="//div[hasclass('o_wforum_breadcrumb_root_single')]" postition="inside">
-            <ol t-if="breadcrumb_kind == 'slides'" class="breadcrumb col-10 col-lg-6 mb-0 p-0">
+        <xpath expr="//div[hasclass('o_wforum_breadcrumb_root_single')]" position="inside">
+            <ol t-if="breadcrumb_kind == 'slides'" class="breadcrumb order-first col-10 col-lg flex-grow-1 flex-nowrap my-0 p-0 fs-5">
                 <li class="breadcrumb-item">
-                    <h5 class="mb-0">
-                        <a t-attf-href="/slides/#{slug(forum.slide_channel_id)}#{'/' + slug(category) if category else ''}" t-out="forum.name"/>
-                    </h5>
+                    <a t-attf-href="/slides/#{slug(forum.slide_channel_id)}#{'/' + slug(category) if category else ''}" t-out="forum.name"/>
                 </li>
                 <li class="breadcrumb-item text-nowrap">
-                    <h5 class="mb-0"><a t-attf-href="/forum/#{ slug(forum) }">Forum</a></h5>
+                    <a t-attf-href="/forum/#{ slug(forum) }">Forum</a>
                 </li>
             </ol>
         </xpath>
-        <xpath expr="//div[hasclass('o_wforum_breadcrumb_root_list_or_edit')]" postition="inside">
-            <ol t-if="breadcrumb_kind == 'slides'" class="breadcrumb col-10 col-lg flex-grow-1 mb-0 p-0">
+        <xpath expr="//div[hasclass('o_wforum_breadcrumb_root_list_or_edit')]" position="inside">
+            <ol t-if="breadcrumb_kind == 'slides'" class="breadcrumb order-first col-10 col-lg flex-grow-1 flex-nowrap my-0 p-0 fs-5">
                 <li class="breadcrumb-item text-nowrap">
-                    <h5 class="mb-0">
-                        <a t-attf-href="/slides/#{slug(forum.slide_channel_id)}#{'/' + slug(category) if category else ''}" t-out="forum.name"/>
-                    </h5>
+                    <a t-attf-href="/slides/#{slug(forum.slide_channel_id)}#{'/' + slug(category) if category else ''}" t-out="forum.name"/>
                 </li>
                 <li class="breadcrumb-item text-nowrap">
-                    <h5 class="mb-0"><strong>Forum</strong></h5>
+                    <strong>Forum</strong>
                 </li>
             </ol>
         </xpath>