diff --git a/services/web/app/src/Features/Subscription/plansV2Config.js b/services/web/app/src/Features/Subscription/plansV2Config.js index 0464382f09..3ad7de8630 100644 --- a/services/web/app/src/Features/Subscription/plansV2Config.js +++ b/services/web/app/src/Features/Subscription/plansV2Config.js @@ -36,12 +36,16 @@ const config = { additionalEventSegmentation: { 'plan-page-layout-v2': 'new-plans-page' }, }, student: { + baseColspan: 2, + maxColumn: 3, tableHead: { - student_free: {}, + student_free: { + colspan: 3, + }, student_student: { showExtraContent: false, + colspan: 3, }, - student_university: {}, }, features: plansV2Features.student, highlightedColumn: { diff --git a/services/web/app/src/Features/Subscription/plansV2Features.js b/services/web/app/src/Features/Subscription/plansV2Features.js index 51492ee455..50ad81be65 100644 --- a/services/web/app/src/Features/Subscription/plansV2Features.js +++ b/services/web/app/src/Features/Subscription/plansV2Features.js @@ -466,7 +466,6 @@ const studentPlans = [ plans: { free: '1 user', student: '1 user', - university: 'Multiple users', }, }, { @@ -476,7 +475,6 @@ const studentPlans = [ plans: { free: 'You + 1', student: 'You + 6', - university: 'Project author + 10 or unlimited', }, }, ], @@ -493,7 +491,6 @@ const studentPlans = [ plans: { free: '1 minute', student: '4 minutes', - university: '4 minutes', }, }, { @@ -503,7 +500,6 @@ const studentPlans = [ plans: { free: false, student: true, - university: true, }, }, { @@ -513,7 +509,6 @@ const studentPlans = [ plans: { free: false, student: true, - university: true, }, }, { @@ -523,7 +518,6 @@ const studentPlans = [ plans: { free: false, student: true, - university: true, }, }, { @@ -533,7 +527,6 @@ const studentPlans = [ plans: { free: false, student: true, - university: true, }, }, ], @@ -550,7 +543,6 @@ const studentPlans = [ plans: { free: true, student: true, - university: true, }, }, { @@ -560,7 +552,6 @@ const studentPlans = [ plans: { free: true, student: true, - university: true, }, }, { @@ -570,7 +561,6 @@ const studentPlans = [ plans: { free: true, student: true, - university: true, }, }, { @@ -580,7 +570,6 @@ const studentPlans = [ plans: { free: false, student: true, - university: true, }, }, { @@ -590,7 +579,6 @@ const studentPlans = [ plans: { free: false, student: true, - university: true, }, }, { @@ -600,7 +588,6 @@ const studentPlans = [ plans: { free: false, student: true, - university: true, }, }, { @@ -610,7 +597,6 @@ const studentPlans = [ plans: { free: false, student: true, - university: true, }, }, { @@ -620,7 +606,6 @@ const studentPlans = [ plans: { free: false, student: true, - university: true, }, }, { @@ -630,7 +615,6 @@ const studentPlans = [ plans: { free: false, student: true, - university: true, }, }, ], @@ -647,7 +631,6 @@ const studentPlans = [ plans: { free: false, student: false, - university: true, }, }, { @@ -657,7 +640,6 @@ const studentPlans = [ plans: { free: false, student: false, - university: true, }, }, { @@ -667,7 +649,6 @@ const studentPlans = [ plans: { free: false, student: false, - university: true, }, }, { @@ -677,7 +658,6 @@ const studentPlans = [ plans: { free: false, student: false, - university: true, }, }, { @@ -687,7 +667,6 @@ const studentPlans = [ plans: { free: false, student: false, - university: true, }, }, { @@ -697,7 +676,6 @@ const studentPlans = [ plans: { free: false, student: false, - university: true, }, }, { @@ -707,7 +685,6 @@ const studentPlans = [ plans: { free: false, student: false, - university: true, }, }, ], diff --git a/services/web/app/views/subscriptions/plans-marketing/v2/_mixins.pug b/services/web/app/views/subscriptions/plans-marketing/v2/_mixins.pug index ae44aa09c3..390d1e29ac 100644 --- a/services/web/app/views/subscriptions/plans-marketing/v2/_mixins.pug +++ b/services/web/app/views/subscriptions/plans-marketing/v2/_mixins.pug @@ -1,14 +1,18 @@ mixin plans_v2_table(period, config) + - var baseColspan = config.baseColspan || 1 + - var maxColumn = config.maxColumn || 4 tr - th - - for (var i = 0; i < 4; i++) + th(colspan=baseColspan) + - for (var i = 0; i < maxColumn; i++) - var tableHeadKey = Object.keys(config.tableHead)[i] - - var tableHeadOptions = Object.values(config.tableHead)[i] + - var tableHeadOptions = Object.values(config.tableHead)[i] || {} + - var colspan = tableHeadOptions.colspan || baseColspan - var highlighted = i === config.highlightedColumn.index - var eventTrackingKey = config.eventTrackingKey - var additionalEventSegmentation = config.additionalEventSegmentation || {} th( class=(i === config.highlightedColumn.index ? 'plans-v2-table-green-highlighted' : (i === config.highlightedColumn.index - 1 ? 'plans-v2-table-cell-before-highlighted-column' : '')) + colspan=colspan ) if (highlighted) p.plans-v2-table-green-highlighted-text !{config.highlightedColumn.text[period]} @@ -35,9 +39,13 @@ mixin plans_v2_table(period, config) +table_head_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period) for featuresPerSection in config.features + - var dividerColspan = Object.values(config.tableHead).reduce((prev, curr) => (prev) + (curr.colspan || 1), baseColspan) if featuresPerSection.divider tr.plans-v2-table-divider - td(colspan=Object.keys(config.tableHead).length + 1) + td( + colspan=dividerColspan + class=((config.highlightedColumn.index === Object.keys(config.tableHead).length - 1) ? 'plans-v2-table-divider-highlighted' : '') + ) div b.plans-v2-table-divider-label #{translate(featuresPerSection.dividerLabel)} //- will only appear on screen width >= 768px (using CSS) @@ -59,7 +67,13 @@ mixin plans_v2_table(period, config) tr( class=(featureIndex === (featuresPerSection.items.length - 1) ? 'plans-v2-table-row-last-row-per-section' : '') ) - td(event-tracking="plans-page-table" event-tracking-trigger="hover" event-tracking-ga="subscription-funnel" event-tracking-label=`${feature.feature}`) + td( + event-tracking="plans-page-table" + event-tracking-trigger="hover" + event-tracking-ga="subscription-funnel" + event-tracking-label=`${feature.feature}` + colspan=baseColspan + ) .plans-v2-table-feature-name if feature.info span #{translate(feature.feature)} @@ -81,8 +95,11 @@ mixin plans_v2_table(period, config) else | #{translate(feature.feature)} for plan, planIndex in Object.keys(feature.plans) + - var tableHeadOptions = Object.values(config.tableHead)[planIndex] || {} + - var colspan = tableHeadOptions.colspan || baseColspan td( class=(planIndex === config.highlightedColumn.index ? 'plans-v2-table-green-highlighted' : (planIndex === config.highlightedColumn.index - 1 ? 'plans-v2-table-cell-before-highlighted-column' : '')) + colspan=colspan ) +table_cell(feature, plan) diff --git a/services/web/frontend/stylesheets/app/plans-v2.less b/services/web/frontend/stylesheets/app/plans-v2.less index d2d95f6aeb..c505a56fb2 100644 --- a/services/web/frontend/stylesheets/app/plans-v2.less +++ b/services/web/frontend/stylesheets/app/plans-v2.less @@ -601,7 +601,7 @@ span.plans-v2-license-picker-educational-discount-learn-more-container { background-clip: padding-box; /* needed for firefox when there is bg color */ text-align: center; - &:not(.plans-v2-table-cell-before-highlighted-column):not(.plans-v2-table-green-highlighted) { + &:not(.plans-v2-table-cell-before-highlighted-column):not(.plans-v2-table-green-highlighted):not(.plans-v2-table-divider-highlighted) { border-right: 1px solid @ol-blue-gray-0; @media (max-width: @screen-xs-max) { @@ -638,7 +638,7 @@ span.plans-v2-license-picker-educational-discount-learn-more-container { text-align: left; } - &:last-child { + &:last-child:not(.plans-v2-table-green-highlighted):not(.plans-v2-table-divider-highlighted) { border-right: 0; } } @@ -966,6 +966,10 @@ tr.plans-v2-table-divider { } } + .plans-v2-table-divider-highlighted { + border-right: 2px solid @ol-green; + } + @media (max-width: @screen-xs-max) { // need the colspan attribute selector to increase specificity to override more specific css rule on another selector td[colspan] { @@ -1000,6 +1004,10 @@ tr.plans-v2-table-divider { } } } + + .plans-v2-table-divider-highlighted { + border-right: none; + } } }