mirror of
https://github.com/Myxelium/Bridge-Multi.git
synced 2026-04-09 05:09:39 +00:00
Fix search bar CSS
This commit is contained in:
Geomitron
@@ -1,258 +1,18 @@
|
||||
<!-- <div id="searchMenu" class="ui bottom attached borderless menu">
|
||||
<div class="item">
|
||||
<div class="ui icon input" [class.loading]="isLoading()">
|
||||
<input #searchBox type="text" placeholder=" Search..." (keyup.enter)="onSearch(searchBox.value)" />
|
||||
<i
|
||||
#searchIcon
|
||||
id="searchIcon"
|
||||
class="link icon"
|
||||
[ngClass]="isError ? 'red exclamation triangle' : 'search'"
|
||||
data-content="Failed to connect to the Bridge database"
|
||||
data-position="bottom right"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="quantityDropdownItem" [class.hidden]="!showAdvanced" class="item">
|
||||
<div #quantityDropdown class="ui compact selection dropdown">
|
||||
<input name="quantityMatch" type="hidden" />
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="text"><b>all</b> words match</div>
|
||||
<div class="menu">
|
||||
<div id="dropdownItem" class="active selected item" data-value="all"><b>all</b> words match</div>
|
||||
<div id="dropdownItem" class="item" data-value="any"><b>any</b> words match</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="similarityDropdownItem" [class.hidden]="!showAdvanced" class="item">
|
||||
<div #similarityDropdown class="ui compact selection dropdown">
|
||||
<input name="similarityMatch" type="hidden" value="similar" />
|
||||
<i class="dropdown icon"></i>
|
||||
<div class="text"><b>similar</b> words match</div>
|
||||
<div class="menu">
|
||||
<div id="dropdownItem" class="active selected item" data-value="similar"><b>similar</b> words match</div>
|
||||
<div id="dropdownItem" class="item" data-value="exact"><b>exact</b> words match</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item right">
|
||||
<button class="mini ui right labeled icon button" (click)="onAdvancedSearchClick()">
|
||||
Advanced Search
|
||||
<i class="angle double icon" [ngClass]="showAdvanced ? 'up' : 'down'"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="advancedSearchForm" [class.collapsed]="!showAdvanced" class="ui horizontal segments">
|
||||
<div class="ui secondary segment">
|
||||
<div class="grouped fields">
|
||||
<h5 class="ui dividing header">Search for</h5>
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="name" [(ngModel)]="searchSettings.fields.name" />
|
||||
<label>Name</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="artist" [(ngModel)]="searchSettings.fields.artist" />
|
||||
<label>Artist</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="album" [(ngModel)]="searchSettings.fields.album" />
|
||||
<label>Album</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="genre" [(ngModel)]="searchSettings.fields.genre" />
|
||||
<label>Genre</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="year" [(ngModel)]="searchSettings.fields.year" />
|
||||
<label>Year</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="charter" [(ngModel)]="searchSettings.fields.charter" />
|
||||
<label>Charter</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="tag" [(ngModel)]="searchSettings.fields.tag" />
|
||||
<label>Tag</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui secondary segment">
|
||||
<div class="grouped fields">
|
||||
<h5 class="ui dividing header">Must include</h5>
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="sections" [(ngModel)]="searchSettings.tags.sections" />
|
||||
<label>Sections</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="starpower" [(ngModel)]="searchSettings.tags['star power']" />
|
||||
<label>Star Power</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="forcing" [(ngModel)]="searchSettings.tags.forcing" />
|
||||
<label>Forcing</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="taps" [(ngModel)]="searchSettings.tags.taps" />
|
||||
<label>Taps</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="lyrics" [(ngModel)]="searchSettings.tags.lyrics" />
|
||||
<label>Lyrics</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="videobackground" [(ngModel)]="searchSettings.tags.video" />
|
||||
<label>Video Background</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="stems" [(ngModel)]="searchSettings.tags.stems" />
|
||||
<label>Audio Stems</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="solosections" [(ngModel)]="searchSettings.tags['solo sections']" />
|
||||
<label>Solo Sections</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="opennotes" [(ngModel)]="searchSettings.tags['open notes']" />
|
||||
<label>Open Notes</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui secondary segment">
|
||||
<div class="grouped fields">
|
||||
<h5 class="ui dividing header">Instruments</h5>
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="guitar" [(ngModel)]="searchSettings.instruments.guitar" />
|
||||
<label>Guitar</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="bass" [(ngModel)]="searchSettings.instruments.bass" />
|
||||
<label>Bass</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="rhythm" [(ngModel)]="searchSettings.instruments.rhythm" />
|
||||
<label>Rhythm</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="keys" [(ngModel)]="searchSettings.instruments.keys" />
|
||||
<label>Keys</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="drums" [(ngModel)]="searchSettings.instruments.drums" />
|
||||
<label>Drums</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="guitarghl" [(ngModel)]="searchSettings.instruments.guitarghl" />
|
||||
<label>GHL Guitar</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="bassghl" [(ngModel)]="searchSettings.instruments.bassghl" />
|
||||
<label>GHL Bass</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="vocals" [(ngModel)]="searchSettings.instruments.vocals" />
|
||||
<label>Vocals</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui secondary segment">
|
||||
<h5 class="ui dividing header">Charted difficulties</h5>
|
||||
<div class="grouped fields">
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="expert" [(ngModel)]="searchSettings.difficulties.expert" />
|
||||
<label>Expert</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="hard" [(ngModel)]="searchSettings.difficulties.hard" />
|
||||
<label>Hard</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="medium" [(ngModel)]="searchSettings.difficulties.medium" />
|
||||
<label>Medium</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="easy" [(ngModel)]="searchSettings.difficulties.easy" />
|
||||
<label>Easy</label>
|
||||
</div>
|
||||
</div>
|
||||
<h5 class="ui dividing header">Difficulty range</h5>
|
||||
<div class="field">
|
||||
<div #diffSlider class="ui labeled ticked inverted range slider" id="diffSlider"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="collapse navbar grid bg-base-100 overflow-visible rounded-none" [ngClass]="showAdvanced ? 'collapse-open' : 'collapse-close'">
|
||||
<div
|
||||
class="collapse navbar grid bg-base-100 overflow-visible rounded-none border-t-base-200 border-t py-1"
|
||||
[ngClass]="showAdvanced ? 'collapse-open' : 'collapse-close'">
|
||||
<div class="flex flex-wrap justify-end gap-1">
|
||||
<!-- Search Input -->
|
||||
<div class="flex items-center order-3 md:order-2 xl:order-2 flex-none w-full md:w-auto md:flex-1 xl:flex-grow-[6] min-w-[21rem]">
|
||||
<div class="flex items-center flex-1 flex-grow-[2] min-w-[21rem]">
|
||||
<div class="form-control w-full">
|
||||
<input type="text" [formControl]="searchControl" placeholder="What do you feel like playing today?" class="input input-bordered pr-14" />
|
||||
<input type="text" [formControl]="searchControl" placeholder="Search..." class="input input-bordered pr-14" />
|
||||
</div>
|
||||
<i class="bi bi-search -ml-11"></i>
|
||||
<i class="bi bi-search -ml-9"></i>
|
||||
</div>
|
||||
<div class="basis-full h-0 order-4 xl:order-7"></div>
|
||||
<div class="flex order-5 md:order-5 xl:order-3">
|
||||
<div class="flex">
|
||||
<!-- Instrument Dropdown -->
|
||||
<div class="dropdown">
|
||||
<label tabindex="0" class="btn btn-neutral rounded-btn rounded-r-none my-1">
|
||||
<label tabindex="0" class="btn btn-neutral rounded-btn rounded-r-none uppercase">
|
||||
@if (instrument) {
|
||||
<img class="w-8 hidden sm:block" src="assets/images/instruments/{{ instrument }}.png" />
|
||||
}
|
||||
@@ -274,7 +34,7 @@
|
||||
</div>
|
||||
<!-- Difficulty Dropdown -->
|
||||
<div class="dropdown">
|
||||
<label tabindex="0" class="btn btn-neutral rounded-btn rounded-l-none my-1">{{ difficultyDisplay(difficulty) }}</label>
|
||||
<label tabindex="0" class="btn btn-neutral rounded-btn rounded-l-none uppercase">{{ difficultyDisplay(difficulty) }}</label>
|
||||
<ul tabindex="0" class="menu dropdown-content z-[2] p-2 shadow bg-neutral text-neutral-content rounded-box w-40">
|
||||
<li>
|
||||
<a (click)="setDifficulty(null, $event)">{{ difficultyDisplay(null) }}</a>
|
||||
@@ -287,9 +47,10 @@
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex-grow-[3] h-0"></div>
|
||||
<!-- Advanced Search -->
|
||||
<div class="order-6 md:order-6 xl:order-4 xl:flex-grow-[5]">
|
||||
<button class="btn btn-ghost" (click)="setShowAdvanced(!showAdvanced)">
|
||||
<div>
|
||||
<button class="btn btn-ghost uppercase" (click)="setShowAdvanced(!showAdvanced)">
|
||||
Advanced Search
|
||||
<div class="cursor-pointer swap swap-rotate" [class.swap-active]="showAdvanced">
|
||||
<i class="swap-off bi bi-chevron-down"></i>
|
||||
@@ -560,7 +321,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="btn btn-sm btn-primary" [class.btn-disabled]="advancedSearchForm.invalid && startValidation" (click)="searchAdvanced()">
|
||||
<button
|
||||
class="btn btn-sm btn-primary uppercase"
|
||||
[class.btn-disabled]="advancedSearchForm.invalid && startValidation"
|
||||
(click)="searchAdvanced()">
|
||||
Search{{ advancedSearchForm.invalid && startValidation ? ' ("Modified After" is invalid)' : '' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user