Merge pull request #670 from zendesk/malgorzata/kiaw-1464-fix-reading-order

style: change order of the filters title with toggle button

Author: xovnsi

templates/search_results.hbs

@@ -14,6 +14,7 @@
   <div class="search-results">
     <aside class="search-results-sidebar">
       {{#if source_filters}}
+        <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_source'}}</h3>
         <section class="filters-in-section collapsible-sidebar">
           <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false" aria-label="{{t 'search_result_source_menu'}}">
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon chevron-icon">
@@ -23,7 +24,6 @@
               <path stroke="currentColor" stroke-linecap="round" d="M3 9l6-6m0 6L3 3"/>
             </svg>
           </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>
@@ -43,6 +43,7 @@
       {{/if}}
       {{#if type_filters}}
         <section class="filters-in-section collapsible-sidebar">
+          <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_type'}}</h3>
           <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false" aria-label="{{t 'search_result_type_menu'}}">
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon chevron-icon">
               <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
@@ -51,7 +52,6 @@
               <path stroke="currentColor" stroke-linecap="round" d="M3 9l6-6m0 6L3 3"/>
             </svg>
           </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>
@@ -70,6 +70,12 @@
       {{/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}}
           <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false" aria-label="{{t 'search_result_subfilter_menu'}}">
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon chevron-icon">
               <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
@@ -78,12 +84,6 @@
               <path stroke="currentColor" stroke-linecap="round" d="M3 9l6-6m0 6L3 3"/>
             </svg>
           </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>
@@ -108,6 +108,7 @@
       {{/if}}
       {{#if content_tag_filters}}
         <section class="filters-in-section collapsible-sidebar">
+          <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_content_tag'}}</h3>
           <button type="button" class="collapsible-sidebar-toggle" aria-expanded="false">
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" focusable="false" viewBox="0 0 12 12" aria-hidden="true" class="collapsible-sidebar-toggle-icon chevron-icon">
               <path fill="none" stroke="currentColor" stroke-linecap="round" d="M3 4.5l2.6 2.6c.2.2.5.2.7 0L9 4.5"/>
@@ -116,7 +117,6 @@
               <path stroke="currentColor" stroke-linecap="round" d="M3 9l6-6m0 6L3 3"/>
             </svg>
           </button>
-          <h3 class="collapsible-sidebar-title sidenav-title">{{t 'filter_content_tag'}}</h3>
           <ul class="multibrand-filter-list multibrand-filter-list--collapsed">
             {{#each content_tag_filters}}
             	{{#if selected}}