mirror/Part-DB.Part-DB-server
1
0
Fork 1
mirror of https://github.com/Part-DB/Part-DB-server.git synced 2025-06-21 09:35:49 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improved layout for autocomplete dropdown

Browse source
This commit is contained in:
Jan Böhmer 2024-02-29 21:53:28 +01:00
parent 409dcce3c7
commit faadd8e9a4
2 changed files with 13 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

17
assets/controllers/elements/part_livesearch_controller.js
View file

@ -27,7 +27,8 @@ import {marked} from "marked";
import { import {
trans, trans,
SEARCH_PLACEHOLDER, SEARCH_PLACEHOLDER,
SEARCH_SUBMIT SEARCH_SUBMIT,
STATISTICS_PARTS
} from '../../translator'; } from '../../translator';
export default class extends Controller { export default class extends Controller {
@ -42,6 +43,9 @@ export default class extends Controller {
// The URL template for the part detail pages // The URL template for the part detail pages
const part_detail_uri_template = this.element.dataset.detailUrl; const part_detail_uri_template = this.element.dataset.detailUrl;
//The URL of the placeholder picture
const placeholder_image = this.element.dataset.placeholderImage;
const that = this; const that = this;
const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({ const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
@ -106,25 +110,28 @@ export default class extends Controller {
}, },
templates: { templates: {
header({ html }) { header({ html }) {
return html`<span class="aa-SourceHeaderTitle">Parts</span> return html`<span class="aa-SourceHeaderTitle">${trans(STATISTICS_PARTS)}</span>
<div class="aa-SourceHeaderLine" />`; <div class="aa-SourceHeaderLine" />`;
}, },
item({item, components, html}) { item({item, components, html}) {
const details_url = part_detail_uri_template.replace('__ID__', item.id); const details_url = part_detail_uri_template.replace('__ID__', item.id);
return html` return html`
<a class="aa-ItemLink" href="${details_url}"> <a class="aa-ItemLink" href="${details_url}">
<div class="aa-ItemContent"> <div class="aa-ItemContent">
<div class="aa-ItemIcon aa-ItemIcon--picture aa-ItemIcon--alignTop"> <div class="aa-ItemIcon aa-ItemIcon--picture aa-ItemIcon--alignTop">
<img src="${item.image}" alt="${item.name}" width="40" height="40"/> <img src="${item.image !== "" ? item.image : placeholder_image}" alt="${item.name}" width="30" height="30"/>
</div> </div>
<div class="aa-ItemContentBody"> <div class="aa-ItemContentBody">
<div class="aa-ItemContentTitle"> <div class="aa-ItemContentTitle">
${components.Highlight({hit: item, attribute: 'name'})} <b>
${components.Highlight({hit: item, attribute: 'name'})}
</b>
</div> </div>
<div class="aa-ItemContentDescription"> <div class="aa-ItemContentDescription">
${components.Snippet({hit: item, attribute: 'description'})} ${components.Snippet({hit: item, attribute: 'description'})}
${item.category ? html`<p class="m-0"><span class="fa-solid fa-tags fa-fw"></span>${item.category}</p>` : ""}
${item.footprint ? html`<p class="m-0"><span class="fa-solid fa-microchip fa-fw"></span>${item.footprint}</p>` : ""}
</div> </div>
</div> </div>
</div> </div>

1
templates/_navbar_search.html.twig
View file

@ -71,6 +71,7 @@
{# It is important that this element has an id field. Otherwise the dropdown panel wont appear after some link clicks #} {# It is important that this element has an id field. Otherwise the dropdown panel wont appear after some link clicks #}
<div {{ stimulus_controller('elements/part_livesearch') }} class="mt-auto mb-auto" id="navbar-quicksearch-container" <div {{ stimulus_controller('elements/part_livesearch') }} class="mt-auto mb-auto" id="navbar-quicksearch-container"
data-placeholder-image="{{ asset('img/part_placeholder.svg') }}"
data-autocomplete="{{ path('typeahead_parts', {'query': '__QUERY__'}) }}" data-detail-url="{{ path('part_info', {'id': '__ID__'}) }}"> data-autocomplete="{{ path('typeahead_parts', {'query': '__QUERY__'}) }}" data-detail-url="{{ path('part_info', {'id': '__ID__'}) }}">
<input type="hidden" name="keyword" required {{ stimulus_target('elements/part_livesearch', 'input') }}> <input type="hidden" name="keyword" required {{ stimulus_target('elements/part_livesearch', 'input') }}>
</div> </div>