From 4d4d75b440b01c620fa77832bb395eadb225a76a Mon Sep 17 00:00:00 2001
From: Brandon Mercier <113701731+bram-odoo@users.noreply.github.com>
Date: Mon, 24 Feb 2025 12:24:40 +0000
Subject: [PATCH] [IMP] Website Themes - Layout page

[IMP] Website Themes - Layout page

[FIX] Corrections for ci

[FIX] Ci failure

[IMP] Small corrections

- Reorder the Xpath examples.
- Add an explanation for the move directive

[ADD] Website Themes - Media section

[IMP] Website Themes - Layout section modifications

[IMP] Anchors for CEDE's references (Tutorials)

[IMP] Line width + visibility conditions alert type

[IMP] Website Themes - Layout : Anchors correction

Revert "[ADD] Website Themes - Media section"

This reverts commit 4567cfe114251cdc9f263b8e97f0f988945f4db8.

[FIX] Update anchors pattern

[FIX] Media company logo reference

closes odoo/documentation#12475

X-original-commit: 53b2db4ab50738c128fc1ab3ada03a4a0d43d2ca
Signed-off-by: Brandon Mercier (bram) <bram@odoo.com>
---
 .../howtos/website_themes/layout.rst          | 368 ++++++++++++++----
 .../layout/screenshot-visibility.png          | Bin 0 -> 4384 bytes
 2 files changed, 297 insertions(+), 71 deletions(-)
 create mode 100644 content/developer/howtos/website_themes/layout/screenshot-visibility.png

diff --git a/content/developer/howtos/website_themes/layout.rst b/content/developer/howtos/website_themes/layout.rst
index 3b5c79d71..5ebfbd2e9 100644
--- a/content/developer/howtos/website_themes/layout.rst
+++ b/content/developer/howtos/website_themes/layout.rst
@@ -10,6 +10,8 @@ In this chapter, you will learn how to:
 - Add a copyright section.
 - Improve your website's responsiveness.
 
+.. _website_themes/layout/default :
+
 Default
 =======
 
@@ -41,12 +43,14 @@ an `<odoo>` tag.
    </odoo>
 
 .. note::
-   Using precise file names is important to find information through all modules quickly. File names
-   should only contain lowercase alphanumerics and underscores.
+   Using precise template names is important to find information through all modules quickly.
+   Template names should only contain lowercase alphanumerics and underscores.
 
    Always add an empty line at the end of your file. This can be done automatically by configuring
    your IDE.
 
+.. _website_themes/layout/xpath :
+
 XPath
 =====
 
@@ -71,7 +75,7 @@ A view is coded the following way.
    * - id
      - ID of the modified view
    * - inherited_id
-     - ID of the standard view
+     - ID of the standard view (using the following pattern: `module.template`)
    * - name
      - Human-readable name of the modified view
 
@@ -99,6 +103,8 @@ For each XPath, you modify two attributes: **expression** and **position**.
      all inheritance at a glance. As final *XML IDs* are prefixed by the module that creates them,
      there is no overlap.
 
+.. _website_themes/layout/xpath/expressions :
+
 Expressions
 -----------
 
@@ -137,6 +143,8 @@ expression to target the right element. The most useful ones are listed below.
    * - \*[@t-call="t-call"]
      - Selects a specific t-call.
 
+.. _website_themes/layout/xpath/position :
+
 Position
 --------
 
@@ -162,32 +170,6 @@ below:
      - Adds the XPath content inside an attribute.
 
 .. example::
-   This XPath adds a `<div>` before the `<nav>` that is a direct child of the `<header>`.
-
-   .. code-block:: xml
-
-      <xpath expr="//header/nav" position="before">
-         <div>Some content before the header</div>
-      </xpath>
-
-   This XPath adds `x_airproof_header` in the class attribute of the header. You also need to define
-   a `separator` attribute to add a space before the class you are adding.
-
-   .. code-block:: xml
-
-      <xpath expr="//header" position="attributes">
-         <attribute name="class" add="x_airproof_header" separator=" "/>
-      </xpath>
-
-   This XPath removes `x_airproof_header` in the class attribute of the header. In this case, you
-   don't need to use the `separator` attribute.
-
-   .. code-block:: xml
-
-      <xpath expr="//header" position="attributes">
-         <attribute name="class" remove="x_airproof_header" />
-      </xpath>
-
    This XPath removes the first element with a `.breadcrumb` class.
 
    .. code-block:: xml
@@ -202,9 +184,71 @@ below:
          <li>Last element of the list</li>
       </xpath>
 
+   This XPath adds a `<div>` before the `<nav>` that is a direct child of the `<header>`.
+
+   .. code-block:: xml
+
+      <xpath expr="//header/nav" position="before">
+         <div>Some content before the header</div>
+      </xpath>
+
+   This XPath removes `x_airproof_header` in the class attribute of the header. In this case, you
+   don't need to use the `separator` attribute.
+
+   .. code-block:: xml
+
+      <xpath expr="//header" position="attributes">
+         <attribute name="class" remove="x_airproof_header" />
+      </xpath>
+
+   This XPath adds `x_airproof_header` in the class attribute of the header. You also need to define
+   a `separator` attribute to add a space before the class you are adding.
+
+   .. code-block:: xml
+
+      <xpath expr="//header" position="attributes">
+         <attribute name="class" add="x_airproof_header" separator=" "/>
+      </xpath>
+
+   This XPath moves the element with `.o_footer_scrolltop_wrapper` class before the element with the
+    `footer` ID attribute.
+
+   .. code-block:: xml
+
+      <xpath expr="//div[@id='footer']" position="before">
+         <xpath expr="//div[@id='o_footer_scrolltop_wrapper']" position="move" />
+      </xpath>
+
+.. tip::
+   Using `move` directives inside an other XPath forces you to use only this kind of directives.
+
+   .. example::
+      | **Good example:**
+
+      .. code-block:: xml
+
+         <xpath expr="//*[hasclass('o_wsale_products_main_row')]" position="before">
+         <xpath expr="//t[@t-if='opt_wsale_categories_top']" position="move" />
+         </xpath>
+         <xpath expr="//*[hasclass('o_wsale_products_main_row')]" position="before">
+         <div><!-- Content --></div>
+         </xpath>
+
+      | **Bad example:**
+
+      .. code-block:: xml
+
+         <xpath expr="//*[hasclass('o_wsale_products_main_row')]" position="before">
+         <xpath expr="//t[@t-if='opt_wsale_categories_top']" position="move" />
+         <div><!-- Content --></div>
+         </xpath>
+
+
 .. seealso::
    You can find more information about XPath in this `cheat sheet <https://devhints.io/xpath>`_.
 
+.. _website_themes/layout/qweb :
+
 QWeb
 ====
 
@@ -214,12 +258,79 @@ generate HTML fragments and pages.
 .. seealso::
    :doc:`QWeb templates documentation <../../reference/frontend/qweb>`.
 
+.. _website_themes/layout/custom_fields :
+
+Custom fields
+=============
+
+Depending on your needs, you can create custom fields to save data in the database.
+
+.. _website_themes/layout/custom_fields/declaration :
+
+Declaration
+-----------
+
+First, create a record to declare the field. This field has to be linked to an existing model.
+
+.. code-block:: xml
+   :caption: ``/website_airproof/data/fields.xml``
+
+   <record id="x_post_category" model="ir.model.fields">
+      <field name="name">x_post_category</field>
+      <field name="field_description">...</field>
+      <field name="ttype">html</field>
+      <field name="state">manual</field>
+      <field name="index">0</field>
+      <field name="model_id" ref="website_blog.model_blog_post"/>
+   </record>
+
+.. note:: Fields creation is also possible (and recommended) through `a model using Python </developer/tutorials/backend>`_.
+
+.. _website_themes/layout/custom_fields/backend :
+
+Back-end
+--------
+
+Add the field to the relevant view through an XPath. Therefore, the user can see the field in the
+interface and fill it afterwards.
+
+.. code-block:: xml
+   :caption: ``/website_airproof/views/backend/website_blog_views.xml``
+
+   <record id="view_blog_post_form_category" model="ir.ui.view">
+      <field name="name">view_blog_post_form_category</field>
+      <field name="model">blog.post</field>
+      <field name="inherit_id" ref="website_blog.view_blog_post_form"/>
+      <field name="arch" type="xml">
+         <xpath expr="//field[@name='blog_id']" position="before">
+            <field name="x_post_category" string="..." placeholder="..."/>
+         </xpath>
+      </field>
+   </record>
+
+.. _website_themes/layout/custom_fields/frontend :
+
+Front-end
+---------
+
+The field value can be shown somewhere in a page by calling `model_name.field_name` like this:
+
+.. code-block:: xml
+   :caption: ``/website_airproof/views/website_blog_templates.xml``
+
+   <h1 t-field="blog_post.x_post_category"/>
+
+.. _website_themes/layout/background :
+
 Background
 ==========
 
 You can define a color or an image as the background of your website.
 
-**Colors**
+.. _website_themes/layout/background/colors :
+
+Colors
+------
 
 .. code-block:: scss
    :caption: ``/website_airproof/static/src/scss/primary_variables.scss``
@@ -233,7 +344,10 @@ You can define a color or an image as the background of your website.
        )
    );
 
-**Image/pattern**
+.. _website_themes/layout/background/image_pattern :
+
+Image/pattern
+-------------
 
 .. code-block:: scss
    :caption: ``/website_airproof/static/src/scss/primary_variables.scss``
@@ -245,12 +359,16 @@ You can define a color or an image as the background of your website.
       )
    );
 
+.. _website_themes/layout/header :
+
 Header
 ======
 
 By default, the header contains a responsive navigation menu and the company's logo. You can easily
 add new elements or create your own template.
 
+.. _website_themes/layout/header/standard :
+
 Standard
 --------
 
@@ -259,6 +377,17 @@ Enable one of the header default templates.
 .. important::
    Don't forget that you may need to disable the active header template first.
 
+   .. example::
+
+      .. code-block:: xml
+         :caption: ``/website_aiproof/data/presets.xml``
+
+         <record id="website.template_header_default" model="ir.ui.view">
+            <field name="active" eval="False"/>
+         </record>
+
+Explicitly set the desired template in the `primary_variables.scss` file.
+
 .. code-block:: scss
    :caption: ``/website_airproof/static/src/scss/primary_variables.scss``
 
@@ -275,6 +404,8 @@ Enable one of the header default templates.
       <field name="active" eval="True"/>
    </record>
 
+.. _website_themes/layout/header/custom :
+
 Custom
 ------
 
@@ -288,13 +419,13 @@ Create your own template and add it to the list.
 Use the following code to add an option for your new custom header on the Website Builder.
 
 .. code-block:: xml
-   :caption: ``/website_airproof/data/presets.xml``
+   :caption: ``/website_airproof/views/website_templates.xml``
 
-   <template id="template_header_opt" inherit_id="website.snippet_options" name="Header Template - Option">
-      <xpath expr="//we-select[@data-variable='header-template']" position="inside">
+   <template id="template_footer_opt" inherit_id="website.snippet_options" name="Footer Template - Option">
+      <xpath expr="//we-select[@data-variable='footer-template']" position="inside">
          <we-button title="airproof"
-            data-customize-website-views="website_airproof.header"
-            data-customize-website-variable="'airproof'"  data-img="/website_airproof/static/src/img/wbuilder/template_header_opt.svg"/>
+            data-customize-website-views="website_airproof.footer"
+            data-customize-website-variable="'airproof'"  data-img="/website_airproof/static/src/img/wbuilder/template_footer_opt.svg"/>
       </xpath>
    </template>
 
@@ -324,7 +455,7 @@ variables.
       ),
    );
 
-**Layout**
+**Template**
 
 .. code-block:: xml
    :caption: ``/website_airproof/views/website_templates.xml``
@@ -344,11 +475,15 @@ variables.
       </field>
    </record>
 
+.. _website_themes/layout/header/components :
+
 Components
 ----------
 
 In your custom header, you can call several sub-templates using the `t-call` directive from QWeb:
 
+.. _website_themes/layout/header/components/logo :
+
 Logo
 ~~~~
 
@@ -358,14 +493,12 @@ Logo
       <t t-set="_link_class" t-valuef="..."/>
    </t>
 
-Don't forget to record the logo of your website in the database.
+.. important::
 
-.. code-block:: xml
-   :caption: ``/website_airproof/data/images.xml``
+   Don't forget to :ref:`create a record of the website logo <website_themes/media/images/use/logo>`
+   logo in the database.
 
-   <record id="website.default_website" model="website">
-      <field name="logo" type="base64" file="website_airproof/static/src/img/content/logo.png"/>
-   </record>
+.. _website_themes/layout/headers/components/menu :
 
 Menu
 ~~~~
@@ -379,6 +512,8 @@ Menu
       </t>
    </t>
 
+.. _website_themes/layout/header/components/signin :
+
 Sign in
 ~~~~~~~
 
@@ -389,6 +524,8 @@ Sign in
       <t t-set="_link_class" t-valuef="nav-link"/>
    </t>
 
+.. _website_themes/layout/header/components/user_dropdown :
+
 User dropdown
 ~~~~~~~~~~~~~
 
@@ -403,6 +540,8 @@ User dropdown
       <t t-set="_dropdown_menu_class" t-valuef="..."/>
    </t>
 
+.. _website_themes/layout/header/components/language_selector :
+
 Language selector
 ~~~~~~~~~~~~~~~~~
 
@@ -412,6 +551,8 @@ Language selector
       <t t-set="_div_classes" t-valuef="..."/>
    </t>
 
+.. _website_themes/layout/header/components/cta :
+
 Call to action
 ~~~~~~~~~~~~~~
 
@@ -421,6 +562,8 @@ Call to action
       <t t-set="_div_classes" t-valuef="..."/>
    </t>
 
+.. _website_themes/layout/header/components/navbar_toggler :
+
 Navbar toggler
 ~~~~~~~~~~~~~~
 
@@ -434,34 +577,52 @@ Navbar toggler
    You can add a :ref:`header overlay <header_overlay>` to position your header over the content of
    your page. It has to be done on each page individually.
 
+.. _website_themes/layout/footer :
+
 Footer
 ======
 
 By default, the footer contains a section with some static content. You can easily add new elements
 or create your own template.
 
+.. _website_themes/layout/footer/standard :
+
 Standard
 --------
 
 Enable one of the default footer templates. Don't forget that you may need to disable the active
 footer template first.
 
+.. important::
+   Don't forget that you may need to disable the active footer template first.
+
+   .. example::
+
+      .. code-block:: xml
+         :caption: ``/website_aiproof/data/presets.xml``
+
+         <record id="website.footer_custom" model="ir.ui.view">
+            <field name="active" eval="False"/>
+         </record>
+
 .. code-block:: scss
    :caption: ``/website_airproof/static/src/scss/primary_variables.scss``
 
    $o-website-values-palettes: (
       (
-         'header-template': 'Contact',
+         'footer-template': 'Links',
       ),
    );
 
 .. code-block:: xml
    :caption: ``/website_airproof/data/presets.xml``
 
-   <record id="website.template_header_contact" model="ir.ui.view">
+   <record id="website.template_footer_links" model="ir.ui.view">
       <field name="active" eval="True"/>
    </record>
 
+.. _website_themes/layout/footer/custom :
+
 Custom
 ------
 
@@ -471,7 +632,7 @@ active footer template first.
 **Option**
 
 .. code-block:: xml
-   :caption: ``/website_airproof/data/presets.xml``
+   :caption: ``/website_airproof/views/website_templates.xml``
 
    <template id="template_header_opt" inherit_id="website.snippet_options" name="Footer Template - Option">
       <xpath expr="//we-select[@data-variable='footer-template']" position="inside">
@@ -493,7 +654,7 @@ active footer template first.
       ),
    );
 
-**Layout**
+**Template**
 
 .. code-block:: xml
     :caption: ``/website_airproof/views/website_templates.xml``
@@ -513,6 +674,8 @@ active footer template first.
        </field>
     </record>
 
+.. _website_themes/layout/copyright :
+
 Copyright
 =========
 
@@ -531,6 +694,8 @@ To replace the content or modify its structure, you can add your own code to the
        </xpath>
     </template>
 
+.. _website_themes/layout/dropzone :
+
 Drop zone
 =========
 
@@ -544,8 +709,6 @@ You can define an empty area that the user can fill with snippets.
 
    <div id="oe_structure_layout_01" class="oe_structure"/>
 
-.. todo:: Missing description in table ...
-
 .. list-table::
    :header-rows: 1
    :stub-columns: 1
@@ -557,6 +720,9 @@ You can define an empty area that the user can fill with snippets.
      - Define a drag-and-drop area for the user.
    * - oe_structure_solo
      - Only one snippet can be dropped in this area.
+   * - oe_structure_not_nearest
+     - If a building block is dropped outside of a Drop zone having this class, the block will be
+       moved in the nearest Drop Zone.
 
 You can also populate an existing drop zone with your content.
 
@@ -570,50 +736,110 @@ You can also populate an existing drop zone with your content.
        </xpath>
     </template>
 
+.. _website_themes/layout/responsive :
+
 Responsive
 ==========
 
-You can find some hints below to help you make your website responsive.
+Odoo in general relies on the Bootstrap framework which eases the responsiveness of your website on
+ desktop and mobile. On Odoo 16, you can mainly take action on 3 aspects:
 
-Bootstrap
----------
+#. Automatic computed font sizes depending on the device
+#. Column sizes on desktop (the columns are automatically stacked on mobile)
+#. Visibility conditions (Show/Hide something on desktop/mobile)
 
 .. seealso::
-   - `Bootstrap documentation on responsive breakpoints
-     <https://getbootstrap.com/docs/4.6/layout/overview/#responsive-breakpoints>`_
    - `Bootstrap documentation on display property
-     <https://getbootstrap.com/docs/4.6/utilities/display/>`_
+     <https://getbootstrap.com/docs/5.1/utilities/display/>`_
 
-**Font size**
+.. _website_themes/layout/reponsive/font_sizes :
 
-As of v4.3.0, Bootstrap ships with the option to enable responsive font sizes, allowing text to
-scale more naturally across device and viewport sizes. Enable them by changing the
-`$enable-responsive-font-sizes` Sass variable to true.
+Font sizes
+----------
+
+In Bootstrap 5, responsive font sizes are enabled by default, allowing text to scale more naturally
+across device and viewport sizes (relying on the `$enable-rfs` variable).
 
 .. seealso::
-   `Responsive Font Size GitHub <https://github.com/twbs/rfs/tree/v8.1.0>`_
+   - `Bootstrap documentation about responsive font sizes
+     <https://getbootstrap.com/docs/5.1/getting-started/rfs/>`_
 
-Website Builder
----------------
+.. _website_themes/layout/reponsive/column_sizes :
 
-Hide a specific `<section>` on mobile.
+Column sizes
+------------
+
+Bootstrap uses a grid made of rows and columns to layout a page. Thanks to this structure, columns
+can be sized differently on mobile and desktop. In this version, the Website Builder allows to set
+mobile sizes (`col-12` for example) and desktop ones (`col-lg-4` for example) but not the
+medium breakpoints (`col-md-4` for example).
+
+.. warning::
+   The medium sizes can be set but the end-user is not able to edit them within the Website Builder.
+
+.. seealso::
+   - `Bootstrap documentation on responsive breakpoints <https://getbootstrap.com/docs/5.1/layout/breakpoints/>`_
+   - `Bootstrap documentation about the grid <https://getbootstrap.com/docs/5.1/layout/grid/>`_
+
+.. _website_themes/layout/reponsive/visibility_conditions :
+
+Visibility conditions
+---------------------
+
+In the Odoo Website Builder, entire sections or specific columns can be hidden on mobile or desktop.
+ This functionality leverages Bootstrap along with Odoo-specific classes:
+
+- `o_snippet_mobile_invisible`
+- `o_snippet_desktop_invisible`
+
+Hide a section on desktop:
 
 .. code-block:: xml
 
-    <section class="d-none d-md-block">
+   <section class="s_text_block o_cc o_cc1 o_colored_level pt16 pb16 d-lg-none o_snippet_desktop_invisible" data-snippet="s_text_block" name="Text">
        <!-- Content -->
-    </section>
+   </section>
 
-Hide a `<col>` on mobile.
+Hide a column on mobile:
 
 .. code-block:: xml
 
-   <section>
-      <div class="container">
-         <div class="row d-flex align-items-stretch">
-            <div class="col-lg-4 d-none d-md-block">
-               <!-- Content -->
+   <section class="s_text_block o_cc o_cc1 o_colored_level pt16 pb16" data-snippet="s_text_block" name="Text">
+      <div class="container s_allow_columns">
+         <div class="row">
+            <div class="col-12 col-lg-6 d-none d-lg-block o_snippet_mobile_invisible">
+               Column 1
+            </div>
+            <div class="col-12 col-lg-6">
+               Column 2
             </div>
          </div>
       </div>
    </section>
+
+.. list-table::
+   :header-rows: 1
+   :stub-columns: 1
+   :widths: 20 80
+
+   * - Class
+     - Description
+   * - o_snippet_mobile_invisible
+     - It tells the Website Builder that the element is hidden and is using visibility conditions
+       option.
+   * - o_snippet_desktop_invisible
+     - It tells the Website Builder that the element is hidden **on desktop and** is using visibility
+       conditions option.
+   * - d-none
+     - Hide the element in every situations.
+   * - d-lg-block
+     - Show the element from the "large" breakpoint (on desktop).
+
+.. important::
+   `o_snippet_mobile_invisible` / `o_snippet_desktop_invisible` classes have to be specified to keep
+    the visibility conditions option functional. Even if an element is hidden on desktop, the
+    Website Builder displays a list of these elements allowing the end-user to force show the
+    element and edit it without switching between mobile and desktop mode.
+
+   .. image:: layout/screenshot-visibility.png
+      :alt: Force show a hidden element on the current device.
diff --git a/content/developer/howtos/website_themes/layout/screenshot-visibility.png b/content/developer/howtos/website_themes/layout/screenshot-visibility.png
new file mode 100644
index 0000000000000000000000000000000000000000..3ea10fec8ad826d0cbff08a40bc8728556b89a51
GIT binary patch
literal 4384
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
C->dEb

literal 0
HcmV?d00001