diff --git a/UI/Input/TextField.ts b/UI/Input/TextField.ts index 4c878ede5..12ed630a8 100644 --- a/UI/Input/TextField.ts +++ b/UI/Input/TextField.ts @@ -13,7 +13,6 @@ export class TextField extends InputElement { constructor(options?: { placeholder?: string | BaseUIElement, value?: UIEventSource, - textArea?: boolean, htmlType?: string, inputMode?: string, label?: BaseUIElement, diff --git a/UI/Reviews/ReviewForm.ts b/UI/Reviews/ReviewForm.ts index 1f8f743d5..2a9bb94b0 100644 --- a/UI/Reviews/ReviewForm.ts +++ b/UI/Reviews/ReviewForm.ts @@ -38,7 +38,7 @@ export default class ReviewForm extends InputElement { }); const comment = new TextField({ placeholder: Translations.t.reviews.write_a_comment, - textArea: true, + htmlType: "area", value: this._value.map(r => r?.comment), textAreaRows: 5 }) @@ -49,7 +49,8 @@ export default class ReviewForm extends InputElement { const self = this; this._postingAs = - new Combine([t.posting_as, new VariableUiElement(osmConnection.userDetails.map((ud: UserDetails) => ud.name)).SetClass("review-author")]) + new Combine([t.posting_as, new VariableUiElement(osmConnection.userDetails.map((ud: UserDetails) => ud.name)) + .SetClass("review-author")]) .SetStyle("display:flex;flex-direction: column;align-items: flex-end;margin-left: auto;") this._saveButton = new SaveButton(this._value.map(r => self.IsValid(r)), undefined) @@ -91,16 +92,19 @@ export default class ReviewForm extends InputElement { InnerConstructElement(): HTMLElement { const form = new Combine([ - new Combine([this._stars, this._postingAs]).SetClass("review-form-top"), + new Combine([this._stars, this._postingAs]).SetClass("flex"), this._comment, new Combine([ this._isAffiliated, this._saveButton ]).SetClass("review-form-bottom"), - "
", Translations.t.reviews.tos.SetClass("subtle") ]) - .SetClass("review-form") + .SetClass("flex flex-col p-4") + .SetStyle( "border-radius: 1em;" + + " background-color: var(--subtle-detail-color);" + + " color: var(--subtle-detail-color-contrast);" + + " border: 2px solid var(--subtle-detail-color-contrast)") const connection = this._osmConnection; const login = Translations.t.reviews.plz_login.Clone().onClick(() => connection.AttemptLogin()) diff --git a/css/ReviewElement.css b/css/ReviewElement.css index de9c58e1f..2c756c672 100644 --- a/css/ReviewElement.css +++ b/css/ReviewElement.css @@ -18,15 +18,6 @@ margin-left: 0.5em; } -.review-form { - display: block; - border-radius: 1em; - padding: 1em; - background-color: var(--subtle-detail-color); - color: var(--subtle-detail-color-contrast); - border: 2px solid var(--subtle-detail-color-contrast) -} - .review-form-bottom { display: flex; justify-content: space-between;