[IMP] website: review gallery snippet

Review the gallery snippet. It has been improved in multiple ways.
Added new options, etc.

Part of https://github.com/odoo/odoo/pull/45096
task-2162952

1 files changed, 17 insertions, 12 deletions

diff --git a/addons/website/static/src/xml/website.gallery.xml b/addons/website/static/src/xml/website.gallery.xml
index 23bcf471eb2..079a14c731d 100644
--- a/addons/website/static/src/xml/website.gallery.xml
+++ b/addons/website/static/src/xml/website.gallery.xml
@@ -13,8 +13,8 @@
         <div t-attf-id="#{id}" class="carousel slide" data-ride="carousel" t-attf-data-interval="#{interval}" style="margin: 0 12px;">
             <div class="carousel-inner" style="padding: 0;">
                  <t t-foreach="images" t-as="image">
-                    <div t-attf-class="carousel-item #{image_index == index and 'active' or ''}">
-                        <img t-attf-class="img img-fluid d-block #{userStyle}" t-att-src="image.src" t-att-alt="image.alt"/>
+                    <div t-attf-class="carousel-item #{image_index == index and 'active' or None}">
+                        <img t-attf-class="#{attrClass || 'img img-fluid d-block'}" t-att-src="image.src" t-att-style="attrStyle" t-att-alt="image.alt" data-name="Image"/>
                     </div>
                  </t>
             </div>
@@ -24,15 +24,21 @@
                     <i class="fa fa-chevron-left"/>
                 </li>
                 <t t-foreach="images" t-as="image">
-                    <li t-attf-data-target="##{id}" t-att-data-slide-to="image_index" t-att-class="image_index == index and 'active'" t-attf-style="background-image: url(#{image.src})"></li>
+                    <li t-attf-data-target="##{id}" t-att-data-slide-to="image_index" t-att-class="image_index == index and 'active' or None" t-attf-style="background-image: url(#{image.src})"></li>
                 </t>
                 <li class="o_indicators_right text-center" aria-label="Next" title="Next">
                     <i class="fa fa-chevron-right"/>
                 </li>
             </ul>
 
-            <a class="carousel-control-prev text-black" t-attf-href="##{id}" data-slide="prev" aria-label="Previous" title="Previous"><span class="fa fa-chevron-left"/></a>
-            <a class="carousel-control-next text-black" t-attf-href="##{id}" data-slide="next" aria-label="Next" title="Next"><span class="fa fa-chevron-right"/></a>
+            <a class="carousel-control-prev" t-attf-href="##{id}" data-slide="prev" aria-label="Previous" title="Previous">
+                <span class="fa fa-chevron-left fa-2x text-white"></span>
+                <span class="sr-only">Previous</span>
+            </a>
+            <a class="carousel-control-next" t-attf-href="##{id}" data-slide="next" aria-label="Next" title="Next">
+                <span class="fa fa-chevron-right fa-2x text-white"></span>
+                <span class="sr-only">Next</span>
+            </a>
         </div>
     </t>
 
@@ -47,15 +53,14 @@
         ========================================================================
     -->
     <t t-name="website.gallery.slideshow.lightbox">
-        <div role="dialog" class="modal o_technical_modal fade" aria-labbelledby="Image Gallery Dialog">
-            <div class="modal-dialog modal-lg" role="Picture Gallery"
-                t-attf-style="min-width: #{dim.min_width}px ; min-height: #{dim.min_height}px ; max-width: #{dim.max_width}px ; max-height: #{dim.max_height}px ; height: #{dim.height}px ;">
-                <div class="modal-content">
-                    <main class="modal-body o_slideshow">
-                        <button type="button" class="close" data-dismiss="modal" style="position: absolute; right: 12px; top: 10px;"><span role="img" aria-label="Close">&amp;times;</span><span class="sr-only">Close</span></button>
+        <div role="dialog" class="modal o_technical_modal fade s_gallery_lightbox p-0" aria-labbelledby="Image Gallery Dialog">
+            <div class="modal-dialog m-0" role="Picture Gallery"
+                t-attf-style="">
+                <div class="modal-content bg-transparent">
+                    <main class="modal-body o_slideshow bg-transparent">
+                        <button type="button" class="close text-white" data-dismiss="modal" style="position: absolute; right: 10px; top: 10px;"><span role="img" aria-label="Close">&amp;times;</span><span class="sr-only">Close</span></button>
                         <t t-call="website.gallery.slideshow"></t>
                     </main>
-
                 </div>
             </div>
         </div>