Commit 285bc3d0 authored by Reem H's avatar Reem H Committed by npypchenko@mozilla.com
Browse files

Bug 1965944 - Visual updates for medium card UI. r=home-newtab-reviewers,nbarrett,npypchenko 

Differential Revision: https://phabricator.services.mozilla.com/D249215
parent 3373c8b1

browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid.jsx

+4 −1
Original line number Diff line number Diff line
@@ -31,6 +31,7 @@ const PREF_BILLBOARD_ENABLED = "newtabAdSize.billboard"; 
const PREF_LEADERBOARD_ENABLED = "newtabAdSize.leaderboard";

const PREF_LEADERBOARD_POSITION = "newtabAdSize.leaderboard.position";

const PREF_BILLBOARD_POSITION = "newtabAdSize.billboard.position";

const PREF_REFINED_CARDS_ENABLED = "discoverystream.refinedCardsLayout.enabled";

const INTERSECTION_RATIO = 0.5;

const VISIBLE = "visible";

const VISIBILITY_CHANGE_EVENT = "visibilitychange";
@@ -361,6 +362,8 @@ export class _CardGrid extends React.PureComponent { 
    const listFeedSelectedFeed = prefs[PREF_LIST_FEED_SELECTED_FEED];

    const billboardEnabled = prefs[PREF_BILLBOARD_ENABLED];

    const leaderboardEnabled = prefs[PREF_LEADERBOARD_ENABLED];

    const refinedCardsLayout = prefs[PREF_REFINED_CARDS_ENABLED];



    // filter out recs that should be in ListFeed

    const recs = this.props.data.recommendations

      .filter(item => !item.feedName)
@@ -395,8 +398,8 @@ export class _CardGrid extends React.PureComponent { 
            features={rec.features}

            showTopics={showTopics}

            selectedTopics={selectedTopics}

            excerpt={refinedCardsLayout && rec.excerpt}

            availableTopics={availableTopics}

            excerpt={rec.excerpt}

            url={rec.url}

            id={rec.id}

            shim={rec.shim}

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

+12 −4
Original line number Diff line number Diff line
@@ -7,13 +7,18 @@ 
    border-radius: var(--border-radius-medium);

    box-shadow: $shadow-card;



    .img-wrapper .img {

    img,

    .placeholder-image {

      border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;

    }

  }

}



.ds-card.refined-cards:not(.placeholder) {

  .img-wrapper .img {

    height: 172px;

    width: 100%;

  }

}



.ds-onboarding-container {
@@ -121,14 +126,17 @@ 
  display: grid;

  grid-gap: 24px;

  position: relative;

  // Bug 1926056: Row/column Gap spacing to allow for IAB fixed ad sizes

  row-gap: 24px;

  column-gap: 18px;



  &.ds-card-grid-compact {

    grid-gap: 20px;

  }



  &.ad-sizing-variant-a,

  &.ad-sizing-variant-b {

    row-gap: 24px;

    column-gap: 18px;

  }



  &.ds-card-grid-recent-saves {

    .ds-card {

      // Hide the second row orphan on narrow screens.

browser/extensions/newtab/content-src/components/DiscoveryStreamComponents/CardSections/CardSections.jsx

+14 −3
Original line number Diff line number Diff line
@@ -32,8 +32,9 @@ const PREF_BILLBOARD_ENABLED = "newtabAdSize.billboard"; 
const PREF_LEADERBOARD_ENABLED = "newtabAdSize.leaderboard";

const PREF_LEADERBOARD_POSITION = "newtabAdSize.leaderboard.position";

const PREF_BILLBOARD_POSITION = "newtabAdSize.billboard.position";

const PREF_REFINED_CARDS_ENABLED = "discoverystream.refinedCardsLayout.enabled";



function getLayoutData(responsiveLayouts, index) {

function getLayoutData(responsiveLayouts, index, refinedCardsLayout) {

  let layoutData = {

    classNames: [],

    imageSizes: {},
@@ -51,7 +52,15 @@ function getLayoutData(responsiveLayouts, index) { 
        // The API tells us whether the tile should show the excerpt or not.

        // Apply extra styles accordingly.

        if (tile.hasExcerpt) {

          layoutData.classNames.push(`col-${layout.columnCount}-show-excerpt`);

          if (tile.size === "medium" && refinedCardsLayout) {

            layoutData.classNames.push(

              `col-${layout.columnCount}-hide-excerpt`

            );

          } else {

            layoutData.classNames.push(

              `col-${layout.columnCount}-show-excerpt`

            );

          }

        } else {

          layoutData.classNames.push(`col-${layout.columnCount}-hide-excerpt`);

        }
@@ -114,6 +123,7 @@ function CardSection({ 
  const mayHaveThumbsUpDown = prefs[PREF_THUMBS_UP_DOWN_ENABLED];

  const selectedTopics = prefs[PREF_TOPICS_SELECTED];

  const availableTopics = prefs[PREF_TOPICS_AVAILABLE];

  const refinedCardsLayout = prefs[PREF_REFINED_CARDS_ENABLED];



  const { saveToPocketCard } = useSelector(state => state.DiscoveryStream);

  const mayHaveSectionsPersonalization =
@@ -260,7 +270,8 @@ function CardSection({ 
        {section.data.slice(0, maxTile).map((rec, index) => {

          const { classNames, imageSizes } = getLayoutData(

            responsiveLayouts,

            index

            index,

            refinedCardsLayout

          );



          if (!rec || rec.placeholder) {

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

+41 −2
Original line number Diff line number Diff line
@@ -5,6 +5,21 @@ 
  grid-column: span 1;

  padding: var(--space-large);



  &.refined-cards.ds-card.sections-card-ui {

    height: fit-content;

  }



  &.refined-cards {

    .ds-card-link {

      padding: var(--space-xsmall) var(--space-small);

      flex-grow: 0;

    }



    .img-wrapper {

      width: 110px;

      height: 117px;

    }

  }



  &.ds-card.sections-card-ui {

    padding: unset;
@@ -21,7 +36,6 @@ 
    align-items: center;

    gap: var(--space-medium);

    padding: var(--space-large);



  }



  .img-wrapper {
@@ -77,7 +91,6 @@ 
  }

}





@mixin section-card-medium {

  grid-row: span 2;

  grid-column: span 1;
@@ -86,6 +99,23 @@ 
  align-items: initial;

  gap: initial;



  &.refined-cards.ds-card.sections-card-ui {

    height: unset;

  }



  // .refined-medium-card only appears if refinedCardsLayout.enabled pref is set to true

  &.refined-cards {

    .ds-card-link {

      padding: unset;

      flex-grow: unset;

    }



    .img-wrapper {

      width: 100%;

      height: 172px;

    }

  }



  .card-stp-button-position-wrapper {

    inset-inline-end: 10px;

  }
@@ -120,6 +150,8 @@ 
    padding: var(--space-medium) var(--space-large);



    .info-wrap {

      flex-grow: initial;



      .title {

        -webkit-line-clamp: 3;

        margin-block: 0 var(--space-small);
@@ -131,6 +163,10 @@ 
        -webkit-line-clamp: 3;

      }

    }



    .sections-card-footer {

      margin-top: auto;

    }

  }

}
@@ -153,11 +189,14 @@ 


      .img-wrapper {

        width: 265px;

        height: 100%;

      }



      .ds-image.img {

        // Square ratio

        aspect-ratio: 1/1;

        width: 100%;

        height: 100%;



        img {

          border-radius: var(--border-radius-medium);

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

+3 −1
Original line number Diff line number Diff line
@@ -208,6 +208,8 @@ export class _DSCard extends React.PureComponent { 
    this.onMenuShow = this.onMenuShow.bind(this);

    this.onThumbsUpClick = this.onThumbsUpClick.bind(this);

    this.onThumbsDownClick = this.onThumbsDownClick.bind(this);

    const refinedCardsLayout =

      this.props.Prefs.values["discoverystream.refinedCardsLayout.enabled"];



    this.setContextMenuButtonHostRef = element => {

      this.contextMenuButtonHostElement = element;
@@ -284,7 +286,7 @@ export class _DSCard extends React.PureComponent { 
      },

      medium: {

        width: 300,

        height: 150,

        height: refinedCardsLayout ? 172 : 150,

      },

      large: {

        width: 265,