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

Improve styling for reviewDetails and search results

This commit is contained in:
Robbie Antenesse 2019-09-11 23:41:18 -06:00
parent 8e17d0ec7e
commit 00140054a1
3 changed files with 82 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -16,7 +16,9 @@
"people_header": "People", "people_header": "People",
"series_header": "Series", "series_header": "Series",
"books_header": "Books", "books_header": "Books",
"see_details": "See Details", "see_interaction_details": "See All Interactions",
"see_book_details": "See Book Details",
"see_inventaire_details": "See Details",
"see_details_tooltip": "Opens Inventaire in a new tab/window" "see_details_tooltip": "Opens Inventaire in a new tab/window"
}, },
"interaction": { "interaction": {

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

@ -30,11 +30,11 @@ export const searchView = (state, emit) => {
html`<h2>${i18n.__('search.books_header')}</h2>`, html`<h2>${i18n.__('search.books_header')}</h2>`,
controller.results.works.map(result => { controller.results.works.map(result => {
return html`<div class="flex search-result"> return html`<div class="flex search-result">
<div class="two-third-500"> <div class="two-third-800 half-500">
<h3 class="title">${result.name}</h3> <h3 class="title">${result.name}</h3>
${result.description ? html`<h4 class="subtitle">${result.description}</h4>` : null} ${result.description ? html`<h4 class="subtitle">${result.description}</h4>` : null}
</div> </div>
<div class="third-500"> <div class="third-800 half-500">
${resultDetails(controller, result)} ${resultDetails(controller, result)}
</div> </div>
</div>`; </div>`;
@ -47,14 +47,14 @@ export const searchView = (state, emit) => {
html`<h2>${i18n.__('search.series_header')}</h2>`, html`<h2>${i18n.__('search.series_header')}</h2>`,
controller.results.series.map(result => { controller.results.series.map(result => {
return html`<div class="flex search-result"> return html`<div class="flex search-result">
<div class="half-500"> <div class="two-third-800 half-500">
<h3 class="title">${result.name}</h3> <h3 class="title">${result.name}</h3>
${result.description ? html`<h4 class="subtitle">${result.description}</h4>` : null} ${result.description ? html`<h4 class="subtitle">${result.description}</h4>` : null}
</div> </div>
<div class="sixth-500 off-third-500"> <div class="third-800 half-500">
<span class="tooltip-left" data-tooltip=${i18n.__('search.see_details_tooltip')}> <span class="tooltip-left" data-tooltip=${i18n.__('search.see_details_tooltip')}>
<a class="small pseudo button" href=${result.link} target="_blank"> <a class="small pseudo button" href=${result.link} target="_blank">
${i18n.__('search.see_details')} ${i18n.__('search.see_inventaire_details')}
</a> </a>
</span> </span>
</div> </div>
@ -68,17 +68,17 @@ export const searchView = (state, emit) => {
html`<h2>${i18n.__('search.people_header')}</h2>`, html`<h2>${i18n.__('search.people_header')}</h2>`,
controller.results.humans.map(result => { controller.results.humans.map(result => {
return html`<div class="flex search-result"> return html`<div class="flex search-result">
<div class="sixth-500"> <div class="sixth">
${result.image ? html`<img src=${result.image.url} class="search-image">` : null} ${result.image ? html`<img src=${result.image.url} class="search-image">` : null}
</div> </div>
<div class="half-500"> <div class="half-800 two-third">
<h3 class="title">${result.name}</h3> <h3 class="title">${result.name}</h3>
${result.description ? html`<h4 class="subtitle">${result.description}</h4>` : null} ${result.description ? html`<h4 class="subtitle">${result.description}</h4>` : null}
</div> </div>
<div class="third-500"> <div class="third-800">
<span class="tooltip-left" data-tooltip=${i18n.__('search.see_details_tooltip')}> <span class="tooltip-left" data-tooltip=${i18n.__('search.see_details_tooltip')}>
<a class="small pseudo button" href=${result.link} target="_blank"> <a class="small pseudo button" href=${result.link} target="_blank">
${i18n.__('search.see_details')} ${i18n.__('search.see_inventaire_details')}
</a> </a>
</span> </span>
</div> </div>

70
app/views/search/resultDetails.js
View File

@ -17,15 +17,79 @@ export const resultDetails = (searchController, result) => {
</span> </span>
</label>`; </label>`;
const modalContent = html`<article> const modalContent = html`<article class="flex">
<span class="tooltip-left" data-tooltip=${i18n.__('search.see_details_tooltip')}> <div class="sixth-700" style="text-align:center;">
<h4>Covers</h4>
<span style="font-size:3em;"><i class="icon-loading animate-spin"></i></span>
</div>
<div class="two-third-700">
<h4>${i18n.__('interaction.average_rating')}</h4>
<span data-tooltip="${result.rating}">${starRating(result.rating)}</span>
<div class="flex">
<div>
<h4>Top Reviews</h4>
</div>
<div>
<a href="/book/${result.uri}" class="small button">
<span style="margin-right:8px;"><i class="icon-chat"></i></span>
<span>${result.reviewCount}</span>
<span>${i18n.__('search.see_interaction_details')}</span>
</a>
</div>
</div>
<article class="card">
<header>
{{USERNAME}} ${starRating(Math.ceil(result.rating))}
</header>
<footer>
<div class="content">
<p>
The only thing worse than yellow snow is green snow. Let's put a touch more of the magic here.
With practice comes confidence. You have to allow the paint to break to make it beautiful.
</p>
<p>
Let all these little things happen. Don't fight them. Learn to use them. Imagination is the key
to painting. You can't make a mistake. Anything that happens you can learn to use - and make
something beautiful out of it. This is a fantastic little painting. In painting, you have unlimited
power. You have the ability to move mountains. We don't have anything but happy trees here.
</p>
<p>
If what you're doing doesn't make you happy - you're doing the wrong thing. A fan brush can be
your best friend. Mountains are so simple, they're hard.
</p>
</div>
<span class="tooltip-top" data-tooltip=${i18n.__('interaction.heart')}>
<button class="pseudo">
<i class="icon-heart-outline"></i>
</button>
</span>
<span>
${result.reviewCount}
</span>
</footer>
</article>
</div>
<div class="sixth-700">
<p>
<span data-tooltip=${i18n.__('interaction.add')}>
<button class="success">
<i class="icon-plus"></i>
</button>
</span>
</p>
<p>
<span data-tooltip=${i18n.__('search.see_details_tooltip')}>
<a class="small pseudo button" href=${result.link} target="_blank"> <a class="small pseudo button" href=${result.link} target="_blank">
${i18n.__('search.see_details')} ${i18n.__('search.see_book_details')}
</a> </a>
</span> </span>
</p>
</div>
</article>`; </article>`;
return modal(modalId, searchController, modalContent, { return modal(modalId, searchController, modalContent, {
styles: "width:90%;",
buttonHTML, // This should be replaced with buttonHTML containing the ratings and number of reviews etc. buttonHTML, // This should be replaced with buttonHTML containing the ratings and number of reviews etc.
headerText: result.name, headerText: result.name,
}); });