<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 data-group="" 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 data-group="" 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 data-group="" 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": true
}
.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
}
}
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.