github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Refactor plans v2 sticky header to use dedicated config instead of hardcode (#8659)

Browse source 
GitOrigin-RevId: 3ea56ad5c6b9b5f6556e97429cf3e67a0b0d56bc
This commit is contained in:
M Fahru 2022-07-05 06:04:38 -04:00 committed by Copybot
parent 0b942bd8a8
commit bbaac83b82
4 changed files with 37 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
services/web/app/views/subscriptions/interstitial-payment.pug
View file

@ -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

2
services/web/app/views/subscriptions/plans-marketing/v2/_cards_controls_tables.pug
View file

@ -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')

56
services/web/app/views/subscriptions/plans-marketing/v2/_mixins.pug
View file

@ -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

27
services/web/frontend/stylesheets/app/plans-v2.less
View file

@ -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;