University of Derby

Unistats: Default 

<section class="unistats">
    <h2 id="unistats">Unistats</h2>

    <section class="accordion">
        <div class="accordion-tablist" role="tablist">
            <div class="accordion-tab">
                <a id="full-time-label" href="#full-time" class="accordion-tab-title-container collapse-toggle active" data-collapse role="tab" aria-expanded="true" aria-controls="full-time">
                    <h4 class="accordion-tab-title">
                        Full time
                        <span class="accordion-tab-title-indicator">
                        <i class="uod-icons uod-icons-chevron-down"></i>
                    </span>
                    </h4>
                </a>
                <div id="full-time" class="accordion-tab-content collapse active" role="tabpanel" aria-labelledby="full-time-label">
                    <div class="accordion-tab-content-inner">
                        <iframe id='unistats-widget-frame' title='Unistats KIS Widget' src='//widget.unistats.ac.uk/Widget/10007851/G1203/Vertical/small/en_GB/Full time' scrolling='no' class="unistats-widget unistats-widget-vertical"></iframe>
                        <iframe id='unistats-widget-frame' title='Unistats KIS Widget' src='//widget.unistats.ac.uk/Widget/10007851/G1203/Horizontal/small/en_GB/Full time' scrolling='no' class="unistats-widget unistats-widget-horizontal"></iframe>

                    </div>
                </div>
            </div>
            <div class="accordion-tab">
                <a id="part-time-label" href="#part-time" class="accordion-tab-title-container collapse-toggle" data-collapse role="tab" aria-expanded="false" aria-controls="part-time">
                    <h4 class="accordion-tab-title">
                        Part time
                        <span class="accordion-tab-title-indicator">
                        <i class="uod-icons uod-icons-chevron-down"></i>
                    </span>
                    </h4>
                </a>
                <div id="part-time" class="accordion-tab-content collapse" role="tabpanel" aria-labelledby="part-time-label">
                    <div class="accordion-tab-content-inner">
                        <iframe id='unistats-widget-frame' title='Unistats KIS Widget' src='//widget.unistats.ac.uk/Widget/10007851/G1203/Vertical/small/en_GB/Part time' scrolling='no' class="unistats-widget unistats-widget-vertical"></iframe>
                        <iframe id='unistats-widget-frame' title='Unistats KIS Widget' src='//widget.unistats.ac.uk/Widget/10007851/G1203/Horizontal/small/en_GB/Part time' scrolling='no' class="unistats-widget unistats-widget-horizontal"></iframe>

                    </div>
                </div>
            </div>
            <div class="accordion-tab">
                <a id="full-time-with-industrial-year-label" href="#full-time-with-industrial-year" class="accordion-tab-title-container collapse-toggle" data-collapse role="tab" aria-expanded="false" aria-controls="full-time-with-industrial-year">
                    <h4 class="accordion-tab-title">
                        Full time with industrial year
                        <span class="accordion-tab-title-indicator">
                        <i class="uod-icons uod-icons-chevron-down"></i>
                    </span>
                    </h4>
                </a>
                <div id="full-time-with-industrial-year" class="accordion-tab-content collapse" role="tabpanel" aria-labelledby="full-time-with-industrial-year-label">
                    <div class="accordion-tab-content-inner">
                        <iframe id='unistats-widget-frame' title='Unistats KIS Widget' src='//widget.unistats.ac.uk/Widget/10007851/G1203S/Vertical/small/en_GB/Full time' scrolling='no' class="unistats-widget unistats-widget-vertical"></iframe>
                        <iframe id='unistats-widget-frame' title='Unistats KIS Widget' src='//widget.unistats.ac.uk/Widget/10007851/G1203S/Horizontal/small/en_GB/Full time' scrolling='no' class="unistats-widget unistats-widget-horizontal"></iframe>

                    </div>
                </div>
            </div>
        </div>
    </section>
</section>
 
<section class="unistats">
    <h2 id="unistats">Unistats</h2>
    {% set contents = [] %}
    {% for index, course in courses %}
        {% set content %}
            <iframe id='unistats-widget-frame' title='Unistats KIS Widget' src='//widget.unistats.ac.uk/Widget/10007851/{{course.code}}/Vertical/small/en_GB/{{course.mode}}' scrolling='no' class="unistats-widget unistats-widget-vertical"></iframe>
            <iframe id='unistats-widget-frame' title='Unistats KIS Widget' src='//widget.unistats.ac.uk/Widget/10007851/{{course.code}}/Horizontal/small/en_GB/{{course.mode}}' scrolling='no' class="unistats-widget unistats-widget-horizontal"></iframe>
        {% endset %}
        {% set contents = contents|merge([{ label: course.label, tag: course.label|lower|replace({' ':'-'}), expanded: index == 0, content: content }]) %}
    {% endfor %}
    
    {% include '@accordion' with {
        contents: contents,
        modal: modal
    } %}
</section>
 
{
  "courses": [
    {
      "code": "G1203",
      "mode": "Full time",
      "label": "Full time"
    },
    {
      "code": "G1203",
      "mode": "Part time",
      "label": "Part time"
    },
    {
      "code": "G1203S",
      "mode": "Full time",
      "label": "Full time with industrial year"
    }
  ],
  "modal": null
}
  • Content: 
    .unistats-widget {
    overflow: hidden;
    border: 0px none transparent;
    background: $mid-grey;

    &-vertical {
        width: 190px;
        height: 500px;
        display: block;

        @include for-largerthan-ipad-portrait {
            display: none;
        }
    }
    
    &-horizontal {
        width: 615px;
        height: 150px;
        display: none;

        @include for-largerthan-ipad-portrait {
            display: block;
        }
    }
}

.unistats {
    .accordion-tab-content-inner {
        display: flex;
        justify-content: center
    }
}
  • URL: /components/raw/unistats/unistats.scss
  • Filesystem Path: components/components/unistats/unistats.scss
  • Size: 583 Bytes

Unistats Component

Displays the Unistats banners for a course in an Accordion component, and automatically switches between the horizontal and vertical version of the banner according to the viewport dimensions. Must be supplied the unique course code and valid modes for the course.

Key Features

  • Display of banner contents within Accordion component
  • Automatically opens the first Accordion panel, unless hotlinking directly to a panel
  • Optional specification of modal / plural panel mode for the accordion component

Properties

  • course [required, Array of CourseObject]
  • modal [optional, Boolean, default false]

CourseObject

  • code [required, string]
  • mode [required, string, usually “Part time” or “Full time”]
  • label [required, string]