[IMP/FIX] website airproof: Improve and update solutions

website_airproof/__manifest__.py

@@ -9,14 +9,18 @@
     'data': [
         # Options
         'data/presets.xml',
+        'data/website.xml',
         # Menu
         'data/menu.xml',
+        # Gradients
+        'data/gradients.xml',
         # Shapes
         'data/shapes.xml',
         # Pages
         'data/pages/home.xml',
         'data/pages/contact.xml',
         # Frontend
+        'views/new_page_template_templates.xml',
         'views/website_templates.xml',
         'views/website_sale_templates.xml',
         'views/website_sale_wishlist_templates.xml',
@@ -35,6 +39,7 @@
         ],
         'web.assets_frontend': [
             # SCSS
+            'website_airproof/static/src/scss/font.scss',
             'website_airproof/static/src/scss/components/mouse_follower.scss',
             'website_airproof/static/src/scss/layout/header.scss',
             'website_airproof/static/src/scss/pages/product_page.scss',
@@ -46,4 +51,9 @@
             'website_airproof/static/src/js/mouse_follower.js',
         ],
     },
+    'new_page_templates': {
+        'airproof': {
+            'services': ['s_parallax', 's_airproof_key_benefits_h2', 's_call_to_action', 's_airproof_carousel']
+        }
+    },
 }

website_airproof/data/gradients.xml

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <record id="colorpicker" model="ir.ui.view">
+        <field name="key">website_airproof.colorpicker</field>
+        <field name="name">Custom Gradients</field>
+        <field name="type">qweb</field>
+        <field name="inherit_id" ref="web_editor.colorpicker"/>
+        <field name="arch" type="xml">
+            <xpath expr="//div[@data-name='predefined_gradients']/t[@t-set='gradients']" position="after">
+                <t t-set="gradients" t-value="gradients + ['linear-gradient(0deg, rgb(41, 128, 187) 0%, rgb(11, 142, 230) 100%)']"/>
+            </xpath>
+        </field>
+    </record>
+</odoo>

website_airproof/data/images.xml

@@ -1,10 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 <!-- Branding -->
-    <!-- Set as the logo of the website -->
-    <record id="website.default_website" model="website">
-        <field name="logo" type="base64" file="website_airproof/static/src/img/content/branding/airproof-logo.svg"/>
-    </record>
     <!-- Record the image of the logo -->
     <record id="logo" model="ir.attachment">
         <field name="name">Logo Airproof</field>

website_airproof/data/pages/home.xml

@@ -11,6 +11,7 @@
         <field name="key">website_airproof.page_home</field>
         <field name="url">/</field>
         <field name="type">qweb</field>
+        <field name="header_overlay" eval="True"/>
         <field name="arch" type="xml">
             <t t-name="website_airproof.page_home">
                 <t t-call="website.layout">
@@ -27,14 +28,14 @@
                                 </ol>
                                 <div class="carousel-inner">
                                     <!-- Slide 01 -->
-                                    <div class="carousel-item pt24 pb64 o_colored_level active" data-name="Slide">
+                                    <div class="carousel-item pt64 pb64 o_colored_level active" data-name="Slide">
                                         <div class="oe_unremovable container">
                                             <div class="row content">
                                                 <div class="carousel-content col-lg-6 pt88 position-relative o_colored_level">
                                                     <!-- Image animation -->
                                                     <img src="/web/image/website_airproof.img_sticker" class="img img-fluid position-absolute x_sticker o_animate o_anim_rotate_in o_visible" style="animation-delay: 0.8s; --wanim-intensity: 30;"/>
                                                     <!-- Text animation -->
-                                                    <h1 class="x_carousel_title position-relative z-index-1">
+                                                    <h1 class="x_carousel_title position-relative display-1 z-index-1">
                                                         <span class="o_animated_text o_animate o_anim_fade_in o_anim_from_bottom o_visible">One step</span><br/>
                                                         <span class="o_animated_text o_animate o_anim_fade_in o_anim_from_bottom o_visible" style="animation-delay: 0.2s;">beyond</span><br/>
                                                         <span class="o_animated_text o_animate o_anim_fade_in o_anim_from_bottom o_visible" style="animation-delay: 0.4s;">the horizon</span>
@@ -49,11 +50,11 @@
                                                     <!-- Image animation -->
                                                     <img src="/web/image/website_airproof.img_drone" class="img img-fluid o_animate o_anim_zoom_out o_visible" alt="Drone"/>
                                                     <div class="x_bubble row justify-content-center justify-content-lg-end position-static position-lg-absolute">
-                                                        <div class="col-5 col-lg-5 offset-lg-7 z-index-1 x_bubble1 bg-white mb-3 pt24 pb24 px-4">
+                                                        <div class="col-5 col-lg-5 offset-lg-7 z-index-1 x_bubble_item x_bubble1 o_cc o_cc1 mb-3 pt24 pb24 px-4">
                                                             <p class="fw-bold pb8 m-0">Best drone of the year</p>
                                                             <p class="m-0 small">GQ France</p>
                                                         </div>
-                                                        <div class="col-5 col-lg-5 offset-lg-7 z-index-1 x_bubble2 bg-white mb-3 pt24 pb24 px-4">
+                                                        <div class="col-5 col-lg-5 offset-lg-7 z-index-1 x_bubble_item x_bubble2 o_cc o_cc1 mb-3 pt24 pb24 px-4">
                                                             <div class="s_rating_icons pb8">
                                                                 <span class="s_rating_active_icons">
                                                                     <i class="fa fa-star"/>
@@ -73,7 +74,7 @@
                                         </div>
                                     </div>
                                     <!-- Slide 02 -->
-                                    <div class="carousel-item o_colored_level pt24 pb64" data-name="Slide">
+                                    <div class="carousel-item o_colored_level pt64 pb64" data-name="Slide">
                                         <div class="oe_unremovable container">
                                             <div class="row content">
                                                 <div class="carousel-content col-lg-6 pt88 position-relative">
@@ -88,11 +89,11 @@
                                                 <div class="carousel-content col-lg-6">
                                                     <img src="/web/image/website_airproof.img_drone" class="img img-fluid" alt="Drone"/>
                                                     <div class="x_bubble row justify-content-center justify-content-lg-end position-static position-lg-absolute">
-                                                        <div class="col-5 col-lg-5 offset-lg-7 z-index-1 x_bubble1 bg-white mb-3 pt24 pb24 px-4">
+                                                        <div class="col-5 col-lg-5 offset-lg-7 z-index-1 x_bubble_item x_bubble1 o_cc o_cc1 mb-3 pt24 pb24 px-4">
                                                             <p class="fw-bold pb8 m-0">Best drone of the year</p>
                                                             <p class="m-0 small">GQ France</p>
                                                         </div>
-                                                        <div class="col-5 col-lg-5 offset-lg-7 z-index-1 x_bubble2 bg-white mb-3 pt24 pb24 px-4">
+                                                        <div class="col-5 col-lg-5 offset-lg-7 z-index-1 x_bubble_item x_bubble2 o_cc o_cc1 mb-3 pt24 pb24 px-4">
                                                             <div class="s_rating_icons pb8">
                                                                 <span class="s_rating_active_icons">
                                                                     <i class="fa fa-star"/>
@@ -174,25 +175,23 @@
                             </div>
                         </section>
                         <!-- Latest products section -->
-                        <section class="s_parallax o_colored_level o_cc o_cc5 s_parallax_no_overflow_hidden pt40 pb32" data-scroll-background-ratio="0" data-snippet="s_parallax" data-name="Parallax" style="background-image: linear-gradient(0deg, rgb(41, 128, 187) 0%, rgb(11, 142, 230) 100%) !important;">
-                            <div class="oe_structure oe_empty" data-editor-message-default="true" data-editor-message="DRAG BUILDING BLOCKS HERE">
-                                <!-- Products title -->
-                                <section class="s_title pb40 o_colored_level" data-vcss="001" data-snippet="s_title" data-name="Title">
-                                    <div class="s_allow_columns container">
-                                        <h2>Our latest products</h2>
-                                    </div>
-                                </section>
-                                <!--  Products dynamic snippet : custom template & Background gradient -->
-                                <section data-snippet="s_dynamic_snippet_products" class="s_product_product_airproof s_dynamic_snippet_products s_dynamic o_colored_level o_dynamic_empty" data-name="Products" data-filter-id="3" data-template-key="website_airproof.dynamic_filter_template_product_product_airproof" data-product-category-id="all" data-number-of-records="16" data-carousel-interval="5000">
-                                    <div class="container o_not_editable">
+                        <section data-snippet="s_dynamic_snippet_products" class="s_dynamic_snippet_products s_dynamic s_dynamic_empty pt32 pb32 o_colored_level s_product_product_airproof o_dynamic_snippet_empty o_cc o_cc5" data-custom-template-data="{}" data-name="Produits" data-product-category-id="all" data-show-variants="" data-number-of-records="16" data-filter-id="3" data-carousel-interval="5000" data-template-key="website_airproof.dynamic_filter_template_product_product_airproof" style="background-image: linear-gradient(0deg, rgb(41, 128, 187) 0%, rgb(11, 142, 230) 100%) !important;">
+                            <div class="container">
+                                <div class="row s_nb_column_fixed">
+                                    <section class="s_dynamic_snippet_title oe_unremovable oe_unmovable d-flex flex-column flex-md-row mb-5 mb-lg-1 pb-5 pb-md-4 o_colored_level justify-content-between">
+                                        <div>
+                                            <h2>Our latest products</h2>
+                                        </div>
+                                    </section>
+                                    <section class="s_dynamic_snippet_content oe_unremovable oe_unmovable o_not_editable col o_colored_level">
                                         <div class="css_non_editable_mode_hidden">
-                                            <div class="missing_option_warning alert alert-info rounded-0 fade show d-none d-print-none">
-                                                Your Dynamic Snippet will be displayed here... This message is displayed because you did not provided both a filter and a template to use.<br/>
+                                            <div class="missing_option_warning alert alert-info fade show d-none d-print-none rounded-0 o_default_snippet_text">
+                                                Your Dynamic Snippet will be displayed here... This message is displayed because you did not provide both a filter and a template to use.<br/>
                                             </div>
                                         </div>
                                         <div class="dynamic_snippet_template"/>
-                                    </div>
-                                </section>
+                                    </section>
+                                </div>
                             </div>
                         </section>
                         <!-- Text-image block & Background shape -->

website_airproof/data/presets.xml

@@ -57,10 +57,14 @@
     <record id="website_sale.products_categories_top" model="ir.ui.view">
         <field name="active" eval="False"/>
     </record>
-    <!-- Collapse products categories -->
+    <!-- Enable Collapse products categories -->
     <record id="website_sale.option_collapse_products_categories" model="ir.ui.view">
         <field name="active" eval="True"/>
     </record>
+    <!-- Disable Collapse categories recursive -->
+    <record id="website_sale.option_collapse_products_categories" model="ir.ui.view">
+        <field name="active" eval="False"/>
+    </record>
     <!-- Enable Product Attributes filtring -->
     <record id="website_sale.products_attributes" model="ir.ui.view">
         <field name="active" eval="True"/>
@@ -79,7 +83,7 @@
     <record id="website_sale_wishlist.product_add_to_wishlist" model="ir.ui.view">
         <field name="active" eval="True"/>
     </record>
-    <!-- Disable quantity -->
+    <!-- Disable Quantity -->
     <record id="website_sale.product_quantity" model="ir.ui.view">
         <field name="active" eval="False"/>
     </record>
@@ -91,4 +95,8 @@
     <record id="website_sale.product_share_buttons" model="ir.ui.view">
         <field name="active" eval="False"/>
     </record>
-</odoo>
+    <!-- Enable More information -->
+    <record id="website_sale.accordion_more_information" model="ir.ui.view">
+        <field name="active" eval="True"/>
+    </record>
+</odoo>

website_airproof/data/shapes.xml

@@ -7,4 +7,4 @@
         <field name="url">/web_editor/shape/illustration/airproof/waves.svg</field>
         <field name="public" eval="True"/>
     </record>
-</odoo>
+</odoo>

website_airproof/data/website.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo noupdate="1">
+   <record id="website.default_website" model="website">
+      <field name="name">Airproof</field>
+      <field name="logo" type="base64" file="website_airproof/static/src/img/content/branding/airproof-logo.svg"/>
+      <field name="favicon" type="base64" file="website_airproof/static/description/airproof-favicon.png" />
+      <field name="shop_ppr">3</field>
+   </record>
+</odoo>

website_airproof/static/src/scss/bootstrap_overridden.scss

@@ -5,6 +5,14 @@ $h3-font-size: 2rem !default;
 $h4-font-size: 1.75rem !default;
 $h5-font-size: 1.5rem !default;
 $h6-font-size: 1.25rem !default;
+$display-font-sizes: (
+  1: 6.25rem,
+  2: 4.5rem,
+  3: 4rem,
+  4: 3.5rem,
+  5: 3rem,
+  6: 2.5rem
+);
 
 $headings-font-weight: 700 !default;
 $font-weight-normal: 400 !default;
@@ -29,4 +37,4 @@ $navbar-padding-y: 1.4rem !default;
 $navbar-nav-link-padding-x: 1rem !default;
 
 // Breadcrumb
-$breadcrumb-divider: quote("\f105") !default;
+$breadcrumb-divider: quote("\f105") !default;

website_airproof/static/src/scss/font.scss

@@ -0,0 +1,7 @@
+@font-face {
+    font-family: "Lato", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    src: url('/fonts/lato.woff') format('woff'),
+         url('/fonts/lato.woff2') format('woff2');
+}

website_airproof/static/src/scss/primary_variables.scss

@@ -35,8 +35,7 @@ $o-theme-font-configs: (
         ),
     ),
     'Lato': (
-        'family': ('Lato', 'Trebuchet MS', sans-serif),
-        'url': 'Lato:300,300i,400,400i,700,700i',
+        'family': ('Lato', 'Trebuchet MS', 'Roboto', sans-serif),
         'properties' : (
             'base': (
                 'font-size-base': 1.125rem,

website_airproof/static/src/scss/snippets/caroussel.scss

@@ -5,7 +5,9 @@
         .carousel-control-next-icon,
         .carousel-control-prev-icon,
         .carousel-control-next .fa,
-        .carousel-control-prev .fa {
+        .carousel-control-prev .fa,
+        .carousel-control-next .oi,
+        .carousel-control-prev .oi {
             display: none;
         }
         .carousel-control-next:after,
@@ -46,7 +48,7 @@
         .carousel-control-prev:after { border-radius: 10px 0 0 10px !important; }
         .carousel-control-next:after {
             border-radius: 0 10px 10px 0 !important;
-            left: 0 !important;
+            left: -4rem !important;
         }
         .carousel-control-prev {
             left: auto !important;

website_airproof/views/new_page_template_templates.xml

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+<!-- Building blocks for page templates -->
+    <template id="s_airproof_key_benefits_h2" inherit_id="website.s_key_benefits" primary="True">
+        <xpath expr="//h2" position="replace">
+            <h2 class="display-3-fs">Discover our service</h2>
+        </xpath>
+    </template>
+    <template id="new_page_template_airproof_services_s_key_benefits_h2" inherit_id="website_airproof.s_airproof_key_benefits_h2" primary="True"/>
+
+    <template id="new_page_template_airproof_services_s_parallax" inherit_id="website.s_parallax" primary="True"/>
+    <template id="new_page_template_airproof_services_s_call_to_action" inherit_id="website.s_call_to_action" primary="True"/>
+    <template id="new_page_template_airproof_services_s_airproof_carousel" inherit_id="website_airproof.s_airproof_carousel" primary="True"/>
+
+<!-- Page template: Services -->
+    <template id="new_page_template_sections_airproof_services" name="Airproof - New Page Template services">
+        <div id="wrap">
+            <t t-snippet-call="website_airproof.new_page_template_airproof_services_s_parallax"/>
+            <t t-snippet-call="website_airproof.new_page_template_airproof_services_s_key_benefits_h2"/>
+            <t t-snippet-call="website_airproof.new_page_template_airproof_services_s_call_to_action"/>
+            <t t-snippet-call="website_airproof.new_page_template_airproof_services_s_airproof_carousel"/>
+        </div>
+    </template>
+
+<!-- Add custom group to the list for page templates -->
+    <template id="new_page_template_groups" inherit_id="website.new_page_template_groups" name="Airproof - New Page Template Groups">
+        <xpath expr="//div[@id='custom']" position="after">
+            <div id="airproof">Airproof</div>
+        </xpath>
+    </template>
+</odoo>

website_airproof/views/snippets/options.xml

@@ -2,17 +2,12 @@
 <odoo>
 <!-- Add custom snippets to the builder -->
     <template id="snippets" inherit_id="website.snippets" name="Airproof - Custom Snippets">
-        <xpath expr="//*[@id='default_snippets']" position="before">
-            <t id="x_theme_snippets">
-                <div id="x_airproof_snippets" class="o_panel">
-                    <div class="o_panel_header">Airproof</div>
-                    <div class="o_panel_body">
-                        <!-- Carousel snippet -->
-                        <t t-snippet="website_airproof.s_airproof_carousel" t-thumbnail="/website_airproof/static/src/img/wbuilder/s-airproof-snippet.svg">
-                            <keywords>Carousel block</keywords>
-                        </t>
-                    </div>
-                </div>
+        <xpath expr="//snippets[@id='snippet_groups']/*[1]" position="before">
+            <t snippet-group="airproof" t-snippet="website.s_snippet_group" string="Airproof" t-thumbnail="/website_airproof/static/src/img/wbuilder/s-airproof-snippet.svg"/>
+        </xpath>
+        <xpath expr="//snippets[@id='snippet_structure']/*[1]" position="before">
+            <t t-snippet="website_airproof.s_airproof_carousel" string="Custom snippet" group="airproof">
+                <keywords>Carousel block</keywords>
             </t>
         </xpath>
     </template>