Skip to content

Commit ac7923f

Browse files
nathan-barrettpchevrel@mozilla.com
nathan-barrett
authored and
pchevrel@mozilla.com
committed
Bug 1977627 - Increase position classes for sections with a high number of cards a=pascalc
Original Revision: https://phabricator.services.mozilla.com/D257519 Differential Revision: https://phabricator.services.mozilla.com/D257537
1 parent 5c4e012 commit ac7923f

File tree

2 files changed

+124
-4
lines changed

2 files changed

+124
-4
lines changed

‎browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/_CardSections.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -578,7 +578,7 @@
578578
grid-template-columns: repeat(1, 300px);
579579

580580
@media (min-width: $break-point-medium) {
581-
@for $i from 0 through 6 {
581+
@for $i from 0 through 16 {
582582
.col-1-position-#{$i} {
583583
order: $i;
584584
}
@@ -612,7 +612,7 @@
612612
@media (min-width: $break-point-layout-variant) {
613613
grid-template-columns: repeat(2, 300px);
614614

615-
@for $i from 0 through 6 {
615+
@for $i from 0 through 16 {
616616
.col-2-position-#{$i} {
617617
order: $i;
618618
}
@@ -647,7 +647,7 @@
647647
grid-template-columns: repeat(3, 300px);
648648
gap: var(--space-large);
649649

650-
@for $i from 0 through 6 {
650+
@for $i from 0 through 16 {
651651
.col-3-position-#{$i} {
652652
order: $i;
653653
}
@@ -681,7 +681,7 @@
681681
@media (min-width: $break-point-sections-variant) {
682682
grid-template-columns: repeat(4, 300px);
683683

684-
@for $i from 0 through 6 {
684+
@for $i from 0 through 16 {
685685
.col-4-position-#{$i} {
686686
order: $i;
687687
}

‎browser/extensions/newtab/css/activity-stream.css

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4988,6 +4988,36 @@ main section {
49884988
.ds-section-grid.ds-card-grid .col-1-position-6 {
49894989
order: 6;
49904990
}
4991+
.ds-section-grid.ds-card-grid .col-1-position-7 {
4992+
order: 7;
4993+
}
4994+
.ds-section-grid.ds-card-grid .col-1-position-8 {
4995+
order: 8;
4996+
}
4997+
.ds-section-grid.ds-card-grid .col-1-position-9 {
4998+
order: 9;
4999+
}
5000+
.ds-section-grid.ds-card-grid .col-1-position-10 {
5001+
order: 10;
5002+
}
5003+
.ds-section-grid.ds-card-grid .col-1-position-11 {
5004+
order: 11;
5005+
}
5006+
.ds-section-grid.ds-card-grid .col-1-position-12 {
5007+
order: 12;
5008+
}
5009+
.ds-section-grid.ds-card-grid .col-1-position-13 {
5010+
order: 13;
5011+
}
5012+
.ds-section-grid.ds-card-grid .col-1-position-14 {
5013+
order: 14;
5014+
}
5015+
.ds-section-grid.ds-card-grid .col-1-position-15 {
5016+
order: 15;
5017+
}
5018+
.ds-section-grid.ds-card-grid .col-1-position-16 {
5019+
order: 16;
5020+
}
49915021
.ds-section-grid.ds-card-grid .col-1-small {
49925022
grid-row: span 1;
49935023
grid-column: span 1;
@@ -5323,6 +5353,36 @@ main section {
53235353
.ds-section-grid.ds-card-grid .col-2-position-6 {
53245354
order: 6;
53255355
}
5356+
.ds-section-grid.ds-card-grid .col-2-position-7 {
5357+
order: 7;
5358+
}
5359+
.ds-section-grid.ds-card-grid .col-2-position-8 {
5360+
order: 8;
5361+
}
5362+
.ds-section-grid.ds-card-grid .col-2-position-9 {
5363+
order: 9;
5364+
}
5365+
.ds-section-grid.ds-card-grid .col-2-position-10 {
5366+
order: 10;
5367+
}
5368+
.ds-section-grid.ds-card-grid .col-2-position-11 {
5369+
order: 11;
5370+
}
5371+
.ds-section-grid.ds-card-grid .col-2-position-12 {
5372+
order: 12;
5373+
}
5374+
.ds-section-grid.ds-card-grid .col-2-position-13 {
5375+
order: 13;
5376+
}
5377+
.ds-section-grid.ds-card-grid .col-2-position-14 {
5378+
order: 14;
5379+
}
5380+
.ds-section-grid.ds-card-grid .col-2-position-15 {
5381+
order: 15;
5382+
}
5383+
.ds-section-grid.ds-card-grid .col-2-position-16 {
5384+
order: 16;
5385+
}
53265386
.ds-section-grid.ds-card-grid .col-2-small {
53275387
grid-row: span 1;
53285388
grid-column: span 1;
@@ -5659,6 +5719,36 @@ main section {
56595719
.ds-section-grid.ds-card-grid .col-3-position-6 {
56605720
order: 6;
56615721
}
5722+
.ds-section-grid.ds-card-grid .col-3-position-7 {
5723+
order: 7;
5724+
}
5725+
.ds-section-grid.ds-card-grid .col-3-position-8 {
5726+
order: 8;
5727+
}
5728+
.ds-section-grid.ds-card-grid .col-3-position-9 {
5729+
order: 9;
5730+
}
5731+
.ds-section-grid.ds-card-grid .col-3-position-10 {
5732+
order: 10;
5733+
}
5734+
.ds-section-grid.ds-card-grid .col-3-position-11 {
5735+
order: 11;
5736+
}
5737+
.ds-section-grid.ds-card-grid .col-3-position-12 {
5738+
order: 12;
5739+
}
5740+
.ds-section-grid.ds-card-grid .col-3-position-13 {
5741+
order: 13;
5742+
}
5743+
.ds-section-grid.ds-card-grid .col-3-position-14 {
5744+
order: 14;
5745+
}
5746+
.ds-section-grid.ds-card-grid .col-3-position-15 {
5747+
order: 15;
5748+
}
5749+
.ds-section-grid.ds-card-grid .col-3-position-16 {
5750+
order: 16;
5751+
}
56625752
.ds-section-grid.ds-card-grid .col-3-small {
56635753
grid-row: span 1;
56645754
grid-column: span 1;
@@ -5994,6 +6084,36 @@ main section {
59946084
.ds-section-grid.ds-card-grid .col-4-position-6 {
59956085
order: 6;
59966086
}
6087+
.ds-section-grid.ds-card-grid .col-4-position-7 {
6088+
order: 7;
6089+
}
6090+
.ds-section-grid.ds-card-grid .col-4-position-8 {
6091+
order: 8;
6092+
}
6093+
.ds-section-grid.ds-card-grid .col-4-position-9 {
6094+
order: 9;
6095+
}
6096+
.ds-section-grid.ds-card-grid .col-4-position-10 {
6097+
order: 10;
6098+
}
6099+
.ds-section-grid.ds-card-grid .col-4-position-11 {
6100+
order: 11;
6101+
}
6102+
.ds-section-grid.ds-card-grid .col-4-position-12 {
6103+
order: 12;
6104+
}
6105+
.ds-section-grid.ds-card-grid .col-4-position-13 {
6106+
order: 13;
6107+
}
6108+
.ds-section-grid.ds-card-grid .col-4-position-14 {
6109+
order: 14;
6110+
}
6111+
.ds-section-grid.ds-card-grid .col-4-position-15 {
6112+
order: 15;
6113+
}
6114+
.ds-section-grid.ds-card-grid .col-4-position-16 {
6115+
order: 16;
6116+
}
59976117
.ds-section-grid.ds-card-grid .col-4-small {
59986118
grid-row: span 1;
59996119
grid-column: span 1;

0 commit comments

Comments
 (0)