github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-04-03 02:23:19 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #19616 from overleaf/jel-light-touch-educational

Browse source 
[web] Light touch plans redesign license picker and `?` icon

GitOrigin-RevId: 071842c37e2129cf62981317f7a23b8cd5410dba
This commit is contained in:
Jessica Lawshe 2024-07-30 09:16:16 -05:00 committed by Copybot
parent a21c8c6d19
commit 9e665c3a10
3 changed files with 108 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
services/web/app/views/subscriptions/plans/light-redesign/_mixins.pug
View file

@ -133,14 +133,14 @@ mixin plans_table(period, config)
)
.plans-table-cell-divider
//- all cells need 2 layers of divs for handling border and padding. See .plans-table in CSS for more details
div
.plans-table-cell-divider-content
b.plans-table-divider-label #{translate(featuresPerSection.dividerLabel)}
//- will only appear on screen width >= 768px (using CSS)
i.fa.fa-question-circle(
i.material-symbols.material-symbols-outlined.icon-sm(
data-toggle="tooltip"
title=translate(featuresPerSection.dividerInfo),
data-placement="top"
)
) help
//- will only appear on screen width < 768px (using CSS)
span.plans-table-divider-learn-more-container
span (
@ -168,11 +168,11 @@ mixin plans_table(period, config)
if feature.info
span #{translate(feature.feature)}
//- will only appear on screen width >= 768px (using CSS)
i.fa.fa-question-circle.plans-table-feature-question-icon(
i.material-symbols.material-symbols-outlined.icon-sm.plans-table-feature-question-icon(
data-toggle="tooltip"
title=translate(feature.info),
data-placement="right"
)
) help
//- will only appear on screen width < 768px (using CSS)
span.plans-table-feature-learn-more-container
span (
@ -236,9 +236,9 @@ mixin table_head_group_total_per_year(groupPlan)
mixin group_plans_license_picker()
form.plans-license-picker-form(data-ol-plans-v2-license-picker-form)
.plans-v2-license-picker-select-container
.plans-license-picker-select-container
span #{translate("number_of_users_with_colon")}
select.plans-v2-license-picker-select(
select(
name="plans-v2-license-picker-select"
id="plans-v2-license-picker-select"
autocomplete="off"
@ -256,7 +256,7 @@ mixin group_plans_license_picker()
option(value="20") 20
option(value="50") 50
.plans-v2-license-picker-educational-discount
label.plans-v2-license-picker-educational-discount-label(data-ol-plans-v2-license-picker-educational-discount-label)
label(data-ol-plans-v2-license-picker-educational-discount-label)
input.plans-v2-license-picker-educational-discount-checkbox(
type="checkbox"
id="license-picker-educational-discount"
@ -269,11 +269,12 @@ mixin group_plans_license_picker()
)
span #{translate("apply_educational_discount")}
//- will only appear on screen width >= 768px (using CSS)
i.fa.fa-question-circle.plans-v2-license-picker-educational-discount-question-icon(
i.material-symbols.material-symbols-outlined.icon-sm(
data-toggle="tooltip"
title=translate("apply_educational_discount_info"),
data-placement="bottom"
)
) help
//- will only appear on screen width < 768px (using CSS)
span.plans-v2-license-picker-educational-discount-learn-more-container
span (

7
services/web/frontend/js/pages/user/subscription/plans-v2/plans-v2-group-plan.js
View file

@ -78,6 +78,13 @@ export function updateMainGroupPlanPricing() {
)
.classList.toggle('disabled', notEligibleForEducationalDiscount)
formEl
.querySelector('.plans-v2-license-picker-educational-discount')
.classList.toggle(
'total-licenses-not-eligible-for-discount',
notEligibleForEducationalDiscount
)
formEl.querySelector(
'[data-ol-plans-v2-license-picker-educational-discount-input]'
).disabled = notEligibleForEducationalDiscount

152
services/web/frontend/stylesheets/app/plans/plans-light-touch-redesign.less
View file

@ -337,90 +337,107 @@
}
.plans-license-picker-form {
margin-top: 25px;
margin-top: var(--spacing-08);
display: flex;
align-items: center;
justify-content: center;
width: 100%;
font-size: var(--font-size-03);
line-height: var(--line-height-03);
@media (max-width: @screen-xs-max) {
font-size: @font-size-small;
margin-top: 15px;
flex-direction: column;
.plans-license-picker-select-container {
span {
font-weight: 700;
}
}
}
.plans-v2-license-picker-select {
background-color: @white;
border: 1px solid #cccccc;
width: 64px;
height: 30px;
margin: 0 @margin-sm;
padding-left: @padding-sm;
select {
background-color: @white;
border: 1px solid var(--neutral-60);
border-radius: var(--border-radius-base-new);
width: 53px;
height: 31px;
margin-left: var(--spacing-04);
padding: 5.5px var(--spacing-04);
font-size: var(--font-size-02);
line-height: var(--line-height-02);
@media (max-width: @screen-xs-max) {
margin: 0 15px;
@media (max-width: @screen-xs-max) {
margin: 0 15px;
}
}
}
.plans-v2-license-picker-educational-discount {
display: flex;
align-items: center;
i {
margin-left: var(--spacing-04);
@media (max-width: @screen-xs-max) {
margin-top: 15px;
@media (max-width: @screen-xs-max) {
display: none;
}
}
}
.plans-v2-license-picker-educational-discount-label {
margin-bottom: 0;
display: flex;
align-items: center;
font-weight: normal;
//- element is selected by shared JS with default variant
.plans-v2-license-picker-educational-discount {
display: flex;
align-items: center;
margin-left: var(--spacing-06);
&.disabled span {
color: @ol-blue-gray-2;
&.total-licenses-not-eligible-for-discount {
display: none;
}
@media (max-width: @screen-xs-max) {
margin-top: 15px;
}
}
}
input[type='checkbox'].plans-v2-license-picker-educational-discount-checkbox {
margin-top: 0;
margin-right: @margin-sm;
label {
margin-bottom: 0;
display: flex;
align-items: center;
font-weight: normal;
@media (max-width: @screen-xs-max) {
margin-right: 25px;
// scale the checkbox to around 30px width and height
transform: scale(2.307);
&.disabled span {
color: var(--neutral-40);
}
}
}
i.plans-v2-license-picker-educational-discount-question-icon {
margin-left: @margin-xs;
input[type='checkbox'].plans-v2-license-picker-educational-discount-checkbox {
margin-top: 0;
margin-right: var(--spacing-04);
@media (max-width: @screen-xs-max) {
@media (max-width: @screen-xs-max) {
margin-right: 25px;
// scale the checkbox to around 30px width and height
transform: scale(2.307);
}
}
span.plans-v2-license-picker-educational-discount-learn-more-container {
display: none;
}
}
span.plans-v2-license-picker-educational-discount-learn-more-container {
display: none;
@media (max-width: @screen-xs-max) {
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-license-picker-educational-discount-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-license-picker-educational-discount-learn-more-container selector (the current code block) above
// will also affect every child inside of it, including the generated tooltip
white-space: initial;
}
}
}
@media (max-width: @screen-xs-max) {
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-license-picker-educational-discount-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-license-picker-educational-discount-learn-more-container selector (the current code block) above
// will also affect every child inside of it, including the generated tooltip
white-space: initial;
}
font-size: var(--font-size-02);
margin-top: var(--spacing-06);
flex-direction: column;
}
}
@ -447,7 +464,11 @@
}
.plans-table-group {
margin-top: 26px + @plans-highlighted-text-height-desktop;
margin-top: 40px + @plans-highlighted-text-height-desktop;
@media (max-width: @screen-xs-max) {
margin-top: 40px + @plans-highlighted-text-height-mobile;
}
}
.plans-table {
@ -732,6 +753,12 @@
tr.plans-table-divider {
background-color: var(--neutral-10);
.plans-table-cell-divider-content {
display: flex;
align-items: center;
justify-content: center;
}
// direct child selector to NOT affect the generated tooltip
td > div {
text-align: center;
@ -1067,7 +1094,8 @@
.plans-table-sticky-header-without-switch {
margin-bottom: -107px;
margin-top: @plans-table-sticky-header-size;
margin-top: @plans-highlighted-text-height-mobile + 40px +
@table-border-size;
}
.plans-table-sticky-header-with-switch {