зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1918447 - update list feed styles for small screens and layout variants r=home-newtab-reviewers,thecount
Differential Revision: https://phabricator.services.mozilla.com/D222035
This commit is contained in:
Nathan Barrett
Родитель
3b81464999
Коммит
9476700d72
|
|
@ -445,17 +445,14 @@ export class _CardGrid extends React.PureComponent {
|
|||
|
||||
if (listFeedEnabled) {
|
||||
// commenting out for landing in nightly - uncomment to use in development
|
||||
// const listFeedRecs = this.props.data.recommendations
|
||||
// .filter(rec => !rec.flight_id)
|
||||
// .slice(0, 5);
|
||||
// const listFeed = (
|
||||
// <ListFeed
|
||||
// recs={listFeedRecs}
|
||||
// recs={this.props.data.recommendations}
|
||||
// firstVisibleTimestamp={this.props.firstVisibleTimestamp}
|
||||
// type={this.props.type}
|
||||
// />
|
||||
// );
|
||||
// // place the list feed as the 3 element in the card grid
|
||||
// place the list feed as the 3 element in the card grid
|
||||
// cards.splice(2, 1, listFeed);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -202,10 +202,15 @@ export class _DSCard extends React.PureComponent {
|
|||
|
||||
this.listCardImageSizes = [
|
||||
{
|
||||
mediaMatcher: "default",
|
||||
mediaMatcher: "(min-width: 1122px)",
|
||||
width: 75,
|
||||
height: 75,
|
||||
},
|
||||
{
|
||||
mediaMatcher: "default",
|
||||
width: 50,
|
||||
height: 50,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,17 @@ import { DSCard } from "../DSCard/DSCard";
|
|||
|
||||
function ListFeed({ type, firstVisibleTimestamp, recs }) {
|
||||
const dispatch = useDispatch();
|
||||
// Todo: need to remove ads while using default recommendations, remove this line once API has been updated.
|
||||
const listFeedRecs = recs.filter(rec => !rec.flight_id).slice(0, 5);
|
||||
const { length: listLength } = listFeedRecs;
|
||||
// determine if the list should take up all availible height or not
|
||||
const fullList = listLength >= 5;
|
||||
return (
|
||||
<div className="list-feed">
|
||||
<div
|
||||
className={`list-feed ${fullList ? "full-height" : ""} ${
|
||||
listLength > 2 ? "span-2" : "span-1"
|
||||
}`}
|
||||
>
|
||||
<div className="list-feed-inner-wrapper">
|
||||
<h1 className="list-feed-title" id="list-feed-title">
|
||||
<span className="icon icon-trending"></span>
|
||||
|
|
@ -20,11 +29,11 @@ function ListFeed({ type, firstVisibleTimestamp, recs }) {
|
|||
role="menu"
|
||||
aria-labelledby="list-feed-title"
|
||||
>
|
||||
{recs.map(rec => {
|
||||
{listFeedRecs.map((rec, index) => {
|
||||
if (!rec || rec.placeholder) {
|
||||
return (
|
||||
<DSCard
|
||||
key={`list-card-${rec.id}`}
|
||||
key={`list-card-${index}`}
|
||||
placeholder={true}
|
||||
isListCard={true}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,68 @@
|
|||
.list-feed {
|
||||
grid-column: 3;
|
||||
grid-column: span 1 / -1;
|
||||
grid-row: span 2;
|
||||
height: 100%;
|
||||
|
||||
&.span-1 {
|
||||
grid-row: span 1;
|
||||
}
|
||||
|
||||
&.span-2 {
|
||||
grid-row: span 2;
|
||||
}
|
||||
|
||||
&.full-height {
|
||||
display: flex;
|
||||
|
||||
.list-feed-content {
|
||||
flex: 1;
|
||||
|
||||
.list-feed-card {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $break-point-medium) {
|
||||
&.span-1 {
|
||||
grid-row: span 1 / -1;
|
||||
}
|
||||
|
||||
&.span-2 {
|
||||
grid-row: span 2 / -1;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-variant-a &,
|
||||
.layout-variant-b & {
|
||||
@media (min-width: $break-point-medium) {
|
||||
&.span-1 {
|
||||
grid-row: span 1;
|
||||
}
|
||||
|
||||
&.span-2 {
|
||||
grid-row: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $break-point-layout-variant) {
|
||||
&.span-1 {
|
||||
grid-row: span 1 / -1;
|
||||
}
|
||||
|
||||
&.span-2 {
|
||||
grid-row: span 2 / -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list-feed-inner-wrapper {
|
||||
box-shadow: $shadow-card;
|
||||
background-color: var(--newtab-background-color-secondary);
|
||||
border-radius: var(--border-radius-medium);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.list-feed-title {
|
||||
|
|
@ -29,27 +84,68 @@
|
|||
list-style: none;
|
||||
padding-inline-start: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.layout-variant-a,
|
||||
.layout-variant-b {
|
||||
.ds-card-grid .list-feed-content .ds-card.list-feed-card {
|
||||
height: 135px;
|
||||
|
||||
@media (min-width: $break-point-widest) {
|
||||
height: 140px;
|
||||
}
|
||||
}
|
||||
.ds-card.placeholder.list-card-placeholder {
|
||||
box-shadow: unset;
|
||||
padding-inline-end: var(--space-large);
|
||||
padding-block: var(--space-large) var(--space-small);
|
||||
|
||||
.placeholder-image {
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
position: absolute;
|
||||
border-radius: var(--border-radius-medium);
|
||||
inset-inline-end: var(--space-large);
|
||||
}
|
||||
|
||||
.placeholder-label {
|
||||
margin-bottom: unset;
|
||||
}
|
||||
|
||||
.placeholder-header, .placeholder-description {
|
||||
width: 60%;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ds-card.placeholder.list-card-placeholder {
|
||||
box-shadow: unset;
|
||||
padding-inline-end: var(--space-large);
|
||||
padding-block: var(--space-large) var(--space-small);
|
||||
flex: 1;
|
||||
|
||||
.placeholder-image {
|
||||
height: 55px;
|
||||
width: 55px;
|
||||
position: absolute;
|
||||
border-radius: var(--border-radius-medium);
|
||||
inset-inline-end: var(--space-large);
|
||||
|
||||
@media (min-width: $break-point-widest) {
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder-label {
|
||||
margin-bottom: unset;
|
||||
}
|
||||
|
||||
.placeholder-header, .placeholder-description {
|
||||
width: 60%;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: $break-point-widest) {
|
||||
.placeholder-image {
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
}
|
||||
|
||||
.placeholder-header, .placeholder-description {
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
|
@ -97,13 +193,18 @@
|
|||
|
||||
.img-wrapper {
|
||||
flex-shrink: 0;
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
height: 55px;
|
||||
width: 55px;
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
border-radius: var(--border-radius-medium);
|
||||
}
|
||||
|
||||
@media (min-width: $break-point-widest) {
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
|
|
|
|||
|
|
@ -6074,14 +6074,56 @@ main section {
|
|||
}
|
||||
|
||||
.list-feed {
|
||||
grid-column: 3;
|
||||
grid-column: span 1/-1;
|
||||
grid-row: span 2;
|
||||
height: 100%;
|
||||
}
|
||||
.list-feed.span-1 {
|
||||
grid-row: span 1;
|
||||
}
|
||||
.list-feed.span-2 {
|
||||
grid-row: span 2;
|
||||
}
|
||||
.list-feed.full-height {
|
||||
display: flex;
|
||||
}
|
||||
.list-feed.full-height .list-feed-content {
|
||||
flex: 1;
|
||||
}
|
||||
.list-feed.full-height .list-feed-content .list-feed-card {
|
||||
flex: 1;
|
||||
}
|
||||
@media (min-width: 610px) {
|
||||
.list-feed.span-1 {
|
||||
grid-row: span 1/-1;
|
||||
}
|
||||
.list-feed.span-2 {
|
||||
grid-row: span 2/-1;
|
||||
}
|
||||
}
|
||||
@media (min-width: 610px) {
|
||||
.layout-variant-a .list-feed.span-1, .layout-variant-b .list-feed.span-1 {
|
||||
grid-row: span 1;
|
||||
}
|
||||
.layout-variant-a .list-feed.span-2, .layout-variant-b .list-feed.span-2 {
|
||||
grid-row: span 2;
|
||||
}
|
||||
}
|
||||
@media (min-width: 724px) {
|
||||
.layout-variant-a .list-feed.span-1, .layout-variant-b .list-feed.span-1 {
|
||||
grid-row: span 1/-1;
|
||||
}
|
||||
.layout-variant-a .list-feed.span-2, .layout-variant-b .list-feed.span-2 {
|
||||
grid-row: span 2/-1;
|
||||
}
|
||||
}
|
||||
.list-feed .list-feed-inner-wrapper {
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||
background-color: var(--newtab-background-color-secondary);
|
||||
border-radius: var(--border-radius-medium);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
.list-feed .list-feed-title {
|
||||
padding-inline-start: var(--space-medium);
|
||||
|
|
@ -6100,25 +6142,65 @@ main section {
|
|||
list-style: none;
|
||||
padding-inline-start: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.list-feed .ds-card.placeholder.list-card-placeholder {
|
||||
|
||||
.layout-variant-a .ds-card-grid .list-feed-content .ds-card.list-feed-card,
|
||||
.layout-variant-b .ds-card-grid .list-feed-content .ds-card.list-feed-card {
|
||||
height: 135px;
|
||||
}
|
||||
@media (min-width: 1122px) {
|
||||
.layout-variant-a .ds-card-grid .list-feed-content .ds-card.list-feed-card,
|
||||
.layout-variant-b .ds-card-grid .list-feed-content .ds-card.list-feed-card {
|
||||
height: 140px;
|
||||
}
|
||||
}
|
||||
.layout-variant-a .ds-card.placeholder.list-card-placeholder .placeholder-image,
|
||||
.layout-variant-b .ds-card.placeholder.list-card-placeholder .placeholder-image {
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
}
|
||||
.layout-variant-a .ds-card.placeholder.list-card-placeholder .placeholder-header, .layout-variant-a .ds-card.placeholder.list-card-placeholder .placeholder-description,
|
||||
.layout-variant-b .ds-card.placeholder.list-card-placeholder .placeholder-header,
|
||||
.layout-variant-b .ds-card.placeholder.list-card-placeholder .placeholder-description {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.ds-card.placeholder.list-card-placeholder {
|
||||
box-shadow: unset;
|
||||
padding-inline-end: var(--space-large);
|
||||
padding-block: var(--space-large) var(--space-small);
|
||||
flex: 1;
|
||||
}
|
||||
.list-feed .ds-card.placeholder.list-card-placeholder .placeholder-image {
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
.ds-card.placeholder.list-card-placeholder .placeholder-image {
|
||||
height: 55px;
|
||||
width: 55px;
|
||||
position: absolute;
|
||||
border-radius: var(--border-radius-medium);
|
||||
inset-inline-end: var(--space-large);
|
||||
}
|
||||
.list-feed .ds-card.placeholder.list-card-placeholder .placeholder-label {
|
||||
@media (min-width: 1122px) {
|
||||
.ds-card.placeholder.list-card-placeholder .placeholder-image {
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
}
|
||||
}
|
||||
.ds-card.placeholder.list-card-placeholder .placeholder-label {
|
||||
margin-bottom: unset;
|
||||
}
|
||||
.list-feed .ds-card.placeholder.list-card-placeholder .placeholder-header, .list-feed .ds-card.placeholder.list-card-placeholder .placeholder-description {
|
||||
.ds-card.placeholder.list-card-placeholder .placeholder-header, .ds-card.placeholder.list-card-placeholder .placeholder-description {
|
||||
width: 60%;
|
||||
height: 20px;
|
||||
height: 12px;
|
||||
}
|
||||
@media (min-width: 1122px) {
|
||||
.ds-card.placeholder.list-card-placeholder .placeholder-image {
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
}
|
||||
.ds-card.placeholder.list-card-placeholder .placeholder-header, .ds-card.placeholder.list-card-placeholder .placeholder-description {
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.ds-card-grid .list-feed-content .ds-card.list-feed-card {
|
||||
|
|
@ -6155,13 +6237,19 @@ main section {
|
|||
}
|
||||
.ds-card-grid .list-feed-content .ds-card.list-feed-card .img-wrapper {
|
||||
flex-shrink: 0;
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
height: 55px;
|
||||
width: 55px;
|
||||
}
|
||||
.ds-card-grid .list-feed-content .ds-card.list-feed-card .img-wrapper img {
|
||||
height: auto;
|
||||
border-radius: var(--border-radius-medium);
|
||||
}
|
||||
@media (min-width: 1122px) {
|
||||
.ds-card-grid .list-feed-content .ds-card.list-feed-card .img-wrapper {
|
||||
height: 75px;
|
||||
width: 75px;
|
||||
}
|
||||
}
|
||||
.ds-card-grid .list-feed-content .ds-card.list-feed-card:last-child {
|
||||
border-end-start-radius: var(--border-radius-medium);
|
||||
border-end-end-radius: var(--border-radius-medium);
|
||||
|
|
|
|||
|
|
@ -2939,9 +2939,13 @@ class _DSCard extends (external_React_default()).PureComponent {
|
|||
height: 101
|
||||
}];
|
||||
this.listCardImageSizes = [{
|
||||
mediaMatcher: "default",
|
||||
mediaMatcher: "(min-width: 1122px)",
|
||||
width: 75,
|
||||
height: 75
|
||||
}, {
|
||||
mediaMatcher: "default",
|
||||
width: 50,
|
||||
height: 50
|
||||
}];
|
||||
}
|
||||
doesLinkTopicMatchSelectedTopic() {
|
||||
|
|
@ -4023,17 +4027,14 @@ class _CardGrid extends (external_React_default()).PureComponent {
|
|||
}
|
||||
if (listFeedEnabled) {
|
||||
// commenting out for landing in nightly - uncomment to use in development
|
||||
// const listFeedRecs = this.props.data.recommendations
|
||||
// .filter(rec => !rec.flight_id)
|
||||
// .slice(0, 5);
|
||||
// const listFeed = (
|
||||
// <ListFeed
|
||||
// recs={listFeedRecs}
|
||||
// recs={this.props.data.recommendations}
|
||||
// firstVisibleTimestamp={this.props.firstVisibleTimestamp}
|
||||
// type={this.props.type}
|
||||
// />
|
||||
// );
|
||||
// // place the list feed as the 3 element in the card grid
|
||||
// place the list feed as the 3 element in the card grid
|
||||
// cards.splice(2, 1, listFeed);
|
||||
}
|
||||
let moreRecsHeader = "";
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче