[FIX] website_(slides_)forum: make navigation more consistent

This commit fixes typography in the forum by refining the style of
breadcrumbs and headings, making navigation more consistent.

task-5079831

closes odoo#230837

X-original-commit: b3555a2
Signed-off-by: Benoit Socias (bso) <bso@odoo.com>

Author: anso-odoo

addons/website_forum/static/src/scss/website_forum.scss

@@ -26,8 +26,21 @@ $-forum-sidebar-width: map-get($container-max-widths, sm) / 2;
     --o-post-header-height: var(--o-avatar-height);
 
     .o_wforum_content_wrapper {
-        .o_searchbar_form {
-            min-width: 200px;
+        #o_wforum_nav {
+            .breadcrumb-item {
+                padding-top: calc(#{$btn-padding-y} + #{$btn-border-width});
+                padding-bottom: calc(#{$btn-padding-y} + #{$btn-border-width});
+                font-size: $btn-font-size;
+                line-height: $btn-line-height;
+
+                h1 {
+                    font-family: var(--body-font-family);
+                }
+            }
+
+            .o_searchbar_form {
+                min-width: 200px;
+            }
         }
     }
 

addons/website_forum/views/forum_forum_templates_layout.xml

@@ -26,20 +26,16 @@
     <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 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 '' } p-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-link px-0 pb-2 fs-5" t-attf-href="/forum/#{ _forum_slug }">
-                            <i class="d-inline-block fa fa-angle-left me-1 small"/><t t-out="_forum_name"/>
-                        </a>
-                    </div>
-                    <div class="d-lg-none col-2 text-end">
-                        <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>
+                <div class="o_wforum_breadcrumb_root_single d-flex align-items-center mb-2">
+                    <a t-attf-href="/forum/#{ _forum_slug }">
+                        <i class="d-inline-block fa fa-angle-left me-2 small"/><t t-out="_forum_name"/>
+                    </a>
+                    <button class="btn d-lg-none position-relative ms-auto p-2" data-bs-toggle="offcanvas" data-bs-target="#o_wforum_offcanvas">
+                        <span class="navbar-toggler-icon"/>
+                    </button>
                 </div>
                 <div class="d-flex gap-2 align-items-baseline">
                     <h1 t-attf-class="col-lg-10 my-0 h3" t-out="question.name"/>
@@ -71,31 +67,31 @@
         </t>
         <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">
-                <h1 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"/>
+            <div class="o_wforum_breadcrumb_root_list_or_edit d-flex align-items-center">
+                <h1 t-if="breadcrumb_kind=='base'" class="col-10 col-lg flex-grow-1 mb-0 h4">
+                    <span t-if="not is_edit" class="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>
                 </h1>
             </div>
         </t>
-        <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">
-                <h1 class="m-0 fw-normal d-inline h4-fs">
+        <ol t-else="" class="breadcrumb col-10 col-lg flex-grow-1 flex-nowrap my-0 p-0">
+            <li class="o_wforum_breadcrumb_root breadcrumb-item text-nowrap text-truncate">
+                <h1 class="m-0 fw-normal d-inline h6">
                     <a t-attf-href="/forum/#{ _forum_slug }" t-out="_forum_name"/>
                 </h1>
             </li>
             <li t-if="queue_type" class="breadcrumb-item text-nowrap d-none d-lg-flex">
                 <span>Moderation</span>
             </li>
-            <li class="breadcrumb-item text-nowrap text-truncate">
-                <span class="fw-bold text-truncate" t-out="_page_name_label"/>
+            <li class="breadcrumb-item text-nowrap text-truncate active">
+                <span class="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 fs-5" data-bs-toggle="offcanvas" data-bs-target="#o_wforum_offcanvas">
-                    <i class="fa fa-navicon"/>
+            <div class="d-lg-none">
+                <button class="btn position-relative ms-auto p-2" data-bs-toggle="offcanvas" data-bs-target="#o_wforum_offcanvas">
+                    <span class="navbar-toggler-icon"/>
                 </button>
             </div>
             <div t-if="tag or tags or search or question_count or page_name or website_forum_action" t-attf-class="d-flex justify-content-lg-end gap-2 flex-grow-1 flex-wrap flex-md-nowrap w-100 w-lg-auto #{'mw-xl-75' if search else 'mw-xl-50'}">
@@ -219,7 +215,7 @@
                 <t t-call="website_forum.user_sidebar"/>
                 <t t-call="website_forum.user_sidebar_mobile"/>
                 <div class="o_wforum_content_wrapper col-lg-9">
-                    <div class="o_wprofile_email_validation_container d-flex flex-column justify-content-center mb-3 mb-lg-5 pt-2 pt-lg-3">
+                    <div class="o_wprofile_email_validation_container d-flex flex-column justify-content-center mb-3 mb-lg-5 mt-4">
                         <t t-call="website_profile.email_validation_banner">
                             <t t-set="redirect_url" t-value="'/forum/%s' % forum.id if forum else '/forum/all/'"/>
                             <t t-set="additional_validation_email_message"> and join this Forum</t>

addons/website_slides_forum/views/forum_forum_templates.xml

@@ -34,9 +34,7 @@
                 <li class="breadcrumb-item text-nowrap">
                     <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">
-                    <strong>Forum</strong>
-                </li>
+                <li class="breadcrumb-item text-nowrap active">Forum</li>
             </ol>
         </xpath>
     </template>