diff --git a/services/web/app/views/subscriptions/interstitial-payment.pug b/services/web/app/views/subscriptions/interstitial-payment.pug index 4fbc789c24..a0124eed89 100644 --- a/services/web/app/views/subscriptions/interstitial-payment.pug +++ b/services/web/app/views/subscriptions/interstitial-payment.pug @@ -25,15 +25,7 @@ block content +monthly_annual_switch("paywall-plans-page-toggle", '{}') - .row.plans-v2-table-sticky-header.plans-v2-table-sticky-header-individual.sticky(data-ol-plans-v2-table-sticky-header='individual') - .plans-v2-table-sticky-header-item - span #{translate("personal")} - .plans-v2-table-sticky-header-item.plans-v2-table-sticky-header-item-highlighted - span #{translate("standard")} - .plans-v2-table-sticky-header-item - span #{translate("professional")} - .plans-v2-table-sticky-header-item - span #{translate("student")} + +plans_v2_table_sticky_header(true, interstitialPaymentConfig) .row.plans-v2-table-container(data-ol-plans-v2-table-container='monthly') .col-sm-12 diff --git a/services/web/app/views/subscriptions/plans-marketing/v2/_cards_controls_tables.pug b/services/web/app/views/subscriptions/plans-marketing/v2/_cards_controls_tables.pug index 0bdc704779..d1dd7bf4a9 100644 --- a/services/web/app/views/subscriptions/plans-marketing/v2/_cards_controls_tables.pug +++ b/services/web/app/views/subscriptions/plans-marketing/v2/_cards_controls_tables.pug @@ -42,7 +42,7 @@ include ./_mixins .col-sm-12 +group_plans_license_picker() -+table_sticky_header ++table_sticky_header_all(plansV2Config) .row.plans-v2-table-container(data-ol-plans-v2-period='monthly') .col-sm-12(data-ol-plans-v2-view='individual') 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 07e7d4aaec..78e9d92fa9 100644 --- a/services/web/app/views/subscriptions/plans-marketing/v2/_mixins.pug +++ b/services/web/app/views/subscriptions/plans-marketing/v2/_mixins.pug @@ -465,43 +465,43 @@ mixin additional_link_buy(eventTrackingKey, additionalEventSegmentation, plan, p event-segmentation=segmentation ) #{translate("buy_now_no_exclamation_mark")} -mixin table_sticky_header - .row.plans-v2-table-sticky-header.plans-v2-table-sticky-header-individual.sticky( +mixin plans_v2_table_sticky_header(withSwitch, config) + - var tableHeadKeys = Object.keys(config.tableHead) + .row.plans-v2-table-sticky-header.sticky( data-ol-plans-v2-table-sticky-header + class=(withSwitch ? 'plans-v2-table-sticky-header-with-switch' : 'plans-v2-table-sticky-header-without-switch') + ) + - for (var i = 0; i < tableHeadKeys.length; i++) + - var tableHeadKey = tableHeadKeys[i] + - var translateKey = tableHeadKey.split('_')[1] + .plans-v2-table-sticky-header-item( + class=(config.highlightedColumn.index === i ? 'plans-v2-table-sticky-header-item-highlighted' : '') + ) + case tableHeadKey + when 'individual_collaborator' + span #{translate('standard')} + when 'group_professional' + span #{translate(tableHeadKey)} + when 'group_collaborator' + span #{translate('group_standard')} + default + span #{translate(translateKey)} + +mixin table_sticky_header_all(plansV2Config) + .row.plans-v2-table-sticky-header-container( data-ol-plans-v2-view='individual' ) - .plans-v2-table-sticky-header-item - span #{translate("free")} - .plans-v2-table-sticky-header-item - span #{translate("personal")} - .plans-v2-table-sticky-header-item.plans-v2-table-sticky-header-item-highlighted - span #{translate("standard")} - .plans-v2-table-sticky-header-item - span #{translate("professional")} - - .row.plans-v2-table-sticky-header.plans-v2-table-sticky-header-group.sticky( + +plans_v2_table_sticky_header(true, plansV2Config.individual) + .row.plans-v2-table-sticky-header-container( hidden - data-ol-plans-v2-table-sticky-header data-ol-plans-v2-view='group' ) - .plans-v2-table-sticky-header-item - span #{translate("group_standard")} - .plans-v2-table-sticky-header-item.plans-v2-table-sticky-header-item-highlighted - span #{translate("group_professional")} - .plans-v2-table-sticky-header-item - span #{translate("organization")} - - .row.plans-v2-table-sticky-header.plans-v2-table-sticky-header-student.sticky( + +plans_v2_table_sticky_header(false, plansV2Config.group) + .row.plans-v2-table-sticky-header-container( hidden - data-ol-plans-v2-table-sticky-header data-ol-plans-v2-view='student' ) - .plans-v2-table-sticky-header-item - span #{translate("free")} - .plans-v2-table-sticky-header-item.plans-v2-table-sticky-header-item-highlighted - span #{translate("student")} - .plans-v2-table-sticky-header-item - span #{translate("university")} + +plans_v2_table_sticky_header(true, plansV2Config.student) mixin monthly_annual_switch(eventTracking, eventSegmentation) .row diff --git a/services/web/frontend/stylesheets/app/plans-v2.less b/services/web/frontend/stylesheets/app/plans-v2.less index 66a1dedca6..2a516ca0d4 100644 --- a/services/web/frontend/stylesheets/app/plans-v2.less +++ b/services/web/frontend/stylesheets/app/plans-v2.less @@ -1046,34 +1046,20 @@ p.plans-v2-table-green-highlighted-text { } } -.plans-v2-table-sticky-header-group, -.plans-v2-table-sticky-header-student { - .plans-v2-table-sticky-header-item { - // has 3 visible column on the table for mobile view - width: 33.33%; - } +.plans-v2-table-sticky-header-container { + height: 100%; + width: 100%; + position: absolute; } -.plans-v2-table-sticky-header-individual { - .plans-v2-table-sticky-header-item { - // has 4 visible column on the table for mobile view - width: 25%; - } -} - -.plans-v2-table-sticky-header-group { +.plans-v2-table-sticky-header-without-switch { margin-bottom: -107px; margin-top: 67px; } -.plans-v2-table-sticky-header-individual, -.plans-v2-table-sticky-header-student { +.plans-v2-table-sticky-header-with-switch { margin-bottom: -140px; margin-top: 100px; - - @media (max-width: @screen-xs-max) { - margin-top: 118px; - } } .plans-v2-table-sticky-header { @@ -1097,6 +1083,7 @@ p.plans-v2-table-green-highlighted-text { .plans-v2-table-sticky-header-item { background-color: @white; + flex: 1 1 0px; span { margin: 0px @margin-xs;