[FIX] website_forum: fix design to work better with web editor and more

Some changes have been made for the design to function better with the
web editor. We've force the Y margins on headings to `0` and switched
some font size classes.

Using a `fs-5` on the `fa-check-circle` breaks the layout if the heading
size is changed so it has been swapped for a `fa-lg`.

To be aligned with other frontend layouts, the `oi-chevron`s used in
buttons have been switched for `.fa-angle`.

By adding a condition to one of the wrapping `div`s in the header we
a avoid the empty `div`.

Instead of using a `row` without a `col` child, we use a `d-flex`.

task-3555851

Part-of: odoo/odoo#145891
This commit is contained in:
Elisabeth Dickinson
2023-12-20 07:28:10 +00:00
parent 8c052e2b2e
commit a1456ad051
4 changed files with 9 additions and 9 deletions
@@ -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">
@@ -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')">
@@ -29,7 +29,7 @@
<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 oi oi-chevron-left me-1 small lh-50"/><t t-out="_forum_name"/>
<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">
@@ -39,7 +39,7 @@
</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">
@@ -93,7 +93,7 @@
<i class="fa fa-navicon"/>
</button>
</div>
<div 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'}">
<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') }"
@@ -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>
@@ -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>