Osmwithspace/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Styling the reviews

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-12-07 03:31:13 +01:00
parent bb20c41002
commit c02406241e
5 changed files with 87 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

5
AllTranslationAssets.ts
View file

@ -124,7 +124,8 @@ export default class AllTranslationAssets {
loginNeeded: new Translation( {"en":"<h3>Log in</h3>A personal layout is only available for OpenStreetMap users","es":"<h3>Entrar</h3>El diseño personalizado sólo está disponible para los usuarios de OpenstreetMap","ca":"<h3>Entrar</h3>El disseny personalizat només està disponible pels usuaris d' OpenstreetMap","gl":"<h3>Iniciar a sesión</h3>O deseño personalizado só está dispoñíbel para os usuarios do OpenstreetMap","de":"<h3>Anmelden</h3>Ein persönliches Layout ist nur für OpenStreetMap-Benutzer verfügbar"} ),
reload: new Translation( {"en":"Reload the data","es":"Recargar datos","ca":"Recarregar dades","gl":"Recargar os datos","de":"Daten neu laden"} ),
},
reviews: { title: new Translation( {"en":"Reviews","nl":"Beoordelingen"} ),
attribution: new Translation( {"en":"Reviews are powered by <a href='https://mangrove.reviews/' target='_blank'>Mangrove Reviews</a> and are available under <a href='https://mangrove.reviews/terms#8-licensing-of-content' target='_blank'>CC-BY 4.0</a>"} ),
reviews: { title: new Translation( {"en":"{count} reviews","nl":"{count} beoordelingen"} ),
no_reviews_yet: new Translation( {"en":"There are no reviews yet. Be the first to write one and help open data and the business!","nl":"Er zijn nog geen beoordelingen. Wees de eerste om een beoordeling te schrijven en help open data en het bedrijf"} ),
attribution: new Translation( {"en":"Reviews are powered by <a href='https://mangrove.reviews/' target='_blank'>Mangrove Reviews</a> and are available under <a href='https://mangrove.reviews/terms#8-licensing-of-content' target='_blank'>CC-BY 4.0</a>","nl":"De beoordelingen worden voorzien door <a href='https://mangrove.reviews/' target='_blank'>Mangrove Reviews</a> en zijn beschikbaar onder de<a href='https://mangrove.reviews/terms#8-licensing-of-content' target='_blank'>CC-BY 4.0-licentie</a> "} ),
},
}}

28
Logic/Web/MangroveReviews.ts
View file

@ -30,7 +30,33 @@ export default class MangroveReviews {
mangrove.getReviews({sub: uri}).then(
(data) => {
const reviews = [];
const reviews = [{
date: new Date(),
comment: "Short",
rating: 1,
author: "Troll"
},{
date: new Date(),
comment: "Not good",
rating: 10,
author: "Troll"
},{
date: new Date(),
comment: "Not soo good",
rating: 20,
author: "Troll"
},{
date: new Date(),
comment: "Meh",
rating: 30,
author: "Troll"
},
{
date: new Date(),
comment: "Lorum ipsum lorem qsmldkfj qsdfmqmsd qmlsdmlkjazmeliq dmqlsdkf amldkfjqmlskdbmaize qsmdl fka mqlsnkd azie qmxbilqmslef amlzdf qsmdlfk afdml kqbnqsdlkf m",
rating: 50,
author: "Troll"
}];
for (const review of data.reviews) {
const r = review.payload;
reviews.push({

43
UI/ReviewElement.ts
View file

@ -23,30 +23,43 @@ export default class ReviewElement extends UIElement {
InnerRender(): string {
function genStars(rating: number) {
const scoreTen = Math.round(rating / 10);
return new Combine([
"<img src='./assets/svg/star.svg' />".repeat(Math.floor(scoreTen / 2)),
scoreTen % 2 == 1 ? "<img src='./assets/svg/star_half.svg' />" : ""
])
}
const elements = [];
const revs = this._reviews.data;
revs.sort((a,b) => (b.date.getTime() - a.date.getTime())); // Sort with most recent first
const avg = (revs.map(review => review.rating).reduce((a, b) => a + b, 0) / revs.length);
elements.push(
new Combine([
genStars(avg).SetClass("stars"),
Translations.t.reviews.title
.Subs({count: "" + revs.length})
])
elements.push(Translations.t.reviews.title.SetClass("review-title"));
.SetClass("review-title"));
elements.push(...this._reviews.data.map(review => {
const stars = Math.round(review.rating / 10)
const fullStars = Math.floor(stars / 2);
elements.push(...revs.map(review => {
const d = review.date;
return new Combine(
[
new Combine([
genStars(review.rating)
.SetClass("review-rating"),
new FixedUiElement(review.comment).SetClass("review-comment")
]).SetClass("review-stars-comment"),
new Combine([
"<img src='./assets/svg/star.svg' />".repeat(fullStars),
stars % 2 == 1 ? "<img src='./assets/svg/star_half.svg' />" : ""
]).SetClass("review-rating"),
new Combine([
new FixedUiElement(review.author).SetClass("review-author"),
new FixedUiElement(`${d.getFullYear()}-${Utils.TwoDigits(d.getMonth() + 1)}-${Utils.TwoDigits(d.getDate())} ${Utils.TwoDigits(d.getHours())}:${Utils.TwoDigits(d.getMinutes())}`)
.SetClass("review-date"),
]).SetClass("review-stars-date"),
new FixedUiElement(review.comment).SetClass("review-comment"),
"<br/>",
new FixedUiElement(review.author).SetClass("review-author"),
.SetClass("review-date")
]).SetClass("review-author-date")
]
).SetClass("review-element")

4
assets/translations.json
View file

@ -910,8 +910,8 @@
},
"reviews": {
"title": {
"en": "Reviews",
"nl": "Beoordelingen"
"en": "{count} reviews",
"nl": "{count} beoordelingen"
},
"no_reviews_yet": {
"en": "There are no reviews yet. Be the first to write one and help open data and the business!",

32
css/ReviewElement.css
View file

@ -1,3 +1,18 @@
.review-title {
font-size: x-large;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 1em;
padding-right: 1em;
}
.review-title img {
max-width: 1.5em;
height: 1.5em;
}
.review-rating img {
max-width: 1em;
height: 1em;
@ -6,24 +21,34 @@
.review-rating {
display: flex;
flex-direction: row;
width: 5em;
margin-right: 0.5em;
flex-shrink: 0;
}
.review-date {
color: var(--subtle-detail-color-light-contrast);
}
.review-stars-date {
.review-stars-comment {
display: flex;
justify-content: space-between;
margin-bottom: 0.5em;
}
.review-author {
font-weight: bold;
margin-right: 0.5em;
}
.review-author-date {
display: flex;
margin-bottom: 0.5em;
justify-content: flex-end;
}
.review-element {
padding: 1em;
margin: 0.5em;
@ -51,6 +76,3 @@
margin-left: 0.5em;
}
.review-title {
font-size: x-large;
}