Efl Card List: One

Ready

HTML
Notes
Context
Assets
View
Info


        
        <div class="efl-card-list " id="mens-senior" data-content="news-content" role="region" aria-label="men&#x27;s senior">
    <div class="efl-card-list__title">
        <h6>men&#x27;s senior</h6>
    </div>
    <div class="efl-card-list__inner">
        <a href="#" class="efl-card efl-card--vertical " id="video-dialog-label" data-behavior="get-started-lightbox" data-video-id="ufLSGCZEPrg" data-video-type="youtube" aria-label="Why you should try futsal">
            <div class="efl-card__image efl-card__image--video">

                <img src="/assets/example-content/news-horizontal-1.jpg" />
            </div>
            <div class="efl-card__content ">
                <div class="efl-card__inner">
                    <div class="efl-card__content--category">CAT TITLE</div>
                    <div class="efl-card__content--title">Why you should try futsal</div>
                    <p class="efl-card__content--description">Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance Andorra 0-5 England: Jadon Sancho and Tammy Abraham seize their chance</p>
                </div>

            </div>
        </a>

    </div>
</div>

No notes defined.


        
            
            {
  "id": "mens-senior",
  "title": "men's senior",
  "isHorizontalOnly": false,
  "articleTitle": false,
  "isHorizontalOnlyEight": false,
  "section-bg": false,
  "section-bg-img": "/assets/images/course-availability.svg",
  "fullWidth": false,
  "hideTitle": false,
  "howManyCards": [
    {}
  ]
}

File:

Content:


                                export default parentElement => {
  const self = parentElement;
  const parent = parentElement.parentNode;

  const cardContainer = parentElement.querySelector('.efl-card-list__inner');
  let visibleEflCards = parentElement.querySelectorAll(
    '.efl-card:not([style*="display:none"]):not([style*="display: none"])'
  );
  let visibleEflCardsLength = visibleEflCards.length;
  const scrollEnabled = parentElement.querySelector(
    '[data-behaviour="card-scroll"]'
  );
  const page = document.querySelector('.page-wrapper');
  let articleSessionPage = null;

  if (
    page.classList.contains('efl-article-index-page') ||
    page.classList.contains('efl-session-index-page')
  ) {
    articleSessionPage = true;
  }

  const defaultWidth = window.innerWidth;

  function resetClass(cards) {
    cards.forEach(card => {
      if (!card.classList.contains('efl-card--1--full-width')) {
        // eslint-disable-next-line no-param-reassign
        card.className = '';
        card.classList.add('efl-card', 'efl-card--vertical');
        card.classList.remove('minimised-card');
      }
    });
  }

  const formatArticlePage = (cards, cardsLength) => {
    if (cardsLength === 3) {
      cards[0].classList.replace('efl-card--vertical', 'efl-card--single');
      cards[1].classList.replace('efl-card--vertical', 'efl-card--horizontal');
      cards[2].classList.replace('efl-card--vertical', 'efl-card--horizontal');
    }
  };

  // select CSS class determined by the number of session cards
  const selectClass = (cards, cardsLength) => {
    cards.forEach((eflCardElement, index) => {
      const eflCard = eflCardElement;

      eflCard.classList.add(`card${index + 1}`);

      if (articleSessionPage) {
        eflCard.classList.add('article');
      }
    });

    // Article Session Index Page
    self.classList.add('article');
    if (self === parent.firstElementChild && articleSessionPage) {
      self.classList.add('pinned');
      cardContainer.classList.add('pinned');
      formatArticlePage(cards, cardsLength);

      // Course Index Page
    } else if (!articleSessionPage) {
      if (cards[1]) {
        cards[0].classList.replace(
          'efl-card--vertical',
          'efl-card--horizontal'
        );
      }
      if (cards[1]) {
        cards[1].classList.replace(
          'efl-card--vertical',
          'efl-card--horizontal'
        );
      }
    }
  };

  const setVideoPosition = cards => {
    cards.forEach(card => {
      const image = card.firstElementChild;

      if (image.classList.contains('efl-card__image--video')) {
        const featured = image.querySelector('.efl-card__image--red');

        if (featured) {
          image.classList.add('featured');
        }
      }
    });
  };

  const manipulateClass = (cards, cardsLength) => {
    cardContainer.classList.add(`efl-card-list__inner--${cardsLength}`);
    resetClass(cards);
    selectClass(cards, cardsLength);
    setVideoPosition(cards);

    // Check for empty efl-card-list
    if (visibleEflCards.length === 0) {
      self.style.padding = '0';
    } else {
      self.style.padding = null;
    }

    cardContainer.parentElement.classList.add(`efl-card-list--${cardsLength}`);

    if (!cardsLength && page.classList.contains('efl-cpd-index-page')) {
      cardContainer.parentElement.classList.add(`hidden`);
    }
  };

  const infiniteScroll = (cards, cardsLength) => {
    const defaultCount = 4;
    const loading = parentElement.querySelector('.loading');
    let visibleCardCount = 0;

    cards.forEach(item => {
      item.classList.add('minimised-card');
    });

    const removeLoading = () => {
      loading.classList.remove('show');
    };

    const showLoading = () => {
      loading.classList.add('show');
    };

    const loadMoreCards = () => {
      const items = parentElement.querySelectorAll('.efl-card.hidden');

      showLoading();

      items.forEach((item, index) => {
        if (index < defaultCount) {
          item.classList.remove('hidden');
          visibleCardCount += 1;
        }
      });

      setTimeout(() => {
        removeLoading();
      }, 300);
    };

    window.addEventListener('scroll', () => {
      const {
        scrollTop,
        scrollHeight,
        clientHeight,
      } = document.documentElement;

      if (
        clientHeight + scrollTop >= scrollHeight - 5 &&
        visibleCardCount < cardsLength
      ) {
        loadMoreCards();
        manipulateClass(visibleEflCards, visibleEflCardsLength);
      }
    });
  };

  if (scrollEnabled) {
    infiniteScroll(visibleEflCards, visibleEflCardsLength);
  }

  manipulateClass(visibleEflCards, visibleEflCardsLength);

  window.addEventListener('load', () => {
    setTimeout(() => {
      const activeEflCards = parentElement.querySelectorAll(
        '.efl-card:not(.hidden)'
      );

      setVideoPosition(activeEflCards);
    }, 300);
  });

  window.addEventListener('resize', () => {
    if (defaultWidth !== window.innerWidth) {
      visibleEflCards = parentElement.querySelectorAll(
        '.efl-card:not(.hidden)'
      );
      visibleEflCardsLength = visibleEflCards.length;
      manipulateClass(visibleEflCards, visibleEflCardsLength);
    }
  });

  window.addEventListener('filterupdate', () => {
    visibleEflCards = parentElement.querySelectorAll('.efl-card:not(.hidden)');
    visibleEflCardsLength = visibleEflCards.length;
    manipulateClass(visibleEflCards, visibleEflCardsLength);
  });
};

URL: /components/raw/efl-card-list/efl-card-list.js
Filesystem Path: src/library/modules/efl-card-list/efl-card-list.js
Size: 5.5 KB

Content:


                                /* stylelint-disable no-descending-specificity */
.efl-card-list {
  position: relative;
  margin: auto;
  z-index: 1;
  float: none;
  padding: 0 3.2rem 4.8rem 3.2rem;
  background-color: $white;

  .minimised-card {
    display: none;
  }

  .cta--secondary {
    background-color: white;
    border: 1px solid $blue-accent3;
    color: $blue-accent3;
  }

  &--1 {
    width: 100%;
    .efl-card-list__inner--1 {
      width: 100%;
    }
  }

  &--1--full-width {
    margin: auto;
    padding: 0;

    .efl-card-list__inner {
      display: block;
      padding: 0;
    }
    &::before {
      content: '';
      opacity: 0 !important;
    }
  }

  &--3 {
    &.pinned::after {
      padding-top: 0 !important;
    }
  }

  &__title {
    margin: auto;
    margin-bottom: 2.4rem;
    display: flex;
    justify-content: space-between;
    h6 {
      color: $blue;
      width: fit-content;

      @extend .efl-heading-6;

      text-transform: uppercase;
      text-align: left;
      &::after {
        content: '';
        display: block;
        width: 100%;
        margin-top: 1.6rem;
        border-bottom: 0.2rem solid $red;
        height: auto;
      }
    }

    &--how-many-sessions {
      color: $blue;
      font-family: $text-font-ef;
      font-size: 1.2rem;
      font-weight: 400;
      line-height: 2rem;
      letter-spacing: 0.06em;
    }
  }

  .cta[name='show more'] {
    display: flex;
    max-width: none;
    margin-top: 2.4rem;
  }

  .loading {
    display: none;
    position: relative;
    margin: 4rem auto;
    width: 8em;
    height: 8em;
    &.show {
      display: block;
    }
    .efl-logo {
      background-image: url('./assets/images/ef-logo.svg');
      background-repeat: no-repeat;
      background-position: center;
      position: absolute;
      z-index: 2;
      top: 0;
      left: 0;
      background-size: 3.28rem 3.9rem;
      width: 100%;
      height: 100%;
    }
    .loader {
      font-size: 10px;
      text-indent: -9999em;
      width: 100%;
      height: 100%;
      border-radius: 100%;
      overflow: hidden;
      background: rgb(236, 238, 243);
      position: relative;
      -webkit-animation: load3 1.4s infinite linear;
      animation: load3 1.4s infinite linear;
      -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
      transform: translateZ(0);
    }
    .loader::before {
      width: 100%;
      height: 50%;
      background: -linear-gradient(0deg, #004aa3 0%, #eceef3 50%);
      background: -moz-linear-gradient(0deg, #004aa3 0%, #eceef3 50%);
      background: -o-linear-gradient(0deg, #004aa3 0%, #eceef3 50%);
      background: -ms-linear-gradient(0deg, #004aa3 0%, #eceef3 50%);
      background: -webkit-linear-gradient(0deg, #004aa3 0%, #eceef3 50%);
      transform-origin: bottom right;
      position: absolute;
      top: 0;
      left: 0;
      content: '';
    }
    .loader::after {
      background: #fff;
      width: 85%;
      height: 85%;
      border-radius: 50%;
      content: '';
      margin: auto;
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }

    @-webkit-keyframes load3 {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    @keyframes load3 {
      0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }
  }

  &__inner {
    max-width: 119.5rem;
    margin: auto;
    width: fit-content;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto;
    column-gap: 4rem;
    row-gap: 2.4rem;

    &--3 {
      &.pinned {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
          'card1 card1'
          'card2 card3';
        border-bottom: 3px solid #eceef3;
        .efl-card--single {
          grid-column: span 2;
        }
        // Any Card Grid - Desktop Version
        @media screen and (max-width: 819px) {
          .efl-card--single.article {
            margin: 0 -3.2rem;
            width: 100vw;
            .efl-card__image {
              border-radius: 0;
            }

            .efl-card__content {
              padding: 2.4rem 3.2rem 1.2rem 3.2rem;
            }
          }
        }
      }
    }

    // Any Card Grid - Desktop Version
    @media screen and (max-width: 819px) {
      display: flex;
      width: 100%;
      flex-direction: column;
      gap: 1.6rem;
    }
  }

  @media screen and (min-width: $mq-medium) {
    &--1 {
      .efl-card {
        grid-column: span 6 !important;
      }
    }
    &--2 {
      .efl-card {
        grid-column: span 3 !important;
      }
    }

    padding-bottom: 5.6rem;

    &--1--full-width {
      padding: 0 3.2rem 5.6rem 3.2rem;
      border-radius: 0.4rem;
      .efl-card-list__inner {
        width: 100%;
      }
    }

    &__title {
      font-size: 2rem;
      h6::after {
        margin-top: 0.8rem;
      }
    }

    .minimised-card {
      display: grid;
    }
  }

  &--section-bg {
    position: relative;
    color: $white;
    background-color: $blue-accent3;

    .efl-card:not(.efl-card--1--full-width) {
      outline-color: #fff;
    }

    .cta:active {
      outline-color: #fff;
    }

    .efl-card--1--full-width {
      .efl-card__content {
        background-color: $blue-accent3;
        &--title {
          color: $white;
        }

        &--description {
          color: $white;
        }
      }

      .efl-card__image::after {
        background-image: url('./assets/images/efl-card-full-width-efl-blue-crop.svg');

        /* filter: brightness(0.97); */
      }
    }
    &::before {
      content: '';
      background-image: url('./assets/images/noise.png');
      background-repeat: repeat;
      mix-blend-mode: soft-light;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      opacity: 0.3;
      pointer-events: none;
    }

    .cta--secondary {
      background: transparent;
      color: $white;
      border: 0.2rem solid $white;
      &:focus-visible {
        outline: 0.3rem solid black;
      }
    }

    .efl-card-list__title {
      h6 {
        color: $white;
      }
    }

    @media screen and (min-width: $mq-medium) {
      background-position: 100% center;
      background-image: url('./assets/images/course-availability.svg');
      background-repeat: no-repeat;
      background-size: auto 100%;
      &.efl-card-list--3 {
        background-position: 107% top;
        background-size: auto 160%;
      }

      &.efl-card-list--1 {
        background-position: right bottom;
        background-image: url('./assets/images/efl-card-list--1.svg');
      }

      &.efl-card-list--8 {
        background-position: left bottom;
        background-size: auto;
        background-image: url('./assets/images/efl-card-list--8.svg');
      }
    }
  }
}

URL: /components/raw/efl-card-list/efl-card-list.scss
Filesystem Path: src/library/modules/efl-card-list/efl-card-list.scss
Size: 7.1 KB


        <div class="efl-card-list {{#if modifier}}efl-card-list--{{modifier}}{{/if}}" id="{{id}}" data-content="news-content" role="region" aria-label="{{title}}">
        {{#unless hideTitle}}<div class="efl-card-list__title"><h6>{{title}}</h6></div>{{/unless}}
        <div {{#if scrollBehaviour}}data-behaviour="card-scroll"{{/if}} class="efl-card-list__inner">
                {{#unless fullWidth}}
                        {{#each howManyCards}}
                                {{render '@efl-card' this merge="true"}}
                        {{/each}}
                        {{else}}{{render '@efl-card--full-width-news-card'}}
                {{/unless}}
        </div>
        {{#if scrollBehaviour}}
                <div class="loading">
                        <div class="loader"></div>
                        <div class="efl-logo"></div>
                </div>
        {{/if}}
</div>

Handle: @efl-card-list--one
Variants (12): Default , Full Width , Scroll , One , Two , Three , Four , Five , Six , Seven , Eight , Eight Uniform
Preview:
- With layout
- Component only
Filesystem Path: src/library/modules/efl-card-list/efl-card-list.hbs
References (2): @efl-card, @efl-card--full-width-news-card
Referenced by (2): @efl-course-index-page, @efl-cpd-index-page