Match Companion: Match Postponed

Ready

HTML
Notes
Context
Assets
View
Info


        
        <div class="match-companion">
    <div class="match-companion__competition">
        <div>Euro Champions Qualifier</div>
        <span></span>
        <div>Group A</div>
    </div>
    <div class="match-companion__date">Saturday 26 March 2022</div>
    <div class="match-companion__team">
        <div class="match-companion__hometeam">
            <img src="/assets/example-content/prematch-home-team.svg" alt="" />
            <p>England</p>
            <p class="mobile-only">Eng</p>
        </div>
        <div class="match-companion__matchpostponed">PP</div>
        <div class="match-companion__awayteam">
            <img src="/assets/example-content/prematch-away-team.svg" alt="" />
            <p>Iceland</p>
            <p class="mobile-only">Ice</p>
        </div>
    </div>
    <hr>

    <div class="match-companion__postponed-cta">
        Match Postponed
    </div>

</div>

No notes defined.


        
            
            {
  "competitionName": "Euro Champions Qualifier",
  "groupName": "Group A",
  "matchDate": "Saturday 26 March 2022",
  "homeTeam": "England",
  "awayTeam": "Iceland",
  "homeTeamCode": "Eng",
  "awayTeamCode": "Ice",
  "prematch": false,
  "cta": {
    "copy": "Match preview"
  },
  "cta1": {
    "copy": "Tickets",
    "modifier": "tertiary",
    "image": "/assets/example-content/cta-image.svg"
  },
  "calendarcta": true,
  "matchstatus": true,
  "postponed": true
}

File:

Content:


                                import { google, outlook, office365, yahoo } from 'calendar-link';

export default () => {
  const matchcount = document.getElementById('matchctacount');
  const getctaButton = document.querySelector('.match-companion__match-cta');

  if (!matchcount) {
    return;
  }

  const matchctaCount = matchcount.childElementCount;

  if (matchctaCount === 3) {
    getctaButton.classList.add('three-match-cta');
  } else if (matchctaCount === 1) {
    getctaButton.classList.add('one-match-cta');
  }

  const getCalendarData = document.querySelector('.opencalendarlist');

  if (!getCalendarData) {
    return;
  }

  const event = getCalendarData.dataset.calendar;
  const ENTER_KEY_CODE = 13;
  const ESCAPE_KEY_CODE = 27;

  function googlecalendarCta() {
    window.open(google(JSON.parse(event)));
  }

  function officecalendarCta() {
    window.open(office365(JSON.parse(event)));
  }

  function outlookcalendarCta() {
    window.open(outlook(JSON.parse(event)));
  }

  function yahoocalendarCta() {
    window.open(yahoo(JSON.parse(event)));
  }

  document.getElementById('googlelink').onclick = googlecalendarCta;
  document.getElementById('officelink').onclick = officecalendarCta;
  document.getElementById('outlooklink').onclick = outlookcalendarCta;
  document.getElementById('yahoolink').onclick = yahoocalendarCta;

  // Open and Close Calendar Function Starts

  const opencalendarcta = document.querySelector('.opencalendarcta');
  const opencalendarlist = document.querySelector('.opencalendarlist');

  // Global open/close functions
  const open = () => {
    opencalendarcta.classList.add('open-calendar-cta');
    opencalendarlist.classList.add('open-popup');
  };

  const close = () => {
    opencalendarcta.classList.remove('open-calendar-cta');
    opencalendarlist.classList.remove('open-popup');
  };

  // Accessibility Redirecting Links

  const googletab = document.getElementById('googlelink');

  googletab.addEventListener('keydown', events => {
    if (events.keyCode === ENTER_KEY_CODE) {
      googlecalendarCta();
    } else if (events.keyCode === ESCAPE_KEY_CODE) {
      close();
    }
  });

  const officetab = document.getElementById('officelink');

  officetab.addEventListener('keydown', events => {
    if (events.keyCode === ENTER_KEY_CODE) {
      officecalendarCta();
    } else if (events.keyCode === ESCAPE_KEY_CODE) {
      close();
    }
  });

  const outlooktab = document.getElementById('outlooklink');

  outlooktab.addEventListener('keydown', events => {
    if (events.keyCode === ENTER_KEY_CODE) {
      outlookcalendarCta();
    } else if (events.keyCode === ESCAPE_KEY_CODE) {
      close();
    }
  });

  const yahootab = document.getElementById('yahoolink');

  yahootab.addEventListener('keydown', events => {
    if (events.keyCode === ENTER_KEY_CODE) {
      yahoocalendarCta();
    } else if (events.keyCode === ESCAPE_KEY_CODE) {
      close();
    }
  });

  document.body.onclick = function() {
    close();
  };

  opencalendarcta.addEventListener('click', () => {
    if (!opencalendarcta.classList.contains('open-calendar-cta')) {
      open();
    } else {
      close();
    }
  });

  opencalendarcta.addEventListener('keydown', events => {
    if (events.keyCode === ENTER_KEY_CODE) {
      open();
    } else if (events.keyCode === ESCAPE_KEY_CODE) {
      close();
    }
  });

  const els = document.querySelectorAll('.opencalendarcta');

  // When clicking on these elements don't hide the popup
  for (let i = 0; i < els.length; i++) {
    els[i].addEventListener('click', function(e) {
      e.stopPropagation();
    });
  }

  // Open and Close Calendar Function End
};

URL: /components/raw/match-companion/match-companion.js
Filesystem Path: src/library/components/match-companion/match-companion.js
Size: 3.7 KB

Content:


                                .match-companion {
  &__competition {
    font-family: $ef-font;
    font-weight: 400;
    font-size: 1.4rem;
    text-align: center;
    text-transform: uppercase;
    color: $blue;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 0.8rem;
    padding: 1.3rem 0;

    span {
      background: $blue;
      width: 0.4rem;
      height: 0.4rem;
      border-radius: 50%;
    }
  }

  &__date {
    font-family: $ef-font;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 2rem;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    letter-spacing: 0.02em;
    color: $color-interface-light;
    text-transform: uppercase;
  }

  &__team {
    text-transform: uppercase;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    margin-top: 0.8rem;
    margin-bottom: 0.5rem;
    align-items: flex-start;
  }

  hr {
    border-top: 0.1rem dashed $grey-light2;
    border-bottom: none;
    margin: 0 2.5rem 1.2rem 2.5rem;
  }

  &__hometeam {
    display: flex;
    grid-column: 1;
    flex-direction: column;
    padding: 0 2.4rem;

    img {
      max-height: 6rem;
      height: 100%;
      margin-bottom: 0.7rem;
    }

    p {
      font-family: $ef-font;
      font-style: normal;
      font-weight: 500;
      font-size: 1.8rem;
      text-align: center;
      text-transform: uppercase;
      color: $blue;
      display: none;
    }

    .mobile-only {
      display: block;
    }
  }

  &__awayteam {
    display: flex;
    grid-column: 3;
    flex-direction: column;
    padding: 0 2.4rem;

    img {
      max-height: 6rem;
      height: 100%;
      margin-bottom: 0.7rem;
    }

    p {
      font-family: $ef-font;
      font-style: normal;
      font-weight: 500;
      font-size: 1.8rem;
      text-align: center;
      text-transform: uppercase;
      color: $blue;
      display: none;
    }

    .mobile-only {
      display: block;
    }
  }

  &__matchtime {
    background: $grey-light;
    border-radius: 0.2rem;
    padding: 0.4rem 1.6rem;
    align-self: center;

    .time {
      font-family: $ef-font;
      font-weight: 400;
      font-size: 3.2rem;
      line-height: 3.5rem;
      text-align: center;
      letter-spacing: 0.01em;
      color: $black;
    }

    .zone {
      font-family: $ef-font;
      font-style: normal;
      font-weight: 400;
      font-size: 1.2rem;
      line-height: 1.3rem;
      text-align: center;
      letter-spacing: 0.01em;
      color: $black;
    }
  }

  &__matchscore {
    background: $crest-blue;
    border-radius: 0.2rem;
    padding: 0.8rem 2.2rem;
    align-self: center;

    .matchscore {
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: $ef-font;
      font-weight: 400;
      font-size: 3.8rem;
      line-height: 4.2rem;
      text-align: center;
      letter-spacing: 0.01em;
      color: $white;
    }

    span {
      background: $white;
      width: 0.7rem;
      height: 0.3rem;
      margin: 0 0.8rem;
    }
  }

  &__match-widgets {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: $ef-font;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.3rem;
    text-align: center;
    letter-spacing: 0.01em;
    color: $color-interface-light;
    row-gap: 0.4rem;
    margin-top: 0.7rem;
  }

  &__matchpostponed {
    background: $grey-light;
    border-radius: 0.2rem;
    padding: 1.2rem 3.7rem;
    align-self: center;
    font-family: $ef-font;
    font-style: normal;
    font-weight: 400;
    font-size: 3.2rem;
    line-height: 3.5rem;
    text-align: center;
    letter-spacing: 0.01em;
    color: $black;
  }

  &__matchsuspended {
    background: $grey-light;
    border-radius: 0.2rem;
    padding: 1.2rem 3.7rem;
    align-self: center;
    font-family: $ef-font;
    font-style: normal;
    font-weight: 400;
    font-size: 3.2rem;
    line-height: 3.5rem;
    text-align: center;
    letter-spacing: 0.01em;
    color: $black;
  }

  &__match-cta {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 1rem;
    column-gap: 1.7rem;

    .cta--primary,
    .cta--secondary,
    .cta--tertiary {
      font-family: $ef-font;
      max-width: 14.7rem;
      min-height: 3.7rem;
      width: 100%;
    }
  }

  &__postponed-cta {
    width: 100%;
    max-width: 31.1rem;
    padding: 0.9rem 0;
    margin: 0 auto;
    background: $orange-light;
    border-radius: 0.2rem;
    font-family: $ef-font;
    font-style: normal;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.8rem;
    text-align: center;
    letter-spacing: 0.02em;
    color: $red;
    text-transform: uppercase;
  }

  &__suspended-cta {
    width: 100%;
    max-width: 31.1rem;
    padding: 0.9rem 0;
    margin: 0 auto;
    background: $orange-light;
    border-radius: 0.2rem;
    font-family: $ef-font;
    font-style: normal;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.8rem;
    text-align: center;
    letter-spacing: 0.02em;
    color: $red;
    text-transform: uppercase;
  }

  &__no-upcoming-matches {
    padding: 2.6rem 1.2rem 1.2rem 1.2rem;

    .no-match-text {
      font-family: $ef-font;
      font-style: normal;
      font-weight: 400;
      font-size: 1.4rem;
      line-height: 2rem;
      text-align: center;
      letter-spacing: 0.02em;
      color: $color-interface-light;
      margin-bottom: 1.8rem;
      text-transform: uppercase;
    }

    img {
      max-height: 7.5rem;
      height: 100%;
      margin: 0 auto 1.4rem auto;
    }

    a {
      font-family: $ef-font;
      max-width: 31.1rem;
      min-height: 3.7rem;
      margin: 0 auto !important;
    }
  }

  &__calendar-section {
    position: relative;
    max-width: 14.7rem;
    width: 100%;

    .opencalendarcta {
      font-family: $ef-font;
      height: 3.7rem;
      background-color: white;
      border: 0.1rem solid var(--brand-primary);
      color: var(--brand-primary);
      letter-spacing: 0.02em;
      font-size: 1.4rem;
      line-height: 1.8rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      text-transform: uppercase;
      text-decoration: none;
      transition: background-color 0.2s ease-in;
      border-radius: 0.2rem;
      position: relative;
      white-space: nowrap;
      padding: 0 2rem;

      img {
        max-height: 1.5rem;
        height: 100%;
        margin-right: 1.5rem;
      }

      &:hover {
        background-color: var(--brand-primary);
        color: white;
        border: 0.1rem solid;
      }
    }

    .opencalendarlist {
      width: 14.7rem;
      display: none;
      position: absolute;
      bottom: -50px;
      font-family: $ef-font;
      background-color: white;
      box-shadow: 0 0 1.4rem rgba(0, 0, 0, 0.15);
      color: var(--brand-primary);
      letter-spacing: 0.02em;
      font-size: 1.4rem;
      line-height: 1.8rem;
      cursor: pointer;
      text-transform: uppercase;
      text-decoration: none;
      z-index: 25;

      .links {
        padding: 0.9rem 0;
        transition: 0.2s ease-in;
        font-family: $ef-font;
        font-style: normal;
        font-weight: 700;
        font-size: 1.4rem;
        line-height: 1.8rem;
        display: flex;
        align-items: center;
        letter-spacing: 0.02em;
        color: $color-interface-light;

        img {
          margin: 0 1.7rem;
          height: 1.8rem;
        }

        &:hover {
          background: $grey-light;
        }
      }

      &.open-popup {
        display: block;
      }
    }
  }

  .cta--tertiary:hover {
    border: 1px solid;
  }

  @media (min-width: $mq-medium) {
    &__team {
      grid-template-columns: none;
      display: flex;
      justify-content: center;
      margin-bottom: 1.3rem;
    }

    hr {
      margin: 0 5.2rem 1.6rem 5.2rem;
    }

    &__hometeam {
      flex-direction: row;
      align-items: center;

      img {
        order: 1;
        margin-bottom: 0;
        max-height: 7rem;
      }

      p {
        order: 0;
        margin-right: 1.6rem;
        font-size: 2.8rem;
        color: $crest-blue;
        display: block;
      }

      .mobile-only {
        display: none;
      }
    }

    &__awayteam {
      flex-direction: row;
      align-items: center;

      img {
        order: 0;
        margin-bottom: 0;
        max-height: 7rem;
      }

      p {
        order: 1;
        margin-left: 1.6rem;
        font-size: 2.8rem;
        color: $crest-blue;
        display: block;
      }

      .mobile-only {
        display: none;
      }
    }

    &__match-cta {
      column-gap: 2.8rem;

      .cta--primary,
      .cta--secondary,
      .cta--tertiary {
        max-width: 23.4rem;
        width: 100%;
      }
    }

    &__calendar-section {
      max-width: 23.4rem;

      .opencalendarlist {
        width: 23.4rem;
      }
    }
  }

  @media (max-width: $mq-medium) {
    .one-match-cta > a:nth-child(1) {
      max-width: 27.7rem;
    }

    .one-match-cta > .match-companion__calendar-section {
      max-width: 27.7rem;
    }

    .three-match-cta > a:nth-child(2) {
      max-width: initial;
      width: auto;

      img {
        margin-right: 0;
      }

      p {
        display: none;
      }
    }

    .three-match-cta > a:nth-child(3) {
      max-width: initial;
      width: auto;

      img {
        margin-right: 0;
      }

      p {
        display: none;
      }
    }

    .three-match-cta > .match-companion__calendar-section:nth-child(3) {
      max-width: initial;
      width: auto;

      img {
        margin-right: 0;
      }

      p {
        display: none;
      }
    }
  }
}

.match-companion__match-cta a {
  margin: 0 !important;
}

URL: /components/raw/match-companion/match-companion.scss
Filesystem Path: src/library/components/match-companion/match-companion.scss
Size: 10.3 KB


        <div class="match-companion">
  {{#unless nomatches}}
  <div class="match-companion__competition">
    <div>{{competitionName}}</div>
    <span></span>
    <div>{{groupName}}</div>
  </div>
  <div class="match-companion__date">{{matchDate}}</div>
  <div class="match-companion__team">
    <div class="match-companion__hometeam">
      <img src="/assets/example-content/prematch-home-team.svg" alt="" />
      <p>{{homeTeam}}</p>
      <p class="mobile-only">{{homeTeamCode}}</p>
    </div>
    {{#if prematch}}
    <div class="match-companion__matchtime">
      <p class="time">{{prematch.time}}</p>
      <p class="zone">{{prematch.zone}}</p>
    </div>
    {{/if}}
    {{#if postmatch}}
    <div>
      <div class="match-companion__matchscore">
        <div class="matchscore">
          <div>{{postmatch.homeTeamScore}}</div>
          <span></span>
          <div>{{postmatch.awayTeamScore}}</div>
        </div>
      </div>
      <div class="match-companion__match-widgets">
        <div>{{postmatch.htWidget}}</div>
        <div>{{postmatch.etWidget}}</div>
        <div>{{postmatch.pensWidget}}</div>
      </div>
    </div>
    {{/if}}
    {{#if postponed}}
    <div class="match-companion__matchpostponed">PP</div>
    {{/if}}
    {{#if suspended}}
    <div class="match-companion__matchsuspended">SUS</div>
    {{/if}}
    <div class="match-companion__awayteam">
      <img src="/assets/example-content/prematch-away-team.svg" alt="" />
      <p>{{awayTeam}}</p>
      <p class="mobile-only">{{awayTeamCode}}</p>
    </div>
  </div>
  <hr>

  {{#unless matchstatus}}
  <div class="match-companion__match-cta" id="matchctacount">
    {{render '@cta' cta merge="true"}}
    {{#if cta1}}
    {{render '@cta' cta1 merge="true"}}
    {{/if}}
    {{#if cta2}}
    {{render '@cta' cta2 merge="true"}}
    {{/if}}
    {{#if calendarcta}}
    <div class="match-companion__calendar-section">
      <a class="opencalendarcta" tabindex="0"><img src="/assets/example-content/calendar-icon.svg" alt="" /><p>Add to Calendar</p></a>
      <div class="opencalendarlist" data-calendar ='{"title": "England - Iceland Match", "description": "EURO CHAMPIONS QUALIFIER GROUP A", "start": "2022-05-24 18:00:00", "end": "2022-05-24 22:00:00" }'>
        <div class="links" id="googlelink" tabindex="0"><img src="/assets/example-content/google-icon.svg" alt="" />Google</div>
        <div class="links" id="officelink" tabindex="0"><img src="/assets/example-content/office365-icon.svg" alt="" />Office 365</div>
        <div class="links" id="outlooklink" tabindex="0"><img src="/assets/example-content/outlook-icon.svg" alt="" />Outlook</div>
        <div class="links" id="yahoolink" tabindex="0"><img src="/assets/example-content/yahoo-icon.svg" alt="" />Yahoo!</div>
      </div>
    </div>
    {{/if}}
  </div>
  {{/unless}}

  {{#if postponed}}
  <div class="match-companion__postponed-cta">
    Match Postponed
  </div>
  {{/if}}

  {{#if suspended}}
  <div class="match-companion__suspended-cta">
    Match Suspended
  </div>
  {{/if}}
  {{/unless}}

  {{#if nomatches}}
  <div class="match-companion__no-upcoming-matches">
    <div class="no-match-text">No Current Upcoming Matches</div>
    <img src="/assets/example-content/prematch-home-team.svg" alt="" />
    <hr>
    {{render '@cta' nomatchcta merge="true"}}
  </div>
  {{/if}}
</div>

Handle: @match-companion--match-postponed
Variants (5): Default , Post Match Component , Match Postponed , Match Suspended , No Upcoming Matches
Preview:
- With layout
- Component only
Filesystem Path: src/library/components/match-companion/match-companion.hbs
References (1): @cta