mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
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
Copybot
parent
300e46a28d
commit
0ea17a1c5a
2 changed files with 119 additions and 145 deletions
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue