Meta search from external form

protected/humhub/widgets/SearchProviderWidget.php

@@ -73,7 +73,7 @@ class SearchProviderWidget extends Widget
     protected function getOptions(): array
     {
         return [
-            'class' => 'dropdown-search-provider' . ($this->searchProvider->isSearched() ? ' provider-searched' : ''),
+            'class' => 'search-provider' . ($this->searchProvider->isSearched() ? ' provider-searched' : ''),
             'data-provider' => get_class($this->searchProvider)
         ];
     }

protected/humhub/widgets/views/searchProvider.php

@@ -13,30 +13,30 @@ use humhub\widgets\Button;
 /* @var SearchProvider $searchProvider */
 ?>
 <?= Html::beginTag('li', $options) ?>
-    <div class="dropdown-search-provider-title">
+    <div class="search-provider-title">
         <?= $searchProvider->getName() ?>
         <?php if ($searchProvider->isSearched()) : ?>
             <?= Html::tag('span', '(' . $searchProvider->getTotal() . ')') ?>
         <?php endif; ?>
     </div>
-    <div class="dropdown-search-provider-content">
+    <div class="search-provider-content">
         <?php if ($searchProvider->isSearched()) : ?>
             <?php if ($searchProvider->hasRecords()) : ?>
                 <?php foreach ($searchProvider->getRecords() as $record) : ?>
-                    <a href="<?= $record->getUrl() ?>" class="dropdown-search-provider-content-item">
-                        <span><?= $record->getImage() ?></span>
-                        <span>
+                    <a href="<?= $record->getUrl() ?>" class="search-provider-record">
+                        <span class="search-provider-record-image"><?= $record->getImage() ?></span>
+                        <span class="search-provider-record-text">
                             <?= Html::encode($record->getTitle()) ?>
-                            <span><?= Html::encode($record->getDescription()) ?></span>
+                            <span class="search-provider-record-desc"><?= Html::encode($record->getDescription()) ?></span>
                         </span>
                     </a>
                 <?php endforeach; ?>
             <?php else : ?>
-                <div class="dropdown-search-provider-no-results"><?= Yii::t('base', 'No results') ?></div>
+                <div class="search-provider-no-results"><?= Yii::t('base', 'No results') ?></div>
             <?php endif; ?>
             <?= Button::defaultType($searchProvider->getAllResultsText())
                 ->link($searchProvider->getAllResultsUrl())
-                ->cssClass('dropdown-search-provider-show-all')
+                ->cssClass('search-provider-show-all')
                 ->loader(false) ?>
         <?php endif; ?>
     </div>

static/js/humhub/humhub.ui.search.js

@@ -16,9 +16,11 @@ humhub.module('ui.search', function(module, require, $) {
             arrow: '.dropdown-header > .arrow',
             form: '.dropdown-search-form',
             input: 'input.dropdown-search-keyword',
-            provider: '.dropdown-search-provider',
-            providerContent: '.dropdown-search-provider-content',
-            providerCounter: '.dropdown-search-provider-title > span',
+            provider: '.search-provider',
+            providerSearched: '.search-provider.provider-searched',
+            providerContent: '.search-provider-content',
+            providerRecord: '.search-provider-record',
+            providerCounter: '.search-provider-title > span',
             backdrop: '.dropdown-backdrop',
             additionalToggler: {
                 form: 'form[data-toggle="humhub.ui.search"]',
@@ -163,7 +165,7 @@ humhub.module('ui.search', function(module, require, $) {
     }
 
     Search.prototype.isSearched = function () {
-        return this.$.find('.dropdown-search-provider.provider-searched').length > 0;
+        return this.$.find(this.selectors.providerSearched).length > 0;
     }
 
     Search.prototype.menu = function () {
@@ -184,6 +186,11 @@ humhub.module('ui.search', function(module, require, $) {
 
         this.getProviders().each(function () {
             const provider = $(this);
+
+            if (provider.hasClass('provider-searching')) {
+                return;
+            }
+
             provider.addClass('provider-searching').show()
                 .find(that.selectors.providerCounter).hide();
             loader.set(provider.find(that.selectors.providerContent), {size: '8px', css: {padding: '0px'}});
@@ -195,7 +202,9 @@ humhub.module('ui.search', function(module, require, $) {
                 keyword: that.getInput().val()
             };
             client.post(module.config.url, {data}).then(function (response) {
-                provider.replaceWith(response.html);
+                const newProviderContent = $(response.html);
+                provider.replaceWith(newProviderContent);
+                newProviderContent.find(that.selectors.providerRecord).highlight(data.keyword);
                 that.refreshSize();
             });
 
@@ -205,7 +214,7 @@ humhub.module('ui.search', function(module, require, $) {
 
     Search.prototype.refreshSize = function () {
         // Set proper panel height
-        const maxHeight = $(window).height() - this.getPanel().offset().top - 80;
+        const maxHeight = $(window).height() - this.getPanel().offset().top - ($(window).width() > 390 ? 80 : 0);
         this.getPanel().css('height', 'auto');
         if (this.getPanel().height() > maxHeight) {
             this.getPanel().css('height', maxHeight);

static/less/search.less

@@ -89,10 +89,10 @@
         }
     }
 
-    .dropdown-search-provider {
+    .search-provider {
         display: none;
         padding-top: 20px;
-        .dropdown-search-provider-title {
+        .search-provider-title {
             font-weight: 600;
             font-size: 16px;
             color: #000;
@@ -107,12 +107,12 @@
             display: block;
         }
         &.provider-searching {
-            .dropdown-search-provider-title, .dropdown-search-provider-content {
+            .search-provider-title, .search-provider-content {
                 float: left;
             }
         }
-        .dropdown-search-provider-content {
-            > a.dropdown-search-provider-content-item {
+        .search-provider-content {
+            a.search-provider-record {
                 display: flex;
                 align-items: center;
                 padding: 10px;
@@ -121,7 +121,7 @@
                     background: #f8f8f8;
                     border-radius: 3px;
                 }
-                > span:first-child {
+                .search-provider-record-image {
                     width: 36px;
                     flex: 0 0 36px;
                     > i {
@@ -129,7 +129,7 @@
                         color: @info;
                     }
                 }
-                > span:last-child {
+                .search-provider-record-text {
                     font-weight: 600;
                     padding-left: 10px;
                     flex: 1;
@@ -137,21 +137,29 @@
                     white-space: nowrap;
                     text-overflow: ellipsis;
                     overflow: hidden;
-                    > span {
+                    .highlight {
+                        background: transparent;
+                        font-weight: 800;
+                        color: #333;
+                    }
+                    .search-provider-record-desc {
                         display: block;
                         font-size: 80%;
                         font-weight: 400;
                         color: #555;
                         text-overflow: ellipsis;
                         overflow: hidden;
+                        .highlight {
+                            font-weight: 700;
+                        }
                     }
                 }
             }
         }
-        .dropdown-search-provider-no-results {
+        .search-provider-no-results {
             margin-top: 15px;
         }
-        .dropdown-search-provider-show-all {
+        .search-provider-show-all {
             margin-top: 20px;
             width: 100%;
             &:hover, &:active, &:focus {
@@ -177,14 +185,14 @@
     }
 }
 
-@media (max-width: 380px) {
+@media (max-width: 390px) {
     .dropdown.search-menu {
         position: initial;
     }
     #dropdown-search.dropdown-menu {
         width: 100%;
         min-width: initial;
-        .arrow {
+        .dropdown-header .arrow {
             right: 25px;
         }
     }