[FIX] website_forum: fix color issues

=== ISSUE 1 ===
Prior to this commit, card colors in the index list were static,
creating a contrast issue if the page background color changed.

This commit fixes this issue.

=== ISSUE 2 ===
Prior to this commit, the popover text color and the shadow created
color issues when the background color of the page was dark.

To fix that and maintain consistency, we use the common Bootstrap
shadow and force the text color to be dark.

task-3559012
Part of task-3097005

closes odoo/odoo#141069

X-original-commit: ac61d3ba59b9fa10e300cbf065d73c165e1d7af0
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
This commit is contained in:
Brieuc-brd
2023-11-04 16:38:56 +00:00
parent f9753a3e71
commit f190b6ebb0
4 changed files with 13 additions and 7 deletions
@@ -164,7 +164,7 @@ publicWidget.registry.websiteForum = publicWidget.Widget.extend({
offset: '10',
animation: false,
html: true,
customClass: 'o_wforum_bio_popover_container',
customClass: 'o_wforum_bio_popover_container shadow-sm',
});
});
@@ -260,14 +260,16 @@ $-forum-sidebar-width: map-get($container-max-widths, sm) / 2;
}
.popover.o_wforum_bio_popover_container {
box-shadow: 0 2px 5px $gray-400;
.popover-header {
background-color: tint-color($primary, 80%);
border-bottom: 0;
color: $primary;
}
.popover-body {
color: $dark;
}
max-width: 552px;
.o-text-gold {
@@ -291,3 +293,7 @@ $-forum-sidebar-width: map-get($container-max-widths, sm) / 2;
box-shadow: $box-shadow !important;
}
}
.o_wforum_background_gradient {
background-image: linear-gradient(0deg, rgba($body-bg, .75) 30%, rgba($body-bg, 0) 100%);
}
@@ -39,8 +39,8 @@
class="card oe_img_bg h-100 justify-content-end shadow-sm border-0 p-3 pt-5 text-reset text-decoration-none transition-base"
t-attf-style="background-image: url('#{website.image_url(forum, 'image_1920') if forum.image_1920 else ''}')"
>
<div class="o_we_bg_filter" style="background-image: linear-gradient(0deg, rgba(255, 255, 255, .75) 30%, rgba(255, 255, 255, 0) 100%);"></div>
<div t-if="forum_badge" class="badge position-absolute top-0 end-0 m-3 border text-bg-light" t-out="forum_badge"></div>
<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 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')">
@@ -40,7 +40,7 @@
t-value="'/forum/' + slug(question_tag.forum_id) + '/tag/' + slug(question_tag) + '/questions?' + keep_query( 'search', 'sorting', 'my', 'create_uid', filters='tag')"/>
<a t-att-href="click_action"
t-attf-class="badge position-relative z-index-1 #{ 'text-bg-secondary' if tag and tag.name == question_tag.name else 'text-bg-light' } fw-normal"
t-attf-class="badge position-relative z-index-1 #{ 'text-bg-primary' if tag and tag.name == question_tag.name else 'text-bg-secondary' } fw-normal"
t-field="question_tag.name"/>
</t>
</div>
@@ -182,7 +182,7 @@
<div t-if="question.tag_ids" class="o_wforum_index_entry_tags ms-3">
<a t-foreach="question.tag_ids" t-as="question_tag"
t-attf-href="/forum/#{slug(question_tag.forum_id)}/tag/#{slug(question_tag)}/questions?#{keep_query(filters='tag')}"
t-attf-class="badge text-bg-light #{'ms-1' if not question_tag_first else ''} fw-normal"
t-attf-class="badge text-bg-secondary #{'ms-1' if not question_tag_first else ''} fw-normal"
t-field="question_tag.name"/>
</div>
</template>