Alamantus/Readlebee
1
0
Fork 0
mirror of https://gitlab.com/Alamantus/Readlebee.git synced 2025-08-09 08:31:13 +02:00
Code Issues Releases Wiki Activity

Move reviewCard to a partial for reusability

Browse source
This commit is contained in:
Robbie Antenesse 2019-09-13 21:54:17 -06:00
parent 71516dd833
commit ea87184bb3
2 changed files with 29 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
app/views/partials/reviewCard.js Normal file
View file

@ -0,0 +1,27 @@
import html from 'choo/html';
import { starRating } from './starRating';
export const reviewCard = (review) => {
return html`<article class="card">
<header style="font-weight:normal;">
<strong>${review.reviewer.name}</strong> <em>${review.reviewer.handle}</em><br>
${review.date} ${starRating(Math.ceil(review.rating))}
</header>
<footer>
<div class="content">
<p>
${review.review}
</p>
</div>
<span class="tooltip-top" data-tooltip=${i18n.__('interaction.heart')}>
<button class="pseudo">
<i class="icon-heart-outline"></i>
</button>
</span>
<span>
${review.hearts}
</span>
</footer>
</article>`;
}

23
app/views/search/resultDetails.js
View file

@ -1,5 +1,6 @@
import html from 'choo/html'; import html from 'choo/html';
import { reviewCard } from '../partials/reviewCard';
import { starRating } from '../partials/starRating'; import { starRating } from '../partials/starRating';
import { modal } from '../partials/modal'; import { modal } from '../partials/modal';
@ -70,27 +71,7 @@ export const resultDetails = (searchController, result, emit = () => {}) => {
</div> </div>
</div> </div>
${result.reviews.map(review => { ${result.reviews.map(review => {
return html`<article class="card"> return reviewCard(review);
<header style="font-weight:normal;">
<strong>${review.reviewer.name}</strong> <em>${review.reviewer.handle}</em><br>
${review.date} ${starRating(Math.ceil(review.rating))}
</header>
<footer>
<div class="content">
<p>
${review.review}
</p>
</div>
<span class="tooltip-top" data-tooltip=${i18n.__('interaction.heart')}>
<button class="pseudo">
<i class="icon-heart-outline"></i>
</button>
</span>
<span>
${review.hearts}
</span>
</footer>
</article>`;
})} })}
</div> </div>
<div class="sixth-700"> <div class="sixth-700">