mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-07 20:31:06 -05:00
Merge pull request #19379 from overleaf/jel-light-touch-separate-rows
[web] Separate column header sections into new rows GitOrigin-RevId: cffe39933f877eaf07a9e772fd76b8e18dd95d3e
This commit is contained in:
Jessica Lawshe
Copybot
parent
fada0b80eb
commit
300e46a28d
2 changed files with 190 additions and 219 deletions
|
|
@ -26,6 +26,27 @@ mixin currency_and_payment_methods()
|
||||||
i.fa.fa-cc-paypal.fa-2x(aria-hidden="true")
|
i.fa.fa-cc-paypal.fa-2x(aria-hidden="true")
|
||||||
span.sr-only #{translate('payment_method_accepted', { paymentMethod: 'Paypal' })}
|
span.sr-only #{translate('payment_method_accepted', { paymentMethod: 'Paypal' })}
|
||||||
|
|
||||||
|
mixin plans_cta(tableHeadKey, highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||||
|
case tableHeadKey
|
||||||
|
when 'individual_free'
|
||||||
|
+btn_buy_individual_free()
|
||||||
|
when 'individual_collaborator'
|
||||||
|
+btn_buy_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||||
|
when 'individual_professional'
|
||||||
|
+btn_buy_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||||
|
when 'group_collaborator'
|
||||||
|
+btn_buy_group_collaborator(highlighted, eventTrackingKey)
|
||||||
|
+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_collaborator')
|
||||||
|
when 'group_professional'
|
||||||
|
+btn_buy_group_professional(highlighted, eventTrackingKey)
|
||||||
|
+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_professional')
|
||||||
|
when 'group_organization'
|
||||||
|
+btn_buy_group_organization(highlighted, eventTrackingKey)
|
||||||
|
small.plans-table-th-content-additional-link.invisible(aria-hidden="true")
|
||||||
|
when 'student_free'
|
||||||
|
+btn_buy_student_free(highlighted)
|
||||||
|
when 'student_student'
|
||||||
|
+btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||||
|
|
||||||
mixin plans_table(period, config)
|
mixin plans_table(period, config)
|
||||||
- var maxColumn = config.maxColumn || 4
|
- var maxColumn = config.maxColumn || 4
|
||||||
|
|
@ -42,50 +63,116 @@ mixin plans_table(period, config)
|
||||||
- var additionalEventSegmentation = config.additionalEventSegmentation || {}
|
- var additionalEventSegmentation = config.additionalEventSegmentation || {}
|
||||||
- var thClass = highlighted ? 'plans-table-green-highlighted' : ''
|
- var thClass = highlighted ? 'plans-table-green-highlighted' : ''
|
||||||
|
|
||||||
case tableHeadKey
|
|
||||||
when 'individual_free'
|
|
||||||
- var ariaLabel = translate("free")
|
|
||||||
when 'individual_collaborator'
|
|
||||||
- var ariaLabel = translate("standard")
|
|
||||||
when 'individual_professional'
|
|
||||||
- var ariaLabel = translate("professional")
|
|
||||||
when 'group_collaborator'
|
|
||||||
- var ariaLabel = translate("group_standard")
|
|
||||||
when 'group_professional'
|
|
||||||
- var ariaLabel = translate("group_professional")
|
|
||||||
when 'group_organization'
|
|
||||||
- var ariaLabel = translate("organization")
|
|
||||||
when 'student_free'
|
|
||||||
- var ariaLabel = translate("free")
|
|
||||||
when 'student_student'
|
|
||||||
- var ariaLabel = translate("student")
|
|
||||||
default
|
|
||||||
- var ariaLabel = undefined
|
|
||||||
th(
|
th(
|
||||||
aria-label=ariaLabel
|
|
||||||
class=thClass
|
class=thClass
|
||||||
scope="col"
|
scope="col"
|
||||||
)
|
)
|
||||||
.plans-table-th
|
.plans-table-th
|
||||||
if (highlighted)
|
if (highlighted)
|
||||||
p.plans-table-green-highlighted-text #{translate(config.highlightedColumn.text[period]).toUpperCase()}
|
p.plans-table-green-highlighted-text #{translate(config.highlightedColumn.text[period]).toUpperCase()}
|
||||||
|
.plans-table-th-content
|
||||||
|
if tableHeadKey
|
||||||
case tableHeadKey
|
case tableHeadKey
|
||||||
when 'individual_free'
|
when 'individual_free'
|
||||||
+table_head_individual_free(highlighted, period)
|
| #{translate("free")}
|
||||||
when 'individual_collaborator'
|
when 'individual_collaborator'
|
||||||
+table_head_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
| #{translate("standard")}
|
||||||
when 'individual_professional'
|
when 'individual_professional'
|
||||||
+table_head_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
| #{translate("professional")}
|
||||||
when 'group_collaborator'
|
when 'group_collaborator'
|
||||||
+table_head_group_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation)
|
| #{translate("group_standard")}
|
||||||
when 'group_professional'
|
when 'group_professional'
|
||||||
+table_head_group_professional(highlighted, eventTrackingKey, additionalEventSegmentation)
|
| #{translate("group_professional")}
|
||||||
when 'group_organization'
|
when 'group_organization'
|
||||||
+table_head_group_organization(highlighted, eventTrackingKey, additionalEventSegmentation)
|
| #{translate("organization")}
|
||||||
when 'student_free'
|
when 'student_free'
|
||||||
+table_head_student_free(highlighted, period)
|
| #{translate("free")}
|
||||||
when 'student_student'
|
when 'student_student'
|
||||||
+table_head_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period, tableHeadOptions.showExtraContent)
|
| #{translate("student")}
|
||||||
|
|
||||||
|
tr(class=`plans-table-price-row plans-table-cols-${tableHeadKeys.length}`)
|
||||||
|
td
|
||||||
|
- for (const [tableHeadKey] of Object.entries(config.tableHead))
|
||||||
|
- var highlighted = highlightedColKey === tableHeadKey
|
||||||
|
- var eventTrackingKey = config.eventTrackingKey
|
||||||
|
- var additionalEventSegmentation = config.additionalEventSegmentation || {}
|
||||||
|
- var tdClass = highlighted ? 'plans-table-green-highlighted' : ''
|
||||||
|
|
||||||
|
td(class=tdClass)
|
||||||
|
.plans-table-cell
|
||||||
|
case tableHeadKey
|
||||||
|
when 'individual_free'
|
||||||
|
+table_head_price('free', period)
|
||||||
|
when 'individual_collaborator'
|
||||||
|
+table_head_price('collaborator', period)
|
||||||
|
when 'individual_professional'
|
||||||
|
+table_head_price('professional', period)
|
||||||
|
when 'group_collaborator'
|
||||||
|
+table_price_group_collaborator()
|
||||||
|
when 'group_professional'
|
||||||
|
+table_price_group_professional()
|
||||||
|
when 'group_organization'
|
||||||
|
.plans-table-comments-icon
|
||||||
|
i.fa.fa-comments-o
|
||||||
|
when 'student_free'
|
||||||
|
+table_head_price('free', period)
|
||||||
|
when 'student_student'
|
||||||
|
+table_head_price('student', period)
|
||||||
|
|
||||||
|
tr(class=`plans-table-cta-mobile plans-table-cols-${tableHeadKeys.length}`)
|
||||||
|
td
|
||||||
|
- for (const [tableHeadKey] of Object.entries(config.tableHead))
|
||||||
|
- var highlighted = highlightedColKey === tableHeadKey
|
||||||
|
- var eventTrackingKey = config.eventTrackingKey
|
||||||
|
- var additionalEventSegmentation = config.additionalEventSegmentation || {}
|
||||||
|
- var tdClass = highlighted ? 'plans-table-green-highlighted' : ''
|
||||||
|
|
||||||
|
td(class=tdClass)
|
||||||
|
.plans-table-cell
|
||||||
|
.plans-table-btn-buy-container-mobile
|
||||||
|
+plans_cta(tableHeadKey, highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||||
|
|
||||||
|
tr(class=`plans-table-short-feature-list plans-table-cols-${tableHeadKeys.length}`)
|
||||||
|
td
|
||||||
|
- for (const [tableHeadKey, tableHeadOptions] of Object.entries(config.tableHead))
|
||||||
|
- var highlighted = highlightedColKey === tableHeadKey
|
||||||
|
- var eventTrackingKey = config.eventTrackingKey
|
||||||
|
- var additionalEventSegmentation = config.additionalEventSegmentation || {}
|
||||||
|
- var tdClass = highlighted ? 'plans-table-green-highlighted' : ''
|
||||||
|
|
||||||
|
td(class=tdClass)
|
||||||
|
.plans-table-cell
|
||||||
|
div
|
||||||
|
case tableHeadKey
|
||||||
|
when 'individual_free'
|
||||||
|
+table_short_feature_list_free()
|
||||||
|
when 'individual_collaborator'
|
||||||
|
+table_short_feature_list_collaborator()
|
||||||
|
when 'individual_professional'
|
||||||
|
+table_short_feature_list_professional()
|
||||||
|
when 'group_collaborator'
|
||||||
|
+table_short_feature_list_group_collaborator()
|
||||||
|
when 'group_professional'
|
||||||
|
+table_short_feature_list_group_professional()
|
||||||
|
when 'group_organization'
|
||||||
|
+table_short_feature_list_group_organization(additionalEventSegmentation)
|
||||||
|
when 'student_free'
|
||||||
|
+table_short_feature_list_free()
|
||||||
|
when 'student_student'
|
||||||
|
+table_short_feature_list_student_student(tableHeadOptions.showExtraContent)
|
||||||
|
|
||||||
|
tr(class=`plans-table-cta-desktop plans-table-cols-${tableHeadKeys.length}`)
|
||||||
|
td
|
||||||
|
- for (const [tableHeadKey] of Object.entries(config.tableHead))
|
||||||
|
- var highlighted = highlightedColKey === tableHeadKey
|
||||||
|
- var eventTrackingKey = config.eventTrackingKey
|
||||||
|
- var additionalEventSegmentation = config.additionalEventSegmentation || {}
|
||||||
|
- var tdClass = highlighted ? 'plans-table-green-highlighted' : ''
|
||||||
|
|
||||||
|
td(class=tdClass)
|
||||||
|
.plans-table-cell
|
||||||
|
.plans-table-btn-buy-container-desktop
|
||||||
|
+plans_cta(tableHeadKey, highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||||
|
|
||||||
for featuresPerSection in config.features
|
for featuresPerSection in config.features
|
||||||
- var dividerColspan = Object.values(config.tableHead).length + 1
|
- var dividerColspan = Object.values(config.tableHead).length + 1
|
||||||
|
|
@ -115,7 +202,7 @@ mixin plans_table(period, config)
|
||||||
span.sr-only #{translate(featuresPerSection.dividerInfo)}
|
span.sr-only #{translate(featuresPerSection.dividerInfo)}
|
||||||
for feature, featureIndex in featuresPerSection.items
|
for feature, featureIndex in featuresPerSection.items
|
||||||
tr(
|
tr(
|
||||||
class=`plans-table-cols-${tableHeadKeys.length}`
|
class=`plans-table-feature-row plans-table-cols-${tableHeadKeys.length}`
|
||||||
)
|
)
|
||||||
th(
|
th(
|
||||||
event-tracking="plans-page-table"
|
event-tracking="plans-page-table"
|
||||||
|
|
@ -123,6 +210,7 @@ mixin plans_table(period, config)
|
||||||
event-tracking-ga="subscription-funnel"
|
event-tracking-ga="subscription-funnel"
|
||||||
event-tracking-label=`${feature.feature}`
|
event-tracking-label=`${feature.feature}`
|
||||||
scope="row"
|
scope="row"
|
||||||
|
class=`${featureIndex === 0 ? 'plans-table-first-feature-header' : ''}`
|
||||||
)
|
)
|
||||||
.plans-table-feature-name
|
.plans-table-feature-name
|
||||||
if feature.info
|
if feature.info
|
||||||
|
|
@ -170,16 +258,6 @@ mixin table_short_feature_list_free()
|
||||||
ul.plans-table-th-content-benefit
|
ul.plans-table-th-content-benefit
|
||||||
li #{translate("one_collaborator")}
|
li #{translate("one_collaborator")}
|
||||||
|
|
||||||
mixin table_head_individual_free(highlighted, period)
|
|
||||||
.plans-table-th-content
|
|
||||||
p.plans-table-th-content-title #{translate("free")}
|
|
||||||
+table_head_price('free', period)
|
|
||||||
.plans-table-btn-buy-container-mobile
|
|
||||||
+btn_buy_individual_free()
|
|
||||||
+table_short_feature_list_free()
|
|
||||||
.plans-table-btn-buy-container-desktop
|
|
||||||
+btn_buy_individual_free()
|
|
||||||
|
|
||||||
//- individual plan mixins
|
//- individual plan mixins
|
||||||
|
|
||||||
mixin table_short_feature_list_collaborator()
|
mixin table_short_feature_list_collaborator()
|
||||||
|
|
@ -187,16 +265,6 @@ mixin table_short_feature_list_collaborator()
|
||||||
li !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})}
|
li !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})}
|
||||||
li #{translate("all_premium_features")}
|
li #{translate("all_premium_features")}
|
||||||
|
|
||||||
mixin table_head_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
|
||||||
.plans-table-th-content
|
|
||||||
p.plans-table-th-content-title #{translate("standard")}
|
|
||||||
+table_head_price('collaborator', period)
|
|
||||||
.plans-table-btn-buy-container-mobile
|
|
||||||
+btn_buy_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
|
||||||
+table_short_feature_list_collaborator()
|
|
||||||
.plans-table-btn-buy-container-desktop
|
|
||||||
+btn_buy_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
|
||||||
|
|
||||||
//- professional plan mixins
|
//- professional plan mixins
|
||||||
|
|
||||||
mixin table_short_feature_list_professional()
|
mixin table_short_feature_list_professional()
|
||||||
|
|
@ -204,16 +272,6 @@ mixin table_short_feature_list_professional()
|
||||||
li !{translate("unlimited_collabs_rt",{},["b"])}
|
li !{translate("unlimited_collabs_rt",{},["b"])}
|
||||||
li #{translate("all_premium_features")}
|
li #{translate("all_premium_features")}
|
||||||
|
|
||||||
mixin table_head_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
|
||||||
.plans-table-th-content
|
|
||||||
p.plans-table-th-content-title #{translate("professional")}
|
|
||||||
+table_head_price('professional', period)
|
|
||||||
.plans-table-btn-buy-container-mobile
|
|
||||||
+btn_buy_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
|
||||||
+table_short_feature_list_professional()
|
|
||||||
.plans-table-btn-buy-container-desktop
|
|
||||||
+btn_buy_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
|
||||||
|
|
||||||
//- group_collaborator plan mixins
|
//- group_collaborator plan mixins
|
||||||
|
|
||||||
mixin table_short_feature_list_group_collaborator()
|
mixin table_short_feature_list_group_collaborator()
|
||||||
|
|
@ -223,26 +281,14 @@ mixin table_short_feature_list_group_collaborator()
|
||||||
+table_head_group_total_per_year('collaborator')
|
+table_head_group_total_per_year('collaborator')
|
||||||
|
|
||||||
mixin table_price_group_collaborator()
|
mixin table_price_group_collaborator()
|
||||||
.plans-v2-table-price-container
|
.plans-table-price-container
|
||||||
strike.plans-v2-table-price-before-discount
|
s
|
||||||
+gen_localized_price_for_plan_view('collaborator', 'annual')
|
+gen_localized_price_for_plan_view('collaborator', 'annual')
|
||||||
p.plans-v2-table-price
|
p.plans-v2-table-price
|
||||||
span(data-ol-plans-v2-group-price-per-user='collaborator') #{initialLocalizedGroupPrice.pricePerUser.collaborator}
|
span(data-ol-plans-v2-group-price-per-user='collaborator') #{initialLocalizedGroupPrice.pricePerUser.collaborator}
|
||||||
p.plans-v2-table-price-period-label
|
p.plans-v2-table-price-period-label
|
||||||
| #{translate('per_user_year')}
|
| #{translate('per_user_year')}
|
||||||
|
|
||||||
mixin table_head_group_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation)
|
|
||||||
.plans-table-th-content
|
|
||||||
p.plans-table-th-content-title #{translate("group_standard")}
|
|
||||||
+table_price_group_collaborator()
|
|
||||||
.plans-table-btn-buy-container-mobile
|
|
||||||
+btn_buy_group_collaborator(highlighted, eventTrackingKey)
|
|
||||||
+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_collaborator')
|
|
||||||
+table_short_feature_list_group_collaborator()
|
|
||||||
.plans-table-btn-buy-container-desktop
|
|
||||||
+btn_buy_group_collaborator(highlighted, eventTrackingKey)
|
|
||||||
+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_collaborator')
|
|
||||||
|
|
||||||
//- group_professional plan mixins
|
//- group_professional plan mixins
|
||||||
|
|
||||||
mixin table_short_feature_list_group_professional()
|
mixin table_short_feature_list_group_professional()
|
||||||
|
|
@ -252,26 +298,14 @@ mixin table_short_feature_list_group_professional()
|
||||||
+table_head_group_total_per_year('professional')
|
+table_head_group_total_per_year('professional')
|
||||||
|
|
||||||
mixin table_price_group_professional()
|
mixin table_price_group_professional()
|
||||||
.plans-v2-table-price-container
|
.plans-table-price-container
|
||||||
strike.plans-v2-table-price-before-discount
|
s
|
||||||
+gen_localized_price_for_plan_view('professional', 'annual')
|
+gen_localized_price_for_plan_view('professional', 'annual')
|
||||||
p.plans-v2-table-price
|
p.plans-v2-table-price
|
||||||
span(data-ol-plans-v2-group-price-per-user='professional') #{initialLocalizedGroupPrice.pricePerUser.professional}
|
span(data-ol-plans-v2-group-price-per-user='professional') #{initialLocalizedGroupPrice.pricePerUser.professional}
|
||||||
p.plans-v2-table-price-period-label
|
p.plans-v2-table-price-period-label
|
||||||
| #{translate('per_user_year')}
|
| #{translate('per_user_year')}
|
||||||
|
|
||||||
mixin table_head_group_professional(highlighted, eventTrackingKey, additionalEventSegmentation)
|
|
||||||
.plans-table-th-content
|
|
||||||
p.plans-table-th-content-title #{translate("group_professional")}
|
|
||||||
+table_price_group_professional()
|
|
||||||
.plans-table-btn-buy-container-mobile
|
|
||||||
+btn_buy_group_professional(highlighted, eventTrackingKey)
|
|
||||||
+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_professional')
|
|
||||||
+table_short_feature_list_group_professional()
|
|
||||||
.plans-table-btn-buy-container-desktop
|
|
||||||
+btn_buy_group_professional(highlighted, eventTrackingKey)
|
|
||||||
+additional_link_group(eventTrackingKey, additionalEventSegmentation, 'group_professional')
|
|
||||||
|
|
||||||
//- group mixins
|
//- group mixins
|
||||||
|
|
||||||
mixin table_head_group_total_per_year(groupPlan)
|
mixin table_head_group_total_per_year(groupPlan)
|
||||||
|
|
@ -299,20 +333,6 @@ mixin table_short_feature_list_group_organization(additionalEventSegmentation)
|
||||||
event-segmentation=segmentation
|
event-segmentation=segmentation
|
||||||
) #{translate("also_available_as_on_premises")}
|
) #{translate("also_available_as_on_premises")}
|
||||||
|
|
||||||
mixin table_head_group_organization(highlighted, eventTrackingKey, additionalEventSegmentation)
|
|
||||||
.plans-table-th-content
|
|
||||||
p.plans-table-th-content-title #{translate("organization")}
|
|
||||||
.plans-table-comments-icon
|
|
||||||
i.fa.fa-comments-o
|
|
||||||
.plans-table-btn-buy-container-mobile
|
|
||||||
+btn_buy_group_organization(highlighted, eventTrackingKey)
|
|
||||||
small.plans-table-th-content-additional-link.invisible(aria-hidden="true")
|
|
||||||
+table_short_feature_list_group_organization(additionalEventSegmentation)
|
|
||||||
.plans-table-btn-buy-container-desktop
|
|
||||||
+btn_buy_group_organization(highlighted, eventTrackingKey)
|
|
||||||
small.plans-table-th-content-additional-link.invisible(aria-hidden="true")
|
|
||||||
|
|
||||||
|
|
||||||
mixin group_plans_license_picker()
|
mixin group_plans_license_picker()
|
||||||
form.plans-license-picker-form(data-ol-plans-v2-license-picker-form)
|
form.plans-license-picker-form(data-ol-plans-v2-license-picker-form)
|
||||||
.plans-v2-license-picker-select-container
|
.plans-v2-license-picker-select-container
|
||||||
|
|
@ -364,18 +384,6 @@ mixin group_plans_license_picker()
|
||||||
span )
|
span )
|
||||||
span.sr-only #{translate("apply_educational_discount_info")}
|
span.sr-only #{translate("apply_educational_discount_info")}
|
||||||
|
|
||||||
//- student free plan mixins
|
|
||||||
|
|
||||||
mixin table_head_student_free(highlighted, period)
|
|
||||||
div.plans-table-th-content
|
|
||||||
p.plans-table-th-content-title #{translate("free")}
|
|
||||||
+table_head_price('free', period)
|
|
||||||
.plans-table-btn-buy-container-mobile
|
|
||||||
+btn_buy_student_free(highlighted)
|
|
||||||
+table_short_feature_list_free()
|
|
||||||
.plans-table-btn-buy-container-desktop
|
|
||||||
+btn_buy_student_free(highlighted)
|
|
||||||
|
|
||||||
//- student plan mixins
|
//- student plan mixins
|
||||||
|
|
||||||
mixin table_short_feature_list_student_student(showExtraContent)
|
mixin table_short_feature_list_student_student(showExtraContent)
|
||||||
|
|
@ -386,23 +394,12 @@ mixin table_short_feature_list_student_student(showExtraContent)
|
||||||
li
|
li
|
||||||
b !{translate("for_students_only")}
|
b !{translate("for_students_only")}
|
||||||
|
|
||||||
mixin table_head_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period, showExtraContent)
|
|
||||||
div.plans-table-th-content
|
|
||||||
p.plans-table-th-content-title #{translate("student")}
|
|
||||||
+table_head_price('student', period)
|
|
||||||
.plans-table-btn-buy-container-mobile
|
|
||||||
+btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
|
||||||
+table_short_feature_list_student_student(showExtraContent)
|
|
||||||
|
|
||||||
.plans-table-btn-buy-container-desktop
|
|
||||||
+btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
|
||||||
|
|
||||||
//- all plans mixins
|
//- all plans mixins
|
||||||
|
|
||||||
mixin table_head_price(plan, period)
|
mixin table_head_price(plan, period)
|
||||||
div.plans-v2-table-price-container
|
div.plans-table-price-container
|
||||||
if plan !== 'free' && period === 'annual'
|
if plan !== 'free' && period === 'annual'
|
||||||
strike.plans-v2-table-price-before-discount
|
s
|
||||||
+gen_localized_price_for_plan_view(plan, 'monthlyTimesTwelve')
|
+gen_localized_price_for_plan_view(plan, 'monthlyTimesTwelve')
|
||||||
p.plans-v2-table-price
|
p.plans-v2-table-price
|
||||||
+gen_localized_price_for_plan_view(plan, period)
|
+gen_localized_price_for_plan_view(plan, period)
|
||||||
|
|
|
||||||
|
|
@ -442,10 +442,6 @@
|
||||||
|
|
||||||
@media (max-width: @screen-xs-max) {
|
@media (max-width: @screen-xs-max) {
|
||||||
margin-top: 60px + @plans-highlighted-text-height-desktop;
|
margin-top: 60px + @plans-highlighted-text-height-desktop;
|
||||||
|
|
||||||
th .plans-table-th-content {
|
|
||||||
min-height: 280px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -464,24 +460,6 @@
|
||||||
|
|
||||||
.plans-table-group {
|
.plans-table-group {
|
||||||
margin-top: 26px + @plans-highlighted-text-height-desktop;
|
margin-top: 26px + @plans-highlighted-text-height-desktop;
|
||||||
|
|
||||||
p.plans-table-th-content-title {
|
|
||||||
// Reduce font size of table heading for screen size >= @screen-lg (1200px) from 20px to 19px
|
|
||||||
// In the English version of overleaf, 20px is enough for the text to not be wrapped to the next line, the longest text is the 2nd column of group tab: "Group Professional".
|
|
||||||
// In the English version, "Group Professional" won't be wrapped to two separate lines with 20px font size for big screen.
|
|
||||||
// In other languages, for example, German (subdomain `de`), 20px is too big so the text is wrapped and breaks the UI. 19px is enough to fit the text on one line on the German site.
|
|
||||||
// This font-size reduction is a case-to-case basis since we don't have any way to know the max length of every language unless we've translated them all.
|
|
||||||
// There's probably a smarter way to do it, but probably also more complex. This change in font should be acceptable and we can revisit it every time there's a longer text.
|
|
||||||
font-size: 19px;
|
|
||||||
|
|
||||||
@media (max-width: @screen-md-max) {
|
|
||||||
font-size: @font-size-base;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: @screen-xs-max) {
|
|
||||||
font-size: @font-size-small;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.plans-table {
|
.plans-table {
|
||||||
|
|
@ -545,6 +523,35 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.plans-table-cta-desktop,
|
||||||
|
.plans-table-cta-mobile,
|
||||||
|
.plans-table-short-feature-list,
|
||||||
|
.plans-table-price-row {
|
||||||
|
td > div {
|
||||||
|
border-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
th[scope='col'] > div {
|
||||||
|
padding: var(--spacing-06) var(--spacing-08);
|
||||||
|
}
|
||||||
|
th[scope='row'] > div {
|
||||||
|
padding: var(--spacing-05) var(--spacing-08) var(--spacing-05)
|
||||||
|
var(--spacing-05);
|
||||||
|
}
|
||||||
|
td > div > div {
|
||||||
|
// apply spacing to inner div to not interfere with border
|
||||||
|
padding: var(--spacing-05) var(--spacing-08);
|
||||||
|
|
||||||
|
@media (max-width: @screen-xs-max) {
|
||||||
|
padding: var(--spacing-05);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
tr.plans-table-divider > td > div {
|
||||||
|
// td style above not applied since there is only 1 level of div within divider cells
|
||||||
|
padding: var(--spacing-05) var(--spacing-08);
|
||||||
|
}
|
||||||
|
|
||||||
// We want these `div` inside `th` and `td` to have a 100% height since
|
// We want these `div` inside `th` and `td` to have a 100% height since
|
||||||
// white backgrounds are defined here:
|
// white backgrounds are defined here:
|
||||||
// 1. `td > div.plans-table-cell`
|
// 1. `td > div.plans-table-cell`
|
||||||
|
|
@ -622,12 +629,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
th[scope='col'] {
|
th[scope='col'] {
|
||||||
font-family: @headings-font-family;
|
font-family: 'Noto Sans', sans-serif;
|
||||||
font-size: @font-size-h2;
|
font-size: var(--font-size-05);
|
||||||
font-weight: @headings-font-weight;
|
font-weight: 600;
|
||||||
line-height: @headings-line-height;
|
line-height: var(--line-height-04);
|
||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
padding: 0;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&.plans-table-green-highlighted {
|
&.plans-table-green-highlighted {
|
||||||
|
|
@ -648,9 +654,7 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
// css hack for table border-radius on the first feature name
|
.plans-table-first-feature-header {
|
||||||
&:nth-child(2) {
|
|
||||||
th[scope='row']:first-child {
|
|
||||||
.plans-table-feature-name {
|
.plans-table-feature-name {
|
||||||
border-top-left-radius: @plans-table-border-radius;
|
border-top-left-radius: @plans-table-border-radius;
|
||||||
|
|
||||||
|
|
@ -660,7 +664,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
tr.plans-table-divider {
|
tr.plans-table-divider {
|
||||||
background-color: var(--neutral-10);
|
background-color: var(--neutral-10);
|
||||||
|
|
@ -673,7 +676,6 @@
|
||||||
// direct child selector to NOT affect the generated tooltip
|
// direct child selector to NOT affect the generated tooltip
|
||||||
td > div {
|
td > div {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 6px;
|
|
||||||
|
|
||||||
.plans-table-divider-label {
|
.plans-table-divider-label {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
@ -702,8 +704,6 @@
|
||||||
td > div {
|
td > div {
|
||||||
background-color: var(--neutral-20);
|
background-color: var(--neutral-20);
|
||||||
border: 0;
|
border: 0;
|
||||||
padding: 15px 5px;
|
|
||||||
|
|
||||||
i {
|
i {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
@ -758,7 +758,7 @@
|
||||||
|
|
||||||
@media (min-width: @screen-sm-min) {
|
@media (min-width: @screen-sm-min) {
|
||||||
// highlight rows on hover
|
// highlight rows on hover
|
||||||
tr:not(.plans-table-divider):not(:first-child):hover {
|
.plans-table-feature-row:hover {
|
||||||
.plans-table-feature-name,
|
.plans-table-feature-name,
|
||||||
.plans-table-cell {
|
.plans-table-cell {
|
||||||
background-color: @table-hover-bg;
|
background-color: @table-hover-bg;
|
||||||
|
|
@ -802,10 +802,16 @@
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// hide the first column header
|
// hide the first cell (which has no content)
|
||||||
tr:first-child th:first-child {
|
tr:first-child,
|
||||||
|
.plans-table-price-row,
|
||||||
|
.plans-table-cta-mobile,
|
||||||
|
.plans-table-short-feature-list {
|
||||||
|
th:first-child,
|
||||||
|
td:first-child {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// for mobile, we need to show the feature name (the first td) as its own row
|
// for mobile, we need to show the feature name (the first td) as its own row
|
||||||
// the width: 100vw rule will enhance the flex-flow on the tr by ensuring the feature name (first column of each feature row)
|
// the width: 100vw rule will enhance the flex-flow on the tr by ensuring the feature name (first column of each feature row)
|
||||||
|
|
@ -840,7 +846,6 @@
|
||||||
|
|
||||||
@media (max-width: @screen-xs-max) {
|
@media (max-width: @screen-xs-max) {
|
||||||
.plans-table-cell-content {
|
.plans-table-cell-content {
|
||||||
padding: 6px;
|
|
||||||
min-height: @plans-table-td-mobile-min-height;
|
min-height: @plans-table-td-mobile-min-height;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -852,13 +857,7 @@
|
||||||
.plans-table-th-content {
|
.plans-table-th-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-height: 321px;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding: 10px 13px;
|
|
||||||
|
|
||||||
@media (max-width: @screen-md-max) {
|
|
||||||
min-height: 330px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: @screen-sm-max) {
|
@media (max-width: @screen-sm-max) {
|
||||||
padding-left: @padding-xs;
|
padding-left: @padding-xs;
|
||||||
|
|
@ -912,30 +911,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
p.plans-table-th-content-title {
|
|
||||||
font-size: @font-size-large;
|
|
||||||
padding-bottom: @padding-sm;
|
|
||||||
border-bottom: 1px solid @gray-lighter;
|
|
||||||
margin-bottom: @margin-lg;
|
|
||||||
|
|
||||||
@media (max-width: @screen-md-max) {
|
|
||||||
font-size: @font-size-base;
|
|
||||||
}
|
|
||||||
|
|
||||||
// `plans-table-th-content-title` is visually invisible on screen size less than @screen-xs-max
|
|
||||||
// because there is a sticky header (`plans-v2-table-sticky-header` class) that "replace" the content visually
|
|
||||||
// (see the `@plans-table-sticky-header-z-index` variable that make the sticky header element is "above" the whole table)
|
|
||||||
// however, we still need to properly styling the `plans-table-th-content-title` for small screen size to
|
|
||||||
// fit this element to the size of the sticky header
|
|
||||||
// this trick is used because th element can not have a `position: sticky` rule, at least for our use case
|
|
||||||
@media (max-width: @screen-xs-max) {
|
|
||||||
min-height: 40px;
|
|
||||||
margin-bottom: @margin-md;
|
|
||||||
font-size: @font-size-small;
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
p.plans-table-th-content-benefit,
|
p.plans-table-th-content-benefit,
|
||||||
ul.plans-table-th-content-benefit {
|
ul.plans-table-th-content-benefit {
|
||||||
padding-top: 15px;
|
padding-top: 15px;
|
||||||
|
|
@ -961,8 +936,25 @@
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.plans-v2-table-price-container {
|
.plans-table-price-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
s {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: -27px;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: @font-size-small;
|
||||||
|
line-height: 42px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
color: @ol-blue-gray-2;
|
||||||
|
|
||||||
|
@media (max-width: @screen-xs-max) {
|
||||||
|
font-size: @font-size-extra-small;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
p.plans-v2-table-price-period-label {
|
p.plans-v2-table-price-period-label {
|
||||||
|
|
@ -987,22 +979,6 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
strike.plans-v2-table-price-before-discount {
|
|
||||||
position: absolute;
|
|
||||||
top: -27px;
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: @font-size-small;
|
|
||||||
line-height: 42px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
width: 100%;
|
|
||||||
color: @ol-blue-gray-2;
|
|
||||||
|
|
||||||
@media (max-width: @screen-xs-max) {
|
|
||||||
font-size: @font-size-extra-small;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
small.plans-table-th-content-additional-link {
|
small.plans-table-th-content-additional-link {
|
||||||
text-transform: lowercase;
|
text-transform: lowercase;
|
||||||
margin-top: @margin-xs;
|
margin-top: @margin-xs;
|
||||||
|
|
@ -1020,7 +996,6 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 6px 6px 6px 18px;
|
|
||||||
|
|
||||||
i.plans-table-feature-question-icon {
|
i.plans-table-feature-question-icon {
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
|
|
@ -1033,7 +1008,6 @@
|
||||||
@media (max-width: @screen-xs-max) {
|
@media (max-width: @screen-xs-max) {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding: 6px;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: @ol-blue-gray-0;
|
background-color: @ol-blue-gray-0;
|
||||||
min-height: @plans-table-td-mobile-min-height;
|
min-height: @plans-table-td-mobile-min-height;
|
||||||
|
|
@ -1140,7 +1114,7 @@
|
||||||
flex: 1 1 0px;
|
flex: 1 1 0px;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
margin: 0px @margin-xs;
|
margin: @margin-xs;
|
||||||
border-bottom: 1px solid #cccccc;
|
border-bottom: 1px solid #cccccc;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue