github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2025-04-06 09:51:24 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #19888 from overleaf/mf-new-plans-page-container-width-1280px

Browse source 
[web] Set new container width (1280px) and new main grid horizontal padding (16px) for all plans page redesign pages

GitOrigin-RevId: d266a8318dd4c2c90d9051bb58cca459799fca44
This commit is contained in:
M Fahru 2024-08-13 05:18:03 -07:00 • committed by Copybot
parent 90c32aacee
commit 40f3db3772
3 changed files with 64 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

42
services/web/frontend/stylesheets/core/grid.less
View file

@ -74,3 +74,45 @@
@media (min-width: @screen-lg-min) {
.make-grid(lg);
}
.website-redesign {
// whitelist for the pages to use the new grid
// TODO: remove this whitelist once all pages are using the new grid
.plans-new-design,
.plans-page {
// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.
.container {
.container-fixed(@grid-gutter-width-new);
@media (min-width: @screen-sm-min) {
width: @container-sm;
}
@media (min-width: @screen-md-min) {
width: @container-md;
}
@media (min-width: @screen-lg-min) {
width: @container-lg;
}
@media (min-width: @screen-xl-min) {
width: @container-xl;
}
}
// Row
//
// Rows contain and clear the floats of your columns.
.row {
.make-row(@grid-gutter-width-new);
}
// Columns
//
// Common styles for small and large grid columns
.make-grid-columns(@grid-gutter-width-new);
}
}

12
services/web/frontend/stylesheets/core/mixins.less
View file

@ -948,11 +948,11 @@
// -----------
// Centered container element
.container-fixed() {
.container-fixed(@gutter: @grid-gutter-width) {
margin-right: auto;
margin-left: auto;
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
&:extend(.clearfix all);
}
@ -1077,7 +1077,7 @@
// Used only by Bootstrap to generate the correct number of grid classes given
// any value of `@grid-columns`.
.make-grid-columns() {
.make-grid-columns(@gutter: @grid-gutter-width) {
// Common styles for all sizes of grid columns, widths 1-12
.col(@index) when (@index = 1) {
// initial
@ -1096,8 +1096,8 @@
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@grid-gutter-width / 2);
padding-right: (@grid-gutter-width / 2);
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
}
}
.col(1); // kickstart it

20
services/web/frontend/stylesheets/variables/all.less
View file

@ -368,22 +368,28 @@
@screen-sm-min: @screen-sm;
@screen-tablet: @screen-sm-min;
// Medium screen / desktop
// Medium screen / small desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md: 992px;
@screen-md-min: @screen-md;
@screen-desktop: @screen-md-min;
// Large screen / wide desktop
// Large screen / desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg: 1200px;
@screen-lg-min: @screen-lg;
@screen-lg-desktop: @screen-lg-min;
// Extra large screen / wide desktop
@screen-xl: 1400px;
@screen-xl-min: @screen-xl;
@screen-xl-desktop: @screen-xl-min;
// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
@screen-lg-max: (@screen-xl-min - 1);
//== Grid system
//
@ -393,6 +399,7 @@
@grid-columns: 12;
//** Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width: 30px;
@grid-gutter-width-new: 32px; // for website-redesign because the usage of 16px padding
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint: @screen-md-min;
@ -408,16 +415,21 @@
//** For `@screen-sm-min` and up.
@container-sm: @container-tablet;
// Medium screen / desktop
// Medium screen / small desktop
@container-desktop: ((940px + @grid-gutter-width));
//** For `@screen-md-min` and up.
@container-md: @container-desktop;
// Large screen / wide desktop
// Large screen / desktop
@container-large-desktop: ((1140px + @grid-gutter-width));
//** For `@screen-lg-min` and up.
@container-lg: @container-large-desktop;
// Extra large screen / wide desktop
@container-wide-desktop: ((1248px + @grid-gutter-width-new)); // 1280px
//** For `@screen-xl-min` and up.
@container-xl: @container-wide-desktop;
//== Navbar
//
//##