Skip to content

Commit

Permalink
[ADD] extensions/cards: add an extension to implement cards
Browse files Browse the repository at this point in the history 
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 #3688

X-original-commit: 34bc63d
Signed-off-by: Antoine Vandevenne (anv) <[email protected]>
  • Loading branch information
@AntoineVDV
AntoineVDV committed Feb 28, 2023
1 parent 07d64e3 commit 8c0dbd5
Show file tree
Hide file tree
Showing 5 changed files with 268 additions and 213 deletions.
3 changes: 3 additions & 0 deletions conf.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,6 +165,9 @@
# Content tabs
'sphinx_tabs.tabs',

# Cards
'cards',

# Spoilers
'spoilers',

Expand Down
48 changes: 48 additions & 0 deletions content/contributing/documentation/rst_cheat_sheet.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
129 changes: 37 additions & 92 deletions content/developer/howtos.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,95 +16,40 @@ How-to guides
howtos/provide_iap_services
howtos/connect_device

.. raw:: html

<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 row-cols-xxl-4 g-4 mb-4">

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

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

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

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

</div>
.. cards::

.. card:: Write lean easy-to-maintain CSS
:target: howtos/scss_tips

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

.. card:: Web services
:target: howtos/web_services

Learn more about Odoo's web services.

.. card:: Multi-company guidelines
:target: howtos/company

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

.. card:: Accounting localization
:target: howtos/accounting_localization

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

.. card:: Translating modules
:target: howtos/translations

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.
176 changes: 55 additions & 121 deletions content/developer/tutorials.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,124 +17,58 @@ Tutorials
tutorials/pdf_reports
tutorials/dashboards

.. 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="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>

<a class="o_toctree_card col-md-12 col-xl-8 col-xxl-6" href="tutorials/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="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>

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

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

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

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

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

</div>
.. cards::

.. card:: Getting started
:target: tutorials/getting_started
:tag: Beginner
:large:

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.

.. card:: Discover the JavaScript Framework
:target: tutorials/discover_js_framework
:tag: Beginner
:large:

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.

.. card:: Define module data
:target: tutorials/define_module_data
:tag: Beginner

Define master and demo data for an Odoo module, leveraging the strengths of the CSV and XML
file formats to accommodate specific data requirements.

.. card:: Restrict access to data
:target: tutorials/restrict_data_access
:tag: Beginner

Implement security measures to restrict access to sensitive data with the help of groups,
access rights, and record rules.

.. card:: Safeguard your code with unit tests
:target: tutorials/unit_tests
:tag: Beginner

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".
Loading

0 comments on commit 8c0dbd5

Please sign in to comment.