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

Website Redesign - Adding the features table section (#19167)

Browse source 
* adding features table header

* adding the table body mixin

* adding margin bottom

* adding alternative colors to rows

* adding section heading in the table

* adding spacing in the rows by adding an extra div

* adding correct styling to section heading

* removing extra styling

* renaming class

* adding an extra row for row heading because it was interferring with the natural flow of row and cells when added to the same row as other cells

* adding code into mixins

* renaming the mixin

* fixing the margin bottom of table header

* adding 4n factor alternative styling for rows

* removing unused width

* Implement alternate color for all tbody on the mobile feature table

* adding padding top to plans-features-table-row-section-heading-content-mobile to match the figma design

* adding a translation and a comment

* renaming a few classnames and removing some comments

* removing extra comments

* replacing hex code with variable

* cleaning some CSS

* using a shade of neutral variables

* replacing colors with variables in less file

* adding font size for plans-features-table-header-item-price-mobile

* adding class .icon-md

* removing TODO comment

* adding css var on remaining variables

---------

Co-authored-by: M Fahru <m.fahru@overleaf.com>
GitOrigin-RevId: 89cf0fa35722b887c9d787a9a3442fbe758caafb
This commit is contained in:
Davinder Singh 2024-07-10 10:26:02 +01:00 committed by Copybot
parent ea7a9f3712
commit 79ec853c4a
2 changed files with 133 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -610,6 +610,138 @@
}
}
}
.plans-features-table-section-container-mobile {
margin-top: var(--spacing-13);
.plans-features-section-heading-mobile {
font-size: var(--font-size-06);
font-weight: 600;
line-height: var(--line-height-05);
color: var(--neutral-90);
text-align: center;
margin-bottom: var(--spacing-08);
}
.plans-features-table-mobile {
width: 100%;
.plans-features-table-header {
margin-bottom: var(--space-08);
}
.plans-features-table-header-container-mobile {
margin: var(--spacing-08) auto;
border-bottom: unset;
width: 100%;
max-width: 544px;
.plans-features-table-header-item-mobile {
width: 33%;
min-width: 114px;
.plans-features-table-header-item-content-mobile {
margin-bottom: var(--spacing-08);
padding: var(--spacing-04);
text-align: center;
background-color: var(--neutral-10);
}
.plans-features-table-header-item-title-mobile {
color: var(--neutral-90);
line-height: var(--line-height-03);
font-weight: 600;
}
.plans-features-table-header-item-price-mobile {
font-weight: 400;
color: var(--neutral-70);
line-height: var(--line-height-01);
font-size: var(--spacing-05);
}
}
.plans-features-table-header-item-content-mobile.active {
background-color: var(--neutral-80);
.plans-features-table-header-item-title-mobile {
color: var(--white);
}
.plans-features-table-header-item-price-mobile {
color: var(--white);
}
}
}
.plans-features-table-body-container-mobile {
.plans-features-table-row-heading-mobile {
font-weight: 600;
text-align: center;
line-height: var(--line-height-03);
.plans-features-table-row-section-heading-content-mobile {
padding-top: var(--spacing-08);
padding-bottom: var(--spacing-05);
font-size: var(--font-size-04);
color: var(--neutral-90);
}
}
// .plans-features-table-row-title-mobile and .plans-features-table-row-mobile are combined together to make one row visually, so we are using factors of 4 to alternatively color their backgrounds.
.plans-features-table-row-title-mobile {
&.plans-features-table-row-title-mobile-without-heading {
&:nth-child(4n - 3) {
background-color: var(--neutral-10);
}
&:nth-child(4n - 1) {
background-color: var(--white);
}
}
&:nth-child(4n - 2) {
background-color: var(--neutral-10);
}
&:nth-child(4n) {
background-color: var(--white);
}
.plans-features-table-row-title-content-mobile {
display: flex;
justify-content: center;
align-items: center;
padding-top: var(--spacing-06);
font-weight: 600;
line-height: var(--line-height-03);
}
}
.plans-features-table-row-mobile {
&.plans-features-table-row-mobile-without-heading {
&:nth-child(4n - 2) {
background-color: var(--neutral-10);
}
&:nth-child(4n) {
background-color: var(--white);
}
}
&:nth-child(4n - 3) {
background-color: var(--white);
}
&:nth-child(4n - 1) {
background-color: var(--neutral-10);
}
.plans-features-table-cell-content-mobile {
text-align: center;
padding-top: var(--spacing-05);
padding-bottom: var(--spacing-06);
}
}
}
}
}
}
.plans-faq {

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

@ -293,6 +293,7 @@
"compact": "Compact",
"company_name": "Company Name",
"compare": "Compare",
"compare_features": "Compare features",
"comparing_from_x_to_y": "Comparing from <0>__startTime__</0> to <0>__endTime__</0>",
"compile_error_entry_description": "An error which prevented this project from compiling",
"compile_error_handling": "Compile Error Handling",