Copenhagen search results template for federated search

1. search_results.hbs

<div class="container-divider"></div>
<div class="container">
  <nav class="sub-nav">
    {{breadcrumbs}}
      {{search submit=false}}
  </nav>

  
  <div class="search-results">
    <section class="search-results-sidebar">
      {{#if source_filters}}
        <section class="filters-in-section collapsible-sidebar" aria-expanded="false">
          <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
          </button>
          <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_source'}}</h3>
          <ul class="multibrand-filter-list multibrand-filter-list--collapsed">
            {{#each source_filters}}
              <li>
              {{#if selected}}
                <a href="{{url}}" class="sidenav-item current" aria-current="page">
              {{else}}
                <a href="{{url}}" class="sidenav-item">
              {{/if}}
                  <span class="sidenav-subitem filter-name">{{name}}</span>
                  <span class="sidenav-subitem doc-count">({{count}})</span>
                </a>
              </li>
            {{/each}}
            <button class="see-all-filters" aria-hidden="true" aria-label="{{t 'show_more_sources'}}">{{t 'show_more_sources'}}</button>
          </ul>
        </section>
      {{/if}}
      {{#if type_filters}}
        <section class="filters-in-section collapsible-sidebar" aria-expanded="false">
          <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
          </button>
          <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_type'}}</h3>
          <ul class="multibrand-filter-list multibrand-filter-list--collapsed">
            {{#each type_filters}}
              <li>
              {{#if selected}}
                <a href="{{url}}" class="sidenav-item current" aria-current="page">
              {{else}}
                <a href="{{url}}" class="sidenav-item">
              {{/if}}
                  <span class="sidenav-subitem filter-name">{{name}}</span>
                  <span class="sidenav-subitem doc-count">({{count}})</span>
                </a>
              </li>
            {{/each}}
          </ul>
        </section>
      {{/if}}
      {{#if subfilters}}
        <section class="filters-in-section collapsible-sidebar" aria-expanded="false">
          <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
          </button>
          {{#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 class="multibrand-filter-list multibrand-filter-list--collapsed">
            {{#each subfilters}}
              <li>
                {{#if selected}}
                  <a href="{{url}}" class="sidenav-item current" aria-current="page">
                {{else}}
                  <a href="{{url}}" class="sidenav-item">
                {{/if}}
                  <span class="sidenav-subitem filter-name">{{name}}</span>
                  <span class="sidenav-subitem doc-count">({{count}})</span>
                </a>
              </li>
            {{/each}}
            {{#is current_filter.identifier 'knowledge_base'}}
              <button class="see-all-filters" aria-hidden="true" aria-label="{{t 'show_more_categories'}}">{{t 'show_more_categories'}}</button>
            {{/is}}
            {{#is current_filter.identifier 'community'}}
              <button class="see-all-filters" aria-hidden="true" aria-label="{{t 'show_more_topics'}}">{{t 'show_more_topics'}}</button>
            {{/is}}
          </ul>
        </section>
      {{/if}}
    </section>

    <section class="search-results-column">
      <h1 class="search-results-subheading">
        {{#is current_filter.identifier 'unified'}}
          {{t 'results' query=query count=results_count}}
        {{else}}
          {{#unless current_subfilter.identifier}}
            {{t 'results' query=query count=results_count}}
          {{else}}
            {{t 'results_with_scope' query=query count=results_count scope_name=current_subfilter.name}}
          {{/unless}}
        {{/is}}
      </h1>
      {{#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}}
    </section>
  </div>
  {{pagination}}
</div>

2. Sources, Type, Category and Topic filters

<section class="search-results-sidebar">
{{#if source_filters}}
  <section class="filters-in-section collapsible-sidebar" aria-expanded="false">
    <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
    </button>
    <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_source'}}</h3>
    <ul class="multibrand-filter-list multibrand-filter-list--collapsed">
      {{#each source_filters}}
        <li>
        {{#if selected}}
          <a href="{{url}}" class="sidenav-item current" aria-current="page">
        {{else}}
          <a href="{{url}}" class="sidenav-item">
        {{/if}}
            <span class="sidenav-subitem filter-name">{{name}}</span>
            <span class="sidenav-subitem doc-count">({{count}})</span>
          </a>
        </li>
      {{/each}}
      <button class="see-all-filters" aria-hidden="true" aria-label="{{t 'show_more_sources'}}">{{t 'show_more_sources'}}</button>    </ul>
  </section>
{{/if}}
{{#if type_filters}}
  <section class="filters-in-section collapsible-sidebar" aria-expanded="false">
    <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
    </button>
    <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_type'}}</h3>
    <ul class="multibrand-filter-list multibrand-filter-list--collapsed">
      {{#each type_filters}}
        <li>
        {{#if selected}}
          <a href="{{url}}" class="sidenav-item current" aria-current="page">
        {{else}}
          <a href="{{url}}" class="sidenav-item">
        {{/if}}
            <span class="sidenav-subitem filter-name">{{name}}</span>
            <span class="sidenav-subitem doc-count">({{count}})</span>
          </a>
        </li>
      {{/each}}
    </ul>
  </section>
{{/if}}
{{#if subfilters}}
  <section class="filters-in-section collapsible-sidebar" aria-expanded="false">
    <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
    </button>
    {{#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 class="multibrand-filter-list multibrand-filter-list--collapsed">
      {{#each subfilters}}
        <li>
          {{#if selected}}
            <a href="{{url}}" class="sidenav-item current" aria-current="page">
          {{else}}
            <a href="{{url}}" class="sidenav-item">
          {{/if}}
            <span class="sidenav-subitem filter-name">{{name}}</span>
            <span class="sidenav-subitem doc-count">({{count}})</span>
          </a>
        </li>
      {{/each}}
      {{#is current_filter.identifier 'knowledge_base'}}
        <button class="see-all-filters" aria-hidden="true" aria-label="{{t 'show_more_categories'}}">{{t 'show_more_categories'}}</button>
      {{/is}}
      {{#is current_filter.identifier 'community'}}
        <button class="see-all-filters" aria-hidden="true" aria-label="{{t 'show_more_topics'}}">{{t 'show_more_topics'}}</button>
      {{/is}}
    </ul>
  </section>
{{/if}}
</section>

3. Main search results loop

{{#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}}

4. Copenhagen search results CSS

/***** 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;
}

5. Copenhagen search results JS

// 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);
      }
    });
  });