diff --git a/UI/FullScreenMessageBoxHandler.ts b/UI/FullScreenMessageBoxHandler.ts index 08e3220bb4..104f246ca1 100644 --- a/UI/FullScreenMessageBoxHandler.ts +++ b/UI/FullScreenMessageBoxHandler.ts @@ -14,11 +14,8 @@ export class FullScreenMessageBox extends UIElement { private readonly returnToTheMap: UIElement; constructor(onClear: (() => void)) { - super(undefined); - + super(); const self = this; - - State.state.fullScreenMessage.addCallbackAndRun(uiElement => { this._uielement = new Combine([State.state.fullScreenMessage.data]).SetStyle( "display:block;"+ diff --git a/UI/TagRendering.ts b/UI/TagRendering.ts index f1a72924c6..f115de8144 100644 --- a/UI/TagRendering.ts +++ b/UI/TagRendering.ts @@ -294,8 +294,15 @@ export class TagRendering extends UIElement implements TagDependantUIElement { (t0, t1) => t0.isEquivalent(t1) ); } - return new FixedInputElement(this.ApplyTemplate(mapping.txt), mapping.k, + + let txt = this.ApplyTemplate(mapping.txt); + if(txt.Render().indexOf("= 0){ + txt.SetClass("question-option-with-border"); + } + const inputEl = new FixedInputElement(txt, mapping.k, (t0, t1) => t1.isEquivalent(t0)); + + return inputEl; } diff --git a/UI/UIElement.ts b/UI/UIElement.ts index 08401d6884..cadbcc92d4 100644 --- a/UI/UIElement.ts +++ b/UI/UIElement.ts @@ -185,14 +185,21 @@ export abstract class UIElement extends UIEventSource { public SetClass(clss: string): UIElement { this.dumbMode = false; if (clss === "" && this.clss.length > 0) { - this.clss = []; - this.Update(); + throw "Use RemoveClass instead"; } else if (this.clss.indexOf(clss) < 0) { this.clss.push(clss); this.Update(); } return this; } + public RemoveClass(clss: string): UIElement { + const i = this.clss.indexOf(clss); + if (i >= 0) { + this.clss.splice(i, 1); + this.Update(); + } + return this; + } public SetStyle(style: string): UIElement { diff --git a/index.css b/index.css index 36a5aa463c..e7d20a7e30 100644 --- a/index.css +++ b/index.css @@ -45,7 +45,7 @@ body { position: absolute; bottom: 1em; left: 1em; - z-index: 9000; + z-index: 9000; background-color: white; border-radius: 1em; cursor: pointer; @@ -59,73 +59,72 @@ body { font-weight: bold; border-radius: 1em; margin: 0.25em; - text-align: center; + text-align: center; padding: 0.15em 0.3em; } - .question form { - display: inline-block; - max-width: 90vw; - width: 100%; - } +.question form { + display: inline-block; + max-width: 90vw; + width: 100%; +} - .invalid { - box-shadow: 0 0 10px #ff5353; - height: min-content; - } +.invalid { + box-shadow: 0 0 10px #ff5353; + height: min-content; +} - .shadow { - box-shadow: 0 0 10px #00000066; - } +.shadow { + box-shadow: 0 0 10px #00000066; +} - .title-font span { - font-size: xx-large !important; - font-weight: bold; - } +.title-font span { + font-size: xx-large !important; + font-weight: bold; +} - .soft { - background-color: #e5f5ff; - font-weight: bold; - border-radius: 1em; - margin: 0.25em; - text-align: center; - padding: 0.15em 0.3em; - } +.soft { + background-color: #e5f5ff; + font-weight: bold; + border-radius: 1em; + margin: 0.25em; + text-align: center; + padding: 0.15em 0.3em; +} - .subtle { - color: #999; - } +.subtle { + color: #999; +} - .bold { - font-weight: bold; - } +.bold { + font-weight: bold; +} - .thanks { - background-color: #43d904; - font-weight: bold; - border-radius: 1em; - margin: 0.25em; - text-align: center; - padding: 0.15em 0.3em; - } +.thanks { + background-color: #43d904; + font-weight: bold; + border-radius: 1em; + margin: 0.25em; + text-align: center; + padding: 0.15em 0.3em; +} - .clickable { - pointer-events: all; - } +.clickable { + pointer-events: all; +} - .page-split { - display: flex; - height: 100%; - } +.page-split { + display: flex; + height: 100%; +} - .activate-osm-authentication { - cursor: pointer; - color: blue; - text-decoration: underline; - } - +.activate-osm-authentication { + cursor: pointer; + color: blue; + text-decoration: underline; +} #searchbox { @@ -178,23 +177,22 @@ body { } - #userbadge { - width: 100% - } +#userbadge { + width: 100% +} - #userbadge p { - margin: 0; - padding-top: 0.2em; - padding-bottom: 0.2em; - } - - .add-popup-all-buttons { - max-height: 50vh; - display: inline-block; - overflow-y: auto; - width: 100%; - } +#userbadge p { + margin: 0; + padding-top: 0.2em; + padding-bottom: 0.2em; +} +.add-popup-all-buttons { + max-height: 50vh; + display: inline-block; + overflow-y: auto; + width: 100%; +} /**************************************/ @@ -219,11 +217,11 @@ body { border-top-left-radius: 2em; border-bottom-left-radius: 2em; display: inline-block; - height:100%; + height: 100%; box-shadow: -10px 0 10px -10px #0006; } -.collapse-button .collapse-button-img{ +.collapse-button .collapse-button-img { background-color: #e5f5ff; } @@ -239,7 +237,7 @@ body { box-sizing: border-box; display: inline-block; padding: 1em; - background-color: white; + background-color: white; box-shadow: 0 0 10px #0006; } @@ -251,10 +249,10 @@ body { background-color: white; box-shadow: none; margin: 0; - + } -.collapse-button-img img{ +.collapse-button-img img { width: 1.5em; margin: 0; padding: 0; @@ -281,7 +279,7 @@ body { #centermessage { position: absolute; top: 30%; - + left: 25%; width: 50%; @@ -327,42 +325,41 @@ body { } - .attribution-author { - display: inline-block; - } +.attribution-author { + display: inline-block; +} - .license { - font-size: small; - font-weight: lighter; - } +.license { + font-size: small; + font-weight: lighter; +} - .attribution a { - color: white; - } +.attribution a { + color: white; +} - /***************** Info box (box containing features and questions ******************/ +/***************** Info box (box containing features and questions ******************/ - .leaflet-popup-content { - width: 40em !important; - max-height: 80vh; - overflow-y: auto; - } +.leaflet-popup-content { + width: 40em !important; + max-height: 80vh; + overflow-y: auto; +} - .featureinfoboxtitle span { - width: unset !important; - } +.featureinfoboxtitle span { + width: unset !important; +} - .question .form-text-field > input { - width: 100%; - box-sizing: border-box; - } - - .osm-logo path { - fill: #7ebc6f; - } +.question .form-text-field > input { + width: 100%; + box-sizing: border-box; +} +.osm-logo path { + fill: #7ebc6f; +} .infoboxcontents { @@ -385,7 +382,7 @@ body { } -.question-text{ +.question-text { font-size: larger; font-weight: bold; } @@ -394,11 +391,24 @@ body { max-width: 100%; } -.question-subtext{ +.question-subtext { font-size: medium; font-weight: normal; } +.question-option-with-border{ + border: 2px solid lightgray; + border-radius: 0.5em; + display: inline-block; + width: 90%; + box-sizing: border-box; + padding: 1em; +} + +input:checked+label .question-option-with-border{ + border: 2px solid black; +} + /**** The save button *****/ @@ -504,7 +514,7 @@ body { height: 3em; margin-right: 0.5em; padding: 0; - padding-bottom:0.2em; + padding-bottom: 0.2em; }