Move reviewCard to a partial for reusability

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

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>`;
}

View File

@ -1,5 +1,6 @@
import html from 'choo/html';
import { reviewCard } from '../partials/reviewCard';
import { starRating } from '../partials/starRating';
import { modal } from '../partials/modal';
@ -70,27 +71,7 @@ export const resultDetails = (searchController, result, emit = () => {}) => {
</div>
</div>
${result.reviews.map(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>`;
return reviewCard(review);
})}
</div>
<div class="sixth-700">