Add viewpoint for buurtnatuur, add translation of AddPointPoi
This commit is contained in:
Pieter Vander Vennet
parent
7bbc140f05
commit
c3d04c79b9
13 changed files with 271 additions and 71 deletions
|
|
@ -88,7 +88,8 @@ export class LayerDefinition {
|
|||
static WAYHANDLING_CENTER_AND_WAY = 2;
|
||||
|
||||
constructor(options: {
|
||||
name: string,
|
||||
name: string | UIElement,
|
||||
description: string | UIElement,
|
||||
newElementTags: Tag[],
|
||||
icon: string,
|
||||
minzoom: number,
|
||||
|
|
@ -106,6 +107,7 @@ export class LayerDefinition {
|
|||
return;
|
||||
}
|
||||
this.name = options.name;
|
||||
this.description = options.description;
|
||||
this.maxAllowedOverlapPercentage = options.maxAllowedOverlapPercentage ?? 0;
|
||||
this.newElementTags = options.newElementTags;
|
||||
this.icon = options.icon;
|
||||
|
|
@ -119,7 +121,7 @@ export class LayerDefinition {
|
|||
|
||||
asLayer(basemap: Basemap, allElements: ElementStorage, changes: Changes, userDetails: UIEventSource<UserDetails>,
|
||||
selectedElement: UIEventSource<{feature: any}>,
|
||||
showOnPopup: (tags: UIEventSource<(any)>, feature: any) => UIElement):
|
||||
showOnPopup: (tags: UIEventSource<any>, feature: any) => UIElement):
|
||||
FilteredLayer {
|
||||
return new FilteredLayer(
|
||||
this,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,46 @@
|
|||
import {LayerDefinition} from "../LayerDefinition";
|
||||
import L from "leaflet"
|
||||
import {FixedUiElement} from "../../UI/Base/FixedUiElement";
|
||||
import FixedText from "../Questions/FixedText";
|
||||
import {Tag} from "../../Logic/TagsFilter";
|
||||
import {ImageCarouselWithUploadConstructor} from "../../UI/Image/ImageCarouselWithUpload";
|
||||
import {TagRenderingOptions} from "../TagRendering";
|
||||
|
||||
export class Viewpoint extends LayerDefinition {
|
||||
|
||||
constructor() {
|
||||
super({
|
||||
name: "Bezienswaardigheid",
|
||||
description: "Wil je een foto toevoegen van iets dat geen park, bos of natuurgebied is? Dit kan hiermee",
|
||||
newElementTags: [new Tag("tourism", "viewpoint"), new Tag("fixme", "Added with mapcomplete. This viewpoint should probably me merged with some existing feature")],
|
||||
icon: "assets/viewpoint.svg",
|
||||
wayHandling: LayerDefinition.WAYHANDLING_CENTER_ONLY,
|
||||
style: tags => {
|
||||
return {
|
||||
color: undefined, icon: new L.icon({
|
||||
iconUrl: "assets/viewpoint.svg",
|
||||
iconSize: [20, 20]
|
||||
})
|
||||
}
|
||||
},
|
||||
maxAllowedOverlapPercentage: 0,
|
||||
overpassFilter: new Tag("tourism", "viewpoint"),
|
||||
minzoom: 13,
|
||||
title: new FixedText("Bezienswaardigheid")
|
||||
});
|
||||
|
||||
this.elementsToShow = [
|
||||
new FixedText(this.description),
|
||||
new ImageCarouselWithUploadConstructor(),
|
||||
new TagRenderingOptions({
|
||||
question: "Zijn er bijzonderheden die je wilt toevoegen?",
|
||||
freeform:{
|
||||
key: "description:0",
|
||||
template: "$$$",
|
||||
renderTemplate: "<h3>Bijzonderheden</h3>{description:0}"
|
||||
}
|
||||
})
|
||||
]
|
||||
}
|
||||
|
||||
export class Viewpoint extends LayerDefinition{
|
||||
|
||||
}
|
||||
|
|
@ -2,6 +2,7 @@ import {NatureReserves} from "../Layers/NatureReserves";
|
|||
import {Park} from "../Layers/Park";
|
||||
import {Bos} from "../Layers/Bos";
|
||||
import {Layout} from "../Layout";
|
||||
import {Viewpoint} from "../Layers/Viewpoint";
|
||||
|
||||
export class Groen extends Layout {
|
||||
|
||||
|
|
@ -9,7 +10,7 @@ export class Groen extends Layout {
|
|||
super("buurtnatuur",
|
||||
["nl"],
|
||||
"Buurtnatuur",
|
||||
[new NatureReserves(), new Park(), new Bos()],
|
||||
[new NatureReserves(), new Park(), new Bos(), new Viewpoint()],
|
||||
10,
|
||||
50.8435,
|
||||
4.3688,
|
||||
|
|
@ -39,12 +40,12 @@ export class Groen extends Layout {
|
|||
"<li>Je kan altijd een vraag overslaan als je het antwoord niet weet of niet zeker bent</li>" +
|
||||
"<li>Je kan altijd een foto toevoegen</li>" +
|
||||
"<li>Je kan ook zelf een gebied toevoegen door op de kaart te klikken</li>" +
|
||||
"<li>Je kan deze website ook openen op je smartphone, zo kan je ter plaatse gaan om vragen te beantwoorden en foto's te maken</li>" +
|
||||
"<li>Open buurtnatuur.be <b>op je smartphone</b> om al wandelend foto's te maken en vragen te beantwoorden</li>" +
|
||||
"</ul>" +
|
||||
"<small>" +
|
||||
"<p>" +
|
||||
"De oorspronkelijke data komt van <b>OpenStreetMap</b> en je antwoorden worden daar bewaard.<br/> Omdat iedereen vrij kan meewerken aan dit project, kunnen we niet garanderen dat er geen fouten opduiken." +
|
||||
"Kan je hier niet aanpassen wat je wilt, dan kan je dat zelf via OpenStreetMap.org doen. Groen kan geen enkele verantwoordelijkheid nemen over de kaart." +
|
||||
"Kan je hier niet aanpassen wat je wilt, dan kan je dat zelf via OpenStreetMap.org doen. Groen kan <b>geen enkele verantwoordelijkheid</b> nemen over de kaart." +
|
||||
"</p>" +
|
||||
"Je privacy is belangrijk. We tellen wel hoeveel gebruikers deze website bezoeken. We plaatsen een cookie waar geen persoonlijke informatie in bewaard wordt. " +
|
||||
"Als je inlogt, komt er een tweede cookie bij met je inloggegevens." +
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ export class FilteredLayer {
|
|||
map: Basemap, storage: ElementStorage,
|
||||
changes: Changes,
|
||||
selectedElement: UIEventSource<any>,
|
||||
showOnPopup: ((tags: UIEventSource<any>) => UIElement)
|
||||
showOnPopup: ((tags: UIEventSource<any>, feature: any) => UIElement)
|
||||
) {
|
||||
this.layerDef = layerDef;
|
||||
|
||||
|
|
|
|||
|
|
@ -57,12 +57,14 @@ export class LayerUpdater {
|
|||
}
|
||||
}
|
||||
|
||||
private _failCount = 0;
|
||||
private handleFail(reason: any) {
|
||||
console.log("QUERY FAILED (retrying in 1 sec)", reason);
|
||||
this.previousBounds = undefined;
|
||||
const self = this;
|
||||
this._failCount++;
|
||||
window.setTimeout(
|
||||
function(){self.update()}, 1000
|
||||
function(){self.update()}, this._failCount * 1000
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import {UIElement} from "../UIElement";
|
||||
import Locale from "../i18n/Locale";
|
||||
|
||||
export class Button extends UIElement {
|
||||
private _text: UIElement;
|
||||
|
|
@ -6,7 +7,7 @@ export class Button extends UIElement {
|
|||
private _clss: string;
|
||||
|
||||
constructor(text: UIElement, onclick: (() => void), clss: string = "") {
|
||||
super(undefined);
|
||||
super(Locale.language);
|
||||
this._text = text;
|
||||
this._onclick = onclick;
|
||||
if (clss !== "") {
|
||||
|
|
@ -28,9 +29,7 @@ export class Button extends UIElement {
|
|||
InnerUpdate(htmlElement: HTMLElement) {
|
||||
super.InnerUpdate(htmlElement);
|
||||
const self = this;
|
||||
console.log("Update for ", htmlElement)
|
||||
document.getElementById("button-"+this.id).onclick = function(){
|
||||
console.log("Clicked");
|
||||
self._onclick();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -89,7 +89,6 @@ export class DropDown<T> extends InputElement<T> {
|
|||
var t = this._value.data;
|
||||
for (let i = 0; i < this._values.length ; i++) {
|
||||
const value = this._values[i].value;
|
||||
console.log("Checking",value," against ",t, ":", t === value)
|
||||
if (value === t) {
|
||||
// @ts-ignore
|
||||
e.selectedIndex = i;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ import {Changes} from "../Logic/Changes";
|
|||
import {FixedUiElement} from "./Base/FixedUiElement";
|
||||
import {Button} from "./Base/Button";
|
||||
import {UserDetails} from "../Logic/OsmConnection";
|
||||
import Translations from "./i18n/Translations";
|
||||
import Combine from "./Base/Combine";
|
||||
|
||||
/**
|
||||
* Asks to add a feature at the last clicked location, at least if zoom is sufficient
|
||||
|
|
@ -42,7 +44,7 @@ export class SimpleAddUI extends UIElement {
|
|||
// <button type='button'> looks SO retarded
|
||||
// the default type of button is 'submit', which performs a POST and page reload
|
||||
const button =
|
||||
new Button(new FixedUiElement("Add a " + option.name.Render() + " here"),
|
||||
new Button(Translations.t.general.add.addNew.Subs({category: option.name}),
|
||||
this.CreatePoint(option));
|
||||
this._addButtons.push(button);
|
||||
}
|
||||
|
|
@ -60,25 +62,25 @@ export class SimpleAddUI extends UIElement {
|
|||
}
|
||||
|
||||
InnerRender(): string {
|
||||
const header = "<h2>No data here</h2>" +
|
||||
"You clicked somewhere where no data is known yet.<br/>";
|
||||
const header = Translations.t.general.add.header;
|
||||
|
||||
if (!this._userDetails.data.loggedIn) {
|
||||
return header + "<a class='activate-osm-authentication'>Please log in to add a new point</a>"
|
||||
return new Combine([header, Translations.t.general.add.pleaseLogin]).Render()
|
||||
}
|
||||
|
||||
if (this._zoomlevel.data.zoom < 19) {
|
||||
return header + "Zoom in further to add a point.";
|
||||
return new Combine([header, Translations.t.general.add.zoomInFurther]).Render()
|
||||
}
|
||||
|
||||
if (this._dataIsLoading.data) {
|
||||
return header + "The data is still loading. Please wait a bit before you add a new point";
|
||||
return new Combine([header, Translations.t.general.add.stillLoading]).Render()
|
||||
}
|
||||
|
||||
var html = "";
|
||||
for (const button of this._addButtons) {
|
||||
html += button.Render();
|
||||
}
|
||||
return header + html;
|
||||
return header.Render() + html;
|
||||
}
|
||||
|
||||
InnerUpdate(htmlElement: HTMLElement) {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,48 @@
|
|||
import { UIElement } from "../UIElement"
|
||||
import {UIElement} from "../UIElement"
|
||||
import Locale from "./Locale"
|
||||
import {FixedUiElement} from "../Base/FixedUiElement";
|
||||
import {TagUtils} from "../../Logic/TagsFilter";
|
||||
import Combine from "../Base/Combine";
|
||||
|
||||
|
||||
export default class Translation extends UIElement {
|
||||
|
||||
private static forcedLanguage = undefined;
|
||||
|
||||
public Subs(text: any /*Map<string, string | UIElement>*/) {
|
||||
const newTranslations = {};
|
||||
for (const lang in this.translations) {
|
||||
let template: string = this.translations[lang];
|
||||
for (const k in text) {
|
||||
const combined = [];
|
||||
const parts = template.split("{" + k + "}");
|
||||
const el: string | UIElement = text[k];
|
||||
let rtext: string = "";
|
||||
console.log(parts)
|
||||
if (typeof (el) === "string") {
|
||||
rtext = el;
|
||||
} else {
|
||||
Translation.forcedLanguage = lang; // This is a very dirty hack - it'll bite me one day
|
||||
rtext = el.InnerRender();
|
||||
console.log(rtext)
|
||||
}
|
||||
for (let i = 0; i < parts.length - 1; i++) {
|
||||
combined.push(parts[i]);
|
||||
combined.push(rtext)
|
||||
}
|
||||
combined.push(parts[parts.length - 1]);
|
||||
template = new Combine(combined).InnerRender();
|
||||
}
|
||||
newTranslations[lang] = template;
|
||||
}
|
||||
Translation.forcedLanguage = undefined;
|
||||
return new Translation(newTranslations);
|
||||
|
||||
}
|
||||
|
||||
|
||||
get txt(): string {
|
||||
const txt = this.translations[Locale.language.data];
|
||||
const txt = this.translations[Translation.forcedLanguage ?? Locale.language.data];
|
||||
if (txt !== undefined) {
|
||||
return txt;
|
||||
}
|
||||
|
|
@ -36,8 +73,9 @@ export default class Translation extends UIElement {
|
|||
return new Translation(this.translations).Render();
|
||||
}
|
||||
|
||||
public Clone(){
|
||||
public Clone() {
|
||||
return new Translation(this.translations)
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -391,7 +391,31 @@ export default class Translations {
|
|||
number: new T({
|
||||
en: "number",
|
||||
nl: "getal"
|
||||
})
|
||||
}),
|
||||
|
||||
add: {
|
||||
|
||||
addNew: new T({
|
||||
en: "Add a new {category} here",
|
||||
nl: "Voeg hier een {category} toe"
|
||||
}),
|
||||
header: new T({
|
||||
en: "<h2>No data</h2>You clicked somewhere where no data is known yet.<br/>",
|
||||
nl: "<h2>Geen selectie</h2>Je klikte ergens waar er nog geen data is.<br/>"
|
||||
}),
|
||||
pleaseLogin: new T({
|
||||
en: "<a class='activate-osm-authentication'>Please log in to add a new point</a>",
|
||||
nl: "<a class='activate-osm-authentication'>Gelieve je aan te melden om een punt to te voegen</a>"
|
||||
}),
|
||||
zoomInFurther: new T({
|
||||
en: "Zoom in further to add a point.",
|
||||
nl: "Gelieve verder in te zoomen om een punt toe te voegen"
|
||||
}),
|
||||
stillLoading: new T({
|
||||
en: "The data is still loading. Please wait a bit before you add a new point",
|
||||
nl: "De data wordt nog geladen. Nog even geduld en dan kan je een punt toevoegen."
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
82
assets/viewpoint.svg
Normal file
82
assets/viewpoint.svg
Normal file
|
|
@ -0,0 +1,82 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
version="1.1"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
id="svg2"
|
||||
sodipodi:docname="viewpoint.svg"
|
||||
inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
|
||||
<sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1001"
|
||||
id="namedview7"
|
||||
showgrid="false"
|
||||
inkscape:zoom="14.75"
|
||||
inkscape:cx="8"
|
||||
inkscape:cy="4.0750604"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer2" />
|
||||
<metadata
|
||||
id="metadata8">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title />
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs6" />
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer2"
|
||||
inkscape:label="background">
|
||||
<circle
|
||||
style="fill:#ffffff;fill-opacity:1;stroke:#ffffff;stroke-width:75;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
|
||||
id="path817"
|
||||
cx="8"
|
||||
cy="8"
|
||||
r="8" />
|
||||
</g>
|
||||
<rect
|
||||
width="16"
|
||||
height="16"
|
||||
x="0"
|
||||
y="0"
|
||||
id="canvas"
|
||||
style="fill:none;stroke:none;visibility:hidden" />
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
inkscape:label="icon"
|
||||
sodipodi:insensitive="true"
|
||||
style="display:inline">
|
||||
<path
|
||||
d="m 9.65625,0.59375 c -0.3024732,0.0462641 -0.5739493,0.24857188 -0.75,0.5 C 8.4915325,1.6542533 8.3846231,2.3479287 8.1875,3 7.9662603,3.8420605 7.7522058,4.7006473 7.625,5.5625 7.6044,5.8106582 7.7926492,5.8644805 8.03125,5.625 8.8564261,4.8565483 9.6689927,4.0447405 10.46875,3.25 10.66307,3.0435127 10.857947,2.8397801 11,2.59375 c 0.22114,-0.3696454 0.325018,-0.8581921 0.09375,-1.25 -0.238762,-0.3960416 -0.675926,-0.6652283 -1.125,-0.75 -0.1037376,-0.0197567 -0.2116756,-0.0154214 -0.3125,0 z m -5.4375,0.0625 C 3.756376,0.664435 3.298377,0.9038402 3,1.25 2.7236959,1.5695061 2.7337489,2.0351336 2.90625,2.40625 3.1835185,3.0459969 3.721958,3.5026801 4.1875,4 4.8053738,4.6133884 5.4428785,5.2080755 6.125,5.75 6.3294366,5.8921706 6.4627003,5.7639689 6.375,5.4375 6.1234386,4.3383434 5.8495515,3.246582 5.5625,2.15625 5.4811703,1.8846207 5.3917386,1.5899614 5.25,1.34375 5.0409086,0.9671579 4.6737053,0.6524279 4.21875,0.65625 Z M 1,5.65625 C 0.6728589,5.7133884 0.35581084,5.8906685 0.1875,6.1875 -0.03684961,6.5918816 -0.05657638,7.0996758 0.09375,7.53125 0.23204898,7.9303783 0.65487609,8.1823302 1.0625,8.21875 1.7551236,8.2989321 2.398939,8.029096 3.0625,7.875 3.9027885,7.6471232 4.7519195,7.4130156 5.5625,7.09375 5.787908,6.9879268 5.7327889,6.7749958 5.40625,6.6875 4.3287785,6.3551066 3.2438454,6.0472518 2.15625,5.75 1.8803888,5.6844434 1.596594,5.6567822 1.3125,5.65625 1.2048302,5.6543848 1.109047,5.6372039 1,5.65625 Z m 11.6875,0 C 12.403405,5.6567822 12.119611,5.684443 11.84375,5.75 10.756155,6.0472518 9.6712203,6.3551066 8.59375,6.6875 8.2672114,6.7749958 8.21209,6.9879301 8.4375,7.09375 c 0.8105812,0.3192656 1.659711,0.5533732 2.5,0.78125 0.663559,0.154096 1.307371,0.4239353 2,0.34375 0.407624,-0.03642 0.830451,-0.2883717 0.96875,-0.6875 C 14.056568,7.0996758 14.036852,6.5918816 13.8125,6.1875 13.588087,5.7917247 13.118179,5.64879 12.6875,5.65625 Z M 6.28125,8.0625 C 6.24107,8.0647215 6.1761092,8.0894573 6.125,8.125 5.4428785,8.6669264 4.8053738,9.2928641 4.1875,9.90625 3.721958,10.403571 3.1835185,10.829001 2.90625,11.46875 2.7337489,11.839865 2.7236959,12.305494 3,12.625 3.298377,12.97116 3.756376,13.241771 4.21875,13.25 4.6737053,13.253823 5.0409086,12.90784 5.25,12.53125 5.3917386,12.285037 5.48117,12.02163 5.5625,11.75 5.8495515,10.659668 6.1234386,9.5366567 6.375,8.4375 6.4407752,8.1926478 6.4017899,8.0558356 6.28125,8.0625 Z M 7.75,8.125 C 7.676409,8.138699 7.6147,8.21967 7.625,8.34375 c 0.1272058,0.8618534 0.3412603,1.689188 0.5625,2.53125 0.1971231,0.652072 0.3040361,1.376995 0.71875,1.9375 0.2347344,0.335235 0.6475495,0.54778 1.0625,0.46875 0.449074,-0.08477 0.886238,-0.353959 1.125,-0.75 C 11.325022,12.139441 11.22114,11.650893 11,11.28125 10.857947,11.035219 10.66307,10.831485 10.46875,10.625 9.6689927,9.8302564 8.8564261,9.0496977 8.03125,8.28125 7.9119496,8.1615102 7.8235913,8.1113005 7.75,8.125 Z"
|
||||
id="viewpoint"
|
||||
style="fill:#734a08;fill-opacity:1"
|
||||
transform="translate(1,1)"
|
||||
inkscape:connector-curvature="0" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5 KiB |
96
index.css
96
index.css
|
|
@ -252,10 +252,6 @@ form {
|
|||
margin: 0.5em;
|
||||
}
|
||||
|
||||
.collapse-button {
|
||||
height: calc(100% - 3.5em) !important;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -285,7 +281,7 @@ form {
|
|||
border-top-left-radius: 2em;
|
||||
border-bottom-left-radius: 2em;
|
||||
display: inline-block;
|
||||
height:calc(100% - 8em);
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.collapse-button .collapse-button-img{
|
||||
|
|
@ -329,6 +325,7 @@ form {
|
|||
|
||||
#messagesbox {
|
||||
/*Only shown on big screens*/
|
||||
position: relative;
|
||||
padding: 0;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
|
@ -429,6 +426,33 @@ form {
|
|||
border-radius: 15px 15px 0 0;
|
||||
}
|
||||
|
||||
|
||||
#centermessage {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
|
||||
left: 25%;
|
||||
width: 50%;
|
||||
|
||||
font-size: large;
|
||||
|
||||
padding: 2em;
|
||||
border-radius: 2em;
|
||||
z-index: 4000;
|
||||
pointer-events: none;
|
||||
|
||||
opacity: 1;
|
||||
background-color: white;
|
||||
|
||||
transition: opacity 500ms linear;
|
||||
|
||||
|
||||
text-align: center;
|
||||
horiz-align: center;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 600px), only screen and (max-height: 300px) {
|
||||
#messagesbox-wrapper {
|
||||
display: none;
|
||||
|
|
@ -446,6 +470,13 @@ form {
|
|||
/* Popups are hidden on mobile */
|
||||
display: none;
|
||||
}
|
||||
|
||||
#centermessage {
|
||||
top: 30%;
|
||||
left: 15%;
|
||||
width: 60%;
|
||||
|
||||
}
|
||||
|
||||
#messagesboxmobilewrapper {
|
||||
position: absolute;
|
||||
|
|
@ -476,6 +507,19 @@ form {
|
|||
border-radius: 1em;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
#welcomeMessage {
|
||||
display: inline-block;
|
||||
background-color: white;
|
||||
padding: 1em;
|
||||
border-radius: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -541,45 +585,11 @@ form {
|
|||
|
||||
}
|
||||
|
||||
#logo {
|
||||
position: relative;
|
||||
display: flex;
|
||||
float: right;
|
||||
.logo {
|
||||
float:right;
|
||||
margin: 1em;
|
||||
margin-top: 0;
|
||||
margin-right: -0.5em;
|
||||
padding: 0;
|
||||
right: 1em;
|
||||
top: 1em;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
#centermessage {
|
||||
position: absolute;
|
||||
display: block ruby;
|
||||
|
||||
margin: auto;
|
||||
top: 30%;
|
||||
left: 50%;
|
||||
margin-left: -15%;
|
||||
width: 30%;
|
||||
|
||||
font-size: large;
|
||||
|
||||
padding: 2em;
|
||||
border-radius: 2em;
|
||||
z-index: 5000;
|
||||
pointer-events: none;
|
||||
|
||||
opacity: 1;
|
||||
background-color: white;
|
||||
|
||||
transition: opacity 500ms linear;
|
||||
|
||||
|
||||
text-align: center;
|
||||
horiz-align: center;
|
||||
font-weight: bold;
|
||||
width: 10em;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
#bottomRight {
|
||||
|
|
|
|||
7
index.ts
7
index.ts
|
|
@ -274,8 +274,7 @@ new UserBadge(osmConnection.userDetails,
|
|||
|
||||
new SearchAndGo(bm).AttachTo("searchbox");
|
||||
|
||||
const welcome = new WelcomeMessage(layoutToUse, osmConnection).onClick(() => {
|
||||
});
|
||||
const welcome = new WelcomeMessage(layoutToUse, osmConnection).onClick(() => {});
|
||||
|
||||
const help = new FixedUiElement(`<div class='collapse-button-img'><img src='assets/help.svg' alt='help'></div>`);
|
||||
const close = new FixedUiElement(`<div class='collapse-button-img'><img src='assets/close.svg' alt='close'></div>`);
|
||||
|
|
@ -291,6 +290,8 @@ new CheckBox(
|
|||
new FullScreenMessageBoxHandler(fullScreenMessage, () => {
|
||||
selectedElement.setData(undefined)
|
||||
}).update();
|
||||
fullScreenMessage.setData(new WelcomeMessage(layoutToUse, osmConnection))
|
||||
|
||||
|
||||
new CenterMessageBox(
|
||||
minZoom,
|
||||
|
|
@ -310,5 +311,5 @@ osmConnection.registerActivateOsmAUthenticationClass();
|
|||
new GeoLocationHandler(bm).AttachTo("geolocate-button");
|
||||
|
||||
|
||||
|
||||
locationControl.ping()
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue