corysanin/tubestation
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bug 1970206 - Newtab update sections images sizes. r=maxx a=dmeehan DONTBUILD

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D253238
This commit is contained in:
scottdowne
2025-06-11 20:07:25 +00:00
committed by dmeehan@mozilla.com
parent 73e27a9fae
commit 4fd153bf54
5 changed files with 93 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss
View File

@@ -16,7 +16,7 @@
.ds-card.refined-cards:not(.placeholder) {
.img-wrapper .img {
height: 172px;
height: 162px;
width: 100%;
}
}

35
browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/_CardSections.scss
View File

@@ -15,19 +15,13 @@
&.refined-cards {
.ds-card-link {
padding: var(--space-xsmall) var(--space-small);
padding: var(--space-medium);
flex-grow: 0;
}
.img-wrapper {
width: 110px;
height: 117px;
}
.meta {
padding-inline: 0;
padding-block: 0 var(--space-xsmall);
min-height: 125px;
padding: 0;
min-height: 110px;
.info-wrap {
flex-grow: 1
@@ -53,8 +47,7 @@
.card-stp-button-position-wrapper {
// context menu should match the padding for the parent
inset-inline-end: var(--space-large);
inset-block-end: var(--space-small);
inset-block-end: var(--space-medium);
}
.context-menu-position-container .context-menu-button {
@@ -103,10 +96,10 @@
}
.img-wrapper {
width: 100px;
width: 110px;
height: 110px;
flex-shrink: 0;
flex-grow: 0;
aspect-ratio: 5/6;
.ds-image.img {
width: 100%;
@@ -185,7 +178,7 @@
.img-wrapper {
width: 100%;
height: 172px;
height: 162px;
}
.meta {
@@ -268,6 +261,10 @@
flex-grow: 0;
flex-shrink: 0;
aspect-ratio: initial;
.img {
aspect-ratio: 2/1;
}
}
&:not(.placeholder) {
@@ -312,7 +309,7 @@
(min-width: $break-point-sections-variant) {
.ds-card-link {
gap: var(--space-small);
padding: var(--space-small);
padding: var(--space-large);
}
.meta {
@@ -334,7 +331,7 @@
.card-stp-button-position-wrapper {
inset-inline-end: var(--space-xlarge);
inset-block-end: var(--space-small);
inset-block-end: var(--space-large);
}
&:hover,
@@ -356,16 +353,18 @@
@media ($break-point-layout-variant <=width < $break-point-widest),
(min-width: $break-point-sections-variant) {
align-content: flex-start;
justify-content: center;
.ds-card-link {
flex-direction: row;
gap: var(--space-xlarge);
padding: var(--space-xxlarge);
flex-grow: 0;
}
.img-wrapper {
width: 265px;
height: 100%;
width: 190px;
height: 250px;
}
.ds-image.img {

10
browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx
View File

@@ -305,16 +305,16 @@ export class _DSCard extends React.PureComponent {
this.sectionsCardImagesSizes = {
small: {
width: 100,
height: 120,
width: 110,
height: 110,
},
medium: {
width: 300,
height: refinedCardsLayout ? 172 : 150,
height: refinedCardsLayout ? 162 : 150,
},
large: {
width: 265,
height: 265,
width: 190,
height: 250,
},
};

130
browser/extensions/newtab/css/activity-stream.css
View File

@@ -4639,7 +4639,7 @@ main section {
}
.ds-card.refined-cards:not(.placeholder) .img-wrapper .img {
height: 172px;
height: 162px;
width: 100%;
}
@@ -5208,17 +5208,12 @@ main section {
box-shadow: var(--box-shadow-card-hover);
}
.ds-section-grid.ds-card-grid .col-1-small.refined-cards .ds-card-link {
padding: var(--space-xsmall) var(--space-small);
padding: var(--space-medium);
flex-grow: 0;
}
.ds-section-grid.ds-card-grid .col-1-small.refined-cards .img-wrapper {
width: 110px;
height: 117px;
}
.ds-section-grid.ds-card-grid .col-1-small.refined-cards .meta {
padding-inline: 0;
padding-block: 0 var(--space-xsmall);
min-height: 125px;
padding: 0;
min-height: 110px;
}
.ds-section-grid.ds-card-grid .col-1-small.refined-cards .meta .info-wrap {
flex-grow: 1;
@@ -5238,7 +5233,7 @@ main section {
}
.ds-section-grid.ds-card-grid .col-1-small.refined-cards .card-stp-button-position-wrapper {
inset-inline-end: var(--space-large);
inset-block-end: var(--space-small);
inset-block-end: var(--space-medium);
}
.ds-section-grid.ds-card-grid .col-1-small.refined-cards .context-menu-position-container .context-menu-button {
height: 32px;
@@ -5268,10 +5263,10 @@ main section {
padding: var(--space-large);
}
.ds-section-grid.ds-card-grid .col-1-small .img-wrapper {
width: 100px;
width: 110px;
height: 110px;
flex-shrink: 0;
flex-grow: 0;
aspect-ratio: 5/6;
}
.ds-section-grid.ds-card-grid .col-1-small .img-wrapper .ds-image.img {
width: 100%;
@@ -5332,7 +5327,7 @@ main section {
}
.ds-section-grid.ds-card-grid .col-1-medium.refined-cards .img-wrapper {
width: 100%;
height: 172px;
height: 162px;
}
.ds-section-grid.ds-card-grid .col-1-medium.refined-cards .meta {
padding: var(--space-small) var(--space-large);
@@ -5389,6 +5384,9 @@ main section {
flex-shrink: 0;
aspect-ratio: initial;
}
.ds-section-grid.ds-card-grid .col-1-medium .img-wrapper .img {
aspect-ratio: 2/1;
}
.ds-section-grid.ds-card-grid .col-1-medium:not(.placeholder) .img-wrapper > .ds-image.img > img {
border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
}
@@ -5421,7 +5419,7 @@ main section {
@media (min-width: 610px) and (724px <= width < 1122px), (min-width: 610px) and (min-width: 1390px) {
.ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui .ds-card-link {
gap: var(--space-small);
padding: var(--space-small);
padding: var(--space-large);
}
.ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui .meta {
padding: var(--space-large) var(--space-small) 0;
@@ -5438,7 +5436,7 @@ main section {
}
.ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui .card-stp-button-position-wrapper {
inset-inline-end: var(--space-xlarge);
inset-block-end: var(--space-small);
inset-block-end: var(--space-large);
}
.ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui:focus-visible .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-1-large.refined-cards.ds-card.sections-card-ui.active .meta .source-wrapper .source {
display: block;
@@ -5452,15 +5450,17 @@ main section {
@media (min-width: 610px) and (724px <= width < 1122px), (min-width: 610px) and (min-width: 1390px) {
.ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui {
align-content: flex-start;
justify-content: center;
}
.ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .ds-card-link {
flex-direction: row;
gap: var(--space-xlarge);
padding: var(--space-xxlarge);
flex-grow: 0;
}
.ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .img-wrapper {
width: 265px;
height: 100%;
width: 190px;
height: 250px;
}
.ds-section-grid.ds-card-grid .col-1-large.ds-card.sections-card-ui .ds-image.img {
aspect-ratio: 1/1;
@@ -5539,17 +5539,12 @@ main section {
box-shadow: var(--box-shadow-card-hover);
}
.ds-section-grid.ds-card-grid .col-2-small.refined-cards .ds-card-link {
padding: var(--space-xsmall) var(--space-small);
padding: var(--space-medium);
flex-grow: 0;
}
.ds-section-grid.ds-card-grid .col-2-small.refined-cards .img-wrapper {
width: 110px;
height: 117px;
}
.ds-section-grid.ds-card-grid .col-2-small.refined-cards .meta {
padding-inline: 0;
padding-block: 0 var(--space-xsmall);
min-height: 125px;
padding: 0;
min-height: 110px;
}
.ds-section-grid.ds-card-grid .col-2-small.refined-cards .meta .info-wrap {
flex-grow: 1;
@@ -5569,7 +5564,7 @@ main section {
}
.ds-section-grid.ds-card-grid .col-2-small.refined-cards .card-stp-button-position-wrapper {
inset-inline-end: var(--space-large);
inset-block-end: var(--space-small);
inset-block-end: var(--space-medium);
}
.ds-section-grid.ds-card-grid .col-2-small.refined-cards .context-menu-position-container .context-menu-button {
height: 32px;
@@ -5599,10 +5594,10 @@ main section {
padding: var(--space-large);
}
.ds-section-grid.ds-card-grid .col-2-small .img-wrapper {
width: 100px;
width: 110px;
height: 110px;
flex-shrink: 0;
flex-grow: 0;
aspect-ratio: 5/6;
}
.ds-section-grid.ds-card-grid .col-2-small .img-wrapper .ds-image.img {
width: 100%;
@@ -5663,7 +5658,7 @@ main section {
}
.ds-section-grid.ds-card-grid .col-2-medium.refined-cards .img-wrapper {
width: 100%;
height: 172px;
height: 162px;
}
.ds-section-grid.ds-card-grid .col-2-medium.refined-cards .meta {
padding: var(--space-small) var(--space-large);
@@ -5720,6 +5715,9 @@ main section {
flex-shrink: 0;
aspect-ratio: initial;
}
.ds-section-grid.ds-card-grid .col-2-medium .img-wrapper .img {
aspect-ratio: 2/1;
}
.ds-section-grid.ds-card-grid .col-2-medium:not(.placeholder) .img-wrapper > .ds-image.img > img {
border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
}
@@ -5752,7 +5750,7 @@ main section {
@media (min-width: 724px) and (724px <= width < 1122px), (min-width: 724px) and (min-width: 1390px) {
.ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui .ds-card-link {
gap: var(--space-small);
padding: var(--space-small);
padding: var(--space-large);
}
.ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui .meta {
padding: var(--space-large) var(--space-small) 0;
@@ -5769,7 +5767,7 @@ main section {
}
.ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui .card-stp-button-position-wrapper {
inset-inline-end: var(--space-xlarge);
inset-block-end: var(--space-small);
inset-block-end: var(--space-large);
}
.ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui:focus-visible .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-2-large.refined-cards.ds-card.sections-card-ui.active .meta .source-wrapper .source {
display: block;
@@ -5783,15 +5781,17 @@ main section {
@media (min-width: 724px) and (724px <= width < 1122px), (min-width: 724px) and (min-width: 1390px) {
.ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui {
align-content: flex-start;
justify-content: center;
}
.ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .ds-card-link {
flex-direction: row;
gap: var(--space-xlarge);
padding: var(--space-xxlarge);
flex-grow: 0;
}
.ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .img-wrapper {
width: 265px;
height: 100%;
width: 190px;
height: 250px;
}
.ds-section-grid.ds-card-grid .col-2-large.ds-card.sections-card-ui .ds-image.img {
aspect-ratio: 1/1;
@@ -5871,17 +5871,12 @@ main section {
box-shadow: var(--box-shadow-card-hover);
}
.ds-section-grid.ds-card-grid .col-3-small.refined-cards .ds-card-link {
padding: var(--space-xsmall) var(--space-small);
padding: var(--space-medium);
flex-grow: 0;
}
.ds-section-grid.ds-card-grid .col-3-small.refined-cards .img-wrapper {
width: 110px;
height: 117px;
}
.ds-section-grid.ds-card-grid .col-3-small.refined-cards .meta {
padding-inline: 0;
padding-block: 0 var(--space-xsmall);
min-height: 125px;
padding: 0;
min-height: 110px;
}
.ds-section-grid.ds-card-grid .col-3-small.refined-cards .meta .info-wrap {
flex-grow: 1;
@@ -5901,7 +5896,7 @@ main section {
}
.ds-section-grid.ds-card-grid .col-3-small.refined-cards .card-stp-button-position-wrapper {
inset-inline-end: var(--space-large);
inset-block-end: var(--space-small);
inset-block-end: var(--space-medium);
}
.ds-section-grid.ds-card-grid .col-3-small.refined-cards .context-menu-position-container .context-menu-button {
height: 32px;
@@ -5931,10 +5926,10 @@ main section {
padding: var(--space-large);
}
.ds-section-grid.ds-card-grid .col-3-small .img-wrapper {
width: 100px;
width: 110px;
height: 110px;
flex-shrink: 0;
flex-grow: 0;
aspect-ratio: 5/6;
}
.ds-section-grid.ds-card-grid .col-3-small .img-wrapper .ds-image.img {
width: 100%;
@@ -5995,7 +5990,7 @@ main section {
}
.ds-section-grid.ds-card-grid .col-3-medium.refined-cards .img-wrapper {
width: 100%;
height: 172px;
height: 162px;
}
.ds-section-grid.ds-card-grid .col-3-medium.refined-cards .meta {
padding: var(--space-small) var(--space-large);
@@ -6052,6 +6047,9 @@ main section {
flex-shrink: 0;
aspect-ratio: initial;
}
.ds-section-grid.ds-card-grid .col-3-medium .img-wrapper .img {
aspect-ratio: 2/1;
}
.ds-section-grid.ds-card-grid .col-3-medium:not(.placeholder) .img-wrapper > .ds-image.img > img {
border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
}
@@ -6084,7 +6082,7 @@ main section {
@media (min-width: 1122px) and (724px <= width < 1122px), (min-width: 1122px) and (min-width: 1390px) {
.ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui .ds-card-link {
gap: var(--space-small);
padding: var(--space-small);
padding: var(--space-large);
}
.ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui .meta {
padding: var(--space-large) var(--space-small) 0;
@@ -6101,7 +6099,7 @@ main section {
}
.ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui .card-stp-button-position-wrapper {
inset-inline-end: var(--space-xlarge);
inset-block-end: var(--space-small);
inset-block-end: var(--space-large);
}
.ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui:focus-visible .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-3-large.refined-cards.ds-card.sections-card-ui.active .meta .source-wrapper .source {
display: block;
@@ -6115,15 +6113,17 @@ main section {
@media (min-width: 1122px) and (724px <= width < 1122px), (min-width: 1122px) and (min-width: 1390px) {
.ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui {
align-content: flex-start;
justify-content: center;
}
.ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .ds-card-link {
flex-direction: row;
gap: var(--space-xlarge);
padding: var(--space-xxlarge);
flex-grow: 0;
}
.ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .img-wrapper {
width: 265px;
height: 100%;
width: 190px;
height: 250px;
}
.ds-section-grid.ds-card-grid .col-3-large.ds-card.sections-card-ui .ds-image.img {
aspect-ratio: 1/1;
@@ -6202,17 +6202,12 @@ main section {
box-shadow: var(--box-shadow-card-hover);
}
.ds-section-grid.ds-card-grid .col-4-small.refined-cards .ds-card-link {
padding: var(--space-xsmall) var(--space-small);
padding: var(--space-medium);
flex-grow: 0;
}
.ds-section-grid.ds-card-grid .col-4-small.refined-cards .img-wrapper {
width: 110px;
height: 117px;
}
.ds-section-grid.ds-card-grid .col-4-small.refined-cards .meta {
padding-inline: 0;
padding-block: 0 var(--space-xsmall);
min-height: 125px;
padding: 0;
min-height: 110px;
}
.ds-section-grid.ds-card-grid .col-4-small.refined-cards .meta .info-wrap {
flex-grow: 1;
@@ -6232,7 +6227,7 @@ main section {
}
.ds-section-grid.ds-card-grid .col-4-small.refined-cards .card-stp-button-position-wrapper {
inset-inline-end: var(--space-large);
inset-block-end: var(--space-small);
inset-block-end: var(--space-medium);
}
.ds-section-grid.ds-card-grid .col-4-small.refined-cards .context-menu-position-container .context-menu-button {
height: 32px;
@@ -6262,10 +6257,10 @@ main section {
padding: var(--space-large);
}
.ds-section-grid.ds-card-grid .col-4-small .img-wrapper {
width: 100px;
width: 110px;
height: 110px;
flex-shrink: 0;
flex-grow: 0;
aspect-ratio: 5/6;
}
.ds-section-grid.ds-card-grid .col-4-small .img-wrapper .ds-image.img {
width: 100%;
@@ -6326,7 +6321,7 @@ main section {
}
.ds-section-grid.ds-card-grid .col-4-medium.refined-cards .img-wrapper {
width: 100%;
height: 172px;
height: 162px;
}
.ds-section-grid.ds-card-grid .col-4-medium.refined-cards .meta {
padding: var(--space-small) var(--space-large);
@@ -6383,6 +6378,9 @@ main section {
flex-shrink: 0;
aspect-ratio: initial;
}
.ds-section-grid.ds-card-grid .col-4-medium .img-wrapper .img {
aspect-ratio: 2/1;
}
.ds-section-grid.ds-card-grid .col-4-medium:not(.placeholder) .img-wrapper > .ds-image.img > img {
border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
}
@@ -6415,7 +6413,7 @@ main section {
@media (min-width: 1390px) and (724px <= width < 1122px), (min-width: 1390px) and (min-width: 1390px) {
.ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui .ds-card-link {
gap: var(--space-small);
padding: var(--space-small);
padding: var(--space-large);
}
.ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui .meta {
padding: var(--space-large) var(--space-small) 0;
@@ -6432,7 +6430,7 @@ main section {
}
.ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui .card-stp-button-position-wrapper {
inset-inline-end: var(--space-xlarge);
inset-block-end: var(--space-small);
inset-block-end: var(--space-large);
}
.ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui:hover .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui:active .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui:focus-visible .meta .source-wrapper .source, .ds-section-grid.ds-card-grid .col-4-large.refined-cards.ds-card.sections-card-ui.active .meta .source-wrapper .source {
display: block;
@@ -6446,15 +6444,17 @@ main section {
@media (min-width: 1390px) and (724px <= width < 1122px), (min-width: 1390px) and (min-width: 1390px) {
.ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui {
align-content: flex-start;
justify-content: center;
}
.ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .ds-card-link {
flex-direction: row;
gap: var(--space-xlarge);
padding: var(--space-xxlarge);
flex-grow: 0;
}
.ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .img-wrapper {
width: 265px;
height: 100%;
width: 190px;
height: 250px;
}
.ds-section-grid.ds-card-grid .col-4-large.ds-card.sections-card-ui .ds-image.img {
aspect-ratio: 1/1;

10
browser/extensions/newtab/data/content/activity-stream.bundle.js
View File

@@ -3705,16 +3705,16 @@ class _DSCard extends (external_React_default()).PureComponent {
}];
this.sectionsCardImagesSizes = {
small: {
width: 100,
height: 120
width: 110,
height: 110
},
medium: {
width: 300,
height: refinedCardsLayout ? 172 : 150
height: refinedCardsLayout ? 162 : 150
},
large: {
width: 265,
height: 265
width: 190,
height: 250
}
};
this.sectionsColumnMediaMatcher = {