NextERP/documentation
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] toctrees: redesign and new card component

Browse Source 
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: 64363d8640
Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com>
This commit is contained in:
Mathieu (mano) 2023-01-12 17:07:53 +00:00 committed by Antoine Vandevenne (anv)
parent aef4f46c59
commit b5efab7201
3 changed files with 144 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
content/developer/howtos.rst
View File

@ -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
<!-- 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>
<a class="o_toctree_card col-md-12 col-xl-8 col-xxl-6" href="howtos/discover_js_framework.html">
<div class="card h-100">
<div class="card-body pb-0">
<h4 class="card-title text-primary mb-1">Discover the JavaScript Framework</h4>
<p class="card-text text-dark fw-normal">
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.
</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/scss_tips.html">
<div class="card h-100">
<div class="card-body pb-0">
<h4 class="card-title text-primary mb-1">Write lean easy-to-maintain CSS</h4>
<p class="card-text text-dark fw-normal">
Follow this guide to keep the technical debt of your CSS code under control.
</p>
</div>
<div class="card-footer border-0">
</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>

3
extensions/odoo_theme/static/scss/bootstrap_overridden.scss vendored
View File

@ -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;

22
extensions/odoo_theme/static/style.scss
View File

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