Merge pull request #13234 from overleaf/jdt-subscriptions-cols-fix

fix col spacing on subscription page

GitOrigin-RevId: 886274f7b566632ac4f4ca3388d43b1b03575f6f
This commit is contained in:
Jimmy Domagala-Tang 2023-05-25 15:12:59 -04:00 committed by Copybot
parent c1211bef8f
commit b6f0b32df5
5 changed files with 18 additions and 5 deletions

View file

@ -2,6 +2,7 @@ const plansV2Features = require('./plansFeatures')
const config = {
individual: {
maxColumn: 4,
tableHead: {
individual_free: {},
individual_personal: {},

View file

@ -2,6 +2,7 @@ const plansV2Features = require('./plansFeatures')
const config = {
individual: {
maxColumn: 3,
tableHead: {
individual_free: {},
individual_collaborator: {},

View file

@ -14,7 +14,7 @@ mixin plans_v2_table(period, config)
- var baseColspan = config.baseColspan || 1
- var maxColumn = config.maxColumn || 4
- var discountedColumn = config.discountedColumn || {}
tr
tr(class=`cols-${maxColumn}`)
th(colspan=baseColspan)
- for (var i = 0; i < maxColumn; i++)
- var tableHeadKey = Object.keys(config.tableHead)[i]
@ -91,7 +91,7 @@ mixin plans_v2_table(period, config)
span )
for feature, featureIndex in featuresPerSection.items
tr(
class=(featureIndex === (featuresPerSection.items.length - 1) ? 'plans-v2-table-row-last-row-per-section' : '')
class=(featureIndex === (featuresPerSection.items.length - 1) ? `plans-v2-table-row-last-row-per-section cols-${maxColumn}` : `cols-${maxColumn}`)
)
td(
event-tracking="plans-page-table"

View file

@ -14,7 +14,7 @@ mixin plans_v2_table(period, config)
- var baseColspan = config.baseColspan || 1
- var maxColumn = config.maxColumn || 4
- var discountedColumn = config.discountedColumn || {}
tr
tr(class=`cols-${maxColumn}`)
th(colspan=baseColspan)
- for (var i = 0; i < maxColumn; i++)
- var tableHeadKey = Object.keys(config.tableHead)[i]
@ -89,7 +89,7 @@ mixin plans_v2_table(period, config)
span )
for feature, featureIndex in featuresPerSection.items
tr(
class=(featureIndex === (featuresPerSection.items.length - 1) ? 'plans-v2-table-row-last-row-per-section' : '')
class=(featureIndex === (featuresPerSection.items.length - 1) ? `plans-v2-table-row-last-row-per-section cols-${maxColumn}` : `cols-${maxColumn}`)
)
td(
event-tracking="plans-page-table"

View file

@ -535,8 +535,9 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
}
}
// for remove-personal-plan split test default variant
@media (max-width: @screen-xs-max) {
tr:not(.plans-v2-table-divider) {
tr.cols-4:not(.plans-v2-table-divider) {
td:not(:first-of-type),
th:not(:first-of-type) {
// 25% is because table-individual have 4 real columns on mobile
@ -545,6 +546,16 @@ span.plans-v2-license-picker-educational-discount-learn-more-container {
width: 25%;
}
}
// for remove-personal-plan split test personal-off variant
tr.cols-3:not(.plans-v2-table-divider) {
td:not(:first-of-type),
th:not(:first-of-type) {
// 33% is because table-individual have 3 real columns on mobile
// it actually has 4 table columns, but on mobile version, the first column become row
// we need to force 33% width to make each of 3 columns have an equal width of 1/3 screen width
width: calc(100% / 3);
}
}
tr {
&:last-child {