University of Leeds Design System v1.0.19

Staff A-Z New: With Results

No notes defined.

<div class="uol-col-container uol-col-debugx">
  <div class="uol-staff-a-z">
    {% render '@uol-page-heading', { page_heading: page_heading } %}

    {% render '@uol-form-pattern', { form: form } %}

    {% if results == 0 %}
      <h2 class="uol-index-table--results">No results for <strong>'{{ search_term }}'</strong></h2>
    {% elseif results %}
        {% render '@uol-index-table', { tables: results }%}
        {% render '@uol-pagination', { pagination: pagination } %}
    {% else %}
        {% render '@uol-highlight-block', { content: highlight_content } %}
    {% endif %}

  </div>
</div>
 
<div class="uol-col-container uol-col-debugx">
    <div class="uol-staff-a-z">
        <header class="page-heading">

            <h1 class="page-heading__title">
                <span class="page-heading__title__main">Staff A-Z</span>

            </h1>

        </header>

        <div class="uol-form__container   ">

            <div class="uol-form__inner-wrapper">

                <form class="uol-form" action="/example-form-action" role=search>

                    <div class="uol-form__input-group  uol-form__input-group--block">

                    </div>

                    <div class="uol-form--button-inline">

                        <div class="uol-form__inputs-wrapper">

                            <div class="uol-form__input-container 
">

                                <label class="uol-form__input-label" for="search-term">
                                    <span class="uol-form__input-label__text">Search by surname (required)</span>

                                    <span class="uol-form__input-label__hint">Lorem ipsum dolor sit </span>

                                </label>

                                <div class="uol-form__input-wrapper
               uol-form__input-wrapper--search
               uol-form__input-wrapper--with-icon " data-field-invalid=false>

                                    <!--  -->

                                    <input class="uol-form__input  uol-form__input--search" type="search" id="search-term" name="search-term" value="ab" minlength="2" autocomplete="off" required>

                                    <!--  -->
                                </div>

                            </div>

                        </div>

                        <div class="uol-form__button-wrapper">
                            <button class="uol-button uol-button--
    " type="submit">Search</button>

                        </div>

                    </div>

                </form>

                <div class="uol-rich-text">
                    <div class="uol-form__additional-content uol-form__additional-content--after">
                        <p>Or view the <a href="https://www.leeds.ac.uk/forstaff/homepage/375/services">list of service websites</a>.</p>
                    </div>
                </div>

            </div>

        </div>

        <div class="uol-index-table--results-container">
            <h2 class="uol-index-table--results">3 results for <strong>'ab'</strong></h2>
        </div>

        <table class="uol-index-table js-uolTableStackable  uol-index-table--search-results">

            <thead>
                <tr>

                    <th class="uol-index-table__th  " data-sortable=true>
                        Name
                    </th>

                    <th class="uol-index-table__th  " data-sortable=true>
                        Role
                    </th>

                    <th class="uol-index-table__th  ">
                        Location
                    </th>

                    <th class="uol-index-table__th  ">
                        Phone
                    </th>

                    <th class="uol-index-table__th  ">
                        Email
                    </th>

                </tr>
            </thead>

            <tbody>

                <tr>

                    <td class="uol-index-table__td  " data-value="Dr Micha Khalida">

                        Dr Micha Khalida

                    </td>

                    <td class="uol-index-table__td  " data-value="Post Doc Research Fellow">

                        Post Doc Research Fellow

                    </td>

                    <td class="uol-index-table__td  " data-value="Location name 1">

                        Location name 1

                    </td>

                    <td class="uol-index-table__td  uol-index-table__td--type-numeric" data-value="01234 567890">

                        01234 567890

                    </td>

                    <td class="uol-index-table__td  " data-value="name@leeds.ac.uk">

                        name@leeds.ac.uk

                    </td>

                </tr>

                <tr>

                    <td class="uol-index-table__td  " data-value="Keaton Emmet">

                        Keaton Emmet

                    </td>

                    <td class="uol-index-table__td  " data-value="Business Process Analyst">

                        Business Process Analyst

                    </td>

                    <td class="uol-index-table__td  " data-value="Location name 2">

                        Location name 2

                    </td>

                    <td class="uol-index-table__td  uol-index-table__td--type-numeric" data-value="01234 567890">

                        01234 567890

                    </td>

                    <td class="uol-index-table__td  " data-value="name@leeds.ac.uk">

                        name@leeds.ac.uk

                    </td>

                </tr>

                <tr>

                    <td class="uol-index-table__td  " data-value="Felicia Parnel">

                        Felicia Parnel

                    </td>

                    <td class="uol-index-table__td  " data-value="School Manager">

                        School Manager

                    </td>

                    <td class="uol-index-table__td  " data-value="Location name 2">

                        Location name 2

                    </td>

                    <td class="uol-index-table__td  uol-index-table__td--type-numeric" data-value="01234 567890">

                        01234 567890

                    </td>

                    <td class="uol-index-table__td  " data-value="name@leeds.ac.uk">

                        name@leeds.ac.uk

                    </td>

                </tr>

            </tbody>

        </table>

        <nav class="uol-pagination" aria-label="pagination">
            <ol class="uol-pagination__list">
                <li class="uol-pagination__item">

                    <button class="uol-button uol-button--primary uol-icon uol-icon--icon-only uol-icon--mdiPageFirst" type="button" disabled>First page</button>

                </li>
                <li class="uol-pagination__item">

                    <button class="uol-button uol-button--primary uol-icon uol-icon--icon-only uol-icon--mdiArrowLeft" type="button" disabled>Previous page</button>

                </li>

                <li class="uol-pagination__item uol-pagination__item--numeric uol-pagination__item--current">
                    <a class="uol-button uol-button--secondary uol-icon uol-icon--icon-only uol-pagination__link" href="/page-1" data-number="1" aria-current=page>
                        <span class="uol-icon__label">
                            <span class="hide-accessible">Page </span>1
                        </span>
                    </a>
                </li>

                <li class="uol-pagination__item uol-pagination__item--numeric ">
                    <a class="uol-button uol-button--secondary uol-icon uol-icon--icon-only uol-pagination__link" href="/page-2" data-number="2">
                        <span class="uol-icon__label">
                            <span class="hide-accessible">Page </span>2
                        </span>
                    </a>
                </li>

                <li class="uol-pagination__item uol-pagination__item--numeric ">
                    <a class="uol-button uol-button--secondary uol-icon uol-icon--icon-only uol-pagination__link" href="/page-3" data-number="3">
                        <span class="uol-icon__label">
                            <span class="hide-accessible">Page </span>3
                        </span>
                    </a>
                </li>

                <li class="uol-pagination__item">

                    <a href="/page-2" class="uol-button uol-button--primary uol-icon uol-icon--icon-only uol-icon--mdiArrowRight">Next page</a>

                </li>
                <li class="uol-pagination__item">

                    <a href="/page-4" class="uol-button uol-button--primary uol-icon uol-icon--icon-only uol-icon--mdiPageLast">Last page</a>

                </li>
            </ol>

            <span class="uol-pagination__status">
                Page 1 of 4
            </span>
        </nav>

    </div>
</div>
 
{
  "page_heading": {
    "title": "Staff A-Z"
  },
  "form": {
    "button_inline": true,
    "action": "/example-form-action",
    "button": {
      "content": "Search",
      "type": "submit"
    },
    "fields": [
      {
        "type": "search",
        "id": "search-term",
        "name": "search-term",
        "label": "Search by surname",
        "hint": "Lorem ipsum dolor sit",
        "minlength": 2,
        "has_icon": true,
        "invalid": false,
        "required": true,
        "value": "ab"
      }
    ],
    "additional_info_after": "<p>Or view the <a href=\"https://www.leeds.ac.uk/forstaff/homepage/375/services\">list of service websites</a>.</p>"
  },
  "highlight_content": "<ul><li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut <a href=\"/some-link-1\">labore et dolore magna aliqua</a>.</li><li>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut <a href=\"/some-link-2\">aliquip ex ea commodo consequat</a>.</li><li>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum <a href=\"/some-link-3\">dolore eu fugiat nulla pariatur</a>.</li></ul>",
  "results": [
    {
      "stackable": true,
      "search_results": {
        "caption": "search cap",
        "term": "ab",
        "items": []
      },
      "headings": [
        {
          "sortable": true,
          "label": "Name"
        },
        {
          "sortable": true,
          "label": "Role"
        },
        {
          "label": "Location"
        },
        {
          "label": "Phone"
        },
        {
          "label": "Email"
        }
      ],
      "rows": [
        {
          "cells": [
            {
              "content": "Dr Micha Khalida"
            },
            {
              "content": "Post Doc Research Fellow"
            },
            {
              "content": "Location name 1"
            },
            {
              "type": "numeric",
              "content": "01234 567890"
            },
            {
              "content": "name@leeds.ac.uk"
            }
          ]
        },
        {
          "cells": [
            {
              "content": "Keaton Emmet"
            },
            {
              "content": "Business Process Analyst"
            },
            {
              "content": "Location name 2"
            },
            {
              "type": "numeric",
              "content": "01234 567890"
            },
            {
              "content": "name@leeds.ac.uk"
            }
          ]
        },
        {
          "cells": [
            {
              "content": "Felicia Parnel"
            },
            {
              "content": "School Manager"
            },
            {
              "content": "Location name 2"
            },
            {
              "type": "numeric",
              "content": "01234 567890"
            },
            {
              "content": "name@leeds.ac.uk"
            }
          ]
        }
      ]
    }
  ],
  "pagination": {
    "current": 1,
    "pages": [
      {
        "number": 1,
        "url": "/page-1"
      },
      {
        "number": 2,
        "url": "/page-2"
      },
      {
        "number": 3,
        "url": "/page-3"
      },
      {
        "number": 4,
        "url": "/page-4"
      }
    ]
  }
}