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

[FW][IMP][FIX] website_forum: fix links and buttons

Browse Source 
This PR fixes a link issue on Safari. 
Because `<tr>` elements in this browser don't support `position: relative` and our links have a `.stretched-link` class,
the last link in the list was the one being clicked wherever you clicked.

We've also fixes some mobile issues such as the "New Post" button overflowing and the burger button alignment.
| Before | After |
|-----|-----|
| <img width="380" alt="Screenshot 2023-11-28 at 10 14 20" src="https://github.com/odoo/odoo/assets/19491443/19475aaf-a736-4df7-b4bd-9d9cd68bd293"> | <img width="371" alt="Screenshot 2023-11-28 at 09 53 12" src="https://github.com/odoo/odoo/assets/19491443/c91da79f-e971-4f11-b7d7-39512e70b56d"> |

Some changes have been made for the design to function better with the web editor. 
The breadcrumb for example : if ever the user were to change the size of the `h5` heading with the website builder, the `/` would not be the same size as the text preceding and following it. This is because the text is inside an `h5` but not the `/`. By removing the `h5` and giving the size to the wrapping parent element we fix this issue.

| Before | After |
|-----|-----|
| <img width="329" alt="Screenshot 2023-11-28 at 10 08 05" src="https://github.com/odoo/odoo/assets/19491443/d50065af-af63-4cd8-bbeb-eb9e4ac7d797"> | <img width="444" alt="Screenshot 2023-11-28 at 10 08 53" src="https://github.com/odoo/odoo/assets/19491443/7efb11a4-2911-4032-991e-e82e90b5106f"> |

task-3555851

closes odoo/odoo#145891

Forward-port-of: odoo/odoo#139206
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
This commit is contained in:
Odoo's Mergebot
2023-12-20 07:28:10 +00:00
committed by Odoo Online
parent 8266af8339 a1456ad051
commit ebab869e0a
6 changed files with 42 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website_forum/static/src/scss/website_forum.scss
+9 -5
View File
@@ -62,11 +62,15 @@ $-forum-sidebar-width: map-get($container-max-widths, sm) / 2;
border-top: 0;
}
tr:hover {
@if ($body-bg and color-contrast($body-bg) != $color-contrast-dark) {
background-color: lighten($body-bg, 10%);
} @else {
background-color: darken($body-bg, 2%);
tr {
transform: scale(1); // Hack for Safari not supporting `position-relative`
&:hover {
@if ($body-bg and color-contrast($body-bg) != $color-contrast-dark) {
background-color: lighten($body-bg, 10%);
} @else {
background-color: darken($body-bg, 2%);
}
}
}
}
addons/website_forum/views/forum_forum_templates.xml
+1 -1
View File
@@ -60,7 +60,7 @@
<div t-if="forum and forum.has_pending_post" class="alert border" role="alert">
<b>You already have a pending post.</b><br/>
<p>Please wait for a moderator to validate your previous post before continuing.</p>
<a t-attf-href="/forum/#{ slug(forum) }" title="All Topics"><i class="oi oi-chevron-left me-2"/>Back to All Posts</a>
<a t-attf-href="/forum/#{ slug(forum) }" title="All Topics"><i class="fa fa-angle-left me-2"/>Back to All Posts</a>
</div>
<form t-else="" t-attf-action="/forum/#{slug(forum)}/new" method="post" role="form" class="tag_text js_website_submit_form js_wforum_submit_form o_wforum_readable mt-lg-3">
addons/website_forum/views/forum_forum_templates_forum_all.xml
+1 -1
View File
@@ -40,7 +40,7 @@
t-attf-style="background-image: url('#{website.image_url(forum, 'image_1920') if forum.image_1920 else ''}')"
>
<div class="o_we_bg_filter o_wforum_background_gradient"/>
<div t-if="forum_badge" class="badge position-absolute top-0 end-0 m-3 border text-bg-secondary" t-out="forum_badge"></div>
<div t-if="forum_badge" class="badge position-absolute top-0 end-0 m-3 text-bg-secondary" t-out="forum_badge"></div>
<div class="mt-5 pt-5">
<h3 class="mb-0 fw-bold" t-field="forum.name"/>
<t t-if="is_view_active('website_forum.opt_post_count')">
addons/website_forum/views/forum_forum_templates_layout.xml
+22 -22
View File
@@ -23,23 +23,23 @@
<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 }">
<i class="d-inline-block oi oi-chevron-left me-1 small lh-50"/><t t-out="_forum_name"/>
<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" 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>
</div>
<div class="d-flex gap-2 align-items-baseline">
<h3 t-attf-class="col-lg-10 mb-0" t-out="question.name"/>
<h3 t-attf-class="col-lg-10 my-0" t-out="question.name"/>
<div class="col d-flex justify-content-end align-items-center">
<i t-if="question.state == 'close'" class="fa fa-lock ms-2 fs-4" title="Closed" data-bs-toggle="tooltip" data-bs-placement="top"/>
<span t-elif="not question.active" class="badge bg-danger">
@@ -69,31 +69,31 @@
<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>
<div t-attf-class="d-flex justify-content-lg-end gap-2 flex-grow-1 w-100 w-lg-auto #{'mw-xl-75' if search else 'mw-xl-50'}">
<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'}">
<span t-if="tag and not tags" class="btn btn-light rounded ps-2">
<span t-if="tag"><i class="fa fa-tag me-1 opacity-50"/><t t-out="tag.name"></t></span>
<a t-attf-href="#{ url_for('/forum') }/#{ _forum_slug }?#{ keep_query('search', 'sorting', 'my', 'create_uid') }"
@@ -182,9 +182,9 @@
data-bs-toggle="popover"
t-att-data-bs-title="popover_title"
t-att-data-bs-content="popover_content">
<a class="o_wforum_ask_btn disabled btn btn-primary mb-3 mb-md-0" t-attf-href="/forum/#{ slug(forum) }/ask">New Post</a>
<a class="o_wforum_ask_btn disabled btn btn-primary w-100 w-md-auto mb-3 mb-md-0" t-attf-href="/forum/#{ slug(forum) }/ask">New Post</a>
</div>
<a t-elif="uid and forum" role="button" type="button" t-attf-class="o_wforum_ask_btn btn btn-primary #{ 'karma_required' if user.karma &lt; forum.karma_ask else '' }"
<a t-elif="uid and forum" role="button" type="button" t-attf-class="o_wforum_ask_btn btn btn-primary w-100 w-md-auto #{ 'karma_required' if user.karma &lt; forum.karma_ask else '' }"
t-att-data-karma="forum.karma_ask" t-attf-href="/forum/#{slug(forum)}/ask">New Post</a>
</t>
<button t-if="website_forum_action and not queue_type == 'close' and posts_ids" type="button" class="o_wforum_btn_filter_tool btn btn-secondary"
@@ -214,7 +214,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 row g-0 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 pt-2 pt-lg-3">
<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>
@@ -275,8 +275,8 @@
title="My profile">
<img class="o_wforum_avatar rounded-circle o_object_fit_cover" t-att-src="request.website.image_url(user, 'avatar_128', '60x60')" alt="Avatar"/>
<div class="d-flex flex-column justify-content-center ms-2">
<h6 class="mb-1" t-out="user_id.name"/>
<small class="text-reset opacity-50"><t t-out="user_id.karma"/> XP</small>
<h6 class="mt-0 mb-1" t-out="user_id.name"/>
<span class="fs-6 text-reset opacity-50"><t t-out="user_id.karma"/> XP</span>
</div>
</a>
</div>
addons/website_forum/views/forum_forum_templates_post.xml
+1 -1
View File
@@ -375,7 +375,7 @@
data-bs-toggle="tooltip"
t-attf-data-target="#answer-#{post_id.id}"
t-attf-data-href="/forum/#{ slug(question.forum_id) }/post/#{ slug(answer) }/toggle_correct">
<i t-attf-class="fa #{ 'fa-check-circle text-success' if answer.is_correct else 'fa-check-circle-o' } fs-5"/>
<i t-attf-class="fa fa-lg #{ 'fa-check-circle text-success' if answer.is_correct else 'fa-check-circle-o' }"/>
</a>
</t>
</t>
addons/website_slides_forum/views/forum_forum_templates.xml
+8 -12
View File
@@ -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>