diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss index 48c17014993b..c0c2e6808317 100644 --- a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss +++ b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/_CardGrid.scss @@ -16,7 +16,7 @@ .ds-card.refined-cards:not(.placeholder) { .img-wrapper .img { - height: 172px; + height: 162px; width: 100%; } } diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/_CardSections.scss b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/_CardSections.scss index 7e53d930cc90..cfa633cddbfe 100644 --- a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/_CardSections.scss +++ b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/_CardSections.scss @@ -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 { diff --git a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx index 46d66e8df18f..e667d1e34e12 100644 --- a/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx +++ b/browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/DSCard/DSCard.jsx @@ -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, }, }; diff --git a/browser/extensions/newtab/css/activity-stream.css b/browser/extensions/newtab/css/activity-stream.css index 7ac5ac21ef16..210b9b459f1d 100644 --- a/browser/extensions/newtab/css/activity-stream.css +++ b/browser/extensions/newtab/css/activity-stream.css @@ -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; diff --git a/browser/extensions/newtab/data/content/activity-stream.bundle.js b/browser/extensions/newtab/data/content/activity-stream.bundle.js index 6b2dd7db10be..96cdfcd346a8 100644 --- a/browser/extensions/newtab/data/content/activity-stream.bundle.js +++ b/browser/extensions/newtab/data/content/activity-stream.bundle.js @@ -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 = {