Fix users listing styling

src/templates/users/index.pug

@@ -16,9 +16,9 @@ style.
 
 | {% block body %}
 
-#search-container
+#search-container.d-flex
-	#search-sidebar
+	.search-settings#search-sidebar.bg-light
-		input.search-field(
+		input.search-field.p-2.bg-white(
 				type="text",
 				name="q",
 				id="q",
@@ -32,27 +32,24 @@ style.
 			#accordion.panel-group.accordion(role="tablist", aria-multiselectable="true")
 				#facets
 
-		#pagination
+		#pagination.mt-3
+		#facets
+		#stats.search-list-stats
 
-		.search-list-stats
+	.border-left.search-list#search-list
-			#stats
-
-	#search-list
 		#hits
 
-	#search-details
+	#search-details.border-left.search-details
-		#search-hit-container
+		#search-error
+		#search-hit-container.w-100
 
 
 | {% raw %}
 // Facet template
 script(type="text/template", id="facet-template")
-	.panel.panel-default
+	.card.border-0.p-0.m-2
-		a(data-toggle='collapse', data-parent='#accordion', href='#filter_{{ facet }}', aria-expanded='true', aria-controls='filter_{{ facet }}')
+		.card-body.p-3.m-0
-			.panel-heading(role='tab')
+			h6.text-muted {{ title }}
-				.panel-title {{ title }}
-		.panel-collapse.collapse.in(id='filter_{{ facet }}', role='tabpanel', aria-labelledby='headingOne')
-			.panel-body
 			| {{#values}}
 			a.facet_link.toggleRefine(
 				class='{{#refined}}refined{{/refined}}',
@@ -61,17 +58,16 @@ script(type="text/template", id="facet-template")
 				href='#')
 				span
 					| {{ label }}
-						small.facet_count.text-muted.pull-right {{ count }}
+					small.text-black-50.float-right {{ count }}
 			| {{/values}}
 
 
 // Hit template
 script(type="text/template", id="hit-template")
-	.search-hit.users(data-user-id='{{ objectID }}')
+	.search-hit.users.cursor-pointer.p-2.border-bottom(data-user-id='{{ objectID }}')
-		.search-hit-name
+		h6.mb-0.font-weight-bold {{ full_name }}
-			| {{ full_name }}
+		small {{ username }}
-			small ({{ username }})
+		small.d-block.search-hit-roles.text-info
-		.search-hit-roles
 			| {{ roles }}
 
 
@@ -86,8 +82,8 @@ script(type="text/template", id="pagination-template")
 
 // Stats template
 script(type="text/template", id="stats-template")
-	h5 {{ nbHits }} result{{#nbHits_plural}}s{{/nbHits_plural}}
+	span {{ nbHits }} result{{#nbHits_plural}}s{{/nbHits_plural}}
-		span  ({{ processingTimeMS }}ms)
+		small  ({{ processingTimeMS }}ms)
 | {% endraw %}
 
 | {% endblock %}