mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-07 20:31:06 -05:00
Merge pull request #19395 from overleaf/jel-light-touch-restructure-mixins
[web] Restructure column header mixins for light touch design GitOrigin-RevId: b8f6d9084b7a0190a0ba421d1e3ba819358c7fa2
This commit is contained in:
Jessica Lawshe
Copybot
parent
3084ff921b
commit
fada0b80eb
1 changed files with 152 additions and 131 deletions
|
|
@ -59,8 +59,6 @@ mixin plans_table(period, config)
|
|||
- var ariaLabel = translate("free")
|
||||
when 'student_student'
|
||||
- var ariaLabel = translate("student")
|
||||
when 'student_university'
|
||||
- var ariaLabel = translate("university")
|
||||
default
|
||||
- var ariaLabel = undefined
|
||||
th(
|
||||
|
|
@ -88,8 +86,6 @@ mixin plans_table(period, config)
|
|||
+table_head_student_free(highlighted, period)
|
||||
when 'student_student'
|
||||
+table_head_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period, tableHeadOptions.showExtraContent)
|
||||
when 'student_university'
|
||||
+table_head_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||
|
||||
for featuresPerSection in config.features
|
||||
- var dividerColspan = Object.values(config.tableHead).length + 1
|
||||
|
|
@ -168,16 +164,28 @@ mixin table_student(period)
|
|||
table.card.plans-table.plans-table-student
|
||||
+plans_table(period, plansConfig.student)
|
||||
|
||||
//- free plan mixins
|
||||
|
||||
mixin table_short_feature_list_free()
|
||||
ul.plans-table-th-content-benefit
|
||||
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(highlighted)
|
||||
ul.plans-table-th-content-benefit
|
||||
li #{translate("one_collaborator")}
|
||||
+btn_buy_individual_free()
|
||||
+table_short_feature_list_free()
|
||||
.plans-table-btn-buy-container-desktop
|
||||
+btn_buy_individual_free(highlighted)
|
||||
+btn_buy_individual_free()
|
||||
|
||||
//- individual plan mixins
|
||||
|
||||
mixin table_short_feature_list_collaborator()
|
||||
ul.plans-table-th-content-benefit
|
||||
li !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})}
|
||||
li #{translate("all_premium_features")}
|
||||
|
||||
mixin table_head_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||
.plans-table-th-content
|
||||
|
|
@ -185,27 +193,36 @@ mixin table_head_individual_collaborator(highlighted, eventTrackingKey, addition
|
|||
+table_head_price('collaborator', period)
|
||||
.plans-table-btn-buy-container-mobile
|
||||
+btn_buy_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||
ul.plans-table-th-content-benefit
|
||||
li !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})}
|
||||
li #{translate("all_premium_features")}
|
||||
+table_short_feature_list_collaborator()
|
||||
.plans-table-btn-buy-container-desktop
|
||||
+btn_buy_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||
|
||||
//- professional plan mixins
|
||||
|
||||
mixin table_short_feature_list_professional()
|
||||
ul.plans-table-th-content-benefit
|
||||
li !{translate("unlimited_collabs_rt",{},["b"])}
|
||||
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)
|
||||
ul.plans-table-th-content-benefit
|
||||
li !{translate("unlimited_collabs_rt",{},["b"])}
|
||||
li #{translate("all_premium_features")}
|
||||
+table_short_feature_list_professional()
|
||||
.plans-table-btn-buy-container-desktop
|
||||
+btn_buy_individual_professional(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||
|
||||
mixin table_head_group_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation)
|
||||
.plans-table-th-content
|
||||
p.plans-table-th-content-title #{translate("group_standard")}
|
||||
//- group_collaborator plan mixins
|
||||
|
||||
mixin table_short_feature_list_group_collaborator()
|
||||
ul.plans-table-th-content-benefit
|
||||
li #{translate("up_to")} !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})}
|
||||
li
|
||||
+table_head_group_total_per_year('collaborator')
|
||||
|
||||
mixin table_price_group_collaborator()
|
||||
.plans-v2-table-price-container
|
||||
strike.plans-v2-table-price-before-discount
|
||||
+gen_localized_price_for_plan_view('collaborator', 'annual')
|
||||
|
|
@ -213,20 +230,28 @@ mixin table_head_group_collaborator(highlighted, eventTrackingKey, additionalEve
|
|||
span(data-ol-plans-v2-group-price-per-user='collaborator') #{initialLocalizedGroupPrice.pricePerUser.collaborator}
|
||||
p.plans-v2-table-price-period-label
|
||||
| #{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')
|
||||
ul.plans-table-th-content-benefit
|
||||
li #{translate("up_to")} !{translate("x_collaborators_per_project", {collaboratorsCount: '10'})}
|
||||
li
|
||||
+table_head_group_total_per_year('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')
|
||||
|
||||
mixin table_head_group_professional(highlighted, eventTrackingKey, additionalEventSegmentation)
|
||||
.plans-table-th-content
|
||||
p.plans-table-th-content-title #{translate("group_professional")}
|
||||
//- group_professional plan mixins
|
||||
|
||||
mixin table_short_feature_list_group_professional()
|
||||
ul.plans-table-th-content-benefit
|
||||
li #{translate("unlimited_collaborators_in_each_project")}
|
||||
li
|
||||
+table_head_group_total_per_year('professional')
|
||||
|
||||
mixin table_price_group_professional()
|
||||
.plans-v2-table-price-container
|
||||
strike.plans-v2-table-price-before-discount
|
||||
+gen_localized_price_for_plan_view('professional', 'annual')
|
||||
|
|
@ -234,17 +259,21 @@ mixin table_head_group_professional(highlighted, eventTrackingKey, additionalEve
|
|||
span(data-ol-plans-v2-group-price-per-user='professional') #{initialLocalizedGroupPrice.pricePerUser.professional}
|
||||
p.plans-v2-table-price-period-label
|
||||
| #{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')
|
||||
ul.plans-table-th-content-benefit
|
||||
li #{translate("unlimited_collaborators_in_each_project")}
|
||||
li
|
||||
+table_head_group_total_per_year('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
|
||||
|
||||
mixin table_head_group_total_per_year(groupPlan)
|
||||
- var initialLicenseSize = '2'
|
||||
span.plans-v2-group-total-price(data-ol-plans-v2-group-total-price=groupPlan) #{initialLocalizedGroupPrice.price[groupPlan]}
|
||||
|
|
@ -255,15 +284,8 @@ mixin table_head_group_total_per_year(groupPlan)
|
|||
data-ol-plans-v2-table-th-group-license-size=licenseSize
|
||||
) !{translate("total_per_year_for_x_users", {licenseSize})}
|
||||
|
||||
mixin table_head_group_organization(highlighted, eventTrackingKey, additionalEventSegmentation)
|
||||
mixin table_short_feature_list_group_organization(additionalEventSegmentation)
|
||||
- var segmentation = JSON.stringify(Object.assign({}, {button: 'group_organization-link', location: 'table-header-list', period: 'annual'}, 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")
|
||||
ul.plans-table-th-content-benefit
|
||||
li #{translate("best_choices_companies_universities_non_profits")}
|
||||
li #{translate("for_groups_or_site_wide")}
|
||||
|
|
@ -276,79 +298,20 @@ mixin table_head_group_organization(highlighted, eventTrackingKey, additionalEve
|
|||
event-tracking-trigger="click"
|
||||
event-segmentation=segmentation
|
||||
) #{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 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)
|
||||
ul.plans-table-th-content-benefit
|
||||
li #{translate("one_collaborator")}
|
||||
.plans-table-btn-buy-container-desktop
|
||||
+btn_buy_student_free(highlighted)
|
||||
|
||||
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)
|
||||
ul.plans-table-th-content-benefit
|
||||
li !{translate("x_collaborators_per_project", {collaboratorsCount: '6'})}
|
||||
li #{translate("all_premium_features")}
|
||||
if showExtraContent
|
||||
li
|
||||
b !{translate("for_students_only")}
|
||||
|
||||
.plans-table-btn-buy-container-desktop
|
||||
+btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||
|
||||
mixin table_head_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||
div.plans-table-th-content
|
||||
p.plans-table-th-content-title #{translate("university")}
|
||||
div.plans-table-comments-icon
|
||||
i.fa.fa-comments-o
|
||||
.plans-table-btn-buy-container-mobile
|
||||
+btn_buy_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||
p.plans-table-th-content-benefit !{translate("all_our_group_plans_offer_educational_discount", {}, [{name: 'b'}, {name: 'b'}])}
|
||||
.plans-table-btn-buy-container-desktop
|
||||
+btn_buy_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||
|
||||
mixin table_head_price(plan, period)
|
||||
div.plans-v2-table-price-container
|
||||
if plan !== 'free' && period === 'annual'
|
||||
strike.plans-v2-table-price-before-discount
|
||||
+gen_localized_price_for_plan_view(plan, 'monthlyTimesTwelve')
|
||||
p.plans-v2-table-price
|
||||
+gen_localized_price_for_plan_view(plan, period)
|
||||
p.plans-v2-table-price-period-label
|
||||
if period == 'annual'
|
||||
| #{translate("per_year")}
|
||||
else
|
||||
| #{translate("per_month")}
|
||||
|
||||
mixin table_cell(feature, plan)
|
||||
- var planValue = feature.plans[plan]
|
||||
- var featureName = feature.feature
|
||||
|
||||
.plans-table-cell
|
||||
.plans-table-cell-content(
|
||||
data-ol-plans-v2-table-cell-plan=plan
|
||||
data-ol-plans-v2-table-cell-feature=featureName
|
||||
)
|
||||
if (feature.value === 'str')
|
||||
| !{translate(planValue, {}, ['strong'])}
|
||||
else if (feature.value === 'bool')
|
||||
if (planValue)
|
||||
i.fa.fa-check(aria-hidden="true")
|
||||
span.sr-only #{translate("feature_included")}
|
||||
else
|
||||
span(aria-hidden="true") -
|
||||
span.sr-only #{translate("feature_not_included")}
|
||||
|
||||
mixin group_plans_license_picker()
|
||||
form.plans-license-picker-form(data-ol-plans-v2-license-picker-form)
|
||||
|
|
@ -401,6 +364,75 @@ mixin group_plans_license_picker()
|
|||
span )
|
||||
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
|
||||
|
||||
mixin table_short_feature_list_student_student(showExtraContent)
|
||||
ul.plans-table-th-content-benefit
|
||||
li !{translate("x_collaborators_per_project", {collaboratorsCount: '6'})}
|
||||
li #{translate("all_premium_features")}
|
||||
if showExtraContent
|
||||
li
|
||||
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
|
||||
|
||||
mixin table_head_price(plan, period)
|
||||
div.plans-v2-table-price-container
|
||||
if plan !== 'free' && period === 'annual'
|
||||
strike.plans-v2-table-price-before-discount
|
||||
+gen_localized_price_for_plan_view(plan, 'monthlyTimesTwelve')
|
||||
p.plans-v2-table-price
|
||||
+gen_localized_price_for_plan_view(plan, period)
|
||||
p.plans-v2-table-price-period-label
|
||||
if period == 'annual'
|
||||
| #{translate("per_year")}
|
||||
else
|
||||
| #{translate("per_month")}
|
||||
|
||||
mixin table_cell(feature, plan)
|
||||
- var planValue = feature.plans[plan]
|
||||
- var featureName = feature.feature
|
||||
|
||||
.plans-table-cell
|
||||
.plans-table-cell-content(
|
||||
data-ol-plans-v2-table-cell-plan=plan
|
||||
data-ol-plans-v2-table-cell-feature=featureName
|
||||
)
|
||||
if (feature.value === 'str')
|
||||
| !{translate(planValue, {}, ['strong'])}
|
||||
else if (feature.value === 'bool')
|
||||
if (planValue)
|
||||
i.fa.fa-check(aria-hidden="true")
|
||||
span.sr-only #{translate("feature_included")}
|
||||
else
|
||||
span(aria-hidden="true") -
|
||||
span.sr-only #{translate("feature_not_included")}
|
||||
|
||||
//- CTA mixins
|
||||
|
||||
mixin btn_buy_individual(highlighted, eventTrackingKey, subscriptionPlan, period)
|
||||
a.btn.plans-v2-table-btn-buy(
|
||||
data-ol-start-new-subscription=subscriptionPlan
|
||||
|
|
@ -496,19 +528,6 @@ mixin btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegm
|
|||
if (period === 'monthly')
|
||||
+additional_link_buy(eventTrackingKey, additionalEventSegmentation, 'student', period)
|
||||
|
||||
mixin btn_buy_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period)
|
||||
- var segmentation = JSON.stringify(Object.assign({}, {button: 'student-university', location: 'table-header-list', period}, additionalEventSegmentation))
|
||||
a.btn.plans-v2-table-btn-buy(
|
||||
href="/for/contact-sales"
|
||||
target="_blank"
|
||||
event-tracking=eventTrackingKey
|
||||
event-tracking-mb="true"
|
||||
event-tracking-trigger="click"
|
||||
event-segmentation=segmentation
|
||||
class=(highlighted ? 'btn-primary' : 'btn-default')
|
||||
)
|
||||
span #{translate("contact_us_lowercase")}
|
||||
|
||||
mixin additional_link_group(eventTrackingKey, additionalEventSegmentation, plan)
|
||||
- var buttonSegmentation = plan + '-link'
|
||||
- var segmentation = JSON.stringify(Object.assign({}, {button: buttonSegmentation, location: 'table-header'}, additionalEventSegmentation))
|
||||
|
|
@ -539,6 +558,8 @@ mixin additional_link_buy(eventTrackingKey, additionalEventSegmentation, plan, p
|
|||
event-segmentation=segmentation
|
||||
) #{translate("buy_now_no_exclamation_mark")}
|
||||
|
||||
//- table header and control mixins
|
||||
|
||||
mixin plans_v2_table_sticky_header(withSwitch, config)
|
||||
- var tableHeadKeys = Object.keys(config.tableHead)
|
||||
.row.plans-table-sticky-header.sticky(
|
||||
|
|
|
|||
Loading…
Reference in a new issue