Merge pull request #19414 from overleaf/jel-light-touch-col-headers

[web] Update column header styling for light touch redesign of plans table

GitOrigin-RevId: d6b24f1c355256a5dcb2c75255eec610e064fd03
This commit is contained in:
Jessica Lawshe 2024-07-15 08:30:09 -05:00 committed by Copybot
parent 300e46a28d
commit 0ea17a1c5a
2 changed files with 119 additions and 145 deletions

View file

@ -113,7 +113,8 @@ mixin plans_table(period, config)
+table_price_group_professional()
when 'group_organization'
.plans-table-comments-icon
i.fa.fa-comments-o
.match-non-discounted-price-alignment  
i.material-symbols.material-symbols-outlined(aria-hidden="true") forum
when 'student_free'
+table_head_price('free', period)
when 'student_student'
@ -241,15 +242,15 @@ mixin plans_table(period, config)
+table_cell(feature, plan)
mixin table_individual(period)
table.card.plans-table.plans-table-individual
table.plans-table.plans-table-individual
+plans_table(period, plansConfig.individual)
mixin table_group
table.card.plans-table.plans-table-group
table.plans-table.plans-table-group
+plans_table('annual', plansConfig.group)
mixin table_student(period)
table.card.plans-table.plans-table-student
table.plans-table.plans-table-student
+plans_table(period, plansConfig.student)
//- free plan mixins
@ -284,9 +285,9 @@ mixin table_price_group_collaborator()
.plans-table-price-container
s
+gen_localized_price_for_plan_view('collaborator', 'annual')
p.plans-v2-table-price
p.plans-table-price
span(data-ol-plans-v2-group-price-per-user='collaborator') #{initialLocalizedGroupPrice.pricePerUser.collaborator}
p.plans-v2-table-price-period-label
p.plans-table-price-period-label
| #{translate('per_user_year')}
//- group_professional plan mixins
@ -301,16 +302,16 @@ mixin table_price_group_professional()
.plans-table-price-container
s
+gen_localized_price_for_plan_view('professional', 'annual')
p.plans-v2-table-price
p.plans-table-price
span(data-ol-plans-v2-group-price-per-user='professional') #{initialLocalizedGroupPrice.pricePerUser.professional}
p.plans-v2-table-price-period-label
p.plans-table-price-period-label
| #{translate('per_user_year')}
//- 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]}
span.plans-group-total-price(data-ol-plans-v2-group-total-price=groupPlan) #{initialLocalizedGroupPrice.price[groupPlan]}
|  
for licenseSize in groupPlanModalOptions.sizes
span(
@ -324,7 +325,7 @@ mixin table_short_feature_list_group_organization(additionalEventSegmentation)
li #{translate("best_choices_companies_universities_non_profits")}
li #{translate("for_groups_or_site_wide")}
li
a(
a.inline-green-link(
target="_blank"
href="/for/contact-sales"
event-tracking="plans-page-click"
@ -401,9 +402,11 @@ mixin table_head_price(plan, period)
if plan !== 'free' && period === 'annual'
s
+gen_localized_price_for_plan_view(plan, 'monthlyTimesTwelve')
p.plans-v2-table-price
else
.match-non-discounted-price-alignment  
p.plans-table-price
+gen_localized_price_for_plan_view(plan, period)
p.plans-v2-table-price-period-label
p.plans-table-price-period-label
if period == 'annual'
| #{translate("per_year")}
else
@ -431,11 +434,11 @@ mixin table_cell(feature, plan)
//- CTA mixins
mixin btn_buy_individual(highlighted, eventTrackingKey, subscriptionPlan, period)
a.btn.plans-v2-table-btn-buy(
a.btn(
data-ol-start-new-subscription=subscriptionPlan
data-ol-event-tracking-key=eventTrackingKey
data-ol-item-view=period
class=(highlighted ? 'btn-primary' : 'btn-default')
class=(highlighted ? 'btn-primary' : 'btn-secondary')
)
if (period === 'monthly')
span #{translate("try_for_free")}
@ -444,15 +447,15 @@ mixin btn_buy_individual(highlighted, eventTrackingKey, subscriptionPlan, period
mixin btn_buy_individual_free()
if (!getSessionUser())
a.btn.plans-v2-table-btn-buy(
a.btn(
href="/register"
class=(highlighted ? 'btn-primary' : 'btn-default')
class=(highlighted ? 'btn-primary' : 'btn-secondary')
)
span #{translate("try_for_free")}
else
a.btn.plans-v2-table-btn-buy.invisible(
a.btn.invisible(
aria-hidden="true"
class=(highlighted ? 'btn-primary' : 'btn-default')
class=(highlighted ? 'btn-primary' : 'btn-secondary')
)
mixin btn_buy_individual_collaborator(highlighted, eventTrackingKey, additionalEventSegmentation, period)
@ -466,31 +469,31 @@ mixin btn_buy_individual_professional(highlighted, eventTrackingKey, additionalE
+additional_link_buy(eventTrackingKey, additionalEventSegmentation, 'professional', period)
mixin btn_buy_group_collaborator(highlighted, eventTrackingKey)
a.btn.plans-v2-table-btn-buy(
a.btn(
data-ol-start-new-subscription='group_collaborator'
data-ol-event-tracking-key=eventTrackingKey
data-ol-item-view='annual'
data-ol-has-custom-href
data-ol-location='table-header'
class=(highlighted ? 'btn-primary' : 'btn-default')
class=(highlighted ? 'btn-primary' : 'btn-secondary')
)
span.hidden-desktop #{translate("customize")}
span.hidden-mobile #{translate("customize_your_plan")}
mixin btn_buy_group_professional(highlighted, eventTrackingKey)
a.btn.plans-v2-table-btn-buy(
a.btn(
data-ol-start-new-subscription='group_professional'
data-ol-event-tracking-key=eventTrackingKey
data-ol-item-view='annual'
data-ol-has-custom-href
data-ol-location='table-header'
class=(highlighted ? 'btn-primary' : 'btn-default')
class=(highlighted ? 'btn-primary' : 'btn-secondary')
)
span.hidden-desktop #{translate("customize")}
span.hidden-mobile #{translate("customize_your_plan")}
mixin btn_buy_group_organization(highlighted, eventTrackingKey)
a.btn.plans-v2-table-btn-buy(
a.btn(
data-ol-start-new-subscription='group_organization'
data-ol-event-tracking-key=eventTrackingKey
data-ol-item-view='annual'
@ -498,25 +501,25 @@ mixin btn_buy_group_organization(highlighted, eventTrackingKey)
data-ol-location='table-header'
href='/for/contact-sales'
target='_blank'
class=(highlighted ? 'btn-primary' : 'btn-default')
class=(highlighted ? 'btn-primary' : 'btn-secondary')
)
span #{translate("contact_us_lowercase")}
mixin btn_buy_student_free(highlighted)
if (!getSessionUser())
a.btn.plans-v2-table-btn-buy(
a.btn(
href="/register"
class=(highlighted ? 'btn-primary' : 'btn-default')
class=(highlighted ? 'btn-primary' : 'btn-secondary')
)
span #{translate("try_for_free")}
mixin btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegmentation, period)
a.btn.plans-v2-table-btn-buy(
a.btn(
data-ol-start-new-subscription='student'
data-ol-event-tracking-key=eventTrackingKey
data-ol-item-view=period
data-ol-location='card'
class=(highlighted ? 'btn-primary' : 'btn-default')
class=(highlighted ? 'btn-primary' : 'btn-secondary')
)
if (period === 'monthly')
span #{translate("try_for_free")}
@ -528,16 +531,15 @@ mixin btn_buy_student_student(highlighted, eventTrackingKey, additionalEventSegm
mixin additional_link_group(eventTrackingKey, additionalEventSegmentation, plan)
- var buttonSegmentation = plan + '-link'
- var segmentation = JSON.stringify(Object.assign({}, {button: buttonSegmentation, location: 'table-header'}, additionalEventSegmentation))
small.plans-table-th-content-additional-link
| #{translate("or")}
a(
href="/for/contact-sales"
target="_blank"
event-tracking=eventTrackingKey
event-tracking-mb="true"
event-tracking-trigger="click"
event-segmentation=segmentation
) #{translate("contact_us_lowercase")}
a.btn.btn-bg-ghost(
href="/for/contact-sales"
target="_blank"
event-tracking=eventTrackingKey
event-tracking-mb="true"
event-tracking-trigger="click"
event-segmentation=segmentation
) #{translate("contact_us_lowercase")}
mixin additional_link_buy(eventTrackingKey, additionalEventSegmentation, plan, period)
- var buttonSegmentation = plan + '-link'
@ -545,15 +547,14 @@ mixin additional_link_buy(eventTrackingKey, additionalEventSegmentation, plan, p
- var itmCampaign = itm_campaign ? { itm_campaign } : {itm_campaign: 'plans'}
- var itmReferrer = itm_referrer ? { itm_referrer } : {}
- var qs = new URLSearchParams({planCode: plan, currency: recommendedCurrency, itm_content: 'card', ...itmCampaign, ...itmReferrer})
small.plans-table-th-content-additional-link
| #{translate("or")}
a(
href=`/user/subscription/new?${qs.toString()}`
event-tracking=eventTrackingKey
event-tracking-mb="true"
event-tracking-trigger="click"
event-segmentation=segmentation
) #{translate("buy_now_no_exclamation_mark")}
a.btn.btn-bg-ghost(
href=`/user/subscription/new?${qs.toString()}`
event-tracking=eventTrackingKey
event-tracking-mb="true"
event-tracking-trigger="click"
event-segmentation=segmentation
) #{translate("buy_now_no_exclamation_mark")}
//- table header and control mixins

View file

@ -333,14 +333,8 @@
}
.plans-table-comments-icon {
height: 65px;
i {
font-size: 50px;
}
@media (max-width: @screen-xs-max) {
height: 58px;
font-size: 64px;
}
}
@ -468,6 +462,13 @@
table-layout: fixed;
width: 100%;
.plans-table-th-content,
.plans-table-price,
.plans-table-comments-icon,
.plans-table-th-content-benefit {
color: var(--neutral-90);
}
// cannot add border to td,th directly due to highlighted column border
td > div,
th > div {
@ -552,6 +553,26 @@
padding: var(--spacing-05) var(--spacing-08);
}
tr.plans-table-price-row > td > div > div {
padding-top: 0;
padding-bottom: var(--spacing-06);
}
tr.plans-table-short-feature-list > td > div > div {
padding-top: 0;
padding-bottom: 0;
@media (max-width: @screen-xs-max) {
padding-bottom: var(--spacing-06);
}
}
tr.plans-table-cta-desktop > td > div > div {
padding-top: var(--spacing-08);
}
tr.plans-table-cta-mobile > td > div > div {
padding-top: 0;
padding-bottom: var(--spacing-06);
}
// We want these `div` inside `th` and `td` to have a 100% height since
// white backgrounds are defined here:
// 1. `td > div.plans-table-cell`
@ -866,12 +887,14 @@
}
}
.plans-table-btn-buy-container-desktop,
.plans-table-btn-buy-container-mobile {
gap: var(--spacing-04);
}
.plans-table-btn-buy-container-desktop {
margin-top: auto;
display: flex;
flex-direction: column;
min-height: 60px;
@media (max-width: @screen-xs-max) {
display: none;
}
@ -883,112 +906,62 @@
@media (max-width: @screen-xs-max) {
display: flex;
flex-direction: column;
min-height: 50px;
margin-top: @padding-sm;
}
}
.plans-v2-table-btn-buy {
padding: 4px 15px 5px;
@media (min-width: (@screen-xs-max+1)) {
.hidden-desktop {
display: none;
}
@media (min-width: (@screen-xs-max+1)) {
.hidden-desktop {
display: none;
}
@media (max-width: @screen-sm-max) {
font-size: @font-size-small;
}
@media (max-width: @screen-xs-max) {
padding-left: 9px;
padding-right: 9px;
// truncating group plans long button text for mobile
.hidden-mobile {
display: none;
}
}
@media (max-width: @screen-xs-max) {
.hidden-mobile {
display: none;
}
}
p.plans-table-th-content-benefit,
ul.plans-table-th-content-benefit {
padding-top: 15px;
font-size: @font-size-small;
font-family: @font-family-sans-serif;
line-height: 23px;
font-size: var(--font-size-02);
line-height: var(--line-height-02);
hyphens: auto;
}
ul.plans-table-th-content-benefit {
padding-left: 15px;
text-align: left;
margin-bottom: 0;
li a {
color: @ol-blue-gray-3;
text-decoration: underline;
}
}
// this class should only appear on the group table
.plans-v2-group-total-price {
.plans-group-total-price {
font-weight: 700;
}
.plans-table-price-container {
position: relative;
.plans-table-price-row {
.match-non-discounted-price-alignment,
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;
}
display: block;
font-weight: 600;
font-size: var(--font-size-02);
line-height: var(--line-height-02);
color: var(--neutral-60);
}
}
p.plans-v2-table-price-period-label {
margin: 0;
font-size: @font-size-small;
line-height: 23px;
color: @ol-blue-gray-3;
}
p.plans-v2-table-price {
margin: 0;
span {
font-weight: 700;
font-size: 32px;
line-height: 42px;
@media (max-width: @screen-xs-max) {
line-height: 35px;
font-size: @font-size-large;
.plans-table-price-container {
p.plans-table-price-period-label {
margin: 0;
font-size: var(--font-size-02);
line-height: var(--line-height-02);
color: @ol-blue-gray-3;
font-weight: 400;
}
}
}
small.plans-table-th-content-additional-link {
text-transform: lowercase;
margin-top: @margin-xs;
font-size: @font-size-extra-small;
height: 16px;
font-family: @font-family-sans-serif;
p.plans-table-price {
margin: 0;
a {
color: @ol-blue-gray-5;
text-decoration: underline;
span {
font-weight: 600;
font-size: var(--font-size-07);
line-height: var(--line-height-06);
}
}
}
}
@ -1095,11 +1068,12 @@
@media (max-width: @screen-xs-max) {
display: flex;
width: 100vw;
width: 100%;
top: 0;
left: 0;
z-index: @z-index-plans-page-table-header-mobile;
height: 42px;
border-bottom: @table-border;
// separate sticky class because we want to remove the class (to visually remove the sticky header)
// with javascript whenever the table is not visible anymore
@ -1114,18 +1088,17 @@
flex: 1 1 0px;
span {
margin: @margin-xs;
border-bottom: 1px solid #cccccc;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: @font-family-serif;
@media (max-width: @screen-xs-max) {
font-size: @font-size-small;
color: var(--neutral-90);
font-size: var(--font-size-03);
font-weight: 600;
text-align: center;
line-height: 19px;
line-height: var(--line-height-02);
}
}
}