From 149cc6c2ed810272f497b80b08c866d78b223c68 Mon Sep 17 00:00:00 2001
From: jpr-odoo <jpr@openerp.com>
Date: Thu, 8 Oct 2020 05:02:00 +0000
Subject: [PATCH] [IMP] website: improve countdown snippet on mobile

Before this commit, the countdown snippet was layouted vertically on
mobile devices.

After this commit, the countdown snippet is layouted vertically,
just like on desktop.

task-2349095

closes odoo/odoo#59756

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: Siddarth Gajjar <sga@odoo.com>
---
 .../static/src/snippets/s_countdown/000.js    | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/addons/website/static/src/snippets/s_countdown/000.js b/addons/website/static/src/snippets/s_countdown/000.js
index f0f9269272f..f70d7be8540 100644
--- a/addons/website/static/src/snippets/s_countdown/000.js
+++ b/addons/website/static/src/snippets/s_countdown/000.js
@@ -20,6 +20,7 @@ const CountdownWidget = publicWidget.Widget.extend({
      */
     start: function () {
         this.$wrapper = this.$('.s_countdown_canvas_wrapper');
+        this.$wrapper.addClass('d-flex justify-content-center');
         this.hereBeforeTimerEnds = false;
         this.endAction = this.el.dataset.endAction;
         this.endTime = parseInt(this.el.dataset.endTime);
@@ -52,10 +53,10 @@ const CountdownWidget = publicWidget.Widget.extend({
      */
     destroy: function () {
         this.$('.s_countdown_end_redirect_message').remove();
-        this.$('canvas').remove();
         this.$('.s_countdown_end_message').addClass('d-none');
         this.$('.s_countdown_text_wrapper').remove();
         this.$('.s_countdown_canvas_wrapper').removeClass('d-none');
+        this.$('.s_countdown_canvas_flex').remove();
 
         clearInterval(this.setInterval);
         this._super(...arguments);
@@ -125,7 +126,7 @@ const CountdownWidget = publicWidget.Widget.extend({
         this.diff = [];
         if (this._isUnitVisible('d') && !(this.onlyOneUnit && delta < 86400)) {
             this.diff.push({
-                canvas: $('<canvas/>', {class: 'o_temp_auto_element'}).appendTo(this.$wrapper)[0],
+                canvas: $('<div class="s_countdown_canvas_flex o_temp_auto_element"><canvas class="w-100"/></div>').appendTo(this.$wrapper)[0],
                 // There is no logical number of unit (total) on which day units
                 //  can be compared against, so we use an arbitrary number.
                 total: 15,
@@ -135,7 +136,7 @@ const CountdownWidget = publicWidget.Widget.extend({
         }
         if (this._isUnitVisible('h') || (this.onlyOneUnit && delta < 86400 && delta > 3600)) {
             this.diff.push({
-                canvas: $('<canvas/>', {class: 'o_temp_auto_element'}).appendTo(this.$wrapper)[0],
+                canvas: $('<div class="s_countdown_canvas_flex o_temp_auto_element"><canvas class="w-100"/></div>').appendTo(this.$wrapper)[0],
                 total: 24,
                 label: _t("Hours"),
                 nbSeconds: 3600,
@@ -143,7 +144,7 @@ const CountdownWidget = publicWidget.Widget.extend({
         }
         if (this._isUnitVisible('m') || (this.onlyOneUnit && delta < 3600 && delta > 60)) {
             this.diff.push({
-                canvas: $('<canvas/>', {class: 'o_temp_auto_element'}).appendTo(this.$wrapper)[0],
+                canvas: $('<div class="s_countdown_canvas_flex o_temp_auto_element"><canvas class="w-100"/></div>').appendTo(this.$wrapper)[0],
                 total: 60,
                 label: _t("Minutes"),
                 nbSeconds: 60,
@@ -151,7 +152,7 @@ const CountdownWidget = publicWidget.Widget.extend({
         }
         if (this._isUnitVisible('s') || (this.onlyOneUnit && delta < 60)) {
             this.diff.push({
-                canvas: $('<canvas/>', {class: 'o_temp_auto_element'}).appendTo(this.$wrapper)[0],
+                canvas: $('<div class="s_countdown_canvas_flex o_temp_auto_element"><canvas class="w-100"/></div>').appendTo(this.$wrapper)[0],
                 total: 60,
                 label: _t("Seconds"),
                 nbSeconds: 1,
@@ -175,16 +176,17 @@ const CountdownWidget = publicWidget.Widget.extend({
      * @private
      */
     _render: function () {
+
         // If only one unit mode, restart widget on unit change to populate diff
         if (this.onlyOneUnit && this._getDelta() < this.diff[0].nbSeconds) {
-            this.$('canvas').remove();
+            this.$('.s_countdown_canvas_flex').remove();
             this._initTimeDiff();
         }
         this._updateTimeDiff();
 
         const hideCountdown = this.isFinished && !this.editableMode && this.$el.hasClass('hide-countdown');
         if (this.layout === 'text') {
-            this.$('canvas').addClass('d-none');
+            this.$('.s_countdown_canvas_flex').addClass('d-none');
             if (!this.$textWrapper) {
                 this.$textWrapper = $('<span/>').attr({
                     class: 's_countdown_text_wrapper d-none',
@@ -202,7 +204,7 @@ const CountdownWidget = publicWidget.Widget.extend({
             this.$('.s_countdown_text').text(countdownText.toLowerCase());
         } else {
             for (const val of this.diff) {
-                const canvas = val.canvas;
+                const canvas = val.canvas.querySelector('canvas');
                 const ctx = canvas.getContext("2d");
                 ctx.canvas.width = this.width;
                 ctx.canvas.height = this.size;
@@ -224,7 +226,7 @@ const CountdownWidget = publicWidget.Widget.extend({
                 if (this.progressBarStyle !== 'none') {
                     this._drawProgressBar(ctx, val.nb, val.total, this.progressBarWeight === 'thin');
                 }
-                $(canvas).toggleClass('mx-2', this.layout === 'boxes');
+                this.$('.s_countdown_canvas_flex').toggleClass('mx-1', this.layout === 'boxes');
             }
         }