home/torsearch
1
0
Fork 0
Code Issues 22 Pull Requests 1 Actions 3 Packages Projects 4 Releases Wiki Activity

fix: better styles for active option

Browse Source
This commit is contained in:
brock
2025-07-06 12:19:37 -05:00
parent cc366eb09f
commit 17f6316353
3 changed files with 12 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
assets/controllers/search_bar_controller.js
View File

@@ -24,6 +24,9 @@ export default class extends Controller {
const params = value.split('|') const params = value.split('|')
window.location.href = `/result/${params[0]}/${params[1]}` window.location.href = `/result/${params[0]}/${params[1]}`
}; };
event.detail.options.onType = (searchQuery) => {
console.log(this.element);
}
event.detail.options.render.loading = (data, escape) => { event.detail.options.render.loading = (data, escape) => {
return ` return `
<span data-controller="loading-icon" data-loading-icon-total-value="52" data-loading-icon-count-value="20" class="loading-icon"> <span data-controller="loading-icon" data-loading-icon-total-value="52" data-loading-icon-count-value="20" class="loading-icon">

2
assets/styles/app.css
View File

@@ -120,5 +120,5 @@ dialog[data-dialog-target="dialog"][closing] {
#search .ts-dropdown .ts-dropdown-content .option.active { #search .ts-dropdown .ts-dropdown-content .option.active {
background: unset; background: unset;
@apply hover:bg-orange-500/80 active:bg-orange-500/80 text-black rounded-md @apply bg-orange-500/80 text-black font-bold rounded-md
} }

9
templates/components/SearchBar.html.twig
View File

@@ -2,7 +2,14 @@
<div class="relative"> <div class="relative">
<form id="search" action="{{ path('app_search') }}"> <form id="search" action="{{ path('app_search') }}">
<select <select
{{ stimulus_controller('search_bar')|stimulus_controller('symfony/ux-autocomplete/autocomplete', {url: path('api_tmdb_ajax_search'), create: false, highlight: false}) }} {{ stimulus_controller('search_bar')|stimulus_controller('symfony/ux-autocomplete/autocomplete', {
url: path('api_tmdb_ajax_search'),
create: false,
tomSelectOptions: {
highlight: false,
}
}) }}
id="term"
name="term" name="term"
class="w-full bg-orange-500 rounded-md bg-clip-padding backdrop-filter class="w-full bg-orange-500 rounded-md bg-clip-padding backdrop-filter
backdrop-blur-md bg-opacity-40 placeholder:text-slate-200 text-gray-50 backdrop-blur-md bg-opacity-40 placeholder:text-slate-200 text-gray-50