[IMP] website_forum: review design of forum index

- Allow to set an image on each forum
- Review the form view
- Redesign the forum index with cards and header

task-1984582

closes odoo/odoo#33530

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>


Co-authored-by: qsm-odoo <qsm@odoo.com>

4 files changed, 61 insertions, 16 deletions

diff --git a/addons/website_forum/models/forum.py b/addons/website_forum/models/forum.py
index 4ec595516a5..75039efff89 100644
--- a/addons/website_forum/models/forum.py
+++ b/addons/website_forum/models/forum.py
@@ -19,7 +19,7 @@ _logger = logging.getLogger(__name__)
 class Forum(models.Model):
     _name = 'forum.forum'
     _description = 'Forum'
-    _inherit = ['mail.thread', 'website.seo.metadata', 'website.multi.mixin']
+    _inherit = ['mail.thread', 'image.mixin', 'website.seo.metadata', 'website.multi.mixin']
 
     @api.model
     def _get_default_faq(self):
diff --git a/addons/website_forum/static/src/scss/website_forum.scss b/addons/website_forum/static/src/scss/website_forum.scss
index 9d0b796cb00..d0cfce94ec6 100644
--- a/addons/website_forum/static/src/scss/website_forum.scss
+++ b/addons/website_forum/static/src/scss/website_forum.scss
@@ -228,3 +228,7 @@ img.o_forum_avatar_big {
 .website_forum {
     margin-bottom: $spacer;
 }
+
+.o_wforum_forum_card_bg {
+    background: linear-gradient(99deg, theme-color('secondary') 10%, darken(theme-color('secondary'), 10%) 90%);
+}
diff --git a/addons/website_forum/views/forum.xml b/addons/website_forum/views/forum.xml
index 9005963d2db..b305f5e6823 100644
--- a/addons/website_forum/views/forum.xml
+++ b/addons/website_forum/views/forum.xml
@@ -32,12 +32,15 @@
                                 <field name="active" widget="boolean_button" options='{"terminology": "archive"}'/>
                             </button>
                         </div>
-                        <label for="name" class="oe_edit_only"/>
-                        <h1>
-                            <field name="name"/>
-                        </h1>
-                        <field name="description"/>
+                        <field name="image" widget="image" options="{'preview_image': 'image_medium'}" class="oe_avatar"/>
+                        <div class="oe_title">
+                            <label for="name" class="oe_edit_only"/>
+                            <h1>
+                                <field name="name"/>
+                            </h1>
+                        </div>
                         <group>
+                            <field name="description"/>
                             <field name="website_id" options="{'no_create': True}" groups="website.group_multi_website"/>
                         </group>
                         <notebook>
diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml
index f3d9351c17e..269e766e912 100644
--- a/addons/website_forum/views/website_forum.xml
+++ b/addons/website_forum/views/website_forum.xml
@@ -379,23 +379,61 @@
 </template>
 
 <!-- All Forums Layout -->
-<template id="forum_all" name="Our Forums">
+<template id="forum_all" name="Forum Navigation">
     <t t-call="website.layout">
-        <div class="container">
-            <h1 class="mb32">Our forums</h1>
-            <div class='row'>
-                <div t-if="not forums" class="alert alert-info">No forum post yet.</div>
-                <div t-foreach="forums" t-as="forum" class="col-md-3 text-center mb32">
-                    <a t-attf-href="/forum/#{ slug(forum) }">
-                        <div class="fa fa-5x fa-comment mb16" role="img" aria-label="Forum" title="Forum"/>
-                        <div t-field="forum.name"/>
-                    </a>
+        <t t-set="pageName" t-value="'website_forum'"/>
+        <div id="wrap">
+            <div class="oe_structure oe_empty" id="oe_structure_forum_all_top"/>
+            <div class="container pt-4">
+                <div t-if="forums" class="row">
+                    <div t-foreach="forums.with_context(bin_size=True)" t-as="forum"
+                         class="col-sm-6 col-md-3 mb-4">
+                        <a t-attf-href="/forum/#{slug(forum)}" class="d-block">
+                            <div class="card border-0 shadow-sm">
+                                <h1 class="card-header h6 font-weight-bold bg-white"
+                                    t-field="forum.name"/>
+                                <div class="card-img-bottom embed-responsive embed-responsive-16by9 o_wforum_forum_card_bg">
+                                    <div t-if="forum.image"
+                                         class="oe_img_bg embed-responsive-item"
+                                         t-attf-style="background-image: url(/web/image/forum.forum/#{forum.id}/image_large); background-position: center;"/>
+                                </div>
+                            </div>
+                        </a>
+                    </div>
                 </div>
+                <t t-else="">
+                    <div class="alert alert-info">No forum is available yet.</div>
+                </t>
             </div>
+            <div class="oe_structure oe_empty" id="oe_structure_forum_all_bottom"/>
         </div>
     </t>
 </template>
 
+<!-- Default content for the "All Forums Layout" header above -->
+<!-- (simulate an oe_structure edition) -->
+<template id="forum_all_oe_structure_forum_all_top" inherit_id="website_forum.forum_all" name="Forum Navigation (oe_structure_forum_all_top)">
+    <xpath expr="//*[hasclass('oe_structure')][@id='oe_structure_forum_all_top']" position="replace">
+        <div class="oe_structure oe_empty" id="oe_structure_forum_all_top">
+            <section class="s_cover parallax s_parallax_is_fixed bg-black-50 pt64 pb64" data-scroll-background-ratio="1">
+                <span class="s_parallax_bg oe_img_bg oe_custom_bg" style="background-image: url('/web/image/website.s_cover_default_image'); background-position: 50% 0;"/>
+                <div class="container">
+                    <div class="row s_nb_column_fixed">
+                        <div class="col-lg-12 s_title" data-name="Title">
+                            <h1 class="s_title_thin o_default_snippet_text text-center">Our forums</h1>
+                        </div>
+                        <div class="col-lg-12 s_text pt16 pb16" data-name="Text">
+                            <p class="lead o_default_snippet_text" style="text-align: center;">
+                                This community is for professional and enthusiast users, partners and programmers.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </section>
+        </div>
+    </xpath>
+</template>
+
 <!-- Specific Forum Layout -->
 <template id="forum_index" name="Forum">
     <t t-call="website_forum.header">