Add border around longer radiobutton answers
This commit is contained in:
Pieter Vander Vennet
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 {
|
||||||
|
|
|
||||||
210
index.css
210
index.css
|
|
@ -59,73 +59,72 @@ body {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
margin: 0.25em;
|
margin: 0.25em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 0.15em 0.3em;
|
padding: 0.15em 0.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.question form {
|
.question form {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
max-width: 90vw;
|
max-width: 90vw;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.invalid {
|
.invalid {
|
||||||
box-shadow: 0 0 10px #ff5353;
|
box-shadow: 0 0 10px #ff5353;
|
||||||
height: min-content;
|
height: min-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
.shadow {
|
.shadow {
|
||||||
box-shadow: 0 0 10px #00000066;
|
box-shadow: 0 0 10px #00000066;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-font span {
|
.title-font span {
|
||||||
font-size: xx-large !important;
|
font-size: xx-large !important;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.soft {
|
.soft {
|
||||||
background-color: #e5f5ff;
|
background-color: #e5f5ff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
margin: 0.25em;
|
margin: 0.25em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 0.15em 0.3em;
|
padding: 0.15em 0.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.subtle {
|
.subtle {
|
||||||
color: #999;
|
color: #999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bold {
|
.bold {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.thanks {
|
.thanks {
|
||||||
background-color: #43d904;
|
background-color: #43d904;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
border-radius: 1em;
|
border-radius: 1em;
|
||||||
margin: 0.25em;
|
margin: 0.25em;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 0.15em 0.3em;
|
padding: 0.15em 0.3em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.clickable {
|
.clickable {
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-split {
|
.page-split {
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.activate-osm-authentication {
|
.activate-osm-authentication {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: blue;
|
color: blue;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#searchbox {
|
#searchbox {
|
||||||
|
|
@ -178,23 +177,22 @@ body {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#userbadge {
|
#userbadge {
|
||||||
width: 100%
|
width: 100%
|
||||||
}
|
}
|
||||||
|
|
||||||
#userbadge p {
|
#userbadge p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding-top: 0.2em;
|
padding-top: 0.2em;
|
||||||
padding-bottom: 0.2em;
|
padding-bottom: 0.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.add-popup-all-buttons {
|
|
||||||
max-height: 50vh;
|
|
||||||
display: inline-block;
|
|
||||||
overflow-y: auto;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
.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-top-left-radius: 2em;
|
||||||
border-bottom-left-radius: 2em;
|
border-bottom-left-radius: 2em;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
height:100%;
|
height: 100%;
|
||||||
box-shadow: -10px 0 10px -10px #0006;
|
box-shadow: -10px 0 10px -10px #0006;
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapse-button .collapse-button-img{
|
.collapse-button .collapse-button-img {
|
||||||
background-color: #e5f5ff;
|
background-color: #e5f5ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -254,7 +252,7 @@ body {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.collapse-button-img img{
|
.collapse-button-img img {
|
||||||
width: 1.5em;
|
width: 1.5em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
@ -327,42 +325,41 @@ body {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.attribution-author {
|
.attribution-author {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.license {
|
.license {
|
||||||
font-size: small;
|
font-size: small;
|
||||||
font-weight: lighter;
|
font-weight: lighter;
|
||||||
}
|
}
|
||||||
|
|
||||||
.attribution a {
|
.attribution a {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/***************** Info box (box containing features and questions ******************/
|
/***************** Info box (box containing features and questions ******************/
|
||||||
|
|
||||||
.leaflet-popup-content {
|
.leaflet-popup-content {
|
||||||
width: 40em !important;
|
width: 40em !important;
|
||||||
max-height: 80vh;
|
max-height: 80vh;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.featureinfoboxtitle span {
|
.featureinfoboxtitle span {
|
||||||
width: unset !important;
|
width: unset !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.question .form-text-field > input {
|
.question .form-text-field > input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.osm-logo path {
|
|
||||||
fill: #7ebc6f;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
.osm-logo path {
|
||||||
|
fill: #7ebc6f;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.infoboxcontents {
|
.infoboxcontents {
|
||||||
|
|
@ -385,7 +382,7 @@ body {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.question-text{
|
.question-text {
|
||||||
font-size: larger;
|
font-size: larger;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
@ -394,11 +391,24 @@ body {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.question-subtext{
|
.question-subtext {
|
||||||
font-size: medium;
|
font-size: medium;
|
||||||
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 *****/
|
||||||
|
|
||||||
|
|
@ -504,7 +514,7 @@ body {
|
||||||
height: 3em;
|
height: 3em;
|
||||||
margin-right: 0.5em;
|
margin-right: 0.5em;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
padding-bottom:0.2em;
|
padding-bottom: 0.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue