Match Lineup

Ready

HTML
Notes
Context
Assets
View
Info


        
        <div class="match-lineup" data-behavior="tabs">
    <h2 class="heading-section ">Squad and line up</h2>
    <div class="center-content">
        <div role="tablist" aria-label="Sample Tabs" class="tab-list">
            <a href="#panel-england" role="tab" aria-selected="true" aria-controls="panel-england" id="tab-england">
                England
            </a>
            <a href="#panel-iceland" role="tab" aria-selected="false" aria-controls="panel-iceland" id="tab-iceland">
                Iceland
            </a>
        </div>
    </div>

    <div id="panel-england" role="tabpanel" tabindex="0" aria-labelledby="tab-england">
        <div class="match-lineup__opta-widget">
            <opta-widget data-behaviour="match-lineup" widget="matchday_live" competition="4" season="2017" match="958061" template="normal" live="false" orientation="horizontal" side="home" show_match_header="false" show_crests="false" show_pitch_crests="false" show_team_formation="true" show_score="false" show_halftime_score="false" show_competition_name="false" show_date="false" date_format="dddd D MMMM YYYY" show_referee="false" show_venue="false" show_attendance="false" show_images="true" show_pitch_images="true" show_team_sheets="false" show_event_icons="true" show_player_names="true" show_player_stats="false" show_subs="all" competition_naming="full" team_naming="full" player_naming="last_name" show_live="false" show_logo="false" show_title="false" breakpoints="400, 700" sport="football" load="true" width="445"></opta-widget>
        </div>
    </div>
    <div id="panel-iceland" role="tabpanel" tabindex="0" aria-labelledby="tab-iceland">
        <div class="match-lineup__opta-widget">
            <opta-widget data-behaviour="match-lineup" widget="matchday_live" competition="4" season="2017" match="958061" template="normal" live="false" orientation="horizontal" side="away" show_match_header="false" show_crests="false" show_pitch_crests="false" show_team_formation="true" show_score="false" show_halftime_score="false" show_competition_name="false" show_date="false" date_format="dddd D MMMM YYYY" show_referee="false" show_venue="false" show_attendance="false" show_images="true" show_pitch_images="true" show_team_sheets="false" show_event_icons="true" show_player_names="true" show_player_stats="false" show_subs="all" competition_naming="full" team_naming="full" player_naming="last_name" show_live="false" show_logo="false" show_title="false" breakpoints="400, 700" sport="football" load="false" width="445"></opta-widget>
        </div>
    </div>
</div>

No notes defined.


        
            
            {
  "lineup-heading": {
    "copy": "Squad and line up"
  }
}

File:

Content:


                                export default (widgets, lineupBreakpoint = 700) => {
  const orientation =
    window.innerWidth < lineupBreakpoint ? 'vertical' : 'horizontal';

  widgets.forEach(widget => {
    widget.setAttribute('orientation', orientation);
  });
};

URL: /components/raw/match-lineup/match-lineup.js
Filesystem Path: src/library/modules/match-lineup/match-lineup.js
Size: 239 Bytes

Content:


                                .match-lineup {
  .tab-list {
    margin: 4rem auto 0;
  }
}
// hacked this to give our styles more specificity than the Opta
// stylesheet, until the template can be updated to call our stylesheet last.
.match-lineup__opta-widget.match-lineup__opta-widget {
  .Opta .Opta-FootballPitch {
    background: none;
  }
  .Opta .Opta-FootballPitch .Opta-Field {
    stroke: var(--brand-primary);
  }
  .Opta .Opta-FootballPitch .Opta-Field > .Opta-Markings {
    opacity: 1;
    stroke-width: 0.1rem;
  }
  .Opta .Opta-FootballPitch .Opta-Node circle {
    fill: var(--brand-primary);
    stroke: var(--brand-primary);
    stroke-width: 15px;
  }
  .Opta .Opta-FootballPitch-Subplayers .Opta-Sub .Opta-Circle {
    background-color: $blue;
    border: 5px solid $blue;
    box-sizing: content-box;
  }
  .Opta .Opta-FootballPitch .Opta-Node text {
    @include text-m;

    filter: none;
    fill: #000;
    font-weight: 500;
    font-size: 1.8rem !important;
    text-transform: uppercase;
    transform: translateY(0.8rem);
  }
  .Opta .Opta-FootballPitch.Opta-FootballPitch-Vertical .Opta-Node text {
    transform: translateY(0.5rem);
  }
  .Opta .Opta-FootballPitch .Opta-Players-Formation .Opta-Node .Opta-Icon {
    transform: translateY(0.8rem);
    width: 1.4rem;
    height: 1.4rem;
  }
  .Opta-FootballPitch-Subplayers th {
    @include text-s;

    line-height: 1.6rem;
    background-color: $grey-light;
    color: $color-interface;
    font-size: 2rem;
    text-transform: uppercase;
    padding: 1rem 0;

    @media screen and (max-width: $mq-small) {
      font-size: 1.6rem;
    }
  }
  .Opta .Opta-FootballPitch-Subplayers .Opta-Sub {
    opacity: 1;
    position: relative;
  }
  .Opta .Opta-FootballPitch-Subplayers .Opta-Sub .Opta-PlayerName {
    @include text-m;

    font-size: 1.8rem !important; // Opta add JS to set this that we want to override
    text-transform: uppercase;
  }
  // .Opta
  //   .Opta-FootballPitch-Subplayers
  //   .Opta-Sub
  //   .Opta-PlayerName.Opta-JerseyNumber {
  //   background-color: $blue;
  //   border-radius: 50%;
  //   color: $white;
  //   height: 3.5rem;
  //   line-height: 3.5rem;
  //   position: absolute;
  //   right: 2rem;
  //   transform: translateY(-3.4rem);
  //   width: 3.5rem;
  // }
  .Opta .Opta_W.Opta_F_ML_N .Opta-Overlay {
    border-radius: 0.8rem;
    padding-bottom: 2.5rem;
  }
  .Opta .Opta_W.Opta_F_ML_N .Opta-Overlay li.Opta-Circle {
    background-color: $blue;
    border-radius: 50%;
    color: $white;
    height: 3.5rem;
    line-height: 3.5rem;
    width: 3.5rem;

    & + li {
      color: var(--brand-primary);
      font-family: $heading-font;
      font-size: 5.6rem;
      line-height: 3.6rem;
      letter-spacing: 0.01em;
    }
  }
  .Opta .Opta_W.Opta_F_ML_N .Opta-Overlay li.Opta-soft {
    @include text-s--narrow;

    text-transform: uppercase;
  }
  .Opta .Opta_W.Opta_F_ML_N .Opta-Overlay li.Opta-MatchEvent,
  .Opta .Opta-Stat .Opta-Label {
    @include text-xs;
  }
  .Opta .Opta-Stat .Opta-Label {
    text-transform: uppercase;
  }
  .Opta .Opta-Stats-Text .Opta-Stat .Opta-Value {
    @include heading-m;

    color: var(--brand-primary);
  }

  @media screen and (max-width: $mq-small) {
    .Opta .Opta-FootballPitch-Subplayers .Opta-Sub .Opta-PlayerName {
      font-size: 1rem !important;
      line-height: 1.5rem !important;
    }
    .Opta .Opta_W.Opta_F_ML_N .Opta-Overlay ul {
      max-width: 17rem;
    }
  }
}

URL: /components/raw/match-lineup/match-lineup.scss
Filesystem Path: src/library/modules/match-lineup/match-lineup.scss
Size: 3.4 KB


        <div class="match-lineup" data-behavior="tabs">
  {{render '@heading--section' lineup-heading merge=true}}
  <div class="center-content">
    <div role="tablist" aria-label="Sample Tabs" class="tab-list">
      <a href="#panel-england" role="tab" aria-selected="true" aria-controls="panel-england" id="tab-england">
        England
      </a>
      <a href="#panel-iceland" role="tab" aria-selected="false" aria-controls="panel-iceland" id="tab-iceland">
        Iceland
      </a>
    </div>
  </div>

  <div id="panel-england" role="tabpanel" tabindex="0" aria-labelledby="tab-england">
    <div class="match-lineup__opta-widget">
      <opta-widget data-behaviour="match-lineup" widget="matchday_live" competition="4" season="2017" match="958061"
        template="normal" live="false" orientation="horizontal" side="home" show_match_header="false"
        show_crests="false" show_pitch_crests="false" show_team_formation="true" show_score="false"
        show_halftime_score="false" show_competition_name="false" show_date="false" date_format="dddd D MMMM YYYY"
        show_referee="false" show_venue="false" show_attendance="false" show_images="true" show_pitch_images="true"
        show_team_sheets="false" show_event_icons="true" show_player_names="true" show_player_stats="false"
        show_subs="all" competition_naming="full" team_naming="full" player_naming="last_name" show_live="false"
        show_logo="false" show_title="false" breakpoints="400, 700" sport="football" load="true" width="445"></opta-widget>
    </div>
  </div>
  <div id="panel-iceland" role="tabpanel" tabindex="0" aria-labelledby="tab-iceland">
    <div class="match-lineup__opta-widget">
      <opta-widget data-behaviour="match-lineup" widget="matchday_live" competition="4" season="2017" match="958061"
        template="normal" live="false" orientation="horizontal" side="away" show_match_header="false"
        show_crests="false" show_pitch_crests="false" show_team_formation="true" show_score="false"
        show_halftime_score="false" show_competition_name="false" show_date="false" date_format="dddd D MMMM YYYY"
        show_referee="false" show_venue="false" show_attendance="false" show_images="true" show_pitch_images="true"
        show_team_sheets="false" show_event_icons="true" show_player_names="true" show_player_stats="false"
        show_subs="all" competition_naming="full" team_naming="full" player_naming="last_name" show_live="false"
        show_logo="false" show_title="false" breakpoints="400, 700" sport="football" load="false" width="445"></opta-widget>
    </div>
  </div>
</div>

Handle: @match-lineup
Preview:
- With layout
- Component only
Filesystem Path: src/library/modules/match-lineup/match-lineup.hbs
References (1): @heading--section
Referenced by (3): @match-report, @match-report--full-time-score, @match-report--live-score