No notes defined.

{% if related_content.items.length %}
  <aside class="uol-content-switch-from-side-to-main uol-section-nav-related-content {{ related_content.additional_style }}" aria-label="Related content">
      <h2 class="uol-section-nav-related-content__title">{{ related_content.title }}</h2>
      <div class="uol-section-nav-related-content__list">
        {% for item in related_content.items %}
          <div class="uol-section-nav-related__item">
              <h3 class="uol-section-nav-related-content__item__title">
                {% if item.heading.url %}
                  <a class="uol-section-nav-related-content__item__title__link" href="{{ item.heading.url }}">{{ item.heading.text }}</a>
                {% else %}
                  {{ item.heading.text }}
                {% endif %}
              </h3>

              {% if item.content %}
                <p class="uol-section-nav-related-content__item__text">{{ item.content | safe }}</p>
              {% endif %}

              {% for link in item.links %}
                <div class="uol-section-nav-related-content__item__contact-wrapper">
                  <a class="uol-section-nav-related-content__contact uol-section-nav-related-content__contact--{{ link.type }}"
                    href="{{ 'tel:' if link.type == 'phone' }}{{ 'mailto:' if link.type == 'email' }}{{ link.url }}">
                      {{ link.label }}
                  </a>
                </div>
              {% endfor %}
          </div>
        {% endfor %}
      </div>
  </aside>
{% endif %}
<aside class="uol-content-switch-from-side-to-main uol-section-nav-related-content " aria-label="Related content">
    <h2 class="uol-section-nav-related-content__title">Related content</h2>
    <div class="uol-section-nav-related-content__list">

        <div class="uol-section-nav-related__item">
            <h3 class="uol-section-nav-related-content__item__title">

                <a class="uol-section-nav-related-content__item__title__link" href="/meet-our-students">Meet our students</a>

            </h3>

            <p class="uol-section-nav-related-content__item__text">Hear from some of our undergraduates about some of the exciting things they've done to make the most of their student experience Hear from some of our undergraduates about some of the exciting things</p>

        </div>

        <div class="uol-section-nav-related__item">
            <h3 class="uol-section-nav-related-content__item__title">

                <a class="uol-section-nav-related-content__item__title__link" href="/meet-our-staff">Meet our staff</a>

            </h3>

            <p class="uol-section-nav-related-content__item__text">We understand that applicants and offer holders may have concerns about the ongoing coronavirus (COVID-19) situation and your plans to study with us at Leeds.</p>

        </div>

        <div class="uol-section-nav-related__item">
            <h3 class="uol-section-nav-related-content__item__title">

                Admissions Enquiries

            </h3>

            <div class="uol-section-nav-related-content__item__contact-wrapper">
                <a class="uol-section-nav-related-content__contact uol-section-nav-related-content__contact--phone" href="tel:+441133433212">
                    +44 (0)113 3433213
                </a>
            </div>

            <div class="uol-section-nav-related-content__item__contact-wrapper">
                <a class="uol-section-nav-related-content__contact uol-section-nav-related-content__contact--email" href="mailto:study@leeds.ac.uk">
                    Study@leeds.ac.uk
                </a>
            </div>

        </div>

    </div>
</aside>
  • Content:
    .uol-section-nav-related-content {
    
      margin: $spacing-6 $spacing-4;
    
      @include media(">=uol-media-m") {
        margin: $spacing-7 $spacing-4;
      }
    
      // margin: $spacing-6 $spacing-4 $spacing-6;
      border-top: 4px solid $color-border--light;
      font-size: 1.125rem;
    
      @include media(">=uol-media-xs") {
        // PRE CS refactor: margin: $spacing-6 $spacing-4 $spacing-7;
        margin-left: $spacing-4;
        margin-right: $spacing-4;
      }
    
      @include media(">=uol-media-m") {
          // PRE CS refactor: margin: $spacing-7 0 $spacing-9;
          margin-left: 0;
          margin-right: 0;
      }
    
      @include media(">=uol-media-l") {
        // PRE CS refactor: margin: 0 0 $spacing-9;
      } 
    }
    
      .uol-section-nav-related-content__title {
        margin: $spacing-3 0 $spacing-6;
        font-weight: $font-weight-bold--sans-serif;
        font-size: 1.125rem;
      }
    
      .uol-section-nav-related-content__list {
        @include media(">=uol-media-s", "<uol-media-l"){
          display: flex;
          flex-wrap: wrap;
          flex-direction: row;
          justify-content: space-between;
        }
      }
    
        .uol-section-nav-related__item {
          box-sizing: border-box;
          padding: $spacing-5 $spacing-5 $spacing-6;
          margin-bottom: $spacing-4;
          border: 2px solid $color-border--light;
          border-radius: 10px;
          line-height: 1.556;
    
          @include media(">=uol-media-s", "<uol-media-l") {
            flex-basis: calc(50% - #{$spacing-2});
          }
    
          @include media(">=uol-media-l") {
            margin-bottom: $spacing-6;
          }
        }
    
          .uol-section-nav-related-content__item__title {
            margin: 0 0 $spacing-2;
            line-height: 1.5;
            color: $color-font;
            font-weight: $font-weight-bold--sans-serif;
            font-size: 1.25rem;
            // max-width: 66.66%;
          }
    
          .uol-section-nav-related-content__item__title__link {
            text-decoration: none;
    
            svg {
              display: inline-block;
              fill: $color-brand;
              position: relative;
              top: 0.3rem;
              left: 0;
              margin-left: 0.5em;
              transition: left 0.3s ease 0.2s;
    
              @media (forced-colors: active) {
                fill: WindowText;
              }
    
              @media (-ms-high-contrast: active) {
                fill: CanvasText;
              }
            }
    
            &:hover {
              text-decoration: underline;
    
              svg {
                left: 0.4em;
              }
            }
          }
    
          .uol-section-nav-related-content__item__text {
            margin: 0;
            color: $color-font--light;
            font-size: 1.125rem;
          }
    
          .uol-section-nav-related-content__item__contact-wrapper {
            a {
              display: flex;
              span {
                width: calc(100% - 35px);
                overflow-wrap: break-word;
                padding-top: 3px;
              }
            }
    
            font-variant-numeric: lining-nums;
    
            &:not(:last-of-type) {
              padding-bottom: $spacing-4;
            }
    
            .uol-section-nav-related-content__item__text + & {
              margin-top: $spacing-2;
            }
    
            svg {
              fill: $color-warmgrey--dark;
              margin-right: $spacing-2;
              position: relative;
              top: 0.35rem;
    
              @media (forced-colors: active) {
                fill: WindowText;
              }
    
              @media (-ms-high-contrast: active) {
                fill: CanvasText;
              }
            }
    
            a {
    
              &:hover {
                text-decoration-color: $color-brand;
              }
            }
          }
    
    // Fix for related content (coursefinder pages only) was loosing left/right margin between 768px & 1024px
    // Note: 'rem' values below are to account for additional spacing on 'Coursefinder' page only
    .uol-section-nav-related-content--coursefinder {
      margin-top: -1.75rem;
    
      @include media(">=uol-media-m", "<uol-media-l") {
        margin-top: -0.563rem;
        margin-left: calc((100% / 12) + 0.9rem);
        margin-right: calc((100% / 12) + 0.9rem);
      }
    
      @include media(">=uol-media-l") {
        margin-top: 0;
      }
    }
    
    .uol-content-switch-from-side-to-main {
      // margin:  $spacing-7 $spacing-4 $spacing-6;
      margin-left: $spacing-4;
      margin-right: $spacing-4;
      
      @include media(">=uol-media-l") {
        // margin: $spacing-5 0 $spacing-7;
        margin-left: 0;
        margin-right: 0;
      }
    }
  • URL: /components/raw/uol-section-nav-related-content/_section-nav-related-content.scss
  • Filesystem Path: src/library/02-components/section-nav-related-content/_section-nav-related-content.scss
  • Size: 4.2 KB
  • Content:
    export const uolSectionNavRelatedContentArrows = () => {
    
      // Arrows for header links
      const svgRightArrow  = `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" focusable="false" aria-hidden="true">
      <path fill-rule="nonzero" d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path>
      </svg>`
    
      const headingLinks = document.querySelectorAll('.uol-section-nav-related-content__item__title__link');
    
      headingLinks.forEach((el) => {
        // Split text to array
        const innerTextArray = el.innerText.trim().split(' ')
        el.innerHTML = '<span role="text">' + innerTextArray.slice(0, -1).join(' ') + ' <span class="no-wrap">' + innerTextArray[innerTextArray.length - 1] + '' + svgRightArrow + '</span></span>'
    
      })
    }
    
    export const uolSectionNavRelatedContentIcons = () => {
    
      // Icons for contacts
    
      const svgWebIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" focusable="false" aria-hidden="true">
      <path d="M0 0h24v24H0z "fill="none"></path>
      <path d="M3.9,12C3.9,10.29 5.29,8.9 7,8.9H11V7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12M8,13H16V11H8V13M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.71 18.71,15.1 17,15.1H13V17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7Z"></path>
      </svg>`;
      const svgEmailIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" focusable="false" aria-hidden="true">
      <path d="M0 0h24v24H0z "fill="none"></path>
      <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"></path>
      </svg>`;
    
      const svgPhoneIcon = `<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" focusable="false" aria-hidden="true">
      <path d="M0 0h24v24H0z" fill="none"></path>
      <path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"></path>
      </svg>`;
    
      const iconLinks = document.querySelectorAll('.uol-section-nav-related-content__contact');
    
      iconLinks.forEach((link) => {
    
        let icon = svgWebIcon
        if ( link.classList.contains('uol-section-nav-related-content__contact--email')) {
          icon = svgEmailIcon
        } else if ( link.classList.contains('uol-section-nav-related-content__contact--phone')) {
          icon = svgPhoneIcon
        }
    
        link.innerHTML = `${icon}<span>${link.innerText}</span>`
      })
    }
    
    export const uolSectionNavRelatedContentLocation = () => {
    
      const relatedContents = document.querySelectorAll('.uol-content-container .uol-content-switch-from-side-to-main')
    
      //const main = document.getElementById('main')
      const main = document.querySelector('.uol-main-container');
    
      const sectionNavContainer = document.querySelector('.uol-side-nav-container')
    
      relatedContents.forEach( (relatedContent) => {
    
        window.addEventListener('resize', () => {
    
          if (window.innerWidth >= 1024) {
            sectionNavContainer.classList.add('uol-side-nav-container--populated')
            sectionNavContainer.insertAdjacentElement('beforeend', relatedContent)
          } else {
            sectionNavContainer.classList.remove('uol-side-nav-container--populated')
            main.insertAdjacentElement('beforeend', relatedContent)
          }
        })
    
        if (typeof(Event) === 'function') {
          // modern browsers
          window.dispatchEvent(new Event('resize'));
        } else {
            // for IE and other old browsers
            // causes deprecation warning on modern browsers
            var evt = window.document.createEvent('UIEvents')
            evt.initUIEvent('resize', true, false, window, 0)
            window.dispatchEvent(evt)
        }
      })
    }
    
  • URL: /components/raw/uol-section-nav-related-content/section-nav-related-content.module.js
  • Filesystem Path: src/library/02-components/section-nav-related-content/section-nav-related-content.module.js
  • Size: 3.9 KB
{
  "related_content": {
    "title": "Related content",
    "items": [
      {
        "heading": {
          "text": "Meet our students",
          "url": "/meet-our-students"
        },
        "content": "Hear from some of our undergraduates about some of the exciting things they've done to make the most of their student experience Hear from some of our undergraduates about some of the exciting things"
      },
      {
        "heading": {
          "text": "Meet our staff",
          "url": "/meet-our-staff"
        },
        "content": "We understand that applicants and offer holders may have concerns about the ongoing coronavirus (COVID-19) situation and your plans to study with us at Leeds."
      },
      {
        "heading": {
          "text": "Admissions Enquiries"
        },
        "links": [
          {
            "type": "phone",
            "label": "+44 (0)113 3433213",
            "url": "+441133433212"
          },
          {
            "type": "email",
            "label": "Study@leeds.ac.uk",
            "url": "study@leeds.ac.uk"
          }
        ]
      }
    ]
  }
}