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

Add star rating icons and review count to search results 

These are currently randomized until database support is added
This commit is contained in:
Robbie Antenesse 2019-09-11 22:42:01 -06:00
parent c243928d23
commit 896dc7b869
18 changed files with 145 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/fonts/fontello/LICENSE.txt
View File

@ -1,6 +1,15 @@
Font license info
## Font Awesome
Copyright (C) 2016 by Dave Gandy
Author: Dave Gandy
License: SIL ()
Homepage: http://fortawesome.github.com/Font-Awesome/
## Typicons
(c) Stephen Hutchings 2012
@ -19,12 +28,3 @@ Font license info
Homepage: http://fontello.com
## Font Awesome
Copyright (C) 2016 by Dave Gandy
Author: Dave Gandy
License: SIL ()
Homepage: http://fortawesome.github.com/Font-Awesome/

7
app/fonts/fontello/css/icons-codes.css vendored
View File

@ -1,7 +1,12 @@
.icon-star:before { content: '\e800'; } /* '' */
.icon-star-empty:before { content: '\e801'; } /* '' */
.icon-chat:before { content: '\e802'; } /* '' */
.icon-heart-outline:before { content: '\e803'; } /* '' */
.icon-heart-filled:before { content: '\e804'; } /* '' */
.icon-comment:before { content: '\e805'; } /* '' */
.icon-check:before { content: '\e807'; } /* '' */
.icon-plus:before { content: '\e808'; } /* '' */
.icon-loading:before { content: '\e839'; } /* '' */
.icon-external:before { content: '\f08e'; } /* '' */
.icon-external:before { content: '\f08e'; } /* '' */
.icon-star-half:before { content: '\f123'; } /* '' */

19
app/fonts/fontello/css/icons-embedded.css vendored
View File

File diff suppressed because one or more lines are too long

7
app/fonts/fontello/css/icons-ie7-codes.css vendored
View File

@ -1,7 +1,12 @@
.icon-star { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-star-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-chat { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-heart-outline { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-heart-filled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-comment { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-check { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-loading { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-external { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-external { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-star-half { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

7
app/fonts/fontello/css/icons-ie7.css vendored
View File

@ -10,9 +10,14 @@
/* font-size: 120%; */
}
.icon-star { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-star-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-chat { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-heart-outline { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-heart-filled { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-comment { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-check { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-loading { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-external { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-external { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
.icon-star-half { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

21
app/fonts/fontello/css/icons.css vendored
View File

@ -1,11 +1,11 @@
@font-face {
font-family: 'icons';
src: url('../font/icons.eot?51482644');
src: url('../font/icons.eot?51482644#iefix') format('embedded-opentype'),
url('../font/icons.woff2?51482644') format('woff2'),
url('../font/icons.woff?51482644') format('woff'),
url('../font/icons.ttf?51482644') format('truetype'),
url('../font/icons.svg?51482644#icons') format('svg');
src: url('../font/icons.eot?59778868');
src: url('../font/icons.eot?59778868#iefix') format('embedded-opentype'),
url('../font/icons.woff2?59778868') format('woff2'),
url('../font/icons.woff?59778868') format('woff'),
url('../font/icons.ttf?59778868') format('truetype'),
url('../font/icons.svg?59778868#icons') format('svg');
font-weight: normal;
font-style: normal;
}
@ -15,7 +15,7 @@
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'icons';
src: url('../font/icons.svg?51482644#icons') format('svg');
src: url('../font/icons.svg?59778868#icons') format('svg');
}
}
*/
@ -55,9 +55,14 @@
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}
.icon-star:before { content: '\e800'; } /* '' */
.icon-star-empty:before { content: '\e801'; } /* '' */
.icon-chat:before { content: '\e802'; } /* '' */
.icon-heart-outline:before { content: '\e803'; } /* '' */
.icon-heart-filled:before { content: '\e804'; } /* '' */
.icon-comment:before { content: '\e805'; } /* '' */
.icon-check:before { content: '\e807'; } /* '' */
.icon-plus:before { content: '\e808'; } /* '' */
.icon-loading:before { content: '\e839'; } /* '' */
.icon-external:before { content: '\f08e'; } /* '' */
.icon-external:before { content: '\f08e'; } /* '' */
.icon-star-half:before { content: '\f123'; } /* '' */

17
app/fonts/fontello/demo.html
View File

@ -229,11 +229,11 @@ body {
}
@font-face {
font-family: 'icons';
src: url('./font/icons.eot?47391532');
src: url('./font/icons.eot?47391532#iefix') format('embedded-opentype'),
url('./font/icons.woff?47391532') format('woff'),
url('./font/icons.ttf?47391532') format('truetype'),
url('./font/icons.svg?47391532#icons') format('svg');
src: url('./font/icons.eot?54567039');
src: url('./font/icons.eot?54567039#iefix') format('embedded-opentype'),
url('./font/icons.woff?54567039') format('woff'),
url('./font/icons.ttf?54567039') format('truetype'),
url('./font/icons.svg?54567039#icons') format('svg');
font-weight: normal;
font-style: normal;
}
@ -298,14 +298,21 @@ body {
</div>
<div class="container" id="icons">
<div class="row">
<div class="the-icons span3" title="Code: 0xe800"><i class="demo-icon icon-star">&#xe800;</i> <span class="i-name">icon-star</span><span class="i-code">0xe800</span></div>
<div class="the-icons span3" title="Code: 0xe801"><i class="demo-icon icon-star-empty">&#xe801;</i> <span class="i-name">icon-star-empty</span><span class="i-code">0xe801</span></div>
<div class="the-icons span3" title="Code: 0xe802"><i class="demo-icon icon-chat">&#xe802;</i> <span class="i-name">icon-chat</span><span class="i-code">0xe802</span></div>
<div class="the-icons span3" title="Code: 0xe803"><i class="demo-icon icon-heart-outline">&#xe803;</i> <span class="i-name">icon-heart-outline</span><span class="i-code">0xe803</span></div>
</div>
<div class="row">
<div class="the-icons span3" title="Code: 0xe804"><i class="demo-icon icon-heart-filled">&#xe804;</i> <span class="i-name">icon-heart-filled</span><span class="i-code">0xe804</span></div>
<div class="the-icons span3" title="Code: 0xe805"><i class="demo-icon icon-comment">&#xe805;</i> <span class="i-name">icon-comment</span><span class="i-code">0xe805</span></div>
<div class="the-icons span3" title="Code: 0xe807"><i class="demo-icon icon-check">&#xe807;</i> <span class="i-name">icon-check</span><span class="i-code">0xe807</span></div>
<div class="the-icons span3" title="Code: 0xe808"><i class="demo-icon icon-plus">&#xe808;</i> <span class="i-name">icon-plus</span><span class="i-code">0xe808</span></div>
</div>
<div class="row">
<div class="the-icons span3" title="Code: 0xe839"><i class="demo-icon icon-loading animate-spin">&#xe839;</i> <span class="i-name">icon-loading</span><span class="i-code">0xe839</span></div>
<div class="the-icons span3" title="Code: 0xf08e"><i class="demo-icon icon-external">&#xf08e;</i> <span class="i-name">icon-external</span><span class="i-code">0xf08e</span></div>
<div class="the-icons span3" title="Code: 0xf123"><i class="demo-icon icon-star-half">&#xf123;</i> <span class="i-name">icon-star-half</span><span class="i-code">0xf123</span></div>
</div>
</div>
<div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>

BIN
app/fonts/fontello/font/icons.eot
View File

Binary file not shown.

10
app/fonts/fontello/font/icons.svg
View File

@ -6,10 +6,18 @@
<font id="icons" horiz-adv-x="1000" >
<font-face font-family="icons" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
<missing-glyph horiz-adv-x="1000" />
<glyph glyph-name="star" unicode="&#xe800;" d="M929 489q0-12-15-27l-202-197 48-279q0-4 0-12 0-11-6-19t-17-9q-10 0-22 7l-251 132-250-132q-12-7-23-7-11 0-17 9t-6 19q0 4 1 12l48 279-203 197q-14 15-14 27 0 21 31 26l280 40 126 254q11 23 27 23t28-23l125-254 280-40q32-5 32-26z" horiz-adv-x="928.6" />
<glyph glyph-name="star-empty" unicode="&#xe801;" d="M635 290l170 166-235 34-106 213-105-213-236-34 171-166-41-235 211 111 211-111z m294 199q0-12-15-27l-202-197 48-279q0-4 0-12 0-28-23-28-10 0-22 7l-251 132-250-132q-12-7-23-7-11 0-17 9t-6 19q0 4 1 12l48 279-203 197q-14 15-14 27 0 21 31 26l280 40 126 254q11 23 27 23t28-23l125-254 280-40q32-5 32-26z" horiz-adv-x="928.6" />
<glyph glyph-name="chat" unicode="&#xe802;" d="M1094 688q65 0 110-45t46-111l0-364q0-65-46-110t-110-46l-53 0 0-156-156 156-416 0q-65 0-111 46t-45 110l-157-156 0 156q-65 0-110 46t-46 111l0 363q0 65 46 111t110 46l625 0q65 0 111-46t46-111l156 0z m-938-416l209 0 0 234q0 54 38 92t92 39l339 0 0 51q0 22-16 37t-37 16l-625 0q-21 0-37-16t-15-37l0-363q0-22 15-37t37-16z m990-104l0 364q0 21-15 37t-37 16l-599 0q-32 0-56-24t-23-55l0-338q0-21 16-37t37-15l625 0q21 0 37 15t15 37z" horiz-adv-x="1250" />
<glyph glyph-name="heart-outline" unicode="&#xe803;" d="M508-66q-17 0-29 9-26 17-85 58t-154 112-134 110q-106 106-106 264 0 116 82 198t198 82q143 0 228-118 38 55 99 86t129 32q117 0 198-82t81-198q0-158-106-264-38-38-133-110t-155-113-83-57q-13-9-30-9z m-228 729q-72 0-124-51t-52-125q0-114 76-190 79-79 328-248 248 169 327 248 76 76 76 190 0 73-51 125t-124 51q-73 0-125-51t-51-125q0-22-16-37t-36-15-37 15-15 37q0 73-52 125t-124 51z" horiz-adv-x="1015" />
<glyph glyph-name="heart-filled" unicode="&#xe804;" d="M456 487q0 95-67 161t-161 67-162-67-66-161q0-137 91-229 37-36 128-104t164-118l73-50q282 190 364 272 91 92 91 229 0 95-66 161t-161 67-161-67-67-161z" horiz-adv-x="911" />
<glyph glyph-name="comment" unicode="&#xe805;" d="M781 662l-625 0q-21 0-37-15t-15-36l0-365q0-21 15-37t37-16l157 0 0-8 8 8 460 0q22 0 37 16t16 37l0 365q0 21-16 36t-37 15z m0 105q65 0 111-46t46-110l0-365q0-65-46-111t-111-45l-416 0-156-157 0 157-53 0q-65 0-110 45t-46 111l0 365q0 65 46 110t110 46l625 0z" horiz-adv-x="938" />
<glyph glyph-name="check" unicode="&#xe807;" d="M625 676q38-20 49-63t-9-80l-260-469q-30-53-91-53-43 0-74 31l-209 207q-31 32-31 74t31 74 74 31 74-31l111-110 193 347q20 38 62 50t80-8z" horiz-adv-x="679" />
<glyph glyph-name="plus" unicode="&#xe808;" d="M729 454q44 0 74-31t31-73-31-73-74-30l-208 3 0-212q0-43-30-73t-75-31-73 31-30 73l3 212-212-3q-44 0-74 30t-30 73 30 73 74 31l212 0-3 209q0 42 30 73t73 31 75-31 30-73l0-209 208 0z" horiz-adv-x="834" />
@ -17,6 +25,8 @@
<glyph glyph-name="loading" unicode="&#xe839;" d="M855 9c-189-190-520-172-705 13-190 190-200 494-28 695 11 13 21 26 35 34 36 23 85 18 117-13 30-31 35-76 16-112-5-9-9-15-16-22-140-151-145-379-8-516 153-153 407-121 542 34 106 122 142 297 77 451-83 198-305 291-510 222l0 1c236 82 492-24 588-252 71-167 37-355-72-493-11-15-23-29-36-42z" horiz-adv-x="1000" />
<glyph glyph-name="external" unicode="&#xf08e;" d="M786 332v-178q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h393q7 0 12-5t5-13v-36q0-8-5-13t-12-5h-393q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v178q0 8 5 13t13 5h36q8 0 13-5t5-13z m214 482v-285q0-15-11-25t-25-11-25 11l-98 98-364-364q-5-6-13-6t-12 6l-64 64q-6 5-6 12t6 13l364 364-98 98q-11 11-11 25t11 25 25 11h285q15 0 25-11t11-25z" horiz-adv-x="1000" />
<glyph glyph-name="star-half" unicode="&#xf123;" d="M662 316l143 140-198 29-37 5-17 34-89 179v-537l33-17 178-94-34 198-6 37z m252 146l-202-197 48-279q2-19-4-29t-19-11q-9 0-22 7l-251 132-250-132q-13-7-23-7-12 0-19 11t-3 29l48 279-203 197q-18 18-13 33t30 20l280 40 126 254q11 23 27 23 16 0 28-23l125-254 280-40q25-4 31-20t-14-33z" horiz-adv-x="928.6" />
</font>
</defs>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
app/fonts/fontello/font/icons.ttf
View File

Binary file not shown.

BIN
app/fonts/fontello/font/icons.woff
View File

Binary file not shown.

BIN
app/fonts/fontello/font/icons.woff2
View File

Binary file not shown.

30
app/fonts/fontello/fontello-config.json
View File

@ -41,6 +41,36 @@
"css": "plus",
"code": 59400,
"src": "typicons"
},
{
"uid": "474656633f79ea2f1dad59ff63f6bf07",
"css": "star",
"code": 59392,
"src": "fontawesome"
},
{
"uid": "d17030afaecc1e1c22349b99f3c4992a",
"css": "star-empty",
"code": 59393,
"src": "fontawesome"
},
{
"uid": "84cf1fcc3fec556e7eaeb19679ca2dc9",
"css": "star-half",
"code": 61731,
"src": "fontawesome"
},
{
"uid": "ccf71c505b173c61a2e4e8c8cb907dfa",
"css": "chat",
"code": 59394,
"src": "typicons"
},
{
"uid": "b90868gfogj970a1g0dnot6hm5r4uj55",
"css": "comment",
"code": 59397,
"src": "typicons"
}
]
}

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

@ -17,10 +17,12 @@
"series_header": "Series",
"books_header": "Books",
"see_details": "See Details",
"see_details_tooltip": "Opens Inventaire in a new tab/window",
"see_details_tooltip": "Opens Inventaire in a new tab/window"
},
"interaction": {
"heart": "Like",
"add": "Add to Shelf"
"add": "Add to Shelf",
"average_rating": "Average Rating",
"reviews_written": "Total Reviews Written"
}
}

19
app/views/partials/starRating.js Normal file
View File

@ -0,0 +1,19 @@
import html from 'choo/html';
export const starRating = (rating) => {
const wholeStars = Math.floor(rating);
const hasPartial = rating - wholeStars > 0;
const emptyStars = 5 - wholeStars - (hasPartial ? 1 : 0);
const stars = [];
for (let i = 0; i < wholeStars; i++) {
stars.push(html`<i class="icon-star"></i>`);
}
if (hasPartial) {
stars.push(html`<i class="icon-star-half"></i>`);
}
for (let i = 0; i < emptyStars; i++) {
stars.push(html`<i class="icon-star-empty"></i>`);
}
return stars;
}

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

@ -35,22 +35,7 @@ export const searchView = (state, emit) => {
${result.description ? html`<h4 class="subtitle">${result.description}</h4>` : null}
</div>
<div class="third-500">
${resultDetails(
controller,
result,
[
html`<span data-tooltip=${i18n.__('interaction.heart')}>
<button class="pseudo">
<i class="pseudo icon-heart-outline"></i>
</button>
</span>`,
html`<span data-tooltip=${i18n.__('interaction.add')}>
<button class="pseudo">
<i class="pseudo icon-plus"></i>
</button>
</span>`,
]
)}
${resultDetails(controller, result)}
</div>
</div>`;
}),

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

@ -1,10 +1,22 @@
import html from 'choo/html';
import { starRating } from '../partials/starRating';
import { modal } from '../partials/modal';
export const resultDetails = (searchController, result, buttonHTML) => {
export const resultDetails = (searchController, result) => {
const { i18n } = searchController;
const modalId = `result_${result.uri}}`;
const modalId = `result_${result.uri}`;
const buttonHTML = html`<label for=${modalId} class="pseudo button">
<span data-tooltip="${i18n.__('interaction.average_rating')}: ${result.rating}">
${starRating(result.rating)}
</span>
<span style="margin-left:10px;" data-tooltip=${i18n.__('interaction.reviews_written')}>
<span style="margin-right:8px;"><i class="icon-chat"></i></span>
<span>${result.reviewCount}</span>
</span>
</label>`;
const modalContent = html`<article>
<span class="tooltip-left" data-tooltip=${i18n.__('search.see_details_tooltip')}>
<a class="small pseudo button" href=${result.link} target="_blank">
@ -14,7 +26,7 @@ export const resultDetails = (searchController, result, buttonHTML) => {
</article>`;
return modal(modalId, searchController, modalContent, {
buttonText: i18n.__('search.see_details'), // 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,
});
}

3
server/controllers/search.js
View File

@ -129,7 +129,8 @@ class SearchController {
? work.uri
: null
),
// Ratings and review count will be added here
rating: (Math.random() * 5).toFixed(1),
reviewCount: Math.floor(Math.random() * 100),
};
});