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

Merge pull request #19360 from overleaf/mf-new-plans-page-nondiscounted-price-on-top

Browse source 
[web] New plans page - move nondiscounted price on top of the price

GitOrigin-RevId: 411e07a0d6646b922cb3104de091f260da9efb89
This commit is contained in:
M Fahru 2024-07-11 18:44:49 +07:00 committed by Copybot
parent 1f0e346bbc
commit 7ba268b912
3 changed files with 37 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
services/web/frontend/stylesheets/app/plans/plans-new-design.less
View file

@ -1,4 +1,22 @@
@import './plans-new-variables.less';
@z-index-plans-new-tabs: 1;
@z-index-plans-new-tabs-content: 0;
@highlighted-heading-line-height: (@line-height-03 / 1rem) * 16px; // convert to px
@highlighted-heading-padding-vertical: @spacing-02;
@highlighted-heading-height: (
@highlighted-heading-line-height + (2 * @highlighted-heading-padding-vertical)
);
@switcher-container-width: 270px;
@switcher-container-height: 44px;
@switcher-container-border-radius: @switcher-container-height / 2;
@switcher-container-padding: 6px;
@switcher-container-margin-bottom: @highlighted-heading-height + @spacing-10;
@switcher-padding-vertical: 2px;
@switcher-height: @switcher-container-height - 2 * @switcher-container-padding;
@switcher-border-radius: @switcher-height / 2;
@nondiscounted-price-element-height: var(--line-height-02);
.plans-new-design {
padding-top: calc(var(--spacing-16) + var(--header-height));
@ -337,60 +355,43 @@
}
.plans-new-table-header-grid-container {
display: grid;
grid-column-gap: var(--spacing-04);
// priceUnitTotal is an optional row
grid-template:
'nonDiscountedPrice price .' 2fr
'priceUnit priceUnit priceUnit' 1fr
'priceUnitTotal priceUnitTotal priceUnitTotal' auto / 1fr 1fr 1fr;
display: flex;
flex-direction: column;
align-items: center;
s {
font-size: var(--font-size-02);
line-height: @nondiscounted-price-element-height;
color: var(--neutral-40);
font-weight: 600;
}
.plans-new-table-header-price {
grid-area: price;
justify-self: center;
font-size: var(--font-size-08);
font-weight: 600;
line-height: var(--line-height-07);
color: var(--neutral-90);
// will affect the element if header does not have nondiscounted price
&:first-child {
margin-top: @nondiscounted-price-element-height;
}
}
.plans-new-table-header-price-unit {
grid-area: priceUnit;
justify-self: center;
font-size: var(--font-size-02);
line-height: var(--line-height-02);
}
.plans-new-table-header-price-unit-total {
grid-area: priceUnitTotal;
justify-self: center;
font-size: var(--font-size-01);
line-height: var(--line-height-01);
}
.plans-new-table-header-nondiscounted-price {
grid-area: nonDiscountedPrice;
justify-self: end;
align-self: end;
font-size: var(--font-size-04);
line-height: var(--line-height-05);
color: var(--neutral-40);
font-weight: 600;
}
.plans-new-table-header-icon {
// this element should only be placed in the grid
// where it's the only element in the grid
// the grid-area below will make sure that it covers the whole grid
grid-area: ~'span 2 / span 3';
justify-self: center;
font-size: 56px;
color: var(--neutral-90);
margin-top: @nondiscounted-price-element-height;
}
}

17
services/web/frontend/stylesheets/app/plans/plans-new-variables.less
View file

@ -1,17 +0,0 @@
@z-index-plans-new-tabs: 1;
@z-index-plans-new-tabs-content: 0;
@highlighted-heading-line-height: (@line-height-03 / 1rem) * 16px; // convert to px
@highlighted-heading-padding-vertical: @spacing-02;
@highlighted-heading-height: (
@highlighted-heading-line-height + (2 * @highlighted-heading-padding-vertical)
);
@switcher-container-width: 270px;
@switcher-container-height: 44px;
@switcher-container-border-radius: @switcher-container-height / 2;
@switcher-container-padding: 6px;
@switcher-container-margin-bottom: @highlighted-heading-height + @spacing-10;
@switcher-padding-vertical: 2px;
@switcher-height: @switcher-container-height - 2 * @switcher-container-padding;
@switcher-border-radius: @switcher-height / 2;

2
services/web/locales/en.json
View file

@ -372,6 +372,7 @@
"currency": "Currency",
"current_file": "Current file",
"current_password": "Current Password",
"current_price": "Current price",
"current_session": "Current Session",
"currently_seeing_only_24_hrs_history": "You’re currently seeing the last 24 hours of changes in this project.",
"currently_signed_in_as_x": "Currently signed in as <0>__userEmail__</0>.",
@ -1327,6 +1328,7 @@
"organization_or_company_name": "Organization or company name",
"organization_or_company_type": "Organization or company type",
"organize_projects": "Organize Projects",
"original_price": "Original price",
"other": "Other",
"other_actions": "Other Actions",
"other_logs_and_files": "Other logs and files",