diff --git a/services/web/app/src/Features/Subscription/st-personal-off-default/plansConfig.js b/services/web/app/src/Features/Subscription/st-personal-off-default/plansConfig.js index b6747e4d2c..59253b4ea9 100644 --- a/services/web/app/src/Features/Subscription/st-personal-off-default/plansConfig.js +++ b/services/web/app/src/Features/Subscription/st-personal-off-default/plansConfig.js @@ -2,6 +2,7 @@ const plansV2Features = require('./plansFeatures') const config = { individual: { + maxColumn: 4, tableHead: { individual_free: {}, individual_personal: {}, diff --git a/services/web/app/src/Features/Subscription/st-personal-off-variant/plansConfig.js b/services/web/app/src/Features/Subscription/st-personal-off-variant/plansConfig.js index 7a39a1df20..6723ef9f5e 100644 --- a/services/web/app/src/Features/Subscription/st-personal-off-variant/plansConfig.js +++ b/services/web/app/src/Features/Subscription/st-personal-off-variant/plansConfig.js @@ -2,6 +2,7 @@ const plansV2Features = require('./plansFeatures') const config = { individual: { + maxColumn: 3, tableHead: { individual_free: {}, individual_collaborator: {}, diff --git a/services/web/app/views/subscriptions/plans-marketing/st-personal-off-default/v2/_mixins.pug b/services/web/app/views/subscriptions/plans-marketing/st-personal-off-default/v2/_mixins.pug index 2e33a25a2f..aa8108480f 100644 --- a/services/web/app/views/subscriptions/plans-marketing/st-personal-off-default/v2/_mixins.pug +++ b/services/web/app/views/subscriptions/plans-marketing/st-personal-off-default/v2/_mixins.pug @@ -14,7 +14,7 @@ mixin plans_v2_table(period, config) - var baseColspan = config.baseColspan || 1 - var maxColumn = config.maxColumn || 4 - var discountedColumn = config.discountedColumn || {} - tr + tr(class=`cols-${maxColumn}`) th(colspan=baseColspan) - for (var i = 0; i < maxColumn; i++) - var tableHeadKey = Object.keys(config.tableHead)[i] @@ -91,7 +91,7 @@ mixin plans_v2_table(period, config) span ) for feature, featureIndex in featuresPerSection.items tr( - class=(featureIndex === (featuresPerSection.items.length - 1) ? 'plans-v2-table-row-last-row-per-section' : '') + class=(featureIndex === (featuresPerSection.items.length - 1) ? `plans-v2-table-row-last-row-per-section cols-${maxColumn}` : `cols-${maxColumn}`) ) td( event-tracking="plans-page-table" diff --git a/services/web/app/views/subscriptions/plans-marketing/st-personal-off-variant/v2/_mixins.pug b/services/web/app/views/subscriptions/plans-marketing/st-personal-off-variant/v2/_mixins.pug index 9ae1f31ffe..38e51f9298 100644 --- a/services/web/app/views/subscriptions/plans-marketing/st-personal-off-variant/v2/_mixins.pug +++ b/services/web/app/views/subscriptions/plans-marketing/st-personal-off-variant/v2/_mixins.pug @@ -14,7 +14,7 @@ mixin plans_v2_table(period, config) - var baseColspan = config.baseColspan || 1 - var maxColumn = config.maxColumn || 4 - var discountedColumn = config.discountedColumn || {} - tr + tr(class=`cols-${maxColumn}`) th(colspan=baseColspan) - for (var i = 0; i < maxColumn; i++) - var tableHeadKey = Object.keys(config.tableHead)[i] @@ -89,7 +89,7 @@ mixin plans_v2_table(period, config) span ) for feature, featureIndex in featuresPerSection.items tr( - class=(featureIndex === (featuresPerSection.items.length - 1) ? 'plans-v2-table-row-last-row-per-section' : '') + class=(featureIndex === (featuresPerSection.items.length - 1) ? `plans-v2-table-row-last-row-per-section cols-${maxColumn}` : `cols-${maxColumn}`) ) td( event-tracking="plans-page-table" diff --git a/services/web/frontend/stylesheets/app/plans-v2.less b/services/web/frontend/stylesheets/app/plans-v2.less index e234bb8746..a1d09852a2 100644 --- a/services/web/frontend/stylesheets/app/plans-v2.less +++ b/services/web/frontend/stylesheets/app/plans-v2.less @@ -535,8 +535,9 @@ span.plans-v2-license-picker-educational-discount-learn-more-container { } } + // for remove-personal-plan split test default variant @media (max-width: @screen-xs-max) { - tr:not(.plans-v2-table-divider) { + tr.cols-4:not(.plans-v2-table-divider) { td:not(:first-of-type), th:not(:first-of-type) { // 25% is because table-individual have 4 real columns on mobile @@ -545,6 +546,16 @@ span.plans-v2-license-picker-educational-discount-learn-more-container { width: 25%; } } + // for remove-personal-plan split test personal-off variant + tr.cols-3:not(.plans-v2-table-divider) { + td:not(:first-of-type), + th:not(:first-of-type) { + // 33% is because table-individual have 3 real columns on mobile + // it actually has 4 table columns, but on mobile version, the first column become row + // we need to force 33% width to make each of 3 columns have an equal width of 1/3 screen width + width: calc(100% / 3); + } + } tr { &:last-child {