forked from MapComplete/MapComplete
Add border around longer radiobutton answers
This commit is contained in:
parent
9b2530197a
commit
929d07202f
4 changed files with 132 additions and 111 deletions
|
@ -14,11 +14,8 @@ export class FullScreenMessageBox extends UIElement {
|
||||||
private readonly returnToTheMap: UIElement;
|
private readonly returnToTheMap: UIElement;
|
||||||
|
|
||||||
constructor(onClear: (() => void)) {
|
constructor(onClear: (() => void)) {
|
||||||
super(undefined);
|
super();
|
||||||
|
|
||||||
const self = this;
|
const self = this;
|
||||||
|
|
||||||
|
|
||||||
State.state.fullScreenMessage.addCallbackAndRun(uiElement => {
|
State.state.fullScreenMessage.addCallbackAndRun(uiElement => {
|
||||||
this._uielement = new Combine([State.state.fullScreenMessage.data]).SetStyle(
|
this._uielement = new Combine([State.state.fullScreenMessage.data]).SetStyle(
|
||||||
"display:block;"+
|
"display:block;"+
|
||||||
|
|
|
@ -294,8 +294,15 @@ export class TagRendering extends UIElement implements TagDependantUIElement {
|
||||||
(t0, t1) => t0.isEquivalent(t1)
|
(t0, t1) => t0.isEquivalent(t1)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
return new FixedInputElement(this.ApplyTemplate(mapping.txt), mapping.k,
|
|
||||||
|
let txt = this.ApplyTemplate(mapping.txt);
|
||||||
|
if(txt.Render().indexOf("<img") >= 0){
|
||||||
|
txt.SetClass("question-option-with-border");
|
||||||
|
}
|
||||||
|
const inputEl = new FixedInputElement(txt, mapping.k,
|
||||||
(t0, t1) => t1.isEquivalent(t0));
|
(t0, t1) => t1.isEquivalent(t0));
|
||||||
|
|
||||||
|
return inputEl;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -185,14 +185,21 @@ export abstract class UIElement extends UIEventSource<string> {
|
||||||
public SetClass(clss: string): UIElement {
|
public SetClass(clss: string): UIElement {
|
||||||
this.dumbMode = false;
|
this.dumbMode = false;
|
||||||
if (clss === "" && this.clss.length > 0) {
|
if (clss === "" && this.clss.length > 0) {
|
||||||
this.clss = [];
|
throw "Use RemoveClass instead";
|
||||||
this.Update();
|
|
||||||
} else if (this.clss.indexOf(clss) < 0) {
|
} else if (this.clss.indexOf(clss) < 0) {
|
||||||
this.clss.push(clss);
|
this.clss.push(clss);
|
||||||
this.Update();
|
this.Update();
|
||||||
}
|
}
|
||||||
return this;
|
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 {
|
public SetStyle(style: string): UIElement {
|
||||||
|
|
16
index.css
16
index.css
|
@ -127,7 +127,6 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#searchbox {
|
#searchbox {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
@ -196,7 +195,6 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/**************************************/
|
/**************************************/
|
||||||
|
|
||||||
|
|
||||||
|
@ -364,7 +362,6 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.infoboxcontents {
|
.infoboxcontents {
|
||||||
margin: 1em 0.5em 0.5em;
|
margin: 1em 0.5em 0.5em;
|
||||||
|
|
||||||
|
@ -399,6 +396,19 @@ body {
|
||||||
font-weight: normal;
|
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 *****/
|
/**** The save button *****/
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue