<div class="search-result-wrapper">
<section class="search-result search-result-with-tag">
<div class="search-result-content">
<div class="search-result-tag">Result Type Tag</div>
<div class="search-result-heading">
<div class="h5"><a href="">Art and design subjects</a></div>
</div>
<p class="search-result-teaser">Many studies have shown that a stronger connection to nature increases a person’s life satisfaction and happiness, at the same time as lowering anxiety levels.</p>
</div>
</section>
</div>
<div class="search-result-wrapper">
<section class="search-result{% if tag %} search-result-with-tag{% endif %}">
{% if image %}
<div class="search-result-image">
<img src="{{ image.path | path }}"{% if image.srcset %} srcset="{% for src in image.srcset %}{{ src.path | path }} {{ src.width }}w, {% endfor %}{{ image.path | path }}"{% endif %} alt="{{ image.alt }}" />
</div>
{% endif %}
{% if pattern %}
<div class="search-result-pattern search-result-pattern-{{ pattern }}{% if patternColour %} search-result-pattern-{{ patternColour }}{% else %} search-result-pattern-green-blue{% endif %}"></div>
{% endif %}
<div class="search-result-content{% if image %} with-image{% endif %}{% if pattern %} with-pattern{% endif %}">
{% if tag %}<div class="search-result-tag">{{ tag }}</div>{% endif %}
<div class="search-result-heading">
<div class="h5"><a href="{{ link }}">{{ title }}</a></div>
{% if subtitle %}<h5 class="subheading">{{ subtitle }}</h5>{% endif %}
</div>
<p class="search-result-teaser">{{ teasertext }}</p>
{% if metadata %}
<div class="search-result-metadata">
{% for data in metadata %}
<span class="inline-heading">{{ data.key }}:</span> {{ data.value }}
{% endfor %}
</div>
{% endif %}
</div>
</section>
</div>
{
"value": "Acc",
"filterGroups": [
{
"title": "Filter by content type",
"id": "result-type",
"name": "result-type",
"type": "radio",
"filters": [
{
"label": "Course",
"count": 2,
"checked": true,
"id": "result-type-course",
"value": "?query=test&collection=uod-meta&f.result+type%7Ctype=courses"
},
{
"label": "News",
"count": 2,
"id": "result-type-news",
"value": "?query=test&collection=uod-meta&f.result+type%7Ctype=news"
},
{
"label": "Events",
"count": 10,
"id": "result-type-events",
"value": "?query=test&collection=uod-meta&f.result+type%7Ctype=events"
},
{
"label": "Staff",
"count": "0",
"id": "result-type-staff",
"disabled": true,
"value": "?query=test&collection=uod-meta&f.result+type%7Ctype=staff"
},
{
"label": "Case study",
"count": 2,
"id": "result-type-case-study",
"value": "?query=test&collection=uod-meta&f.result+type%7Ctype=case-study"
}
]
},
{
"title": "Filter by level",
"id": "level",
"name": "level",
"type": "checkbox",
"filters": [
{
"label": "Undergraduate",
"count": 2,
"checked": true,
"id": "result-group-undergraduate",
"value": "?query=test&f.level%7CcourseLevel=Undergraduate&collection=uod-meta&f.result+type%7Ctype=courses"
},
{
"label": "Postgraduate",
"count": 10,
"id": "result-group-postgraduate",
"value": "?query=test&f.level%7CcourseLevel=Postgraduate&collection=uod-meta&f.result+type%7Ctype=courses"
},
{
"label": "Professional",
"count": 10,
"id": "result-group-professional",
"value": "?query=test&f.level%7CcourseLevel=Professional&collection=uod-meta&f.result+type%7Ctype=courses"
}
]
},
{
"title": "Filter by study option",
"id": "study-option",
"name": "study-option",
"type": "checkbox",
"filters": [
{
"label": "Full-time",
"count": 2,
"checked": true,
"id": "result-study-option-full-time",
"value": "?query=test&collection=uod-meta&f.result+type%7Ctype=courses&f.study+option%7CstudyOption=Full-time"
},
{
"label": "Part-time",
"count": 2,
"id": "result-study-option-part-time",
"value": "?query=test&collection=uod-meta&f.result+type%7Ctype=courses&f.study+option%7CstudyOption=Part-time"
},
{
"label": "Online",
"count": 10,
"id": "result-study-option-online",
"value": "?query=test&collection=uod-meta&f.result+type%7Ctype=courses&f.study+option%7CstudyOption=Online"
},
{
"label": "CPD",
"count": "0",
"id": "result-study-option-cpd",
"disabled": true,
"value": "?query=test&collection=uod-meta&f.result+type%7Ctype=courses&f.study+option%7CstudyOption=CPD"
}
]
}
],
"title": "Art and design subjects",
"teasertext": "Many studies have shown that a stronger connection to nature increases a person’s life satisfaction and happiness, at the same time as lowering anxiety levels.",
"tag": "Result Type Tag"
}
// defining the colours as a collection allows us to loop through them and generate classnames based on the keys
$search-result-pattern-colours: (
mid-blue: $mid-blue,
strawberry: $strawberry,
yellow: $yellow,
primary-blue: $primary-blue,
turquoise: $turquoise,
orange: $orange,
green: $green,
green-blue: $green-blue
);
.search-result {
@include small-body-font;
lost-flex-container: row;
margin-right: px-to-em(26, 14);
margin-bottom: px-to-em(26, 14);
border-bottom: 1px dashed $dark-grey;
padding-bottom: px-to-em(26, 14);
width: 100%;
color: $text-black;
&-tag {
margin-bottom: px-to-em(6, 14);
text-transform: uppercase;
font-family: $header-font;
}
&-with-tag {
margin-top: px-to-em(36, 14);
&:first-child {
margin-top: 0;
}
}
&-heading {
margin-bottom: px-to-em(17);
}
&-teaser {
margin-bottom: px-to-em(20, 14);
}
&-image {
display: none;
@include for-tablet-portrait-up {
lost-column: 5/16;
display: block;
}
@include for-largerthan-ipad-portrait {
lost-column: 3/10;
}
img {
max-width: 100%;
}
}
&-pattern {
display: none;
@include for-tablet-portrait-up {
lost-column: 5/16;
display: block;
padding-bottom: calc(100% * 5/16);
}
@include for-largerthan-ipad-portrait {
lost-column: 3/10;
display: block;
padding-bottom: calc(100% * 3/10);
}
@each $item, $colour in $search-result-pattern-colours {
&-#{$item} {
&.search-result-pattern-zigzag {
@include pattern-zigzag($colour);
}
&.search-result-pattern-diagonal {
@include pattern-diagonal($colour);
}
&.search-result-pattern-weave {
@include pattern-weave($colour);
}
}
}
}
&-content {
lost-column: 10/10;
&.with-pattern,
&.with-image {
margin-top: -.3em;
@include for-tablet-portrait-up {
lost-column: 11/16;
}
@include for-largerthan-ipad-portrait {
lost-column: 7/10;
}
}
}
&-metadata {
@include body-font;
}
h5, .h5 {
a {
display: inline;
background-image: linear-gradient(transparent calc(100% - 2px), $primary-blue 2px);
background-repeat: no-repeat;
background-size: 0% 100%;
color: $primary-blue;
&:hover,
&:focus {
animation: link-hover-animation-border .5s forwards $default-animation-curve;
background-size: 100% 100%;
}
}
}
&-wrapper {
display: block;
}
}
/*
For go live listing pages as per the designs aren't possible
Using listing pages generated in T4 we want to give search results the same behaviour as a text block
*/
.center-align > .search-result-wrapper, .center-align > .search-result-wrapper-container > .search-result-wrapper{
// mixin that sets a consistent columns width
@include uod-text-column;
}
A generic search result template, to be used for search results where there is no specific format for the result type.