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#3326

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 78d3cf489a
commit c59663f252
3 changed files with 115 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
content/developer/howtos.rst
View File

@ -1,4 +1,5 @@
:nosearch:
:show-content:
:hide-page-toc:
=========
Tutorials
@ -14,3 +15,91 @@ Tutorials
howtos/company
howtos/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/profilecode.html">
<div class="card h-100 pb-0">
<div class="card-body">
<h4 class="card-title text-primary mb-1">Profiling Odoo code</h4>
<p class="card-text text-dark fw-normal">
Learn more about Odoo's embedded code profiler.
</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/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

@ -1049,6 +1049,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
//------------------------------------------------------------------------------