University of Leeds Design System v1.0.13

Section Nav Related Content: Long Email Address

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 optional-new-style" 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">

                Long email address

            </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">
                    ihaveratheralongemailaddress@domainnamewhichislong.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": "Long email address"
        },
        "links": [
          {
            "type": "phone",
            "label": "+44 (0)113 3433213",
            "url": "+441133433212"
          },
          {
            "type": "email",
            "label": "ihaveratheralongemailaddress@domainnamewhichislong.ac.uk",
            "url": "study@leeds.ac.uk"
          }
        ]
      }
    ],
    "additional_style": "optional-new-style"
  }
}