midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add border around longer radiobutton answers

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-10-01 01:23:45 +02:00
parent 9b2530197a
commit 929d07202f
4 changed files with 132 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
UI/FullScreenMessageBoxHandler.ts
View file

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

9
UI/TagRendering.ts
View file

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

11
UI/UIElement.ts
View file

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

218
index.css
View file

@ -45,7 +45,7 @@ body {
position: absolute; position: absolute;
bottom: 1em; bottom: 1em;
left: 1em; left: 1em;
z-index: 9000; z-index: 9000;
background-color: white; background-color: white;
border-radius: 1em; border-radius: 1em;
cursor: pointer; cursor: pointer;
@ -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;
} }
@ -239,7 +237,7 @@ body {
box-sizing: border-box; box-sizing: border-box;
display: inline-block; display: inline-block;
padding: 1em; padding: 1em;
background-color: white; background-color: white;
box-shadow: 0 0 10px #0006; box-shadow: 0 0 10px #0006;
} }
@ -251,10 +249,10 @@ body {
background-color: white; background-color: white;
box-shadow: none; box-shadow: none;
margin: 0; margin: 0;
} }
.collapse-button-img img{ .collapse-button-img img {
width: 1.5em; width: 1.5em;
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -281,7 +279,7 @@ body {
#centermessage { #centermessage {
position: absolute; position: absolute;
top: 30%; top: 30%;
left: 25%; left: 25%;
width: 50%; width: 50%;
@ -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;
} }