Copenhagen search results template for search across multiple Help Centers
<section class="search-results-sidebar"> | |
{{#if help_center_filters}} | |
<section class="filters-in-section collapsible-sidebar"> | |
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_help_center'}}</h3> | |
<ul> | |
{{#each help_center_filters}} | |
<li> | |
<a href="{{url}}" class="sidenav-item" aria-selected="{{selected}}">{{name}} ({{count}})</a> | |
</li> | |
{{/each}} | |
</ul> | |
</section> | |
{{/if}} | |
{{#if help_center.community_enabled}} | |
<section class="filters-in-section collapsible-sidebar"> | |
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_type'}}</h3> | |
<ul> | |
{{#each filters}} | |
<li> | |
<a href="{{url}}" class="sidenav-item" aria-selected="{{selected}}">{{name}} ({{count}})</a> | |
</li> | |
{{/each}} | |
</ul> | |
</section> | |
{{/if}} | |
{{#if subfilters}} | |
<section class="filters-in-section collapsible-sidebar"> | |
{{#is current_filter.identifier 'knowledge_base'}} | |
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_category'}}</h3> | |
{{/is}} | |
{{#is current_filter.identifier 'community'}} | |
<h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_by_topic'}}</h3> | |
{{/is}} | |
<ul> | |
{{#each subfilters}} | |
<li> | |
<a href="{{url}}" class="sidenav-item" aria-selected="{{selected}}">{{name}} ({{count}})</a> | |
</li> | |
{{/each}} | |
</ul> | |
</section> | |
{{/if}} | |
</section> |
{{#if results}} | |
<ul class="search-results-list"> | |
{{#each results}} | |
<li class="search-result-list-item result-{{type}}"> | |
<h2 class="search-result-title"> | |
<a href="{{url}}" class="results-list-item-link">{{title}}</a> | |
</h2> | |
<article> | |
<div class="search-result-icons"> | |
{{#if vote_sum}} | |
<span class="search-result-votes">{{vote_sum}}</span> | |
{{/if}} | |
{{#if comment_count}} | |
<span class="search-result-meta-count"> | |
{{comment_count}} | |
</span> | |
{{/if}} | |
</div> | |
<ul class="meta-group"> | |
<li> | |
<ol class="breadcrumbs search-result-breadcrumbs"> | |
{{#each path_steps}} | |
<li title="{{name}}"><a href="{{url}}">{{name}}</a></li> | |
{{/each}} | |
</ol> | |
</li> | |
<li class="meta-data">{{author.name}}</li> | |
<li class="meta-data">{{date created_at}}</li> | |
</ul> | |
<div class="search-results-description">{{text}}</div> | |
</article> | |
</li> | |
{{/each}} | |
</ul> | |
{{else}} | |
<p> | |
{{t 'no_results_unified'}} | |
{{#link 'help_center'}} | |
{{t 'browse_help_center'}} | |
{{/link}} | |
</p> | |
{{/if}} |
/***** Search results *****/ | |
.search-results { | |
display: flex; | |
flex-direction: column; | |
flex-wrap: wrap; | |
justify-content: space-between; | |
} | |
@media (min-width: 1024px) { | |
.search-results { | |
flex-direction: row; | |
} | |
} | |
.search-results-column { | |
flex: 1; | |
} | |
@media (min-width: 1024px) { | |
.search-results-column { | |
flex: 0 0 75%; | |
} | |
} | |
.search-results-sidebar { | |
border-top: 1px solid #ddd; | |
flex: 1 0 auto; | |
margin-bottom: 20px; | |
padding: 0; | |
} | |
@media (min-width: 1024px) { | |
.search-results-sidebar { | |
border: 0; | |
flex: 0 0 20%; | |
height: auto; | |
} | |
} | |
.search-results-sidebar .sidenav-item[aria-selected="true"] { | |
background-color: $brand_color; | |
color: $brand_text_color; | |
text-decoration: none; | |
} | |
.search-results-subheading { | |
font-size: 18px; | |
font-weight: 600; | |
} | |
.search-results-list { | |
margin-bottom: 25px; | |
} | |
.search-results-list > li { | |
padding: 20px 0; | |
} | |
.search-results-list > li:first-child { | |
border-top: 1px solid #ddd; | |
} | |
.search-results-list > li h2 { | |
margin-bottom: 0; | |
} | |
.search-result-title { | |
font-size: 16px; | |
} | |
.search-result-description { | |
margin-top: 15px; | |
word-break: break-word; | |
} | |
.search-result-votes, .search-result-meta-count { | |
color: lighten($text_color, 20%); | |
display: inline-block; | |
font-size: 13px; | |
font-weight: 300; | |
padding: 4px 5px; | |
position: relative; | |
} | |
.search-result-votes::before, .search-result-meta-count::before { | |
color: $brand_color; | |
} | |
[dir="ltr"] .search-result-votes, [dir="ltr"] .search-result-meta-count { | |
margin-left: 5px; | |
} | |
[dir="ltr"] .search-result-votes::before, [dir="ltr"] .search-result-meta-count::before { | |
margin-right: 3px; | |
} | |
[dir="rtl"] .search-result-votes, [dir="rtl"] .search-result-meta-count { | |
margin-right: 5px; | |
} | |
[dir="rtl"] .search-result-votes::before, [dir="rtl"] .search-result-meta-count::before { | |
margin-left: 3px; | |
} | |
.search-result-votes::before { | |
content: "\1F44D"; | |
} | |
.search-result-meta-count::before { | |
content: "\1F4AC"; | |
} | |
.search-result .meta-group { | |
align-items: center; | |
} | |
.search-result-breadcrumbs { | |
margin: 0; | |
} | |
.search-result-breadcrumbs li:last-child::after { | |
content: "·"; | |
display: inline-block; | |
margin: 0 5px; | |
} | |
/* Non-latin search results highlight */ | |
/* Add a yellow background for Chinese */ | |
html[lang|="zh"] .search-result-description em { | |
font-style: normal; | |
background: yellow; | |
} | |
/* Use bold to highlight for the rest of supported non-latin languages */ | |
html[lang|="ar"] .search-result-description em, | |
html[lang|="bg"] .search-result-description em, | |
html[lang|="el"] .search-result-description em, | |
html[lang|="he"] .search-result-description em, | |
html[lang|="hi"] .search-result-description em, | |
html[lang|="ko"] .search-result-description em, | |
html[lang|="ja"] .search-result-description em, | |
html[lang|="ru"] .search-result-description em, | |
html[lang|="th"] .search-result-description em { | |
font-style: bold; | |
} |
// Toggles expanded aria to collapsible elements | |
var collapsible = document.querySelectorAll('.collapsible-nav, .collapsible-sidebar'); | |
Array.prototype.forEach.call(collapsible, function(el) { | |
var toggle = el.querySelector('.collapsible-nav-toggle, .collapsible-sidebar-toggle'); | |
el.addEventListener('click', function(e) { | |
toggleNavigation(toggle, this); | |
}); | |
el.addEventListener('keyup', function(e) { | |
if (e.keyCode === 27) { // Escape key | |
closeNavigation(toggle, this); | |
} | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment