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

Restructure search results columns

This commit is contained in:
Robbie Antenesse 2019-09-11 11:38:09 -06:00
parent a9d40193f0
commit 464aad9d34
2 changed files with 22 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/i18n/locales/en.json
View File

@ -15,7 +15,9 @@
"header": "Search",
"people_header": "People",
"series_header": "Series",
"books_header": "Books"
"books_header": "Books",
"see_details": "See Details",
"see_details_tooltip": "Opens Inventaire in a new tab/window",
},
"interaction": {
"heart": "Like",

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

@ -30,12 +30,11 @@ export const searchView = (state, emit) => {
html`<h2>${i18n.__('search.books_header')}</h2>`,
controller.results.works.map(result => {
return html`<div class="flex search-result">
<div class="sixth-500">
${result.image ? html`<img src=${result.image.url} class="search-image">` : null}
</div>
<div class="half-500">
<h3 class="title">${result.name}</h3>
${result.description ? html`<h4 class="subtitle">${result.description}</h4>` : null}
</div>
<div class="third-500">
<span data-tooltip=${i18n.__('interaction.heart')}>
<button class="pseudo">
<i class="pseudo icon-heart-outline"></i>
@ -47,8 +46,12 @@ export const searchView = (state, emit) => {
</button>
</span>
</div>
<div class="third-500">
<a class="small pseudo button" href=${result.link} target="_blank">See details on Inventaire</a>
<div class="sixth-500">
<span class="tooltip-left" data-tooltip=${i18n.__('search.see_details_tooltip')}>
<a class="small pseudo button" href=${result.link} target="_blank">
${i18n.__('search.see_details')}
</a>
</span>
</div>
</div>`;
}),
@ -60,15 +63,16 @@ export const searchView = (state, emit) => {
html`<h2>${i18n.__('search.series_header')}</h2>`,
controller.results.series.map(result => {
return html`<div class="flex search-result">
<div class="sixth-500">
${result.image ? html`<img src=${result.image.url} class="search-image">` : null}
</div>
<div class="half-500">
<h3 class="title">${result.name}</h3>
${result.description ? html`<h4 class="subtitle">${result.description}</h4>` : null}
</div>
<div class="third-500">
<a href=${result.link} target="_blank">See details on Inventaire</a>
<div class="sixth-500 off-third-500">
<span class="tooltip-left" data-tooltip=${i18n.__('search.see_details_tooltip')}>
<a class="small pseudo button" href=${result.link} target="_blank">
${i18n.__('search.see_details')}
</a>
</span>
</div>
</div>`;
}),
@ -88,7 +92,11 @@ export const searchView = (state, emit) => {
${result.description ? html`<h4 class="subtitle">${result.description}</h4>` : null}
</div>
<div class="third-500">
<a href=${result.link} target="_blank">See details on Inventaire</a>
<span class="tooltip-left" data-tooltip=${i18n.__('search.see_details_tooltip')}>
<a class="small pseudo button" href=${result.link} target="_blank">
${i18n.__('search.see_details')}
</a>
</span>
</div>
</div>`;
}),