Cleanup of review-css to use tailwind

UI/Reviews/ReviewElement.ts

@@ -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();
     }
 
 }

UI/Reviews/ReviewForm.ts

@@ -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])
 

UI/Reviews/SingleReview.ts

@@ -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)),
+            "<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' />" : ""
+            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")
+                new FixedUiElement(review.comment),
-                ]).SetClass("review-stars-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("subtle-lighter")
-                ]).SetClass("review-author-date")
+                ]).SetClass("flex mb-4 justify-end")
 
             ]
         );
-        el.SetClass("review-element");
+        el.SetClass("block p-2 m-1 rounded-xl subtle-background review-element");
-        if(review.made_by_user){
+        if(review.made_by_user.data){
-            el.SetClass("review-by-current-user")
+            el.SetClass("border-attention-catch")
         }
         return el.Render();
     }

UI/SpecialVisualizations.ts

@@ -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",
+                    name: "subjectKey",
-                    doc: "The identifier used for this value; by default the name of the reviewed object"
+                    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 ?? "";
+                    const key = args[0] ?? "name"
-                    if (args[0] !== undefined && args[0] !== "") {
+                    let subject = tgs[key] ?? args[1];
-                        subject = args[0];
+                    if (subject === undefined || subject === "") {
-                    }
-                    if (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
 
             ]

UI/i18n/Translations.ts

@@ -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 = {}

css/ReviewElement.css

@@ -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;

index.css

@@ -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;