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