Style elasticsearch (bug: 1465107)

behatnotneeded

Change-Id: Id1c17fd3c926a09e24080e454aba672dc9a62549

htdocs/lib/mahara.php

@@ -3848,14 +3848,14 @@ function build_portfolio_search_html(&$data) {
     foreach ($data->data as &$item) {
         $item->ctime = format_date($item->ctime);
         if ($item->type == 'view') {
-            $item->typestr = 'file';
+            $item->typestr = $item->type;
             $item->typelabel = get_string('view');
             $v = new View(0, (array)$item);
             $v->set('dirty', false);
             $item->url = $v->get_url();
         }
         else if ($item->type == 'collection') {
-            $item->typestr = 'folder-open';
+            $item->typestr = $item->type;
             $item->typelabel = get_string('Collection', 'collection');
             $c = new Collection(0, (array)$item);
             $item->url = $c->get_url();
@@ -3866,13 +3866,9 @@ function build_portfolio_search_html(&$data) {
             $item->url     = $links['_default'];
             $item->typestr = $item->artefacttype;
             if ($item->artefacttype == 'task') {
-                $item->typestr = 'tasks';
                 $item->typelabel = get_string('Task', 'artefact.plans');
             }
             else {
-                if ($item->artefacttype == 'plan') {
-                    $item->typestr = 'plans';
-                }
                 $item->typelabel = get_string($item->artefacttype, 'artefact.' . $artefacttypes[$item->artefacttype]->plugin);
             }
         }

htdocs/search/elasticsearch/index.php

@@ -70,27 +70,49 @@ if (get_config('licensemetadata')) {
 
 PluginSearchElasticsearch::build_results_html($data);
 
+$searchoptions = array(
+    'all' => get_string('All'),
+    'tagsonly' => get_string('tagsonly', 'view'),
+);
+
+if (isset($options['tagsonly']) && $options['tagsonly'] == true) {
+    $selectvalue = 'tagsonly';
+}
+else {
+    $selectvalue = 'all';
+}
+
 $searchform = array(
     'name' => 'search',
-    'renderer' => 'oneline',
+    'renderer' => 'div',
     'checkdirtychange' => false,
-    'elements' => array(),
-);
-
-$searchform['elements']['query'] = array(
-    'type' => 'text',
-    'defaultvalue' => $query,
-    'title'        => get_string('pagetitle', 'search.elasticsearch'),
-    'hiddenlabel'  => true,
-);
-$searchform['elements']['submit'] = array(
-    'type' => 'submit',
-    'value' => get_string('search'),
-);
-$searchform['elements']['tagsonly'] = array(
-    'type'         => 'switchbox',
-    'value'        => (isset($options['tagsonly']) && $options['tagsonly'] == true) ? true : false,
-    'title'        => get_string('tagsonly', 'search.elasticsearch'),
+    'class' => 'form-inline with-heading elasticsearch-form',
+    'elements' => array(
+        'searchwithin' => array (
+            'type' => 'fieldset',
+            'class' => 'dropdown-group js-dropdown-group',
+            'elements' => array(
+                'query' => array(
+                    'type' => 'text',
+                    'title' => get_string('pagetitle', 'search.elasticsearch') . ': ',
+                    'class' => 'with-dropdown js-with-dropdown',
+                    'defaultvalue' => $query,
+                ),
+                'tagsonly' => array(
+                    'title' => get_string('searchwithin'). ': ',
+                    'class' => 'dropdown-connect js-dropdown-connect searchviews-type',
+                    'type' => 'select',
+                    'options' => $searchoptions,
+                    'value' => $selectvalue,
+                ),
+                'submit' => array(
+                    'type' => 'submit',
+                    'class' => 'btn-primary no-label input-group',
+                    'value' => get_string('search'),
+                )
+            )
+        ),
+    ),
 );
 
 $searchform = pieform($searchform);
@@ -120,7 +142,15 @@ addLoadEvent(function () {
     connect('search_submit', 'onclick', function (event) {
         firstpage = true;
         replaceChildNodes('messages');
-        var params = {'query': $('search_query').value, 'tagsonly': $('search_tagsonly').checked, 'limit': $('setlimitselect').value, 'extradata':serializeJSON({'page':'index'})};
+
+        if ($('search_tagsonly').value === 'tagsonly') {
+            var tagsonly = true;
+        }
+        else {
+            var tagsonly = false;
+        }
+
+        var params = {'query': $('search_query').value, 'tagsonly': tagsonly, 'mainfacetterm': null,'limit': $('setlimitselect').value, 'extradata':serializeJSON({'page':'index'})};
         p.sendQuery(params);
         event.stop();
     });

htdocs/search/elasticsearch/type/ElasticsearchType_artefact.php

@@ -258,7 +258,6 @@ class ElasticsearchType_artefact extends ElasticsearchType
 
         $record->title = str_replace(array("\r\n", "\n", "\r"), ' ', strip_tags($record->title));
         $record->description = str_replace(array("\r\n", "\n", "\r"), ' ', strip_tags($record->description));
-
         // If user is owner
         if ($USER->get('id') == $record->owner) {
             switch ($record->artefacttype) {
@@ -316,6 +315,7 @@ class ElasticsearchType_artefact extends ElasticsearchType
                     }
                     break;
                 case 'socialprofile':
+                    safe_require('artefact', 'internal');
                     $record->note = str_replace(array("\r\n", "\n", "\r"), ' ', strip_tags($record->note));
                     $socialprofile = new ArtefactTypeSocialprofile($record->id);
                     $icons = $socialprofile->get_profile_icons(array($record));
@@ -386,7 +386,7 @@ class ElasticsearchType_artefact extends ElasticsearchType
         }
 
         //  Thumb
-        if ($record->artefacttype == 'image') {
+        if ($record->artefacttype == 'image' || $record->artefacttype == 'profileicon') {
             if (isset($record->width) && isset($record->height) && intval($record->width) > 0 && intval($record->height) > 0) {
                 if ($record->width > $record->height) {
                     $size = '80x' . intval($record->height * 80 / $record->width);

htdocs/theme/raw/plugintype/search/elasticsearch/templates/block_instance.tpl

-
-{if $record->link}
-    <h3 class="title">
-        <a href="{$WWWROOT}{$record->link}">{$record->title|str_shorten_html:50:true|safe}</a>
-{else}
-    <h3 class="title">{$record->title|str_shorten_html:50:true|safe}
-{/if}
-<span class="artefacttype">
-    ({str tag=document section=search.elasticsearch})
-    {if $record->deleted}
-        ({str tag=deleted section=search.elasticsearch})
-    {/if}
-</span></h3>
-{if $record->createdbyname}
-    <div class="createdby">{str tag=createdby section=search.elasticsearch arg1='<a href="`$record->createdby|profile_url`">`$record->createdbyname|safe`</a>'}</div>
-{/if}
-<div class="detail">{$record->description|str_shorten_html:100:true|safe}</div>
-<!-- VIEWS -->
-{if $record->views|count gt 0}
-    <div class="usedon">
-        {if $record->views}
-            <strong>{str tag=usedonpage section=search.elasticsearch}:</strong>
-            <ul>
-            {foreach from=$record->views key=id item=view}
-                <li><a href="{$WWWROOT}view/view.php?id={$id}">{$view|str_shorten_html:50:true|safe}</a>
-                </li>
+<div class="row">
+    <div class="col-md-8">
+        {if $record->link}
+            <h3 class="title list-group-item-heading text-inline">
+                <span class="icon icon-file left"></span>
+                <a href="{$WWWROOT}{$record->link}">{$record->title|str_shorten_html:50:true|safe}</a>
+            </h3>
+        {else}
+            <h3 class="title list-group-item-heading text-inline">
+                <span class="icon icon-file left"></span>
+                {$record->title|str_shorten_html:50:true|safe}
+            </h3>
+        {/if}
+        <span class="artefacttype text-lighttone">
+            ({str tag=document section=search.elasticsearch})
+            {if $record->deleted}
+                ({str tag=deleted section=search.elasticsearch})
+            {/if}
+        </span>
+        {if $record->createdbyname}
+            <div class="createdby">{str tag=createdby section=search.elasticsearch arg1='<a href="`$record->createdby|profile_url`">`$record->createdbyname|safe`</a>'}</div>
+        {/if}
+        <div class="detail">{$record->description|str_shorten_html:100:true|safe}</div>
+        <!-- TAGS -->
+        {if $record->tags|count gt 0}
+        <div class="tags"><strong>{str tag=tags section=search.elasticsearch}:</strong>
+            {foreach from=$record->tags item=tag name=tags}
+                <a href="{$WWWROOT}search/elasticsearch/index.php?query={$tag}&tagsonly=true">{$tag}</a>{if !$.foreach.tags.last}, {/if}
             {/foreach}
-            </ul>
+        </div>
         {/if}
     </div>
-{/if}
-<!-- end VIEWS -->
-<!-- TAGS -->
-{if $record->tags|count gt 0}
-<div class="tags"><strong>{str tag=tags section=search.elasticsearch}:</strong>
-    {foreach from=$record->tags item=tag name=tags}
-        <a href="{$WWWROOT}search/elasticsearch/index.php?query={$tag}&tagsonly=true">{$tag}</a>{if !$.foreach.tags.last}, {/if}
-    {/foreach}
+    <!-- VIEWS -->
+    {if $record->views|count gt 0}
+    <div class="col-md-4">
+        <div class="usedon">
+            {if $record->views}
+                <strong>{str tag=usedonpage section=search.elasticsearch}:</strong>
+                <ul class="list-group list-unstyled">
+                {foreach from=$record->views key=id item=view}
+                    <li><a href="{$WWWROOT}view/view.php?id={$id}">{$view|str_shorten_html:50:true|safe}</a>
+                    </li>
+                {/foreach}
+                </ul>
+            {/if}
+        </div>
+    </div>
+    {/if}
 </div>
-{/if}
-<!-- end TAGS -->
+

htdocs/theme/raw/plugintype/search/elasticsearch/templates/collection.tpl

 {if $record->deleted}
-    <h3 class="title">{$record->name} <span class="artefacttype">({str tag=deleted section=search.elasticsearch})</span></h3>
+    <h3 class="title list-group-item-heading text-inline">
+        <span class="icon icon-folder-open left"></span>
+        {$record->name}
+    </h3>
+    <span class="artefacttype text-lighttone">({str tag=deleted section=search.elasticsearch})</span>
 {else}
-    <h3 class="title"><a href="{$WWWROOT}view/view.php?id={$record->viewid}">{$record->name}</a> <span class="artefacttype">({str tag=collection section=search.elasticsearch})</span></h3>
+    <h3 class="title">
+        <span class="icon icon-folder-open left"></span>
+        <a href="{$WWWROOT}view/view.php?id={$record->viewid}">
+            {$record->name}
+        </a>
+    </h3>
+    <span class="artefacttype">({str tag=collection section=search.elasticsearch})</span>
     {if $record->createdbyname}
         <div class="createdby">{str tag=createdby section=search.elasticsearch arg1='<a href="`$record->createdby|profile_url}">`$record->createdbyname|safe`</a>'}</div>
     {/if}

htdocs/theme/raw/plugintype/search/elasticsearch/templates/facets.tpl

@@ -6,14 +6,27 @@
     - sort
     - tagsonly
 *}
-<div id="totalresultsdisplay" class="totalresults">{str tag=xsearchresultsfory section=search.elasticsearch arg1=$totalresults arg2='<a href="`$WWWROOT`search/elasticsearch/index.php?query=`$query`">`$query`</a>'}</div>
-<div class="tabswrap"><ul class="in-page-tabs searchtab">
-{foreach from=$facets item=term}
-    {if $term.count > 0}
-        <li{if $term.term == $selected} class="current-tab"{/if}>
-        <a href="{$WWWROOT}search/elasticsearch/index.php?query={$query}&mainfacetterm={$term.term}{if $tagsonly}&tagsonly=true{/if}&limit={$limit}"{if $term.term == $selected} class="current-tab"{/if}>{str tag=$term.display section=search.elasticsearch} ({$term.count})<span class="accessible-hidden sr-only">({str tag=tab}{if $term.term == $selected} {str tag=selected}{/if})</span></a></li>
-    {else}
-        <li><span class="inactive">{str tag=$term.display section=search.elasticsearch}<span class="accessible-hidden sr-only">({str tag=tab} {str tag=disabled})</span></span></li>
-    {/if}
-{/foreach}
-</ul></div>
+<div id="totalresultsdisplay" class="totalresults view-description lead">
+    {str tag=xsearchresultsfory section=search.elasticsearch arg1=$totalresults arg2='
+    <a href="`$WWWROOT`search/elasticsearch/index.php?query=`$query`">`$query`</a>'}
+</div>
+<div class="elasticsearch-tabswrap">
+    <ul class="in-page-tabs searchtab nav nav-tabs">
+    {foreach from=$facets item=term}
+        {if $term.count > 0}
+            <li class="{if $term.term == $selected}current-tab active{/if}">
+                <a href="{$WWWROOT}search/elasticsearch/index.php?query={$query}&mainfacetterm={$term.term}{if $tagsonly}&tagsonly=true{/if}&limit={$limit}"{if $term.term == $selected} class="current-tab"{/if}>{str tag=$term.display section=search.elasticsearch} ({$term.count})
+                <span class="accessible-hidden sr-only">({str tag=tab}{if $term.term == $selected} {str tag=selected}{/if})</span>
+                </a>
+            </li>
+        {else}
+            <li>
+                <a class="inactive">
+                    {str tag=$term.display section=search.elasticsearch}
+                    <span class="accessible-hidden sr-only">({str tag=tab} {str tag=disabled})</span>
+                </a>
+            </li>
+        {/if}
+    {/foreach}
+    </ul>
+</div>

htdocs/theme/raw/plugintype/search/elasticsearch/templates/group.tpl

 {if $record->deleted}
-    <div class="groupsdetails">
-        <h3 class="title">{$record->name} ({str tag=deleted section=search.elasticsearch})</h3>
-    </div>
+    <h3 class="title list-group-item-heading">
+        <span class="icon icon-users left text-lighttone"></span>
+        {$record->name} ({str tag=deleted section=search.elasticsearch})
+    </h3>
 {else}
     <div class="groupsdetails">
-        <h3 class="title"><a href="{$WWWROOT}group/view.php?id={$record->id}">{$record->name}</a></h3>
-        <div class="groupadmin">{str tag=groupadmins section=group}:
+        <h3 class="title list-group-item-heading">
+            <span class="icon icon-users left"></span>
+            <a href="{$WWWROOT}group/view.php?id={$record->id}">
+                {$record->name}
+            </a>
+        </h3>
+        <p class="groupdesc">{$record->description|str_shorten_html:140:true|safe}</p>
+        {if $record->groupadmins}
+        <div class="groupadmin text-small">
+            <strong>{str tag=groupadmins section=group}:</strong>
             {foreach name=admins from=$record->groupadmins item=user}
                 <a href="{profile_url($user)}">{$user|display_name}</a>
                 {if !$.foreach.admins.last}, {/if}
             {/foreach}
         </div>
-        <div class="detail">{$record->description|str_shorten_html:140:true|safe}</div>
+        {/if}
     </div>
 {/if}
\ No newline at end of file

htdocs/theme/raw/plugintype/search/elasticsearch/templates/interaction_forum_post.tpl

 {if $record->deleted}
-    <h3 class="title">$record->subject <span class="artefacttype">({str tag=deletedforumpost section=search.elasticsearch})</span></h3>
+    <h3 class="title list-group-item-heading text-inline">
+        <span class="icon icon-commenting-o left"></span>
+        {$record->subject}
+    </h3>
+    <span class="artefacttype text-lighttone">({str tag=deletedforumpost section=search.elasticsearch})</span>
 {else}
-    <h3 class="title"><a href="{$WWWROOT}interaction/forum/topic.php?id={$record->topic}#post{$record->id}">{$record->subject}</a> <span class="artefacttype">({str tag=forumpost section=search.elasticsearch})</span></h3>
+    <h3 class="title list-group-item-heading text-inline">
+        <span class="icon icon-commenting-o left"></span>
+        <a href="{$WWWROOT}interaction/forum/topic.php?id={$record->topic}#post{$record->id}">
+            {$record->subject}
+        </a>
+    </h3>
+    <span class="artefacttype text-lighttone">({str tag=forumpost section=search.elasticsearch})</span>
     <div class="source"><strong>{str tag='forum' section='search.elasticsearch'}:</strong> {$record->forumname} ({$record->groupname})</div>
     <div class="poster"><strong>{str tag='forumpostedbylabel' section='search.elasticsearch'}:</strong> {str tag=forumpostedby section=search.elasticsearch arg1='$record->authorlink|safe' arg2='$record->ctime'}</div>
     <div class="detail">{$record->body|str_shorten_html:140:true:false|safe}</div>

htdocs/theme/raw/plugintype/search/elasticsearch/templates/interaction_instance.tpl

 {if $record->deleted}
-    <h3 class="title">{$record->title}</h3>
+    <span class="icon icon-comments-o left text-lighttone"></span>
+    <h3 class="title list-group-item-heading">{$record->title}</h3>
+    <span class="artefacttype text-lighttone">({str tag=deletedforumpost section=search.elasticsearch})</span>
 {else}
-    <h3 class="title"><a href="{$WWWROOT}interaction/forum/view.php?id={$record->id}">{$record->title}</a> <span class="artefacttype">({str tag=forum section=search.elasticsearch})</span></h3>
+    <h3 class="title list-group-item-heading text-inline">
+        <span class="icon icon-comments-o left"></span>
+        <a href="{$WWWROOT}interaction/forum/view.php?id={$record->id}">
+            {$record->title}
+        </a>
+    </h3>
+    <span class="artefacttype text-lighttone">({str tag=forum section=search.elasticsearch})</span>
     <div class="detail">{$record->description|str_shorten_html:140:true|safe}</div>
 {/if}

htdocs/theme/raw/plugintype/search/elasticsearch/templates/search-filter-content.tpl

@@ -8,11 +8,25 @@
     - license
     - tagsonly
 *}
-<div id="results_filter" class="search-filter-content">
-    <strong class="filtertitle">{str tag=filterresultsby section=search.elasticsearch}:</strong>
+<div id="results_filter" class="search-filter-content btn-group">
+    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+        <span class="icon icon-filter left"></span>
+        <span class="sr-only">{str tag=filterresultsby section=search.elasticsearch}</span>
+        {foreach from=$contentfilter item=term}
+            <span {if $term.term != $contentfilterselected} class="hidden"{/if}>{$term.display} ({$term.count})</span>
+        {/foreach}
+        <span class="icon icon-caret-down right"></span>
+    </button>
+
+    <ul class="dropdown-menu" role="menu">
     {foreach from=$contentfilter item=term}
         {if $term.count > 0}
-            <div class="filtername"><a href="{$WWWROOT}search/elasticsearch/index.php?query={$query}&mainfacetterm={$selected}&secfacetterm={$term.term}&owner={$owner}&sort={$sort}&license={$license}{if $tagsonly}&tagsonly=true{/if}&limit={$limit}"{if $term.term == $contentfilterselected} class="selected"{/if}>{$term.display} ({$term.count})</a></div>
+            <li class="filtername">
+                <a href="{$WWWROOT}search/elasticsearch/index.php?query={$query}&mainfacetterm={$selected}&secfacetterm={$term.term}&owner={$owner}&sort={$sort}&license={$license}{if $tagsonly}&tagsonly=true{/if}&limit={$limit}"{if $term.term == $contentfilterselected} class="selected"{/if}>
+                {$term.display} ({$term.count})
+                </a>
+            </li>
         {/if}
     {/foreach}
+    </ul>
 </div>
\ No newline at end of file

htdocs/theme/raw/plugintype/search/elasticsearch/templates/search-filter-licence.tpl

@@ -8,18 +8,24 @@
     - license
 *}
 {if isset($license_on)}
-<div id="results_filter" class="search-filter-license">
+<div id="results_filter" class="search-filter-license pieform with-label-widthauto form-condensed">
     <input type="hidden" id="search-filter-license-url" value="{$WWWROOT}search/elasticsearch/index.php?query={$query}&mainfacetterm={$selected}&secfacetterm={$contentfilterselected}&sort={$sort}&owner={$owner}{if $tagsonly}&tagsonly=true{/if}&limit={$limit}" />
-    <label for="search-filter-license" class="filtertitle">{str tag=license section=search.elasticsearch}:</label>
+    <div class="form-group select">
+        <label for="search-filter-license" class="filtertitle">
+            {str tag=license section=search.elasticsearch}:
+        </label>
+        <span class="picker">
         {if isset($license_options)}
-            <select id="search-filter-license">
-                <option value="all">{str tag=all section=search.elasticsearch}</option>
-                {foreach from=$license_options key=id item=item}
-                    <option value="{$id}" {if ($license == $id)}selected{/if}>{$item}</option>
-                {/foreach}
-            </select>
+        <select id="search-filter-license" class="form-control select">
+            <option value="all">{str tag=all section=search.elasticsearch}</option>
+            {foreach from=$license_options key=id item=item}
+                <option value="{$id}" {if ($license == $id)}selected{/if}>{$item}</option>
+            {/foreach}
+        </select>
         {else}
-            <select disabled><option>{str tag=all section=search.elasticsearch}</option></select>
+        <select disabled class="form-control select"><option>{str tag=all section=search.elasticsearch}</option></select>
         {/if}
+        </span>
+    </div>
 </div>
 {/if}
\ No newline at end of file

htdocs/theme/raw/plugintype/search/elasticsearch/templates/search-filter-owner.tpl

@@ -8,18 +8,22 @@
     - sort
     - license
 *}
-<div id="universalsearch-filter-owner">
+<div id="universalsearch-filter-owner" class="search-filter-owner pieform with-label-widthauto form-condensed">
     <input type="hidden" id="search-filter-owner-url" value="{$WWWROOT}search/elasticsearch/index.php?query={$query}&mainfacetterm={$selected}&secfacetterm={$contentfilterselected}&license={$license}&sort={$sort}{if $tagsonly}&tagsonly=true{/if}&limit={$limit}" />
-    <label for="search-filter-owner">
-        {if $selected eq 'Text' || $selected eq 'Media' || $selected eq 'Portfolio'}
-            {str tag=owner section=search.elasticsearch}:
-        {else}
-            {str tag=admin section=search.elasticsearch}:
-        {/if}
-    </label>
-    <select id="search-filter-owner">
-        {foreach from=$ownerfilter item=item}
-            <option value="{$item.term}" {if ($owner == $item.term)}selected{/if}>{$item.display}</option>
-        {/foreach}
-    </select>
+    <div class="select form-group">
+        <label for="search-filter-owner">
+            {if $selected eq 'Text' || $selected eq 'Media' || $selected eq 'Portfolio'}
+                {str tag=owner section=search.elasticsearch}:
+            {else}
+                {str tag=admin section=search.elasticsearch}:
+            {/if}
+        </label>
+        <span class="picker">
+            <select id="search-filter-owner" class="form-control select autofocus">
+                {foreach from=$ownerfilter item=item}
+                    <option value="{$item.term}" {if ($owner == $item.term)}selected{/if}>{$item.display}</option>
+                {/foreach}
+            </select>
+        </span>
+    </div>
 </div>
\ No newline at end of file

htdocs/theme/raw/plugintype/search/elasticsearch/templates/search-sort.tpl

@@ -8,16 +8,20 @@
     - license
     - tagsonly
 *}
-<div id="universalsearch-results-sort">
+<div id="universalsearch-results-sort" class="search-results-sort pieform with-label-widthauto form-condensed">
     <input type="hidden" id="search-filter-sort-url" value="{$WWWROOT}search/elasticsearch/index.php?query={$query}&mainfacetterm={$selected}&secfacetterm={$contentfilterselected}&license={$license}&owner={$owner}{if $tagsonly}&tagsonly=true{/if}&limit={$limit}" />
-    <label for="search-filter-sort">
-        {str tag=sortby section=search.elasticsearch}:
-    </label>
-    <select id="search-filter-sort">
-            <option value="ctime_asc" {if ($sort == 'ctime_asc')}selected{/if}>{str tag=dateoldestfirst section=search.elasticsearch}</option>
-            <option value="ctime_desc" {if ($sort == 'ctime_desc')}selected{/if}>{str tag=daterecentfirst section=search.elasticsearch}</option>
-            <option value="score" {if ($sort == 'score')}selected{/if}>{str tag=relevance section=search.elasticsearch}</option>
-            <option value="sort_asc" {if ($sort == 'sort_asc')}selected{/if}>{str tag=atoz section=search.elasticsearch}</option>
-            <option value="sort_desc" {if ($sort == 'sort_desc')}selected{/if}>{str tag=ztoa section=search.elasticsearch}</option>
-    </select>
+    <div class="form-group select">
+        <label for="search-filter-sort">
+            {str tag=sortby section=search.elasticsearch}:
+        </label>
+        <span class="picker">
+            <select id="search-filter-sort" class="form-control select autofocus">
+                    <option value="ctime_asc" {if ($sort == 'ctime_asc')}selected{/if}>{str tag=dateoldestfirst section=search.elasticsearch}</option>
+                    <option value="ctime_desc" {if ($sort == 'ctime_desc')}selected{/if}>{str tag=daterecentfirst section=search.elasticsearch}</option>
+                    <option value="score" {if ($sort == 'score')}selected{/if}>{str tag=relevance section=search.elasticsearch}</option>
+                    <option value="sort_asc" {if ($sort == 'sort_asc')}selected{/if}>{str tag=atoz section=search.elasticsearch}</option>
+                    <option value="sort_desc" {if ($sort == 'sort_desc')}selected{/if}>{str tag=ztoa section=search.elasticsearch}</option>
+            </select>
+        </span>
+    </div>
 </div>
\ No newline at end of file

htdocs/theme/raw/plugintype/search/elasticsearch/templates/search_layout.tpl

 {include file="header.tpl"}
+{$form|safe}
 <script language="javascript" type="application/javascript" src="{$WWWROOT}search/elasticsearch/filter.js"></script>
-<div id="universal-search-container">
-    {$form|safe}
-</div>
 <div id="universalsearchresult">
     {$results.tablerows|safe}
 </div>

htdocs/theme/raw/plugintype/search/elasticsearch/templates/searchresults.tpl

 {include file="search:elasticsearch:facets.tpl" facets=$facets}
-<div class="subpage universalsearch">
-    {if $selected neq ''}
-    <div class="selectboxes">
-        {if $selected neq 'User'}
-            {include file="search:elasticsearch:search-filter-owner.tpl"}
-        {/if}
-        {include file="search:elasticsearch:search-sort.tpl"}
-    </div>
-    {/if}
+<div class="subpage universalsearch panel panel-default mtl">
     <div id="resultswrap" class="{if $selected eq 'Text' || $selected eq 'Media' || $selected eq 'Portfolio'}filter{else}nofilter{/if}">
-        <div id="universalsearchresults-filter-wrap">
-        {if $selected neq ''}
-            {if $selected eq 'Text' || $selected eq 'Media' || $selected eq 'Portfolio'}
-                {include file="search:elasticsearch:search-filter-content.tpl"}
-                {if $selected eq 'Text' || $selected eq 'Media'}
+        {if $totalresults > 0}
+            <div class="elasticsearch-filters clearfix">
+                {if $selected neq ''}
+                <div id="universalsearchresults-filter-wrap" class="filter clearfix">
+                    {if $selected eq 'Text' || $selected eq 'Media' || $selected eq 'Portfolio'}
+                        {include file="search:elasticsearch:search-filter-content.tpl"}
+                    {/if}
+                    <div class="filter-wrapper">
+                        {include file="search:elasticsearch:search-sort.tpl"}
+                        {if $selected neq 'User'}
+                        {include file="search:elasticsearch:search-filter-owner.tpl"}
+                        {/if}
+                    </div>
+                </div>
+                <div class="filter clearfix">
+                    <div class="filter-wrapper">
+                    {if $selected eq 'Text' || $selected eq 'Media'}
                     {include file="search:elasticsearch:search-filter-licence.tpl"}
+                    {/if}
+                </div>
+                </div>
                 {/if}
-            {/if}
+            </div>
         {/if}
-        </div>
-        <div id="universalsearchresults" class="listing fullwidth">
         {if $data}
-        {counter start=$offset print=false}
-        {foreach from=$data item=record name=foo}
-            <div class="{cycle values='r0,r1'} listrow">
-                <div class="listrowright">
-                    <div class="counter">{counter print=true}.</div>
+            <div id="universalsearchresults" class="list-group list-group-lite mb0">
+            {counter start=$offset print=false}
+            {foreach from=$data item=record name=foo}
+                <div class="list-group-item">
                     {if $record['type'] eq 'usr'}
                         {include file="search:elasticsearch:user.tpl" user=$record['db']}
                     {elseif $record['type'] eq 'interaction_forum_post'}
@@ -43,15 +47,11 @@
                     {elseif $record['type'] eq 'collection'}
                         {include file="search:elasticsearch:collection.tpl" record=$record['db']}
                     {/if}
-                 </div>
+                </div>
+            {/foreach}
             </div>
-        {/foreach}
         {elseif $query}
-            <div class="emptyresults">
-                <div class="lead text-small">{str tag=nosearchresultsfound section=group}</div>
-            </div>
+            <p class="no-results">{str tag=nosearchresultsfound section=group}</p>
         {/if}
-        </div>
     </div>
-    <div class="cl"></div>
 </div>
\ No newline at end of file

htdocs/theme/raw/plugintype/search/elasticsearch/templates/user.tpl

 {if $user->deleted}
 <div class="peoplelistinfo">
-    <div class="leftdiv profile"></div>
-    <div class="rightdiv">
-        <h3>{display_name $user}</h3>
-    </div>
-    <div class="cb"></div>
+    <h3 class="list-group-item-heading text-inline">{display_name $user}</h3>
 </div>
 {else}
 <div class="peoplelistinfo">
-    <div class="leftdiv profile" id="{$type}_{$user->id}"><img src="{profile_icon_url user=$user maxwidth=40 maxheight=40}" alt="{str tag=profileimagetext arg1=$user|display_default_name}"></div>
-    <div class="rightdiv">
-        <h3 class="title"><a href="{profile_url($user)}">{$user->display_name}</a></h3>
-          {if $user->introduction}
+    <div class="profile" id="{$type}_{$user->id}">
+        <img src="{profile_icon_url user=$user maxwidth=40 maxheight=40}" alt="{str tag=profileimagetext arg1=$user|display_default_name}">