[ADD] extensions/cards: add an extension to implement cards

The extension adds two new directive:
- `cards` is the row container for one or more `card` directives.
- `card` is the implementation of a Bootstrap card that accepts a
  `target` argument for the href of the card, a `large` option to render
  the card on two columns, a `tag` option to display a single arbitrary
  tag on the card, and arbitrary content that is shown in the card
  body.

task-3141419

closes odoo/documentation#3672

X-original-commit: 48571c05a4
Signed-off-by: Antoine Vandevenne (anv) <anv@odoo.com>
This commit is contained in:
Antoine Vandevenne (anv)
2023-01-18 16:37:41 +00:00
parent 5d5604f9f5
commit 72e636da5f
5 changed files with 238 additions and 168 deletions
@@ -1003,6 +1003,54 @@ set, the label is used instead of the language for grouping tabs.
console.log("Hello World");
.. _contributing/cards:
Cards
=====
.. list-table::
:class: o-showcase-table
* - .. cards::
.. card:: Documentation
:target: ../documentation
:tag: Step-by-step guide
:large:
Use this guide to acquire the tools and knowledge you need to write documentation.
.. card:: Content guidelines
:target: content_guidelines
List of guidelines and trips and tricks to make your content shine at its brightest!
.. card:: RST guidelines
:target: rst_guidelines
List of technical guidelines to observe when writing with reStructuredText.
* - .. code-block:: text
.. cards::
.. card:: Documentation
:target: ../documentation
:tag: Step-by-step guide
:large:
Use this guide to acquire the tools and knowledge you need to write documentation.
.. card:: Content guidelines
:target: content_guidelines
List of guidelines and trips and tricks to make your content shine at its brightest!
.. card:: RST guidelines
:target: rst_guidelines
List of technical guidelines to observe when writing with reStructuredText.
.. _contributing/document-metadata:
Document metadata
+24 -71
View File
@@ -15,82 +15,35 @@ How-to guides
howtos/provide_iap_services
howtos/connect_device
.. raw:: html
.. cards::
<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 row-cols-xxl-4 g-4 mb-4">
.. card:: Web services
:target: howtos/web_services
<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>
Learn more about Odoo's web services.
<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>
.. card:: Multi-company guidelines
:target: howtos/company
<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>
Learn how to manage multiple companies and deal with the records-related specificities of a
multi-company environment.
<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>
.. card:: Accounting localization
:target: howtos/accounting_localization
<a class="o_toctree_card col" href="howtos/provide_iap_services.html">
<div class="card h-100 pb-0">
<div class="card-body">
<h4 class="card-title text-primary mb-1">Provide IAP services</h4>
<p class="card-text text-dark fw-normal">
Learn how to provide ongoing services with Odoo's In-App Purchase (IAP).
</p>
</div>
<div class="card-footer border-0"></div>
</div>
</a>
Learn how to build a localization module, create bank operation models and dynamic reports.
<a class="o_toctree_card col" href="howtos/connect_device.html">
<div class="card h-100 pb-0">
<div class="card-body">
<h4 class="card-title text-primary mb-1">Connect with a device</h4>
<p class="card-text text-dark fw-normal">
Learn how to enable a module to detect and communicate with an IoT device.
</p>
</div>
<div class="card-footer border-0"></div>
</div>
</a>
.. card:: Translating modules
:target: howtos/translations
</div>
Learn how to provide translation abilities to your module.
.. card:: Provide IAP services
:target: howtos/provide_iap_services
Learn how to provide ongoing services with Odoo's In-App Purchase (IAP).
.. card:: Connect with a device
:target: howtos/connect_device
Learn how to enable a module to detect and communicate with an IoT device.
+38 -97
View File
@@ -16,108 +16,49 @@ Tutorials
tutorials/pdf_reports
tutorials/dashboards
.. raw:: html
.. cards::
<!-- 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="tutorials/getting_started.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">
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>
.. card:: Getting started
:target: tutorials/getting_started
:tag: Beginner
:large:
<a class="o_toctree_card col" href="tutorials/define_module_data.html">
<div class="card h-100">
<div class="card-body pb-0">
<h4 class="card-title text-primary mb-1">Define module data</h4>
<p class="card-text text-dark fw-normal">
Define master and demo data for an Odoo module, leveraging the strengths of
the CSV and XML file formats to accommodate specific data requirements.
</p>
</div>
<div class="card-footer border-0">
<span class="badge rounded-pill bg-dark mt-auto mb-2">Beginner</span>
</div>
</div>
</a>
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.
<a class="o_toctree_card col" href="tutorials/restrict_data_access.html">
<div class="card h-100">
<div class="card-body pb-0">
<h4 class="card-title text-primary mb-1">Restrict access to data</h4>
<p class="card-text text-dark fw-normal">
Implement security measures to restrict access to sensitive data with the
help of groups, access rights, and record rules.
</p>
</div>
<div class="card-footer border-0">
<span class="badge rounded-pill bg-dark mt-auto mb-2">Beginner</span>
</div>
</div>
</a>
.. card:: Define module data
:target: tutorials/define_module_data
:tag: Beginner
<a class="o_toctree_card col" href="tutorials/unit_tests.html">
<div class="card h-100">
<div class="card-body pb-0">
<h4 class="card-title text-primary mb-1">Safeguard your code with unit tests</h4>
<p class="card-text text-dark fw-normal">
Write effective unit tests in Python to ensure the resilience of your code
and safeguard it against unexpected behaviors and regressions.
</p>
</div>
<div class="card-footer border-0">
<span class="badge rounded-pill bg-dark mt-auto mb-2">Beginner</span>
</div>
</div>
</a>
Define master and demo data for an Odoo module, leveraging the strengths of the CSV and XML
file formats to accommodate specific data requirements.
<a class="o_toctree_card col" href="tutorials/mixins.html">
<div class="card h-100">
<div class="card-body pb-0">
<h4 class="card-title text-primary mb-1">Reuse code with mixins</h4>
<p class="card-text text-dark fw-normal">
Create mixins to code features once and reuse them in multiple models.
</p>
</div>
<div class="card-footer border-0"></div>
</div>
</a>
.. card:: Restrict access to data
:target: tutorials/restrict_data_access
:tag: Beginner
<a class="o_toctree_card col" href="tutorials/pdf_reports.html">
<div class="card h-100">
<div class="card-body pb-0">
<h4 class="card-title text-primary mb-1">Build PDF reports</h4>
<p class="card-text text-dark fw-normal">
Use QWeb, Odoo's powerful templating engine, to create custom PDF reports for
your documents.
</p>
</div>
<div class="card-footer border-0"></div>
</div>
</a>
Implement security measures to restrict access to sensitive data with the help of groups,
access rights, and record rules.
<a class="o_toctree_card col" href="tutorials/dashboards.html">
<div class="card h-100">
<div class="card-body pb-0">
<h4 class="card-title text-primary mb-1">Visualize data in dashboards</h4>
<p class="card-text text-dark fw-normal">
Create data visualization dashboards using the enterprise edition "Dashboard"
view and so-called "SQL views".
</p>
</div>
<div class="card-footer border-0"></div>
</div>
</a>
.. card:: Safeguard your code with unit tests
:target: tutorials/unit_tests
:tag: Beginner
</div>
Write effective unit tests in Python to ensure the resilience of your code and safeguard it
against unexpected behaviors and regressions.
.. card:: Reuse code with mixins
:target: tutorials/mixins
Create mixins to code features once and reuse them in multiple models.
.. card:: Build PDF reports
:target: tutorials/pdf_reports
Use QWeb, Odoo's powerful templating engine, to create custom PDF reports for your documents.
.. card:: Visualize data in dashboards
:target: tutorials/dashboards
Create data visualization dashboards using the enterprise edition "Dashboard" view and
so-called "SQL views".