From 53035435f9613c56019b0e97dcd8630716af5394 Mon Sep 17 00:00:00 2001
From: "Mathieu (mano)" <mano@odoo.com>
Date: Thu, 12 Jan 2023 18:07:53 +0100
Subject: [PATCH] [IMP] toctrees: redesign and new card component

The goal of this commit is to propose a first step towards a new
`.. card::` directive for the toctrees. This is a first design
proposition for this new card component in raw html for the fallback
page `howtos.rst`

The long term objective is to redesign the toctrees by implementing card
components, clearer toctree list design and custom html pages.

Related to task-3059229

X-original-commit: c59663f252bd9c64c43fcfc01313c1dc1c551491
---
 content/developer/howtos.rst                  | 91 ++++++++++++++++++-
 .../static/scss/bootstrap_overridden.scss     |  3 +
 extensions/odoo_theme/static/style.scss       | 22 +++++
 3 files changed, 115 insertions(+), 1 deletion(-)

diff --git a/content/developer/howtos.rst b/content/developer/howtos.rst
index 203807a7f..5c6f825c6 100644
--- a/content/developer/howtos.rst
+++ b/content/developer/howtos.rst
@@ -1,4 +1,5 @@
-:nosearch:
+:show-content:
+:hide-page-toc:
 
 =========
 Tutorials
@@ -14,3 +15,91 @@ Tutorials
     howtos/company
     howtos/accounting_localization
     howtos/translations
+
+.. raw:: html
+
+   <!-- 12 col on small screen, 6 on md, 3 on xl, 3 on xxl -->
+   <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 row-cols-xxl-4 g-4 mb-4">
+       <!-- Big card with badge rounded-pill -->
+       <a class="o_toctree_card col-md-12 col-xl-8 col-xxl-6" href="howtos/rdtraining.html">
+           <div class="card h-100">
+               <div class="card-body pb-0">
+                   <h4 class="card-title text-primary mb-1">Getting started</h4>
+                   <p class="card-text text-dark fw-normal">
+                       Learn how to develop your own module with the Odoo framework. This
+                       step-by-step tutorial is crafted for newcomers and any other individual
+                       curious about Odoo development.
+                   </p>
+               </div>
+               <div class="card-footer border-0">
+                   <span class="badge rounded-pill bg-dark mt-auto mb-2">Beginner</span>
+               </div>
+           </div>
+       </a>
+
+       <!-- Small card with badge rounded-pill -->
+       <a class="o_toctree_card col" href="howtos/website.html">
+           <div class="card h-100">
+               <div class="card-body pb-0">
+                   <h4 class="card-title text-primary mb-1">Building a website</h4>
+                   <p class="card-text text-dark fw-normal">
+                       Build your first website modules with Odoo.
+                   </p>
+               </div>
+               <div class="card-footer border-0">
+                   <span class="badge rounded-pill bg-dark mt-auto mb-2">Beginner</span>
+               </div>
+           </div>
+       </a>
+
+       <a class="o_toctree_card col" href="howtos/web_services.html">
+           <div class="card h-100 pb-0">
+               <div class="card-body">
+                   <h4 class="card-title text-primary mb-1">Web services</h4>
+                   <p class="card-text text-dark fw-normal">
+                       Learn more about Odoo's web services.
+                   </p>
+               </div>
+               <div class="card-footer border-0"></div>
+           </div>
+       </a>
+
+       <a class="o_toctree_card col" href="howtos/company.html">
+           <div class="card h-100 pb-0">
+               <div class="card-body">
+                   <h4 class="card-title text-primary mb-1">Multi-company guidelines</h4>
+                   <p class="card-text text-dark fw-normal">
+                       Learn how to manage multiple companies and deal with the records-related
+                       specificities of a multi-company environment.
+                   </p>
+               </div>
+               <div class="card-footer border-0"></div>
+           </div>
+       </a>
+
+       <a class="o_toctree_card col" href="howtos/accounting_localization.html">
+           <div class="card h-100 pb-0">
+               <div class="card-body">
+                   <h4 class="card-title text-primary mb-1">Accounting localization</h4>
+                   <p class="card-text text-dark fw-normal">
+                       Learn how to build a localization module, create bank operation models and
+                       dynamic reports.
+                   </p>
+               </div>
+               <div class="card-footer border-0"></div>
+           </div>
+       </a>
+
+       <a class="o_toctree_card col" href="howtos/translations.html">
+           <div class="card h-100 pb-0">
+               <div class="card-body">
+                   <h4 class="card-title text-primary mb-1">Translating modules</h4>
+                   <p class="card-text text-dark fw-normal">
+                       Learn how to provide translation abilities to your module.
+                   </p>
+               </div>
+               <div class="card-footer border-0"></div>
+           </div>
+       </a>
+
+   </div>
diff --git a/extensions/odoo_theme/static/scss/bootstrap_overridden.scss b/extensions/odoo_theme/static/scss/bootstrap_overridden.scss
index c7fc2d232..a4e53a708 100644
--- a/extensions/odoo_theme/static/scss/bootstrap_overridden.scss
+++ b/extensions/odoo_theme/static/scss/bootstrap_overridden.scss
@@ -103,3 +103,6 @@ $accordion-icon-transform:                  rotate(0deg) !default;
 $alert-border-width:                        3px;
 $alert-border-scale:                        0;
 $alert-border-radius:                       0 3px 3px 0;
+
+// Card
+$card-cap-bg:                               transparent;
diff --git a/extensions/odoo_theme/static/style.scss b/extensions/odoo_theme/static/style.scss
index 5dcbd4377..24fc3f6e2 100644
--- a/extensions/odoo_theme/static/style.scss
+++ b/extensions/odoo_theme/static/style.scss
@@ -1056,6 +1056,28 @@ header {
     }
 }
 
+//------------------------------------------------------------------------------
+// Cards
+//------------------------------------------------------------------------------
+
+.o_toctree_card {
+
+    &:hover {
+        text-decoration: none;
+        cursor: pointer;
+
+        .card {
+            background-color: rgba($teal-100, 0.2);
+        }
+
+    }
+
+    .card {
+        transition: all 200ms;
+    }
+
+}
+
 //------------------------------------------------------------------------------
 // Content Tabs
 //------------------------------------------------------------------------------