pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] website_blog: navigation filters dropdown on mobile

Browse Source 
The blogs filters in mobile is breaking the layout. This commit applies
a dropdown or an offcanvas instead which is displayed next to searchbar.

In this 17.0 fix, the dropdown becomes an 
offcanvas if we have a sufficient amount of blogs which allows better
navigation on mobile and makes it consistent with other website modules.

Additionally it adapts the spacing to make it even between the
navigation component.

The `t-set="_classes"` is not removed in case of potential xpath in
production. Same goes for the `container` class on the div at line 9, 
being overridden by it's t-attf-class counterpart.

task-3315921

closes odoo/odoo#157757

X-original-commit: 19f34c5e0973903b47cf6a5c65cc8888986abaa8
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
This commit is contained in:
mano-odoo
2024-04-19 23:49:48 +00:00
parent 043ced9a21
commit 5887847105
1 changed files with 64 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website_blog/views/website_blog_components.xml
+64 -4
View File
@@ -5,9 +5,10 @@
<!-- ====== Template: Blogs Navbar =========================================
============================================================================ -->
<template id="blogs_nav" name="Blogs Bar Template">
<nav t-attf-class="navbar navbar-expand-sm navbar-light #{additional_classes}">
<div class="container">
<ul class="navbar-nav" t-if="len(blogs) > 1">
<nav t-attf-class="navbar navbar-expand-lg navbar-light pt-4 pb-0 px-0 #{additionnal_classes}">
<div t-attf-class="container gap-2 w-100 #{len(blogs) > 4 and 'flex-nowrap' or 'flex-wrap flex-sm-nowrap'}" class="container">
<!-- Desktop -->
<ul t-if="len(blogs) > 1" class="navbar-nav d-none d-lg-flex">
<li class="nav-item">
<span class="nav-link disabled ps-0">Blogs:</span>
</li>
@@ -21,9 +22,68 @@
</a>
</li>
</ul>
<!-- Mobile -->
<t t-set="wblog_nav_offcanvas" t-value="len(blogs) > 4"/>
<t t-set="wblog_all_title_string">All Blogs</t>
<div t-if="len(blogs) > 1" t-attf-class="order-2 d-lg-none #{not wblog_nav_offcanvas and 'dropdown flex-grow-1 flex-sm-grow-0 min-w-0'}">
<t t-if="wblog_nav_offcanvas">
<a class="btn btn-light"
role="button"
t-att-title="blog.name if blog else wblog_all_title_string"
data-bs-toggle="offcanvas"
data-bs-target="#o_wblog_offcanvas"
aria-controls="o_wblog_offcanvas">
<i class="fa fa-navicon" role="img"/>
</a>
<div id="o_wblog_offcanvas" class="offcanvas offcanvas-end d-lg-none">
<div class="offcanvas-header">
<h5 class="offcanvas-title my-0">Blogs</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"/>
</div>
<div class="offcanvas-body">
<ul class="nav navbar-nav">
<li class="nav-item">
<a href="/blog" t-attf-class="nav-link #{(not blog) and 'active'}" t-att-title="wblog_all_title_string">All</a>
</li>
<li t-foreach="blogs" t-as="nav_blog" class="nav-item">
<a t-attf-href="/blog/#{slug(nav_blog)}"
t-attf-class="nav-link #{(blog and nav_blog.id == blog.id) and 'active' or ''}"
t-att-title="nav_blog.name">
<span t-field="nav_blog.name"/>
</a>
</li>
</ul>
</div>
</div>
</t>
<t t-else="">
<a class="btn btn-light dropdown-toggle d-flex align-items-center justify-content-between"
role="button"
t-att-title="blog.name if blog else wblog_all_title_string"
data-bs-toggle="dropdown"
aria-expanded="false">
<span t-if="blog" class="text-truncate" t-out="blog.name"/>
<span t-else="" class="text-truncate">All</span>
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li>
<a href="/blog" t-attf-class="dropdown-item #{(not blog) and 'active'}" title="All Blogs">All</a>
</li>
<li t-foreach="blogs" t-as="nav_blog">
<a t-attf-href="/blog/#{slug(nav_blog)}"
t-attf-class="dropdown-item #{(blog and nav_blog.id == blog.id) and 'active' or ''}"
t-att-title="nav_blog.name">
<span t-field="nav_blog.name"/>
</a>
</li>
</ul>
</t>
</div>
<!-- 'Search Box' -->
<t t-call="website.website_search_box_input">
<t t-set="_classes" t-valuef="w-100 w-md-auto pt-2 pt-md-0 d-md-flex"/>
<t t-set="_form_classes" t-valuef="#{not len(blogs) &gt; 1 and 'ms-auto'} flex-grow-1 flex-lg-grow-0"/>
<t t-set="_classes" t-valuef=""/>
<t t-set="search_type" t-valuef="blogs"/>
<t t-set="action" t-value="blog_url(tag=tag,search=search)"/>
<t t-set="display_description" t-valuef="true"/>