From 68e42efb20935b73902568d565967062da079954 Mon Sep 17 00:00:00 2001 From: Jessica Lawshe <5312836+lawshe@users.noreply.github.com> Date: Mon, 15 Jul 2024 08:28:58 -0500 Subject: [PATCH] Merge pull request #19331 from overleaf/jel-light-touch-rename-css [web] Rename CSS variables for light touch redesign GitOrigin-RevId: 8a56c56e2a743e935d70bd585d8c62a93faba0eb --- .../plans/light-redesign/_mixins.pug | 40 +++++------ .../app/plans/plans-light-touch-redesign.less | 71 ++++++++++--------- 2 files changed, 56 insertions(+), 55 deletions(-) diff --git a/services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug b/services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug index ba98fa7276..dd4d000c63 100644 --- a/services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug +++ b/services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug @@ -108,23 +108,23 @@ mixin plans_table(period, config) for featuresPerSection in config.features - var dividerColspan = Object.values(config.tableHead).reduce((prev, curr) => (prev) + (curr.colspan || 1), baseColspan) if featuresPerSection.divider - tr.plans-v2-table-divider + tr.plans-table-divider td( colspan=dividerColspan - class=((config.highlightedColumn.index === Object.keys(config.tableHead).length - 1) ? 'plans-v2-table-divider-highlighted' : '') + class=((config.highlightedColumn.index === Object.keys(config.tableHead).length - 1) ? 'plans-table-last-col-highlighted' : '') ) div - b.plans-v2-table-divider-label #{translate(featuresPerSection.dividerLabel)} + b.plans-table-divider-label #{translate(featuresPerSection.dividerLabel)} //- will only appear on screen width >= 768px (using CSS) - i.fa.fa-question-circle.plans-v2-table-divider-question-icon( + i.fa.fa-question-circle( data-toggle="tooltip" title=translate(featuresPerSection.dividerInfo), data-placement="top" ) //- will only appear on screen width < 768px (using CSS) - span.plans-v2-table-divider-learn-more-container + span.plans-table-divider-learn-more-container span ( - span.plans-v2-table-divider-learn-more-text( + span.plans-table-divider-learn-more-text( data-toggle="tooltip" title=translate(featuresPerSection.dividerInfo), data-placement="top" @@ -144,19 +144,19 @@ mixin plans_table(period, config) colspan=baseColspan scope="row" ) - .plans-v2-table-feature-name + .plans-table-feature-name if feature.info span #{translate(feature.feature)} //- will only appear on screen width >= 768px (using CSS) - i.fa.fa-question-circle.plans-v2-table-feature-name-question-icon( + i.fa.fa-question-circle.plans-table-feature-question-icon( data-toggle="tooltip" title=translate(feature.info), data-placement="right" ) //- will only appear on screen width < 768px (using CSS) - span.plans-v2-table-feature-name-learn-more-container + span.plans-table-feature-learn-more-container span ( - span.plans-v2-table-feature-name-learn-more-text( + span.plans-table-feature-learn-more-text( data-toggle="tooltip" title=translate(feature.info), data-placement="top" @@ -285,7 +285,7 @@ mixin table_head_group_organization(highlighted, eventTrackingKey, additionalEve - 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-v2-table-comments-icon + .plans-table-comments-icon i.fa.fa-comments-o .plans-table-btn-buy-container-mobile +btn_buy_group_organization(highlighted, eventTrackingKey) @@ -336,7 +336,7 @@ mixin table_head_student_student(highlighted, eventTrackingKey, additionalEventS mixin table_head_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period) div.plans-table-th-content p.plans-table-th-content-title #{translate("university")} - div.plans-v2-table-comments-icon + div.plans-table-comments-icon i.fa.fa-comments-o .plans-table-btn-buy-container-mobile +btn_buy_student_university(highlighted, eventTrackingKey, additionalEventSegmentation, period) @@ -377,7 +377,7 @@ mixin table_cell(feature, plan) span.sr-only #{translate("feature_not_included")} mixin group_plans_license_picker() - form.plans-v2-license-picker-form(data-ol-plans-v2-license-picker-form) + form.plans-license-picker-form(data-ol-plans-v2-license-picker-form) .plans-v2-license-picker-select-container span #{translate("number_of_users_with_colon")} select.plans-v2-license-picker-select( @@ -567,20 +567,20 @@ mixin additional_link_buy(eventTrackingKey, additionalEventSegmentation, plan, p mixin plans_v2_table_sticky_header(withSwitch, config) - var tableHeadKeys = Object.keys(config.tableHead) - .row.plans-v2-table-sticky-header.sticky( + .row.plans-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') + class=(withSwitch ? 'plans-table-sticky-header-with-switch' : 'plans-table-sticky-header-without-switch') ) - for (var i = 0; i < tableHeadKeys.length; i++) - var tableHeadKey = tableHeadKeys[i] - var translateKey = tableHeadKey.split('_')[1] - if (config.highlightedColumn.index === i) { - var elClass = 'plans-v2-table-sticky-header-item-green-highlighted' + var elClass = 'plans-table-sticky-header-item-green-highlighted' } else { var elClass = '' } - .plans-v2-table-sticky-header-item( + .plans-table-sticky-header-item( class=elClass ) case tableHeadKey @@ -594,16 +594,16 @@ mixin plans_v2_table_sticky_header(withSwitch, config) span #{translate(translateKey)} mixin table_sticky_header_all(plansConfig) - .row.plans-v2-table-sticky-header-container( + .row.plans-table-sticky-header-container( data-ol-plans-v2-view='individual' ) +plans_v2_table_sticky_header(true, plansConfig.individual) - .row.plans-v2-table-sticky-header-container( + .row.plans-table-sticky-header-container( hidden data-ol-plans-v2-view='group' ) +plans_v2_table_sticky_header(false, plansConfig.group) - .row.plans-v2-table-sticky-header-container( + .row.plans-table-sticky-header-container( hidden data-ol-plans-v2-view='student' ) diff --git a/services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less b/services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less index 671ef3e4ea..962dc962eb 100644 --- a/services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less +++ b/services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less @@ -305,6 +305,7 @@ } } + //- class toggled by JS &.plans-v2-m-a-tooltip-monthly-selected { right: -119%; } @@ -330,7 +331,7 @@ } } - .plans-v2-table-comments-icon { + .plans-table-comments-icon { height: 65px; i { @@ -346,7 +347,7 @@ position: relative; } - .plans-v2-license-picker-form { + .plans-license-picker-form { margin-top: 25px; display: flex; align-items: center; @@ -605,7 +606,7 @@ &:not(.plans-table-cell-before-green-highlighted-column):not( .plans-table-green-highlighted - ):not(.plans-v2-table-divider-highlighted) { + ):not(.plans-table-last-col-highlighted) { border-right: 1px solid @ol-blue-gray-0; @media (max-width: @screen-xs-max) { @@ -638,7 +639,7 @@ height: 100%; &:last-child:not(.plans-table-green-highlighted):not( - .plans-v2-table-divider-highlighted + .plans-table-last-col-highlighted ) { border-right: 0; } @@ -653,7 +654,7 @@ // css hack for table border-radius on the first feature name &:nth-child(2) { .plans-table-row-header:first-child { - .plans-v2-table-feature-name { + .plans-table-feature-name { border-top-left-radius: @plans-table-border-radius; @media (max-width: @screen-xs-max) { @@ -664,10 +665,10 @@ } &:not(.plans-table-row-last-row-per-section):not( - .plans-v2-table-divider + .plans-table-divider ):not(:last-of-type) { th > .plans-table-th > .plans-table-th-content, - td > .plans-v2-table-feature-name, + td > .plans-table-feature-name, td > .plans-table-cell > .plans-table-cell-content { border-bottom: 1px solid @ol-blue-gray-0; @@ -695,10 +696,10 @@ @media (min-width: @screen-sm-min) { // highlight rows on hover - tr:not(.plans-v2-table-divider):not(:first-child):hover { + tr:not(.plans-table-divider):not(:first-child):hover { background-color: @table-hover-bg; - .plans-v2-table-feature-name, + .plans-table-feature-name, .plans-table-cell { background-color: @table-hover-bg; } @@ -723,21 +724,21 @@ // The forced width below (plans-table-cols-n) is to ensure the table columns have an equal width // because on mobile, the first column (empty cell on first `tr` and feature name on the rest of `tr`) will be shown as its own row // and the rest of the `tr` will incorporate a full width of the viewport - tr.plans-table-cols-4:not(.plans-v2-table-divider) { + tr.plans-table-cols-4:not(.plans-table-divider) { td, th:not(:first-of-type) { width: 25%; } } - tr.plans-table-cols-3:not(.plans-v2-table-divider) { + tr.plans-table-cols-3:not(.plans-table-divider) { td, th:not(:first-of-type) { width: calc(100% / 3); } } - tr.plans-table-cols-2:not(.plans-v2-table-divider) { + tr.plans-table-cols-2:not(.plans-table-divider) { td, th:not(:first-of-type) { width: 50%; @@ -760,7 +761,7 @@ .plans-table-row-header { width: 100vw; - span.plans-v2-table-feature-name { + span.plans-table-feature-name { width: 100%; span { @@ -962,17 +963,17 @@ } } - .plans-v2-table-feature-name { + .plans-table-feature-name { display: flex; justify-content: space-between; align-items: center; padding: 6px 6px 6px 18px; - i.plans-v2-table-feature-name-question-icon { + i.plans-table-feature-question-icon { margin-left: 10px; } - span.plans-v2-table-feature-name-learn-more-container { + span.plans-table-feature-learn-more-container { display: none; } @@ -984,23 +985,23 @@ background-color: @ol-blue-gray-0; min-height: @plans-table-td-mobile-min-height; - i.plans-v2-table-feature-name-question-icon { + i.plans-table-feature-question-icon { display: none; } - span.plans-v2-table-feature-name-learn-more-container { + span.plans-table-feature-learn-more-container { margin-left: 5px; display: inline; // this white-space is important to ensure the "learn more" text won't get separated by a newline white-space: nowrap; - span.plans-v2-table-feature-name-learn-more-text { + span.plans-table-feature-learn-more-text { color: @plans-learn-more-link-color; } .tooltip { // force white-space to have initial value since the `white-space: nowrap` rule - // on .plans-v2-table-feature-name-learn-more-container selector (the current code block) above + // on .plans-table-feature-learn-more-container selector (the current code block) above // will also affect every child inside of it, including the generated tooltip white-space: initial; } @@ -1008,7 +1009,7 @@ } } - tr.plans-v2-table-divider { + tr.plans-table-divider { background-color: @ol-blue-gray-1; // direct child selector to NOT affect the generated tooltip @@ -1016,18 +1017,18 @@ text-align: center; padding: 6px; - .plans-v2-table-divider-label { + .plans-table-divider-label { margin-bottom: 0; margin-right: 5px; } - .plans-v2-table-divider-learn-more-container { + .plans-table-divider-learn-more-container { display: none; } } // highlighted divider will only show if the highlighted column is on the last visible column - .plans-v2-table-divider-highlighted > div { + .plans-table-last-col-highlighted > div { border-right: 2px solid @ol-green; } @@ -1043,21 +1044,21 @@ background-color: @ol-blue-gray-1; padding: 15px 5px; - i.plans-v2-table-divider-question-icon { + i { display: none; } - .plans-v2-table-divider-learn-more-container { + .plans-table-divider-learn-more-container { display: inline; // this white-space is important to ensure the "learn more" text won't get separated by a newline white-space: nowrap; - span.plans-v2-table-divider-learn-more-text { + span.plans-table-divider-learn-more-text { color: @plans-learn-more-link-color; } // force white-space to have initial value since the `white-space: nowrap` rule - // on .plans-v2-table-divider-learn-more-container selector (the current code block) above + // on .plans-table-divider-learn-more-container selector (the current code block) above // will also affect every child inside of it, including the generated tooltip .tooltip { white-space: initial; @@ -1066,7 +1067,7 @@ } } - .plans-v2-table-divider-highlighted > div { + .plans-table-last-col-highlighted > div { border-right: none; } } @@ -1117,7 +1118,7 @@ } } - .plans-v2-table-sticky-header-container { + .plans-table-sticky-header-container { @media (max-width: @screen-xs-max) { // `height: 60%` is just an arbitrary percentage // since we need to cover the whole plans_v2_table @@ -1129,17 +1130,17 @@ } } - .plans-v2-table-sticky-header-without-switch { + .plans-table-sticky-header-without-switch { margin-bottom: -107px; margin-top: 67px; } - .plans-v2-table-sticky-header-with-switch { + .plans-table-sticky-header-with-switch { margin-bottom: -140px; margin-top: 100px; } - .plans-v2-table-sticky-header { + .plans-table-sticky-header { display: none; @media (max-width: @screen-xs-max) { @@ -1158,7 +1159,7 @@ } } - .plans-v2-table-sticky-header-item { + .plans-table-sticky-header-item { background-color: @white; flex: 1 1 0px; @@ -1179,7 +1180,7 @@ } } - .plans-v2-table-sticky-header-item-green-highlighted span { + .plans-table-sticky-header-item-green-highlighted span { color: @ol-green; }