44 lines
1.4 KiB
HTML
44 lines
1.4 KiB
HTML
<div class="field has-addons">
|
|
<div class="control is-expanded">
|
|
<input #input class="input" type="search" (focus)="showList = true" [value]="query$.getValue()" (input)="query$.next(input.value)" (keyup.enter)="search()">
|
|
</div>
|
|
<div class="control">
|
|
<a class="button" [class]="button_color"><span class="icon"><i class="fas fa-search"></i></span></a>
|
|
</div>
|
|
</div>
|
|
|
|
<div *ngIf="showList && areResults()" (mouseleave)="show()" class="autocomplete">
|
|
<div *ngIf="artists.length > 0">
|
|
<div class="header">
|
|
<p>Artistas</p>
|
|
</div>
|
|
<div *ngFor="let result of artists" class="artist">
|
|
{{ result.name }}
|
|
</div>
|
|
</div>
|
|
<div *ngIf="discs.length > 0">
|
|
<div class="header">
|
|
<p>Discos</p>
|
|
</div>
|
|
<div *ngFor="let result of discs" class="media disc">
|
|
<figure class="media-left">
|
|
<img *ngIf="result.cover_art" class="image is-64x64 cropped" src="{{result.cover_art.small}}"
|
|
alt="{{result.title}} cover art">
|
|
<img *ngIf="!result.cover_art" class="image is-64x64 cropped" src="../../../assets/svg/placeholder.svg"
|
|
alt="{{result.title}} missing cover art">
|
|
</figure>
|
|
<div class="media-content">
|
|
<p>{{result.title}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="recordings.length > 0">
|
|
<div class="header">
|
|
<p>Canciones</p>
|
|
</div>
|
|
<div *ngFor="let result of recordings" class="recording">
|
|
{{ result.title }}
|
|
</div>
|
|
</div>
|
|
</div>
|