[IMP] test_themes, theme_*: adapt themes for new parallax structure

This commit adapts the themes to the new Parallax effect structure.
We now wrap the parallax element in another element with
"overflow: hidden" to avoid setting "overflow: hidden" on sections.
That was causing elements like the dropdown of the search bar to be cut
off and not fully visible.

task-4926420

closes #1114

Related: odoo/odoo#218296
Signed-off-by: Quentin Smetz (qsm) <[email protected]>

Author: bvr-odoo

test_themes/tests/test_new_page_templates.py

@@ -96,7 +96,7 @@
     # Classes that rightfully belong here at the moment
     's_col_no_bgcolor', 's_col_no_resize', 's_allow_columns',
     's_nb_column_fixed', 's_dialog_preview',
-    's_parallax_is_fixed', 's_parallax_bg', 's_parallax_no_overflow_hidden',
+    's_parallax_is_fixed', 's_parallax_bg', 's_parallax_bg_wrap',
     's_carousel_cards_card', 's_timeline_card', 's_blog_posts', 's_events',
     's_appointments',
 
@@ -347,6 +347,16 @@ def check(theme_name, website):
                                     "Using %r, view %r defines a row count on a non-grid mode row"
                                     % (theme_name, view.key)
                                 )
+
+                        for el in html_tree.xpath(".//*[contains(concat(' ', normalize-space(@class), ' '), ' s_parallax_bg ')]"):
+                            parent = el.getparent()
+                            parent_classes = parent.attrib.get('class')
+                            if parent_classes != 's_parallax_bg_wrap':
+                                errors.append(
+                                    "Using %r, view %r: element with class 's_parallax_bg' must have a direct "
+                                    "parent with 's_parallax_bg_wrap', found parent classes: %r"
+                                    % (theme_name, view.key, parent_classes)
+                                )
                     except Exception as e:  # noqa: BLE001
                         _logger.error("Using %r, view %r cannot be rendered (%r)", theme_name, view.key, e)
                         errors.append("Using %r, view %r cannot be rendered (%r)" % (theme_name, view.key, e))

theme_anelusia/views/snippets/s_pricelist_boxed.xml

@@ -5,10 +5,10 @@
     <!-- Layout -->
     <xpath expr="//section" position="attributes">
         <attribute name="data-scroll-background-ratio"/>
-        <attribute name="class" add="o_cc o_cc5" remove="parallax s_parallax_is_fixed s_parallax_no_overflow_hidden" separator=" "/>
+        <attribute name="class" add="o_cc o_cc5" remove="parallax s_parallax_is_fixed" separator=" "/>
         <attribute name="data-oe-shape-data">{'shape':'html_builder/Floats/12','flip':[],'showOnMobile':false,'shapeAnimationSpeed':'0','animated':'true'}</attribute>
     </xpath>
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//span[hasclass('s_parallax_bg_wrap')]" position="replace"/>
     <xpath expr="//div[hasclass('container')]" position="before">
         <div class="o_we_shape o_html_builder_Floats_12 o_we_animated"/>
     </xpath>

theme_artists/views/snippets/s_cover.xml

@@ -4,7 +4,7 @@
 <template id="s_cover" inherit_id="website.s_cover">
     <!-- Section -->
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="pt224 pb200" remove="pt232 pb232 s_parallax_bg parallax s_parallax_is_fixed bg-black-50" separator=" "/>
+        <attribute name="class" add="pt224 pb200" remove="pt232 pb232 parallax s_parallax_is_fixed bg-black-50" separator=" "/>
         <attribute name="data-oe-shape-data">{'shape':'html_builder/Connections/20','colors':{'c5': 'o-color-1'},'flip':['y'], 'showOnMobile':true}</attribute>
     </xpath>
     <!-- Shape -->
@@ -13,7 +13,7 @@
     </xpath>
     <!-- Remove filter & parallax -->
     <xpath expr="//div[hasclass('o_we_bg_filter')]" position="replace"/>
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//span[hasclass('s_parallax_bg_wrap')]" position="replace"/>
     <!-- Title -->
     <xpath expr="//h1" position="replace" mode="inner">
         Emotions <br/>through the colors

theme_artists/views/snippets/s_pricelist_boxed.xml

@@ -5,10 +5,10 @@
     <!-- Layout -->
     <xpath expr="//section" position="attributes">
         <attribute name="data-scroll-background-ratio"/>
-        <attribute name="class" add="o_cc o_cc5" remove="parallax s_parallax_is_fixed s_parallax_no_overflow_hidden" separator=" "/>
+        <attribute name="class" add="o_cc o_cc5" remove="parallax s_parallax_is_fixed" separator=" "/>
         <attribute name="data-oe-shape-data">{'shape':'html_builder/Wavy/27','flip':[],'showOnMobile':false,'shapeAnimationSpeed':'0','animated':'true'}</attribute>
     </xpath>
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//span[hasclass('s_parallax_bg_wrap')]" position="replace"/>
     <xpath expr="//div[hasclass('container')]" position="before">
         <div class="o_we_shape o_html_builder_Wavy_27 o_we_animated"/>
     </xpath>

theme_artists/views/snippets/s_title.xml

@@ -9,7 +9,9 @@
     </xpath>
     <!-- Parallax background & filter -->
     <xpath expr="//div[hasclass('container')]" position="before">
-        <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_cover_default_image');"/>
+        <span class="s_parallax_bg_wrap">
+            <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_cover_default_image');"/>
+        </span>
         <div class="o_we_bg_filter" style="background-color: rgba(17, 13, 22, 0.85) !important;"/>
     </xpath>
     <!-- Title -->
@@ -27,7 +29,7 @@
     <xpath expr="//h2" position="attributes">
         <attribute name="class" remove="display-3-fs" separator=" "/>
     </xpath>
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//span[hasclass('s_parallax_bg_wrap')]" position="replace"/>
     <xpath expr="//div[hasclass('o_we_bg_filter')]" position="replace"/>
 </template>
 

theme_avantgarde/views/customizations.xml

@@ -12,7 +12,8 @@
 <!-- ======== COVER ======== -->
 <template id="s_cover" inherit_id="website.s_cover" name="Avantgarde s_cover">
     <xpath expr="//section" position="attributes">
-        <attribute name="class" add="s_parallax_no_overflow_hidden o_full_screen_height" remove="s_parallax_is_fixed s_parallax" separator=" "/>
+        <attribute name="class" add="o_full_screen_height" remove="s_parallax_is_fixed" separator=" "/>
+        <attribute name="data-scroll-background-ratio" add="1.5" remove="1"/>
     </xpath>
     <xpath expr="//span[hasclass('s_parallax_bg')]" position="attributes">
         <attribute name="style" remove="background-position: 50% 75%;" add="background-position: 50% 80%;" separator=";"/>

theme_bewise/views/customizations.xml

@@ -14,7 +14,7 @@
         <div class="o_we_shape o_html_builder_Rainy_08_001"/>
     </xpath>
     <!-- Remove the background image for parallax -->
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//span[hasclass('s_parallax_bg_wrap')]" position="replace"/>
     <!-- Title -->
     <xpath expr="//h1" position="replace" mode="inner">
         Always at the top

theme_bistro/views/snippets/s_image_title.xml

@@ -9,7 +9,9 @@
         <attribute name="data-scroll-background-ratio">-3</attribute>
     </xpath>
     <xpath expr="//div[hasclass('o_we_bg_filter')]" position="before">
-        <span class="s_parallax_bg oe_img_bg o_bg_img_center" style="background-image: url('/web/image/website.s_image_title_default_image') !important;"/>
+        <span class="s_parallax_bg_wrap">
+            <span class="s_parallax_bg oe_img_bg o_bg_img_center" style="background-image: url('/web/image/website.s_image_title_default_image') !important;"/>
+        </span>
     </xpath>
 
     <!-- Texts -->

theme_bistro/views/snippets/s_product_catalog.xml

@@ -9,7 +9,9 @@
         <attribute name="data-scroll-background-ratio">1</attribute>
     </xpath>
     <xpath expr="//div[hasclass('o_we_bg_filter')]" position="replace">
-        <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_product_catalog_default_image'); background-position: 50% 0%;"/>
+        <span class="s_parallax_bg_wrap">
+            <span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_product_catalog_default_image'); background-position: 50% 0%;"/>
+        </span>
         <div class="o_we_bg_filter bg-black-50"/>
     </xpath>
     <!-- Remove Title & lead -->

theme_bookstore/views/snippets/s_cover.xml

@@ -14,7 +14,7 @@
         <div class="o_we_shape o_html_builder_Bold_26" style="background-image: url('/html_editor/shape/html_builder/Bold/26.svg?c5=o-color-1');"/>
     </xpath>
     <!-- Disable Parallax -->
-    <xpath expr="//span[hasclass('s_parallax_bg')]" position="replace"/>
+    <xpath expr="//span[hasclass('s_parallax_bg_wrap')]" position="replace"/>
     <!-- Title -->
     <xpath expr="//h1" position="replace" mode="inner">
         Immerse yourself <br/>in original universes