University of Leeds Design System v1.0.13

Publications List: Authors Date And Link

Guidance

This component is used to display information about a users publications.

Publications are advised to appear in one of two locations:

  • In an article person profile page within an accordion
  • In search results pages

For each publication:

Required fields:

  • Publication title
  • Publication link URL (at least one, can be more)

Optional fields:

  • Category
  • Parent title
  • Authors (comma separated list)
  • Editors (comma separated list)
  • Other information consisting of title/value pairs eg. ‘Online publication date: 2014-11-18 Edition: 1 Series: 2 Volume: 60 Issue: 3 Begin page: 707 End page: 754’

When used within an accordion on a profile page:

  • Category not shown
  • A limit of 5 publications can be listed in each accordion. If a person has published more than 5, a ‘View more on the publications page’ link will display at the bottom of the accordion, which will take the user to the Publications Search Page.

Search page

The search results page is specific to a particular user and is searchable via a keyword search box and filters for publication type and year published. Once live this page should dynamically update results when filters are selected. Within the design system there is a placeholder for chips, this area is for chip selection following filter selection.

Developer guidance / sample config

Publications use the @uol-info-list component to display authors and editors

'title': 'Research and Education in Computational Science and Engineering',
'category': 'Journal article',
'parent': 'Computational Science',
'info_list': [
  {
    'term': 'Authors',
    'data': [
      {
        'label': 'Rüde U, Willcox K, McInnes LC, Sterck HD, Biros G, Bungartz H-J, Corones J, Cramer E, Crowley J, Ghattas O, Gunzburger MD, Hanke M, Harrison RJ, Heroux MA, Hesthaven JS, Jimack PK, Johnson C'
      }
    ]
  },
  {
    'term': 'Editors',
    'data': [
      {
        'label': 'Jordan KE, Keyes DE, Krause RH, Kumar V, Mayer S, Meza J, Mørken KM, Oden JT, Petzold LR, Raghavan P, Shontz SM, Trefethen AE, Turner PR, Voevodin VV, Wohlmuth BI, Woodward C'
      }
    ]
  },
],
'details': [
  { 'title': 'Online publication date', 'value': '2014-11-18' },
  { 'title': 'Edition', 'value': '1' },
  { 'title': 'Series', 'value': '2' },
  { 'title': 'Volume', 'value': '60' },
  { 'title': 'Issue', 'value': '3' },
  { 'title': 'Begin page', 'value': '707' },
  { 'title': 'End page', 'value': '754' }
],
'links': [
  {
    'url': '#',
    'url_name': 'White Rose Research Online'
  },
  {
    'url': '#',
    'url_name': 'external website'
  }
],
'further_publications': {
  'link_title': 'View more on the publications page',
  'link_url': '#'
}
<div class="uol-publications-list">
  {# Required title #}
  <div class="uol-publications-list__publication-title">{{ title }}</div>
  
  {# Optional category #}
  {% if category %}
    <div class="uol-publications-list__content-group">
      <span class="uol-publications-list__category">{{ category }}</span>
    </div>
  {% endif %}

  {# Optional parent #}
  {% if parent %}
    <div class="uol-publications-list__content-group">
      <span class="uol-publications-list__title">Parent title: </span>
      <span>{{ parent }}</span>
    </div>
  {% endif %}

  {# Optional authors and editors #}
  {% render '@uol-info-list', { info_list: info_list } %}

  {# Optional further information #}
  {% if details %}
    <div class="uol-publications-list__content-group">
      {% for detail in details %}
        <span class="uol-publications-list__title">{{ detail.title }}: </span>
        <span class="uol-publications-list__value">{{ detail.value }}</span> 
      {% endfor %}
    </div>
  {% endif %}
  
  {# Required - at least one link to link to publication #}
  <div class="uol-publications-list__link-container">
    {% for link in links %}
      <div class="uol-publications-list__link-outer">
        <a class="uol-publications-list__content-group uol-publications-list__link" href="{{ link.url }}">
          <span>Open publication on </span>
          <span>{{ link.url_name }}</span>
        </a>
      </div>
    {% endfor %}
  </div>

</div>
 
<div class="uol-publications-list">

    <div class="uol-publications-list__publication-title">An Optimal Control Method for Time-dependent Fluid-structure Interaction Problems</div>

    <div class="uol-info-list-container">
        <dl class="uol-info-list ">

            <div class="uol-info-list__group">
                <dt class="uol-info-list__term ">Authors</dt>

                <dd class="uol-info-list__data ">

                    Wang Y, Jimack PK, Walkley MA, Yang D, Thompson HM

                </dd>

            </div>

        </dl>
    </div>

    <div class="uol-publications-list__content-group">

        <span class="uol-publications-list__title">Online publication date: </span>
        <span class="uol-publications-list__value">2019-01-04</span>

    </div>

    <div class="uol-publications-list__link-container">

        <div class="uol-publications-list__link-outer">
            <a class="uol-publications-list__content-group uol-publications-list__link" href="#">
                <span>Open publication on </span>
                <span>external website</span>
            </a>
        </div>

    </div>

</div>
  • Content: 
    .uol-publications-list {
  margin-bottom: $spacing-6;

    @include media(">=uol-media-m") {
      margin-bottom: $spacing-7;
    }
    
    & .uol-info-list {
      @extend .uol-typography-paragraph-small;
      
      margin: 0;
    }
    
    & .uol-info-list__data {
      float: none;
    }
    
    & .uol-info-list__group {
      margin-top: $spacing-3; 
    }

}

  .uol-publications-list__publication-title {
    @extend %text-size-paragraph;
    @extend %uol-font-sans-serif;
    
    font-weight: $font-weight-bold--sans-serif;
    color: $color-brand--dark;
  }

 

  //  TO DO (potentially), if back end required individual fields this adds comma between them
  // .uol-publications-list__author-name,
  // .uol-publications-list__editor-name {

  //   &:not(:last-child):after {
  //     content: ", ";
  //   }
  // }

  .uol-publications-list__content-group {
    // @extend .text-size-paragraph;
    @extend .uol-typography-paragraph-small;

    margin-top: $spacing-3;
  }

  .uol-publications-list__title {
    font-weight: $font-weight-bold--sans-serif;
  }

  .uol-publications-list__category {
    font-weight: $font-weight-bold--sans-serif;
    color: $color-blue--dark;
  }
  
  .uol-publications-list__link-container {
    @extend .uol-typography-paragraph-small;
    
    margin-top: $spacing-3;
  }
  
  .uol-publications-list__link-outer {
    margin-top: $spacing-3;
  }
  .uol-publications-list__link {
    @extend .uol-typography-paragraph-small;
    @include link_focus(2px);
    
    display: inline-block;
    margin-top: 0;

    &:hover {
      text-decoration-color: $color-brand;
    }
  }

  .uol-publications-list__further-link {
    @extend .uol-typography-paragraph;
    @include link_focus(2px);
    
    display: inline-block;
    margin-top: 0;

    &:hover {
      text-decoration: underline;
    }

    @include media(">=uol-media-l") {
      margin-top: 0;
    }
  }
  • URL: /components/raw/uol-publications-list/_publications-list.scss
  • Filesystem Path: src/library/02-components/publications-list/_publications-list.scss
  • Size: 1.9 KB 
{
  "title": "An Optimal Control Method for Time-dependent Fluid-structure Interaction Problems",
  "links": [
    {
      "url": "#",
      "url_name": "external website"
    }
  ],
  "info_list": [
    {
      "term": "Authors",
      "data": [
        {
          "label": "Wang Y, Jimack PK, Walkley MA, Yang D, Thompson HM"
        }
      ]
    }
  ],
  "details": [
    {
      "title": "Online publication date",
      "value": "2019-01-04"
    }
  ]
}