England Football

Upcoming Fixture: All 

<div class="upcoming-fixture-list" data-behaviour="upcoming-fixtures-list">
    <!-- Last match fixture start-->
    <div class="fixture-list__item mob-hide" data-analytics='{"pagename":"","matchtype":"","matchmode":"","matchdetail":"","matchvenue":""}'>
        <article class="last-match-card fixture-card">

            <div class="last-match-card__fixture-info fixture-card__fixture-info">
                <h3 class="last-match-card__title">
                    Last match
                </h3>
                <p class="last-match-card__subtitle fixture-card__tournament">
                    euro 2021 group stage
                </p>
                <span class="last-match-card__location fixture-card__location">wembley stadium, england</span>
                <span class="last-match-card__location fixture-card__location">sat 14 june 2020</span>
            </div>

            <div class="last-match-fixture-detail fixture-detail--result">
                <p class="visually-hidden">Results</p>
                <p class="last-match-fixture-detail__col fixture-detail__col">
                    <span class="last-match-fixture-detail__team fixture-detail__team">
                        <img src="/assets/example-content/crest-england.svg" alt="England" />England</span>
                    <span class="last-match-fixture-detail__score fixture-detail__score">3</span>
                </p>
                <p class="last-match-fixture-detail__col fixture-detail__col">
                    <span class="last-match-fixture-detail__team fixture-detail__team">
                        <img src="/assets/example-content/crest-iceland.png" alt="Iceland" />Iceland</span>
                    <span class="last-match-fixture-detail__score fixture-detail__score">1</span>
                </p>
                <p class="last-match-fixture-detail__extra-info fixture-detail__extra-info"><abbr title="After Extra Time">AET</abbr> <span>England win 4 - 3 on
                        penalties</span></p>
            </div>

            <div class="last-match-card__ctas fixture-card__ctas">
                <a href="https://ticketing.thefa.com/" class="cta cta--secondary " target="_blank" name="match-report-highlights">
                    <p>match report &amp; highlights</p>
                </a>

            </div>

        </article>

    </div>

    <!-- Next match fixture start-->
    <div class="fixture-list__item " data-analytics='{"pagename":"","matchtype":"","matchmode":"","matchdetail":"","matchvenue":""}'>
        <div class="fixtures-block">
            <h2 class="fixtures-block__title">Next match</h2>
            <div class="fixtures-block__subtitle">Nations league group stage</div>

            <div class="fixtures-block__match">
                <div class="fixtures-block__team">
                    <div class="fixtures-block__team-block">
                        <img src="/assets/example-content/team-badge-eng.png" />
                        <span class="fixtures-block__team-name" aria-label="England">ENG</span>
                    </div>
                </div>
                <div class="fixtures-block__split">
                    <span class="fixtures-block__split-vs" aria-label="Versus">vs</span>
                </div>
                <div class="fixtures-block__team">
                    <div class="fixtures-block__team-block">
                        <span class="fixtures-block__team-name" aria-label="Iceland">ISL</span>
                        <img src="/assets/example-content/team-badge-isl.png" />
                    </div>
                </div>
            </div>
            <div class="fixtures-block__place">Wembley stadium, England</div>
            <div class="fixtures-block__type">
                <span>Thu 25, March 2021</span>

                <span class="fixtures-block__pipe">|</span>

            </div>
            <div class="fixtures-block__actions">
                <div>
                    <div class="fixtures-block__buttons">
                        <div class="fixtures-block__button-left">
                            <a href="" class="cta cta--primary">Buy tickets</a>
                        </div>
                        <div class="fixtures-block__button-right">
                            <a href="" class="cta cta--secondary">View tables &amp; Fixtures</a>
                        </div>
                    </div>
                </div>

                <div class="fixtures-block__schedule-partner">
                    <div class="fixtures-block__schedule">
                        <div class="fixtures-block__partner">
                            <span>Official Partner</span>
                            <img src="/assets/example-content/hublot-logo.png" />
                        </div>
                        <div class="fixtures-block__datetimer" data-behavior="countdown-timer" data-targetdate="9/2/2021 7:45:00 PM">
                            <ul>
                                <li>00<span>Weeks</span></li>
                                <li>00<span>Days</span></li>
                                <li>00<span>Hrs</span></li>
                                <li>00<span>Mins</span></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Upcoming match fixture start-->
    <div class="fixture-list__item mob-hide" data-analytics='{"pagename":"","matchtype":"","matchmode":"","matchdetail":"","matchvenue":""}'>
        <article class="following-match-card" data-filter='{ "filter": "competition", "name": "", "id": "" }' data-analytics='{"pagename":"","matchtype":"","matchmode":"","matchdetail":"","matchvenue":""}'>
            <div class="following-match-card__fixture-info fixture-card__fixture-info">
                <h3 class="following-match-card__title">
                    Following match
                </h3>
                <p class="following-match-card__subtitle fixture-card__tournament">
                    euro 2021 group stage
                </p>
                <span class="following-match-card__location fixture-card__location">wembley stadium, england</span>
                <span class="following-match-card__location fixture-card__location">sat 14 june 2020</span>
            </div>
            <div class="following-match-fixture-detail fixture-detail">
                <p class="visually-hidden">Fixture</p>
                <p class="following-match-fixture-detail__col fixture-detail__col">
                    <span class="following-match-fixture-detail__team fixture-detail__team">
                        <img src="/assets/example-content/crest-england.svg" alt="" />England</span>
                </p>
                <p class="following-match-fixture-detail__col fixture-detail__col">
                    <span class="following-match-fixture-detail__team fixture-detail__team">
                        <img src="/assets/example-content/crest-iceland.png" alt="" />Denmark</span>
                </p>
                <p class="following-match-fixture-detail__time fixture-detail__time">20:00</p>
            </div>
            <div class="following-match-card__ctas fixture-card__ctas">
                <a href="https://ticketing.thefa.com/" class="cta cta--primary " target="_blank" name="buy-tickets">
                    <p>Buy tickets</p>
                </a>

            </div>
        </article>

    </div>

</div>

Upcoming Fixture

  • We shall move count down timer functionality to a separate component.
  • Count down timer is a part of upcoming fixture at the moment thus difficult/may create problems when we try to reuse the same in other components.
{
  "showLastMatch": true,
  "showUpcomingMatch": true
}
  • Content: 
    export default parentElement => {
  const edgeCase = parentElement.querySelectorAll('.no-next-match').length;

  if (edgeCase) {
    parentElement
      .querySelector('.fixture-list__item:first-child')
      .classList.add('no-next-match');
  }
};
  • URL: /components/raw/upcoming-fixture/no-next-match.js
  • Filesystem Path: src/library/components/upcoming-fixture/no-next-match.js
  • Size: 249 Bytes
  • Content: 
    class UpcomingAnalytics {
  constructor({ parentElement }) {
    this.fixturesListElement = parentElement.querySelectorAll(
      '.fixture-card__ctas a'
    );

    if (!this.fixturesListElement) {
      return;
    }

    this.bindAnalyticClickEvent();
  }

  bindAnalyticClickEvent() {
    this.fixturesListElement.forEach(button => {
      button.addEventListener('click', event => {
        event.preventDefault();
        const toTitleCase = str => str.replace(/(^\w|\s\w)/g, m => m.toLowerCase());
        const buttonElement = event.target;
        const getbuttonClass = buttonElement.getAttribute('class');
        const buttonlabel = `${toTitleCase(buttonElement.text)}`;
        const buttonURL = buttonElement.getAttribute('href');
        const analyticsdata = JSON.parse(
          buttonElement.closest('.fixture-card').getAttribute('data-analytics')
        );

        let buttonName = '';

        if (
          ![
            'cta cta--primary',
            'cta cta--primary ',
            'cta cta--secondary',
            'cta cta--secondary ',
          ].includes(getbuttonClass)
        ) {
          return false;
        }

        if (
          getbuttonClass === 'cta cta--primary' ||
          getbuttonClass === 'cta cta--primary '
        ) {
          buttonName = 'cta_primary_click';
        } else if (
          getbuttonClass === 'cta cta--secondary' ||
          getbuttonClass === 'cta cta--secondary '
        ) {
          buttonName = 'cta_secondary_click';
        }

        window.dataLayer.push({
          // Below datalayer eventparametes is used for GA4 Implementation
          event: 'All Events',
          event_name: buttonName,
          item_list_name: analyticsdata.matchtype,
          link_text: buttonlabel,
          link_url: buttonURL,
          team_name: analyticsdata.matchdetail,
          location: analyticsdata.matchvenue,
          tournament: analyticsdata.matchmode,
          // Below datalayer eventparametes is used for GA3 Implementation
          eventCategory: analyticsdata.pagename,
          eventAction: analyticsdata.matchtype,
          eventLabel: buttonlabel,
          eventparameter1: analyticsdata.matchmode,
          eventparameter2: analyticsdata.matchdetail,
          eventparameter3: analyticsdata.matchvenue,
        });
        // Remove datalayer eventparametes after every event is fired
        /*
            When an event is populated into the DataLayer, 
            the values are persistent across all tags firing afterwards, 
            so removal of the paramaters is important for duplication of values across tags.
            */
        window.dataLayer.push({
          event: 'Removal Tag',
          event_name: undefined,
          item_list_name: undefined,
          link_text: undefined,
          link_url: undefined,
          team_name: undefined,
          location: undefined,
          tournament: undefined,
          // Below datalayer eventparametes is used for GA3 Implementation
          eventCategory: undefined,
          eventAction: undefined,
          eventLabel: undefined,
          eventparameter1: undefined,
          eventparameter2: undefined,
          eventparameter3: undefined,
        });

        const windowLocation = buttonElement.getAttribute('target');
        const redirectUrl = buttonElement.getAttribute('href');

        window.open(redirectUrl, windowLocation || '_self');
        return true;
      });
    });
  }
}

export default parentElement => {
  return new UpcomingAnalytics({ parentElement });
};
  • URL: /components/raw/upcoming-fixture/upcoming-fixture-analytics.js
  • Filesystem Path: src/library/components/upcoming-fixture/upcoming-fixture-analytics.js
  • Size: 3.6 KB
  • Content: 
    import timeUntilDate from '../../behaviours/countdown/countdown';

// Add zero prefix for two digits
const pad = n => (n && n < 10 ? `0${n}` : n);

const getPlural = (value, str, suffix = 's') =>
  value > 1 || !value ? `${str}${suffix}` : str;

const updateCount = (parentElement, targetDate) => {
  const { weeks, days, hours, minutes } = timeUntilDate(targetDate);

  // eslint-disable-next-line no-param-reassign
  parentElement.innerHTML = `
  <ul>
    <li>
      <span>${getPlural(weeks, 'week')}</span>
      ${pad(weeks)}
    </li>
    <li>
      <span>${getPlural(days, 'day')}</span>
      ${pad(days)}
    </li>
    <li>
      <span>${getPlural(hours, 'hour')}</span>
      ${pad(hours)}
    </li>
    <li>
      <span>${minutes > 1 || !minutes ? 'mins' : 'mins'}</span>
      ${pad(minutes)}
    </li>
  </ul>`;
};

export default ({ parentElement, interval = 60000 }) => {
  const targetDate = new Date(parentElement.dataset.targetdate);

  /* if (!Number.isNaN(targetDate)) {
    return;
  } */

  updateCount(parentElement, targetDate);

  setInterval(() => {
    updateCount(parentElement, targetDate);
  }, interval);
};
  • URL: /components/raw/upcoming-fixture/upcoming-fixture.js
  • Filesystem Path: src/library/components/upcoming-fixture/upcoming-fixture.js
  • Size: 1.1 KB
  • Content: 
    .match-details-container {
  background-color: white;
  border-radius: 10px;
  max-width: 140rem;
  margin: auto;

  .match-score {
    margin-bottom: 0;
  }

  @media screen and (max-width: $mq-medium) {
    border-radius: 0;
  }
}

.upcoming-fixture-list {
  margin: auto;
  max-width: 140rem;
}

.fixture-list__item {
  z-index: 13;
}

@media screen and (max-width: $mq-large) {
  .fixture-list__item:nth-child(2) {
    margin: 0 1rem;
  }
}

@media screen and (min-width: $mq-large) {
  .upcoming-fixture-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .fixture-list {
    &__item {
      > * {
        border: none;
        background-color: $white;
        box-shadow: none;
      }
      &:first-child > * {
        border-radius: 0.8rem 0 0 0.8rem;
        margin-left: 2rem;
        min-height: 36.3rem;
      }
      &:last-child > * {
        border-radius: 0 0.8rem 0.8rem 0;
        margin-right: 2rem;
        min-height: 36.3rem;
      }
    }
    &__item.mob-hide {
      margin-top: 20px;
    }
  }
}

@media screen and (min-width: $mq-medium) {
  .fixture-list {
    &__item {
      > .fixtures-block {
        &::before,
        &::after {
          background-color: rgba(158, 174, 192, 0.54);
          content: '';
          display: block;
          width: 1px;
          height: 16rem;
          opacity: 0.4;
          position: absolute;
          top: 10rem;
          z-index: 1;
        }
        &::before {
          left: 3rem;
        }
        &::after {
          right: 3rem;
        }
      }
    }
  }
}

// NEXT MATCH styles.
.fixtures-block {
  background-color: $white;
  border-radius: 0.8rem;
  max-width: 49.6rem;
  margin: auto;
  position: relative;
  padding-bottom: 1.6rem;
  margin-bottom: 1.2rem;
  filter: drop-shadow(0 0.2rem 0.2rem rgba(0, 0, 0, 0.08));
  min-height: 41.7rem;

  .fixtures-block {
    padding-bottom: 0;
    margin-bottom: 0;
    filter: none;
    min-height: initial;
  }

  &__title {
    @include heading-l;

    color: var(--brand-quaternary);
    text-align: center;
    text-transform: uppercase;
    padding-top: 2.5rem;

    &::after {
      content: '';
      display: block;
      margin: $spacing-m auto 0 auto;
      background-color: $red-dark;
      height: 0.2rem;
      width: 1.3rem;
      transition: width 0.3s ease-in-out;
    }
  }
  &__subtitle {
    @include text-s--narrow;

    color: $bold-red;
    text-align: center;
    text-transform: uppercase;
    margin-top: $spacing-s;
    margin-bottom: 1.2rem;
  }
  &__place {
    @include text-s--narrow;

    color: $blue;
    text-align: center;
    text-transform: uppercase;
    margin-top: 1.8rem;
  }
  &__type {
    @include text-s--narrow;

    color: $blue;
    margin-top: 0.5rem;
    text-align: center;
    margin-bottom: 2.6rem;
    text-transform: uppercase;
  }
  &__match {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  &__team {
    display: flex;
    flex-direction: column;
  }
  &__split {
    display: flex;
    flex-direction: column;
  }
  &__split-vs {
    color: $grey2;
    font-family: $heading-font;
    font-size: 2.8rem;
    line-height: 5.9rem;
  }
  &__team-block {
    display: flex;
    flex-direction: row;
  }
  &__team-block img {
    width: 6.5rem;
    height: 6.5rem;
  }
  &__team-name {
    color: $blue-accent2;
    font-family: $heading-font;
    font-size: 6.8rem;
    line-height: 4.8rem;
    margin: 0 1.5rem;
    margin-top: 0.8rem;
  }
  &__pipe {
    color: rgba(34, 34, 34, 0.2);
    margin: 0 1.2rem;
  }
  img {
    margin: 0 auto;
    align-self: flex-end;
  }
  &__buttons {
    justify-content: center;
    margin-top: 2.8rem;
  }
  &__partner span {
    font-size: 0.8rem;
    font-family: $text-font2;
    color: #000;
  }
  &__partner img {
    width: 6.4rem;
    height: 0.8rem;
  }
  &__datetimer li {
    color: $red;
    font-family: $heading-font;
    font-size: 4rem;
    line-height: 2.8rem;
    display: inline;
    margin-right: 1.2rem;
  }
  &__datetimer li span {
    color: rgba(1, 30, 65, 0.5);
    font-size: 1.2rem;
    font-family: $text-font2;
    line-height: 1.3rem;
    padding: 0 0.8rem;
    text-transform: uppercase;
    vertical-align: middle;
  }
  &__nomatch {
    img {
      width: 11rem;
      height: 13rem;
      margin-top: 2.3rem;
    }
    p {
      font-family: $text-font;
      font-size: 1.4rem;
      line-height: 2rem;
      letter-spacing: 0.02em;
      width: 27.4rem;
      margin: 0 auto;
      margin-top: 2.6rem;
      text-align: center;
    }
  }

  @media (max-width: 768px) {
    &__type {
      margin-top: 0.4rem;
      margin-bottom: 2rem;
    }
    &__button-left a {
      margin: 0 auto;
      margin-bottom: 1.2rem;
    }
    &__button-right a {
      margin: 0 auto;
    }
    &__partner {
      margin-top: 2.3rem;
      background: #f9f9f9;
      box-shadow: inset 0 -1px 2px rgba(0, 0, 0, 0.08),
        inset 0 1px 2px rgba(0, 0, 0, 0.08);
      height: 6.2rem;
      display: flex;
      flex-direction: row;
      justify-content: center;
      line-height: 6.2rem;
    }
    &__partner img {
      width: 16.3rem;
      height: 2.1rem;
      align-self: unset;
      margin: initial;
      margin-top: 2rem;
    }
    &__partner span {
      margin-right: 3.2rem;
      font-size: 1rem;
    }
    &__actions {
      display: flex;
      flex-direction: column-reverse;
    }
    &__schedule {
      display: flex;
      flex-direction: column-reverse;
      width: 100%;
    }
    &__schedule-partner {
      display: flex;
      justify-content: center;
    }
    &__datetimer ul {
      display: flex;
      justify-content: center;
    }
    &__datetimer li {
      display: inline-flex;
      margin-right: 3.2rem;
      flex-direction: column-reverse;
      justify-content: center;
      text-align: center;
      font-size: 7.8rem;
      line-height: 5.5rem;
    }
    &__datetimer li:last-child {
      margin-right: 0;
    }
    &__datetimer li span {
      margin-top: 2rem;
      margin-right: 0;
    }
  }

  @media (min-width: 769px) {
    &__buttons {
      display: flex;
      flex-direction: row;
      justify-content: center;
      margin: 2.6rem 4.7rem 2.2rem 4.5rem;
    }
    &__button-left {
      display: flex;
      flex-direction: column;
      width: 100%;
      margin-right: 1.2rem;
      align-items: center;
      a {
        width: 100%;
      }
    }
    &__button-right {
      display: flex;
      flex-direction: column;
      width: 100%;
      align-items: center;
      a {
        width: 100%;
      }
    }
    &__schedule {
      display: flex;
      justify-content: center;
      min-width: 45rem;
      margin: 0 1rem;
    }
    &__partner {
      display: flex;
      flex-direction: column;
      background-color: rgba(248, 248, 248, 1);
      height: 4.8rem;
      padding-right: 1rem;
      margin-right: 1rem;
      position: relative;
    }
    &__partner::after {
      content: '';
      background-color: rgba(248, 248, 248, 1);
      width: 2rem;
      transform: skew(-20deg);
      height: 4.8rem;
      display: table;
      position: absolute;
      top: 0;
      right: -12px;
    }
    &__partner span {
      margin-top: 1.2rem;
      margin-left: 1.7rem;
    }
    &__partner img {
      margin-top: 0.2rem;
      margin-left: 1.7rem;
    }
    &__datetimer {
      display: flex;
      flex-direction: column;
      background-color: #f9f9f9;
      padding-left: 1rem;
      justify-content: center;
      position: relative;

      ul {
        display: flex;
        li {
          display: inline-flex;
          flex-direction: row-reverse;
          align-items: center;
          min-width: 6.8rem;
          margin-left: 1.2rem;
        }
      }

      li:not(:first-child) {
        margin-left: 0;
      }
    }
    &__datetimer::before {
      content: '';
      background-color: rgba(248, 248, 248, 1);
      width: 2rem;
      transform: skew(-20deg);
      height: 4.8rem;
      display: table;
      position: absolute;
      left: -8px;
    }
  }

  @media (min-width: $mq-large) {
    &__title {
      font-size: 7.8rem;
      line-height: 5.5rem;
      padding-top: 4rem;
    }
    &__place {
      font-size: 1.2rem;
      line-height: 1.4rem;
    }
    &__type {
      font-size: 1.2rem;
      line-height: 1.4rem;
    }
  }
}

[data-brand=''],
[data-brand='englandfootball'] {
  .last-match-card__title,
  .fixtures-block__title,
  .following-match-card__title {
    font-family: $teams-font;
    color: $blue;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0.02em;
    font-size: 7.8rem;
  }

  .fixture-detail__score,
  .fixtures-block__team-name,
  .fixture-detail__team {
    color: $blue;
  }
}
  • URL: /components/raw/upcoming-fixture/upcoming-fixture.scss
  • Filesystem Path: src/library/components/upcoming-fixture/upcoming-fixture.scss
  • Size: 8.7 KB 
<div class="upcoming-fixture-list" data-behaviour="upcoming-fixtures-list">
  <!-- Last match fixture start-->
  <div class="fixture-list__item mob-hide" data-analytics='{"pagename":"","matchtype":"","matchmode":"","matchdetail":"","matchvenue":""}'>
    {{render '@last-match-card'}}
  </div>

  <!-- Next match fixture start-->
  <div class="fixture-list__item {{#if edgecase}}no-next-match{{/if}}" data-analytics='{"pagename":"","matchtype":"","matchmode":"","matchdetail":"","matchvenue":""}'>
    <div class="fixtures-block">
      <h2 class="fixtures-block__title">Next match</h2>
      {{#unless edgecase}}
      <div class="fixtures-block__subtitle">Nations league group stage</div>

      <div class="fixtures-block__match">
        <div class="fixtures-block__team">
          <div class="fixtures-block__team-block">
            <img src="/assets/example-content/team-badge-eng.png" />
            <span class="fixtures-block__team-name" aria-label="England">ENG</span>
          </div>
        </div>
        <div class="fixtures-block__split">
          <span class="fixtures-block__split-vs" aria-label="Versus">vs</span>
        </div>
        <div class="fixtures-block__team">
          <div class="fixtures-block__team-block">
            <span class="fixtures-block__team-name" aria-label="Iceland">ISL</span>
            <img src="/assets/example-content/team-badge-isl.png" />
          </div>
        </div>
      </div>
      <div class="fixtures-block__place">Wembley stadium, England</div>
      <div class="fixtures-block__type">
        <span>Thu 25, March 2021</span>

        <span class="fixtures-block__pipe">|</span>

        {{#if matchtime}}
        <span> 19:45 GMT</span>
        {{/if}}

      </div>
      <div class="fixtures-block__actions">
        <div>
            <div class="fixtures-block__buttons">
                <div class="fixtures-block__button-left">
                    <a href="" class="cta cta--primary">Buy tickets</a>
                </div>
                <div class="fixtures-block__button-right">
                    <a href="" class="cta cta--secondary">View tables &amp; Fixtures</a>
                </div>
            </div>
        </div>

        <div class="fixtures-block__schedule-partner">
          <div class="fixtures-block__schedule">
            <div class="fixtures-block__partner">
                <span>Official Partner</span>
                <img src="/assets/example-content/hublot-logo.png"/>
            </div>
            <div class="fixtures-block__datetimer" data-behavior="countdown-timer"
              data-targetdate="9/2/2021 7:45:00 PM">
              <ul>
                <li>00<span>Weeks</span></li>
                <li>00<span>Days</span></li>
                <li>00<span>Hrs</span></li>
                <li>00<span>Mins</span></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      {{/unless}}
      {{#if edgecase}}
      <div class="fixtures-block__nomatch">
        <img src="/assets/example-content/crest-england.svg" alt="England">
        <p>WE ARE WAITING FOR THE DETAILS OF OUR NEXT MATCH TO BE CONFIRMED. BEAR WITH US – WE’LL HAVE MORE INFORMATION SHORTLY.</p>
      </div>
      {{/if}}
    </div>
  </div>


  <!-- Upcoming match fixture start-->
  <div class="fixture-list__item mob-hide" data-analytics='{"pagename":"","matchtype":"","matchmode":"","matchdetail":"","matchvenue":""}'>
    {{render '@following-match-card' this merge="true"}}
  </div>

</div>