Running The Session

Ready

HTML
Notes
Context
Assets
View
Info


        
        <section class="running-the-session">
    <div class="running-the-session__inner">
        <h3>Running the Session</h3>
        <p>Put this session into practice by following our <strong class="darkblue-text">4</strong> setup guidelines.</p>
    </div>
    <div class="running-the-session__section warm-up_section">
        <p class="running-the-session__subheading running-the-session__warm-up">Warm Up</p>
    </div>

    <article class="running-the-session__section">
        <!-- Mobile Version (Step) -->
        <div class="running-the-session__step">
            <p class="running-the-session__subheading">step <span class="bold">01</span></p>
        </div>
        <figure href="#" role="button" data-behaviour="gif" tabindex="0">
            <img src="/assets/example-content/running-the-session.jpg" data-alt="/assets/example-content/running-the-session.gif" alt="football" />
            <figcaption class="running-the-session__section__caption">
                <div>0:10</div>
                <div>GIF</div>
            </figcaption>
        </figure>
        <div>
            <!-- Desktop Version (Step) -->
            <p class="running-the-session__subheading running-the-session__step-desktop">step <span class="bold">01</span></p>
            <p class="running-the-session__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</p>
        </div>
    </article>
    <article class="running-the-session__section">
        <!-- Mobile Version (Step) -->
        <div class="running-the-session__step">
            <p class="running-the-session__subheading">step <span class="bold">02</span></p>
        </div>
        <figure href="#" role="button" data-behaviour="gif" tabindex="0">
            <img src="/assets/example-content/running-the-session.jpg" data-alt="/assets/example-content/running-the-session.gif" alt="football" />
            <figcaption class="running-the-session__section__caption">
                <div>0:10</div>
                <div>GIF</div>
            </figcaption>
        </figure>
        <div>
            <!-- Desktop Version (Step) -->
            <p class="running-the-session__subheading running-the-session__step-desktop">step <span class="bold">02</span></p>
            <p class="running-the-session__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</p>
        </div>
    </article>
    <article class="running-the-session__section">
        <!-- Mobile Version (Step) -->
        <div class="running-the-session__step">
            <p class="running-the-session__subheading">step <span class="bold">03</span></p>
        </div>
        <figure href="#" role="button" data-behaviour="gif" tabindex="0">
            <img src="/assets/example-content/running-the-session.jpg" data-alt="/assets/example-content/running-the-session.gif" alt="football" />
            <figcaption class="running-the-session__section__caption">
                <div>0:10</div>
                <div>GIF</div>
            </figcaption>
        </figure>
        <div>
            <!-- Desktop Version (Step) -->
            <p class="running-the-session__subheading running-the-session__step-desktop">step <span class="bold">03</span></p>
            <p class="running-the-session__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </article>
    <article class="running-the-session__section">
        <!-- Mobile Version (Step) -->
        <div class="running-the-session__step">
            <p class="running-the-session__subheading">step <span class="bold">04</span></p>
        </div>
        <figure href="#" role="button" data-behaviour="gif" tabindex="0">
            <img src="/assets/example-content/running-the-session.jpg" data-alt="/assets/example-content/running-the-session.gif" alt="football" />
            <figcaption class="running-the-session__section__caption">
                <div>0:10</div>
                <div>GIF</div>
            </figcaption>
        </figure>
        <div>
            <!-- Desktop Version (Step) -->
            <p class="running-the-session__subheading running-the-session__step-desktop">step <span class="bold">04</span></p>
            <p class="running-the-session__paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </article>
    <div class="running-the-session__section no-after">
        <p class="running-the-session__subheading running-the-session__cool-down">Cool Down</p>
    </div>
    <footer>
        <div class="article-author article-author--crest">
            <div class="article-author__inner">
                <h4>William Dalton</h4>
                <p>10 min read - 10 Mar 2020</p>
            </div>
        </div>
        <div class="share">
            <div class="share__fallback" data-behavior="share-fallback">
                <p>Share:</p>
                <ul class="share__options">
                    <li>
                        <button data-behavior="copy-url" aria-label="Copy page link"><img src="/assets/images/share-copy-icon.svg" />
                            <span class="tooltip">Copy page link</span>
                        </button>
                    </li>

                    <li><a href="https://www.facebook.com/sharer.php?u=https://www.thefa.com/" aria-label="Facebook. Opens in a new tab" target="_blank" class="fb-button"><img src="/assets/images/share-facebook-icon.svg" alt="Facebook" /><span class="tooltip">Share on Facebook. Opens in a new tab</span></a></li>
                    <li><a href="https://twitter.com/intent/tweet?url=https://www.thefa.com/" aria-label="Twitter. Opens in a new tab" target="_blank" class="twitter-button"><img src="/assets/images/share-twitter-icon.svg" alt="Twitter" /><span class="tooltip">Share on Twitter. Opens in a new tab</span></a></li>
                    <li><a href="https://wa.me/?text=https://www.thefa.com/" aria-label="Whatsapp. Opens in new Tab" target="_blank" class="whatsapp-button"><img src="/assets/images/share-whatsapp-icon.svg" alt="WhatsApp" /><span class="tooltip">Share on Whatsapp</span></a></li>
                </ul>
            </div>

            <button class="share__native" data-behavior="share-native"><span>Share:</span><img src="/assets/images/share-icon.svg" /></button>
        </div>
    </footer>
</section>

No notes defined.


        
            
            {
  "instructions": [
    {
      "id": 0,
      "step": "01",
      "information": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi",
      "src": "/assets/example-content/running-the-session.jpg",
      "animatedSrc": "/assets/example-content/running-the-session.gif",
      "altText": "football",
      "duration": "0:10"
    },
    {
      "id": 1,
      "step": "02",
      "information": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi",
      "src": "/assets/example-content/running-the-session.jpg",
      "animatedSrc": "/assets/example-content/running-the-session.gif",
      "altText": "football",
      "duration": "0:10"
    },
    {
      "id": 2,
      "step": "03",
      "information": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "src": "/assets/example-content/running-the-session.jpg",
      "animatedSrc": "/assets/example-content/running-the-session.gif",
      "altText": "football",
      "duration": "0:10"
    },
    {
      "id": 3,
      "step": "04",
      "information": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
      "src": "/assets/example-content/running-the-session.jpg",
      "animatedSrc": "/assets/example-content/running-the-session.gif",
      "altText": "football",
      "duration": "0:10"
    }
  ]
}

File:

Content:


                                /* eslint-disable no-param-reassign */
export default parentElement => {
  // HTML Elements
  const imageElement = parentElement.querySelector('img');
  let alternateURL = imageElement.getAttribute('data-alt');

  // variables
  let isAnimated = false;

  parentElement.classList.add('animated-clickable-img');

  const runningSession = parentElement.closest('.running-the-session');
  let title = '';
  let step = '';
  const setpEl = parentElement.previousElementSibling;

  if (runningSession) {
    title = runningSession.querySelector('h3').innerText;
  }
  if (setpEl) {
    step = setpEl.innerText;
  }

  parentElement.ariaLabel = `${title} ${step} gif play/stop`;

  parentElement.addEventListener('click', e => {
    e.preventDefault();
    const prevURL = imageElement.src;

    if (isAnimated) {
      isAnimated = false;
      parentElement.classList.add('animated-clickable-img');
    } else {
      isAnimated = true;
      parentElement.classList.remove('animated-clickable-img');
    }
    imageElement.src = alternateURL;
    alternateURL = prevURL;
  });

  parentElement.addEventListener('keyup', event => {
    if (event.keyCode === 13) {
      // Cancel the default action, if needed
      event.preventDefault();
      parentElement.click();
    }
  });
};

URL: /components/raw/running-the-session/running-the-session.js
Filesystem Path: src/library/components/running-the-session/running-the-session.js
Size: 1.3 KB

Content:


                                .running-the-session {
  background-color: $white;
  padding: 3.2rem;

  @include rte();

  &__inner {
    max-width: 95.8rem;
    margin: auto;
    padding-bottom: 3.8rem;
    color: $color-interface-light;
  }

  .warm-up_section {
    &::after {
      background-image: url('./assets/images/warm-up-progress-bar.svg');
    }
  }

  &__section {
    display: flex;
    flex-direction: column;
    justify-content: center;

    > div {
      padding: 2rem;
      box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.17);

      &:last-child {
        min-height: 26rem;
      }

      @media screen and (min-width: $mq-medium) {
        box-shadow: none;
        padding: 0;
        &:last-child {
          display: flex;
          flex-direction: column;
          justify-content: center;
        }
      }
    }

    figure {
      grid-area: a;
      img {
        width: 100%;

        @media screen and (min-width: $mq-medium) {
          box-shadow: 0 4px 35px rgba(100, 100, 100, 0.25);
          border-radius: 0.4rem;
        }
      }
    }

    &::after {
      content: '';
      display: block;
      margin: auto;
      height: 5rem;
      width: 5rem;
      background-image: url('./assets/images/progress-bar.svg');
      background-repeat: no-repeat;
      background-position: center;
      grid-area: c;
      max-height: 2.4rem;

      @media screen and (min-width: $mq-medium) {
        max-height: none;
      }
    }

    @media screen and (min-width: $mq-medium) {
      display: grid;
      grid-template-areas:
        'a a a b'
        'c c c .';
      grid-template-columns: auto;
      column-gap: 4.6rem;
      max-width: 95.8rem;
      margin: auto;
      box-shadow: none;
    }

    @media screen and (min-width: $mq-large) {
      grid-template-columns: 20.57rem 20.57rem 20.57rem 20.57rem;
    }

    &__caption {
      display: none;
      position: absolute;
      bottom: 1.6rem;
      left: 2rem;
      font-family: $text-font-ef;
      font-size: 1.4rem;
      line-height: 2.4rem;

      & > :first-child {
        background-color: $black;
        border-radius: 0.4rem 0 0 0.4rem;
        padding: 0 0.8rem;
        opacity: 0.6;
        color: $white;
      }

      & > :last-child {
        background-color: $white;
        border-radius: 0 0.4rem 0.4rem 0;
        padding: 0 0.8rem;
        color: $black;
      }
    }
  }

  &__warm-up {
    margin: auto;
    text-align: center;
    grid-area: a;
    &::before {
      content: '';
      display: block;
      margin: auto;
      width: 5rem;
      height: 3.37rem;
      background-image: url('./assets/images/warm-up-icon.svg');
      background-repeat: no-repeat;
      background-position: center;
    }

    @media screen and (min-width: $mq-medium) {
      display: block;
    }
  }

  &__cool-down {
    display: flex;
    flex-direction: column;
    margin: auto;
    text-align: center;
    opacity: 0.5;
    grid-area: a;
    margin-bottom: 7rem;
    &::before {
      content: '';
      display: block;
      margin: auto;
      width: 5rem;
      height: 3.37rem;
      background-image: url('./assets/images/warm-up-icon.svg');
      background-repeat: no-repeat;
      background-position: center;
      opacity: 0.5;
    }

    @media screen and (min-width: $mq-medium) {
      flex-direction: column-reverse;
    }
  }

  .share__options {
    list-style: none;
  }
  .article-author__inner h4 {
    margin-bottom: 0 !important;
  }
  /* stylelint-disable no-duplicate-selectors */
  h3 {
    margin-bottom: 2.4rem;
    color: $blue;
    text-align: left;

    &::after {
      content: '';
      padding-top: 0.8rem;
      display: block;
      width: 3.2rem;
      height: 0.2rem;
      border-bottom: 2px solid $red;
    }
  }
  /* stylelint-disable no-descending-specificity */

  &__paragraph {
    color: $blue;
    font: $efl-p-small;
  }

  &__subheading {
    text-align: center;
    text-transform: uppercase;
    color: $blue-accent2 !important;

    @media screen and (min-width: $mq-medium) {
      text-align: left;
    }
  }

  .darkblue-text {
    color: $blue;
  }

  .bold {
    font-weight: 700;
  }

  @media screen and (min-width: $mq-medium) {
    padding: 5.2rem 3.2rem;
  }

  footer {
    display: flex;
    justify-content: center;
    margin-bottom: 5.3rem;

    > div:first-child {
      display: none;
    }

    @media screen and (min-width: $mq-medium) {
      justify-content: space-between;
      padding-bottom: 3.1rem;
      border-bottom: 1px solid grey;
      max-width: 102rem;
      margin: 0 auto;

      & div:first-child {
        display: flex;
      }
    }
  }

  .no-after::after {
    display: none;
  }

  // Desktop and Mobile versions of the STEP #
  &__step {
    display: block;

    @media screen and (min-width: $mq-medium) {
      display: none;
    }
    &-desktop {
      display: none;

      @media screen and (min-width: $mq-medium) {
        display: block;
      }
    }
  }
}

.animated-clickable-img {
  grid-area: a;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
  &::before {
    content: '';
    display: block;
    position: absolute;
    background-image: url('./assets/images/play-icon.svg');
    width: 8.2rem;
    height: 5.6rem;
  }

  .running-the-session__section__caption {
    display: flex !important;
  }
}

URL: /components/raw/running-the-session/running-the-session.scss
Filesystem Path: src/library/components/running-the-session/running-the-session.scss
Size: 5.4 KB


        <section class="running-the-session">
  <div class="running-the-session__inner">
    <h3>Running the Session</h3>
    <p>Put this session into practice by following our <strong class="darkblue-text">4</strong> setup guidelines.</p>
  </div>
  <div class="running-the-session__section warm-up_section">
    <p class="running-the-session__subheading running-the-session__warm-up">Warm Up</p>
  </div>
  
  {{#each instructions}}
  <article class="running-the-session__section">
    <!-- Mobile Version (Step) -->
    <div class="running-the-session__step">
      <p class="running-the-session__subheading">step <span class="bold">{{step}}</span></p>
    </div>
    <figure href="#" role="button" data-behaviour="gif" tabindex="0">
      <img src="{{src}}" data-alt="{{animatedSrc}}" alt="{{altText}}"/>
      <figcaption class="running-the-session__section__caption">
        <div>{{duration}}</div>
        <div>GIF</div>
      </figcaption>
    </figure>
    <div>
      <!-- Desktop Version (Step) -->
      <p class="running-the-session__subheading running-the-session__step-desktop">step <span class="bold">{{step}}</span></p>
      <p class="running-the-session__paragraph">{{information}}</p>
    </div>
  </article>
  {{/each}}
  <div class="running-the-session__section no-after">
    <p class="running-the-session__subheading running-the-session__cool-down">Cool Down</p>
  </div>
  <footer>
    {{render '@article-author'}}
    {{render '@share'}}
  </footer>
</section>

Handle: @running-the-session
Preview:
- With layout
- Component only
Filesystem Path: src/library/components/running-the-session/running-the-session.hbs
References (2): @article-author, @share
Referenced by (3): @efl-article-page, @efl-article-page--page-notification, @efl-session-page