Cleanup of review-css to use tailwind
This commit is contained in:
parent
9cb3a49b28
commit
a76d8822ff
7 changed files with 52 additions and 108 deletions
|
|
@ -12,7 +12,7 @@ import SingleReview from "./SingleReview";
|
|||
export default class ReviewElement extends UIElement {
|
||||
private readonly _reviews: UIEventSource<Review[]>;
|
||||
private readonly _subject: string;
|
||||
private _middleElement: UIElement;
|
||||
private readonly _middleElement: UIElement;
|
||||
|
||||
constructor(subject: string, reviews: UIEventSource<Review[]>, middleElement: UIElement) {
|
||||
super(reviews);
|
||||
|
|
@ -34,7 +34,7 @@ export default class ReviewElement extends UIElement {
|
|||
const avg = (revs.map(review => review.rating).reduce((a, b) => a + b, 0) / revs.length);
|
||||
elements.push(
|
||||
new Combine([
|
||||
SingleReview.GenStars(avg).SetClass("stars flex"),
|
||||
SingleReview.GenStars(avg),
|
||||
`<a target="_blank" href='https://mangrove.reviews/search?sub=${encodeURIComponent(this._subject)}'>`,
|
||||
revs.length === 1 ? Translations.t.reviews.title_singular :
|
||||
Translations.t.reviews.title
|
||||
|
|
@ -43,7 +43,7 @@ export default class ReviewElement extends UIElement {
|
|||
"</a>"
|
||||
])
|
||||
|
||||
.SetClass("review-title"));
|
||||
.SetClass("font-2xl flex justify-between items-center pl-2 pr-2"));
|
||||
|
||||
elements.push(this._middleElement);
|
||||
|
||||
|
|
@ -56,7 +56,7 @@ export default class ReviewElement extends UIElement {
|
|||
|
||||
.SetClass("review-attribution"))
|
||||
|
||||
return new Combine(elements).SetClass("review").Render();
|
||||
return new Combine(elements).SetClass("block").Render();
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -56,7 +56,7 @@ export default class ReviewForm extends InputElement<Review> {
|
|||
onSave(this._value.data, () => {
|
||||
self._saveButton = Translations.t.reviews.saved.SetClass("thanks");
|
||||
});
|
||||
})
|
||||
}).SetClass("break-normal")
|
||||
|
||||
this._isAffiliated = new CheckBoxes([t.i_am_affiliated])
|
||||
|
||||
|
|
|
|||
|
|
@ -22,9 +22,9 @@ export default class SingleReview extends UIElement{
|
|||
}
|
||||
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' />" : ""
|
||||
])
|
||||
"<img src='./assets/svg/star.svg' class='h-8 md:h-12'/>".repeat(Math.floor(scoreTen / 2)),
|
||||
scoreTen % 2 == 1 ? "<img src='./assets/svg/star_half.svg' class='h-8 md:h-12'/>" : ""
|
||||
]).SetClass("flex w-max")
|
||||
}
|
||||
InnerRender(): string {
|
||||
const d = this._review.date;
|
||||
|
|
@ -33,25 +33,23 @@ export default class SingleReview extends UIElement{
|
|||
[
|
||||
new Combine([
|
||||
SingleReview.GenStars(review.rating)
|
||||
.SetClass("review-rating"),
|
||||
new FixedUiElement(review.comment).SetClass("review-comment")
|
||||
]).SetClass("review-stars-comment"),
|
||||
|
||||
]),
|
||||
new FixedUiElement(review.comment),
|
||||
new Combine([
|
||||
new Combine([
|
||||
|
||||
new FixedUiElement(review.author).SetClass("review-author"),
|
||||
new Combine(["<b>",review.author,"</b>"]),
|
||||
review.affiliated ? Translations.t.reviews.affiliated_reviewer_warning : "",
|
||||
]).SetStyle("margin-right: 0.5em"),
|
||||
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-author-date")
|
||||
.SetClass("subtle-lighter")
|
||||
]).SetClass("flex mb-4 justify-end")
|
||||
|
||||
]
|
||||
);
|
||||
el.SetClass("review-element");
|
||||
if(review.made_by_user){
|
||||
el.SetClass("review-by-current-user")
|
||||
el.SetClass("block p-2 m-1 rounded-xl subtle-background review-element");
|
||||
if(review.made_by_user.data){
|
||||
el.SetClass("border-attention-catch")
|
||||
}
|
||||
return el.Render();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -80,18 +80,21 @@ export default class SpecialVisualizations {
|
|||
|
||||
{
|
||||
funcName: "reviews",
|
||||
docs: "Adds an overview of the mangrove-reviews of this object. IMPORTANT: the _name_ of the object should be defined for this to work!",
|
||||
docs: "Adds an overview of the mangrove-reviews of this object. Mangrove.Reviews needs - in order to identify the reviewed object - a coordinate and a name. By default, the name of the object is given, but this can be overwritten",
|
||||
example: "<b>{reviews()}<b> for a vanilla review, <b>{reviews(name, play_forest)}</b> to review a play forest. If a name is known, the name will be used as identifier, otherwise 'play_forest' is used",
|
||||
args: [{
|
||||
name: "subject",
|
||||
doc: "The identifier used for this value; by default the name of the reviewed object"
|
||||
name: "subjectKey",
|
||||
defaultValue: "name",
|
||||
doc: "The key to use to determine the subject. If specified, the subject will be <b>tags[subjectKey]</b>"
|
||||
}, {
|
||||
name: "fallback",
|
||||
doc: "The identifier to use, if <i>tags[subjectKey]</i> as specified above is not available. This is effectively a fallback value"
|
||||
}],
|
||||
constr: (state: State, tags, args) => {
|
||||
const tgs = tags.data;
|
||||
let subject = tgs.name ?? "";
|
||||
if (args[0] !== undefined && args[0] !== "") {
|
||||
subject = args[0];
|
||||
}
|
||||
if (subject === "") {
|
||||
const key = args[0] ?? "name"
|
||||
let subject = tgs[key] ?? args[1];
|
||||
if (subject === undefined || subject === "") {
|
||||
return Translations.t.reviews.name_required;
|
||||
}
|
||||
const mangrove = MangroveReviews.Get(Number(tgs._lon), Number(tgs._lat),
|
||||
|
|
@ -147,7 +150,7 @@ export default class SpecialVisualizations {
|
|||
args: [
|
||||
{
|
||||
name: "url",
|
||||
doc: "The url to share (defualt: current URL)",
|
||||
doc: "The url to share (default: current URL)",
|
||||
}
|
||||
],
|
||||
constr: (state: State, tagSource: UIEventSource<any>, args) => {
|
||||
|
|
@ -204,7 +207,9 @@ export default class SpecialVisualizations {
|
|||
|
||||
|
||||
return new Combine([
|
||||
"<h3>Special tag renderings</h3>",
|
||||
"In a tagrendering, some special values are substituted by an advanced UI-element. This allows advanced features and visualizations to be reused by custom themes or even to query third-party API's.",
|
||||
"General usage is <b>{func_name()}</b> or <b>{func_name(arg, someotherarg)}</b>. Note that you <i>do not</i> need to use quotes around your arguments, the comma is enough to seperate them. This also implies you cannot use a comma in your args",
|
||||
...helpTexts
|
||||
|
||||
]
|
||||
|
|
|
|||
|
|
@ -18,19 +18,19 @@ export default class Translations {
|
|||
}
|
||||
|
||||
|
||||
static T(t: string | any): Translation {
|
||||
static T(t: string | any, context = undefined): Translation {
|
||||
if(t === undefined){
|
||||
return undefined;
|
||||
}
|
||||
if(typeof t === "string"){
|
||||
return new Translation({"*":t});
|
||||
return new Translation({"*":t}, context);
|
||||
}
|
||||
if(t.render !== undefined){
|
||||
const msg = "Creating a translation, but this object contains a 'render'-field. Use the translation directly"
|
||||
console.error(msg, t);
|
||||
throw msg
|
||||
}
|
||||
return new Translation(t);
|
||||
return new Translation(t, context);
|
||||
}
|
||||
|
||||
private static wtcache = {}
|
||||
|
|
|
|||
|
|
@ -1,70 +1,3 @@
|
|||
.review {
|
||||
display: block;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.review-by-current-user {
|
||||
border: 5px solid var(--catch-detail-color);
|
||||
}
|
||||
|
||||
.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-comment {
|
||||
display: flex;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.review-author {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.review-author-date {
|
||||
display: flex;
|
||||
margin-bottom: 0.5em;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
|
||||
.review-element {
|
||||
padding: 1em;
|
||||
margin: 0.5em;
|
||||
display: block;
|
||||
border-radius: 1em;
|
||||
background-color: var(--subtle-detail-color);
|
||||
color: var(--subtle-detail-color-contrast);
|
||||
}
|
||||
|
||||
.review-attribution {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -110,7 +110,15 @@ a {
|
|||
|
||||
.subtle-background {
|
||||
background: var(--subtle-detail-color);
|
||||
color: var(--subtle-detail-color-contrast);
|
||||
}
|
||||
|
||||
.subtle-lighter {
|
||||
color: var(--subtle-detail-color-light-contrast);
|
||||
}
|
||||
|
||||
.border-attention-catch{ border: 5px solid var(--catch-detail-color);}
|
||||
|
||||
.slick-prev:before, .slick-next:before {
|
||||
/*Slideshow workaround*/
|
||||
color:black !important;
|
||||
|
|
|
|||
Loading…
Reference in a new issue