diff --git a/src/Controller/FrontendModule/MeilisearchSearchController.php b/src/Controller/FrontendModule/MeilisearchSearchController.php index 2250a59..4e5b80b 100644 --- a/src/Controller/FrontendModule/MeilisearchSearchController.php +++ b/src/Controller/FrontendModule/MeilisearchSearchController.php @@ -5,10 +5,12 @@ namespace MummertMedia\ContaoMeilisearchBundle\Controller\FrontendModule; use Contao\Config; use Contao\CoreBundle\Controller\FrontendModule\AbstractFrontendModuleController; use Contao\CoreBundle\Twig\FragmentTemplate; +use Contao\CoreBundle\ServiceAnnotation\Asset; use Contao\ModuleModel; use Symfony\Component\HttpFoundation\Request; use Symfony\Component\HttpFoundation\Response; +#[Asset('css/meilisearch.css')] class MeilisearchSearchController extends AbstractFrontendModuleController { protected function getResponse( @@ -18,7 +20,7 @@ class MeilisearchSearchController extends AbstractFrontendModuleController ): Response { $template->set('meiliLimit', (int) ($model->meiliLimit ?: 50)); - // ✅ Config hier lesen + // Konfiguration sauber im Controller lesen $template->set('meiliHost', Config::get('meilisearch_host')); $template->set('meiliIndex', Config::get('meilisearch_index')); $template->set('meiliSearchKey', Config::get('meilisearch_api_search')); diff --git a/src/Resources/public/css/meilisearch.css b/src/Resources/public/css/meilisearch.css new file mode 100644 index 0000000..396e731 --- /dev/null +++ b/src/Resources/public/css/meilisearch.css @@ -0,0 +1,53 @@ +.meilisearch-search { + position: relative; +} + +.meilisearch-search-field { + position: relative; +} + +.meilisearch-search input[type="search"] { + width: 100%; + max-width: 600px; + padding: 0.75rem 2.5rem 0.75rem 0.75rem; + font-size: 1rem; +} + +.meilisearch-clear { + position: absolute; + right: 0.5rem; + top: 50%; + transform: translateY(-50%); + background: none; + border: 0; + font-size: 1.25rem; + cursor: pointer; +} + +.meilisearch-results { + margin-top: 0.5rem; + border: 1px solid #e0e0e0; + background: #fff; +} + +.meilisearch-result { + display: grid; + grid-template-columns: 60px auto; + gap: 1rem; + padding: 1rem; + border-bottom: 1px solid #eee; +} + +.meilisearch-result:hover { + background: #f5f5f5; +} + +.meilisearch-result img { + width: 100%; + aspect-ratio: 1 / 1; + object-fit: cover; +} + +.meilisearch-extract mark { + background: #ddd; +} \ No newline at end of file