[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
This commit is contained in:
Elisabeth Dickinson
2023-12-20 07:28:10 +00:00
parent 494537f68d
commit 8c052e2b2e
2 changed files with 22 additions and 26 deletions
@@ -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>
@@ -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>