From b5efab72017ab2a4e0cd264d83f2f444c4c32376 Mon Sep 17 00:00:00 2001 From: "Mathieu (mano)" Date: Thu, 12 Jan 2023 17:07:53 +0000 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 closes odoo/documentation#3408 X-original-commit: 64363d86400bd7a533e948ee8102ed3f4f764f56 Signed-off-by: Antoine Vandevenne (anv) --- content/developer/howtos.rst | 120 +++++++++++++++++- .../static/scss/bootstrap_overridden.scss | 3 + extensions/odoo_theme/static/style.scss | 22 ++++ 3 files changed, 144 insertions(+), 1 deletion(-) diff --git a/content/developer/howtos.rst b/content/developer/howtos.rst index 071e6c06e..ffc996c6e 100644 --- a/content/developer/howtos.rst +++ b/content/developer/howtos.rst @@ -1,4 +1,5 @@ -:nosearch: +:show-content: +:hide-page-toc: ========= Tutorials @@ -16,3 +17,120 @@ Tutorials howtos/company howtos/accounting_localization howtos/translations + +.. raw:: html + + +
+ + +
+
+

Getting started

+

+ 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. +

+
+
+ Beginner +
+
+ + + +
+
+

Discover the JavaScript Framework

+

+ Learn everything you need to know about the JavaScript framework of Odoo. + This tutorial will teach you how to build custom components and views, give + life to your application, and even re-introduce the kitten mode. +

+
+
+ Beginner +
+
+ + + +
+
+

Write lean easy-to-maintain CSS

+

+ Follow this guide to keep the technical debt of your CSS code under control. +

+
+
+
+
+ + + + +
+
+

Building a website

+

+ Build your first website modules with Odoo. +

+
+
+ Beginner +
+
+ + + +
+
+

Web services

+

+ Learn more about Odoo's web services. +

+
+
+
+ + + +
+
+

Multi-company guidelines

+

+ Learn how to manage multiple companies and deal with the records-related + specificities of a multi-company environment. +

+
+
+
+ + + +
+
+

Accounting localization

+

+ Learn how to build a localization module, create bank operation models and + dynamic reports. +

+
+
+
+ + + +
+
+

Translating modules

+

+ Learn how to provide translation abilities to your module. +

+
+
+
+ + +
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 d68a2d254..3345d6486 100644 --- a/extensions/odoo_theme/static/style.scss +++ b/extensions/odoo_theme/static/style.scss @@ -1057,6 +1057,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 //------------------------------------------------------------------------------