pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] website: improve countdown snippet on mobile

Browse Source 
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>
This commit is contained in:
jpr-odoo
2021-01-26 15:56:28 +00:00
committed by qsm-odoo
co-authored by Siddarth Gajjar
parent cb311051cc
commit 149cc6c2ed
1 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/snippets/s_countdown/000.js
+11 -9
View File
@@ -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');
}
}