Alamantus
/
Readlebee
mirror of https://gitlab.com/Alamantus/Readlebee.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Don't collapse search options

This commit is contained in:
Robbie Antenesse 2019-09-26 12:25:36 -06:00
parent e39fe52e65
commit 40084c4072
2 changed files with 67 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/views/search/controller.js
View File

@ -6,7 +6,6 @@ export class SearchController extends ViewController {
// which stores state in this.appState and the view controller's state to this.state // which stores state in this.appState and the view controller's state to this.state
super(state, i18n, 'search', { super(state, i18n, 'search', {
lastSearch: '', lastSearch: '',
expandSearchOptions: false,
searchSource: 'inventaire', searchSource: 'inventaire',
searchBy: 'title', searchBy: 'title',
done: true, done: true,

149
app/views/search/index.js
View File

@ -44,91 +44,76 @@ export const searchView = (state, emit, i18n) => {
</section>`, </section>`,
// Search Options Section // Search Options Section
html`<section> html`<section class="flex one two-700">
<header class="flex two four-800"> <div>
<div> ${modal('searchSourceInfo', controller, [
<h3>Search Options</h3> html`<p>
</div> This refers to where the search tries to look for data.
<div> </p>`,
<button class="pseudo" onclick=${() => { html`<ul>
controller.state.expandSearchOptions = !controller.state.expandSearchOptions; <li>
emit('render'); <a href="https://inventaire.io" target="_blank">
}}>
${controller.state.expandSearchOptions !== true ? '+ Expand' : '- Collapse'}
</button>
</div>
</header>
<footer class="flex one two-700" ${controller.state.expandSearchOptions !== true ? 'hidden' : null}>
<div>
${modal('searchSourceInfo', controller, [
html`<p>
This refers to where the search tries to look for data.
</p>`,
html`<ul>
<li>
<a href="https://inventaire.io" target="_blank">
Inventaire
</a>
</li>
<li>
<a href="https://openlibrary.org" target="_blank">
Open Library
</a>
</li>
<li>
<a href="https://bookbrainz.org/" target="_blank">
BoookBrainz
</a>
</li>
</ul>`,
], {
buttonText: 'What\'s This?',
buttonClasses: 'small marginless pseudo button pull-right',
headerText: 'What does "Search Source" mean?',
})}
<label>
Search Source
<select onchange=${event => {
controller.state.searchSource = event.target.value;
}}>
<option value="inventaire" ${controller.state.searchSource === 'inventaire' ? 'selected' : null}>
Inventaire Inventaire
</option> </a>
<option value="openLibrary" ${controller.state.searchSource === 'openLibrary' ? 'selected' : null}> </li>
<li>
<a href="https://openlibrary.org" target="_blank">
Open Library Open Library
</option> </a>
<option value="bookBrainz" ${controller.state.searchSource === 'bookBrainz' ? 'selected' : null}> </li>
BookBrainz <li>
</option> <a href="https://bookbrainz.org/" target="_blank">
</select> BoookBrainz
</a>
</li>
</ul>`,
], {
buttonText: 'What\'s This?',
buttonClasses: 'small marginless pseudo button pull-right',
headerText: 'What does "Search Source" mean?',
})}
<label>
Search Source
<select onchange=${event => {
controller.state.searchSource = event.target.value;
}}>
<option value="inventaire" ${controller.state.searchSource === 'inventaire' ? 'selected' : null}>
Inventaire
</option>
<option value="openLibrary" ${controller.state.searchSource === 'openLibrary' ? 'selected' : null}>
Open Library
</option>
<option value="bookBrainz" ${controller.state.searchSource === 'bookBrainz' ? 'selected' : null}>
BookBrainz
</option>
</select>
</label>
</div>
<div>
Search By<br>
<label>
<input type="radio" name="searchBy" value="title"
${controller.state.searchBy === 'title' ? 'checked' : null}
onchange=${(event) => {
if (event.target.checked) {
controller.state.searchBy = event.target.value;
}
}}
>
<span class="checkable">Title</span>
</label> </label>
</div> <label>
<div> <input type="radio" name="searchBy" value="author"
Search By<br> ${controller.state.searchBy === 'author' ? 'checked' : null}
<label> onchange=${(event) => {
<input type="radio" name="searchBy" value="title" if (event.target.checked) {
${controller.state.searchBy === 'title' ? 'checked' : null} controller.state.searchBy = event.target.value;
onchange=${(event) => { }
if (event.target.checked) { }}
controller.state.searchBy = event.target.value; >
} <span class="checkable">Author</span>
}} </label>
> </div>
<span class="checkable">Title</span>
</label>
<label>
<input type="radio" name="searchBy" value="author"
${controller.state.searchBy === 'author' ? 'checked' : null}
onchange=${(event) => {
if (event.target.checked) {
controller.state.searchBy = event.target.value;
}
}}
>
<span class="checkable">Author</span>
</label>
</div>
</footer>
</section>`, </section>`,
// Search Results section // Search Results section