Fixing css styling bugs, most works correctly now

This commit is contained in:
pietervdvn 2021-01-18 19:36:19 +01:00
commit db91c5ead4
16 changed files with 394 additions and 14849 deletions

View file

@ -281,7 +281,7 @@ export default class LayerConfig {
let sourceParts = iconUrl.split(";");
function genHtmlFromString(sourcePart: string): UIElement {
const style = `width:100%;height:100%;transform: rotate( ${rotation} );display:block;position: absolute; top: 0, left: 0`;
const style = `width:100%;height:100%;transform: rotate( ${rotation} );display:block;position: absolute; top: 0; left: 0`;
let html: UIElement = new FixedUiElement(`<img src="${sourcePart}" style="${style}" />`);
const match = sourcePart.match(/([a-zA-Z0-9_]*):([^;]*)/)
if (match !== null && Svg.All[match[1] + ".svg"] !== undefined) {

View file

@ -42,7 +42,8 @@ export class InitUiElements {
static InitAll(layoutToUse: LayoutConfig, layoutFromBase64: string, testing: UIEventSource<string>, layoutName: string,
layoutDefinition: string = "") {
layoutDefinition: string = "") {
if (layoutToUse === undefined) {
console.log("Incorrect layout")
new FixedUiElement(`Error: incorrect layout <i>${layoutName}</i><br/><a href='https://${window.location.host}/'>Go back</a>`).AttachTo("centermessage").onClick(() => {
@ -78,8 +79,6 @@ export class InitUiElements {
InitUiElements.InitBaseMap();
new FixedUiElement("").AttachTo("decoration-desktop"); // Remove the decoration
InitUiElements.setupAllLayerElements();
if (layoutToUse.customCss !== undefined) {
@ -215,6 +214,9 @@ export class InitUiElements {
.AttachTo("geolocate-button");
State.state.locationControl.ping();
// Reset the loading message once things are loaded
new CenterMessageBox().AttachTo("centermessage");
}
static LoadLayoutFromHash(userLayoutParam: UIEventSource<string>) {
@ -456,7 +458,5 @@ export class InitUiElements {
);
});
new CenterMessageBox().AttachTo("centermessage");
}
}

2
Svg.ts
View file

@ -179,7 +179,7 @@ export default class Svg {
public static josm_logo_svg() { return new FixedUiElement(Svg.josm_logo);}
public static josm_logo_ui() { return new FixedUiElement(Svg.josm_logo_img);}
public static layers = " <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\" width=\"27\" height=\"27\" viewBox=\"0 0 27 27\" fill=\"none\" version=\"1.1\" id=\"svg8\" sodipodi:docname=\"layers.svg\" inkscape:version=\"0.92.4 (5da689c313, 2019-01-14)\"> <metadata id=\"metadata14\"> <rdf:RDF> <cc:Work rdf:about=\"\"> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource=\"http://purl.org/dc/dcmitype/StillImage\" /> </cc:Work> </rdf:RDF> </metadata> <defs id=\"defs12\" /> <sodipodi:namedview pagecolor=\"#ffffff\" bordercolor=\"#666666\" borderopacity=\"1\" objecttolerance=\"10\" gridtolerance=\"10\" guidetolerance=\"10\" inkscape:pageopacity=\"0\" inkscape:pageshadow=\"2\" inkscape:window-width=\"1680\" inkscape:window-height=\"1013\" id=\"namedview10\" showgrid=\"false\" inkscape:zoom=\"12.361274\" inkscape:cx=\"13.100126\" inkscape:cy=\"2.3570853\" inkscape:window-x=\"1560\" inkscape:window-y=\"0\" inkscape:window-maximized=\"1\" inkscape:current-layer=\"svg8\" /> <path d=\"M26.5353 8.13481C26.4422 8.35428 26.2683 8.47598 26.0632 8.58537C21.9977 10.7452 17.935 12.9085 13.8758 15.0799C13.6475 15.2016 13.4831 15.1962 13.2568 15.0751C9.19822 12.903 5.13484 10.7404 1.07215 8.5758C0.490599 8.26608 0.448478 7.52562 0.991303 7.13796C1.0803 7.07438 1.17813 7.0231 1.2746 6.97045C5.15862 4.86462 9.04536 2.7629 12.9246 0.648187C13.3805 0.399316 13.7779 0.406837 14.2311 0.65434C18.0954 2.76153 21.9658 4.85779 25.8383 6.94926C26.1569 7.12155 26.411 7.32872 26.5353 7.67604C26.5353 7.82919 26.5353 7.98166 26.5353 8.13481Z\" fill=\"#003B8B\" id=\"path2\" style=\"fill:#030000;fill-opacity:1\" /> <path d=\"M13.318 26.535C12.1576 25.9046 10.9972 25.2736 9.83614 24.6439C6.96644 23.0877 4.09674 21.533 1.22704 19.9762C0.694401 19.6876 0.466129 19.2343 0.669943 18.7722C0.759621 18.5691 0.931505 18.3653 1.11969 18.2512C1.66659 17.9182 2.23727 17.6228 2.80863 17.3329C2.89423 17.2892 3.04981 17.3206 3.14493 17.3712C6.40799 19.1031 9.66969 20.837 12.9239 22.5845C13.3703 22.8238 13.7609 22.83 14.208 22.59C17.4554 20.8472 20.7117 19.1202 23.9605 17.3801C24.1493 17.2789 24.2838 17.283 24.4632 17.3876C24.8926 17.6386 25.3301 17.8772 25.7751 18.1001C26.11 18.2683 26.3838 18.4857 26.5346 18.8385C26.5346 18.9916 26.5346 19.1441 26.5346 19.2972C26.4049 19.6528 26.1399 19.8613 25.8152 20.0363C22.9964 21.5549 20.1831 23.0829 17.3684 24.609C16.1863 25.2496 15.0055 25.893 13.8248 26.535C13.6556 26.535 13.4865 26.535 13.318 26.535Z\" fill=\"#003B8B\" id=\"path4\" style=\"fill:#030000;fill-opacity:1\" /> <path d=\"M26.3988 13.7412C26.2956 13.9661 26.1026 14.081 25.8927 14.1924C21.8198 16.3577 17.749 18.5258 13.6815 20.7013C13.492 20.8025 13.3602 20.7902 13.1795 20.6938C9.09638 18.5114 5.01059 16.3359 0.924798 14.1582C0.399637 13.8786 0.307921 13.2646 0.735251 12.838C0.829005 12.7443 0.947217 12.6705 1.06407 12.6055C1.56545 12.3279 2.07635 12.0654 2.57297 11.7789C2.74214 11.6812 2.86579 11.6921 3.03291 11.7817C6.27492 13.5155 9.52303 15.2378 12.761 16.9792C13.2352 17.2343 13.6394 17.2322 14.1129 16.9772C17.3509 15.2358 20.5996 13.5142 23.8416 11.7796C24.0095 11.69 24.1338 11.6818 24.3016 11.7789C24.7384 12.0339 25.1821 12.2794 25.6352 12.5037C25.9701 12.6691 26.2426 12.8831 26.3995 13.2304C26.3988 13.4014 26.3988 13.5716 26.3988 13.7412Z\" fill=\"#003B8B\" id=\"path6\" style=\"fill:#030000;fill-opacity:1\" /> </svg> "
public static layers = " <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\" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\" version=\"1.1\" id=\"svg8\" sodipodi:docname=\"layers.svg\" inkscape:version=\"0.92.5 (2060ec1f9f, 2020-04-08)\" style=\"fill:none\"> <metadata id=\"metadata14\"> <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></dc:title> </cc:Work> </rdf:RDF> </metadata> <defs id=\"defs12\" /> <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=\"999\" id=\"namedview10\" showgrid=\"false\" inkscape:zoom=\"5.6568542\" inkscape:cx=\"83.509105\" inkscape:cy=\"42.25915\" inkscape:window-x=\"0\" inkscape:window-y=\"0\" inkscape:window-maximized=\"1\" inkscape:current-layer=\"svg8\" /> <path d=\"m 99.121956,29.976384 c -0.352319,0.827558 -1.010404,1.286454 -1.786559,1.698932 C 81.950425,39.819417 66.576048,47.9766 51.214917,56.164327 50.350967,56.623222 49.728833,56.602861 48.87245,56.14622 33.513666,47.955862 18.136716,39.801316 2.7623776,31.639232 0.56162839,30.471367 0.40223092,27.679304 2.4564303,26.217549 2.7932195,25.977807 3.1634352,25.784445 3.5285042,25.585917 18.226706,17.645436 32.935202,9.7204527 47.615314,1.7464766 49.340565,0.80805546 50.844437,0.83641499 52.55947,1.769855 67.183046,9.7154641 81.829706,17.61986 96.484313,25.506193 c 1.20567,0.649657 2.167256,1.430835 2.637643,2.740479 0,0.577483 0,1.152406 0,1.72989 z\" id=\"path2\" style=\"fill:#030000;fill-opacity:1;stroke-width:3.77748823;stroke:none\" inkscape:connector-curvature=\"0\" /> <path d=\"M 49.104049,99.358227 C 44.712775,96.981166 40.321502,94.601846 35.927731,92.227428 25.067995,86.359443 14.208259,80.497116 3.3485241,74.626869 1.3328713,73.538641 0.46902716,71.829377 1.2403155,70.086931 1.5796818,69.321099 2.2301382,68.552628 2.942282,68.122389 c 2.0696204,-1.255646 4.2292307,-2.369516 6.3914144,-3.462645 0.323934,-0.164782 0.9126916,-0.04637 1.2726516,0.144418 12.348318,6.530498 24.69149,13.068538 37.006317,19.657859 1.689301,0.902332 3.167439,0.925709 4.859388,0.02073 12.289057,-6.571599 24.611793,-13.08362 36.906148,-19.645038 0.714471,-0.381596 1.223456,-0.366137 1.902355,0.02827 1.624968,0.946449 3.280589,1.846142 4.964592,2.686634 1.267353,0.634234 2.303488,1.453988 2.874156,2.784294 0,0.577297 0,1.152331 0,1.729627 -0.490824,1.340866 -1.493653,2.127059 -2.722407,2.786934 -10.667116,5.726205 -21.313419,11.487855 -31.965019,17.24234 -4.473392,2.415518 -8.941865,4.841595 -13.409958,7.262401 -0.6403,0 -1.280221,0 -1.917871,0 z\" id=\"path4\" style=\"fill:#030000;fill-opacity:1;stroke-width:3.77748823;stroke:none\" inkscape:connector-curvature=\"0\" /> <path d=\"m 98.605401,51.116473 c -0.390539,0.848033 -1.120903,1.281288 -1.915223,1.701345 C 81.277202,60.982544 65.872173,69.157826 50.479632,77.361013 49.762513,77.742609 49.263744,77.69623 48.579926,77.332731 33.128275,69.10353 17.66652,60.900342 2.204757,52.68886 0.21740311,51.63457 -0.1296755,49.319351 1.487459,47.710765 c 0.3547909,-0.353316 0.8021377,-0.631594 1.2443416,-0.876692 1.8973601,-1.046748 3.8307465,-2.03656 5.7100934,-3.11687 0.640186,-0.368399 1.1081116,-0.327298 1.74054,0.01056 12.268659,6.537662 24.560402,13.031962 36.813773,19.598282 1.794503,0.961908 3.324108,0.95399 5.115962,-0.0076 12.253485,-6.566321 24.54746,-13.05798 36.816082,-19.598659 0.63538,-0.337856 1.105765,-0.368776 1.740767,-0.0027 1.652971,0.961532 3.332054,1.887241 5.04671,2.733013 1.267354,0.623676 2.298568,1.430608 2.892325,2.740177 -0.003,0.644792 -0.003,1.286567 -0.003,1.926081 z\" id=\"path6\" style=\"fill:#030000;fill-opacity:1;stroke-width:3.77748823;stroke:none\" inkscape:connector-curvature=\"0\" /> </svg> "
public static layers_img = Img.AsImageElement(Svg.layers)
public static layers_svg() { return new FixedUiElement(Svg.layers);}
public static layers_ui() { return new FixedUiElement(Svg.layers_img);}

View file

@ -16,16 +16,19 @@ export class SubtleButton extends UIElement{
if(this.message !== null){
this.message.dumbMode = false;
}
let img;
if ((imageUrl ?? "") === "") {
this.image = new FixedUiElement("");
img = new FixedUiElement("");
} else if (typeof (imageUrl) === "string") {
this.image = new FixedUiElement(`<img class="" src="${imageUrl}" alt="">`);
img = new FixedUiElement(`<img style="width: 100%;" src="${imageUrl}" alt="">`);
} else {
this.image = imageUrl;
img = imageUrl;
}
// Reset the loading message once things are loaded
document.getElementById('centermessage').innerText = '';
img.AddClass("block flex items-center justify-center h-11 w-11 flex-shrink0")
this.image = new Combine([img])
.AddClass("flex-shrink-0");
}
InnerRender(): string {
@ -37,12 +40,8 @@ export class SubtleButton extends UIElement{
if(this.linkTo != undefined){
return new Combine([
`<a class='block flex group p-3 my-2 bg-white rounded-lg ring-2 ring-white hover:ring-2 hover:ring-white hover:shadow-xl shadow-inner hover:bg-blue-100' href="${this.linkTo.url}" ${this.linkTo.newTab ? 'target="_blank"' : ""}>`,
`<div class='flex-shrink-0'>`,
`<div class='flex items-center justify-center h-11 w-11'>`,
`<a class='block flex group p-3 my-2 bg-blue-100 rounded-lg hover:shadow-xl hover:bg-blue-200' href="${this.linkTo.url}" ${this.linkTo.newTab ? 'target="_blank"' : ""}>`,
this.image,
`</div>`,
`</div>`,
`<div class='ml-4'>`,
this.message,
`</div>`,
@ -52,11 +51,10 @@ export class SubtleButton extends UIElement{
// Styling todo
return new Combine([
'<span class="">',
this.image,
this.message,
'</span>'
]).Render();
]).AddClass("block flex p-3 my-2 bg-blue-100 rounded-lg hover:shadow-xl hover:bg-blue-200")
.Render();
}

View file

@ -6,23 +6,23 @@ import {FixedUiElement} from "../Base/FixedUiElement";
export default class IndexText extends Combine {
constructor() {
super([
new FixedUiElement(`<img class="h-24 w-24" src="./assets/svg/logo.svg" alt="MapComplete Logo">`)
new FixedUiElement(`<img class="w-12 h-12 sm:h-24 sm:w-24" src="./assets/svg/logo.svg" alt="MapComplete Logo">`)
.AddClass("flex-none m-3"),
new Combine([
Translations.t.index.title
.AddClass("text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl block text-gray-800 xl:inline"),
.AddClass("text-2xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl block text-gray-800 xl:inline"),
Translations.t.index.intro.AddClass(
"mt-3 text-base font-semibold text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"),
Translations.t.index.pickTheme.AddClass("mt-3 text-base text-green-600 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0")
]).AddClass("flex flex-col sm:text-center lg:text-left m-6 mt-8")
]).AddClass("flex flex-col sm:text-center lg:text-left m-1 mt-2 md:m-2 md:mt-4")
]);
this.AddClass("flex flex-col sm:flex-row");
this.AddClass("flex flex-row");
}
}

View file

@ -98,11 +98,7 @@ export default class MoreScreen extends UIElement {
linkButton.push(this.createLinkButton(layout));
}
els.push(new Combine([
`<div class='rounded-xl overflow-hidden bg-gradient-to-tr from-green-400 via-blue-500 to-green-500 p-5 m-8 mt-5'>`,
new Combine(linkButton),
`</div>`
]))
els.push(new Combine(linkButton))
els.push(new VariableUiElement(
State.state.osmConnection.userDetails.map(userDetails => {

View file

@ -7,14 +7,14 @@
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"
width="27"
height="27"
viewBox="0 0 27 27"
fill="none"
width="100"
height="100"
viewBox="0 0 100 100"
version="1.1"
id="svg8"
sodipodi:docname="layers.svg"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)">
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
style="fill:none">
<metadata
id="metadata14">
<rdf:RDF>
@ -23,6 +23,7 @@
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
@ -37,30 +38,30 @@
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1680"
inkscape:window-height="1013"
inkscape:window-width="1920"
inkscape:window-height="999"
id="namedview10"
showgrid="false"
inkscape:zoom="12.361274"
inkscape:cx="13.100126"
inkscape:cy="2.3570853"
inkscape:window-x="1560"
inkscape:zoom="5.6568542"
inkscape:cx="83.509105"
inkscape:cy="42.25915"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg8" />
<path
d="M26.5353 8.13481C26.4422 8.35428 26.2683 8.47598 26.0632 8.58537C21.9977 10.7452 17.935 12.9085 13.8758 15.0799C13.6475 15.2016 13.4831 15.1962 13.2568 15.0751C9.19822 12.903 5.13484 10.7404 1.07215 8.5758C0.490599 8.26608 0.448478 7.52562 0.991303 7.13796C1.0803 7.07438 1.17813 7.0231 1.2746 6.97045C5.15862 4.86462 9.04536 2.7629 12.9246 0.648187C13.3805 0.399316 13.7779 0.406837 14.2311 0.65434C18.0954 2.76153 21.9658 4.85779 25.8383 6.94926C26.1569 7.12155 26.411 7.32872 26.5353 7.67604C26.5353 7.82919 26.5353 7.98166 26.5353 8.13481Z"
fill="#003B8B"
d="m 99.121956,29.976384 c -0.352319,0.827558 -1.010404,1.286454 -1.786559,1.698932 C 81.950425,39.819417 66.576048,47.9766 51.214917,56.164327 50.350967,56.623222 49.728833,56.602861 48.87245,56.14622 33.513666,47.955862 18.136716,39.801316 2.7623776,31.639232 0.56162839,30.471367 0.40223092,27.679304 2.4564303,26.217549 2.7932195,25.977807 3.1634352,25.784445 3.5285042,25.585917 18.226706,17.645436 32.935202,9.7204527 47.615314,1.7464766 49.340565,0.80805546 50.844437,0.83641499 52.55947,1.769855 67.183046,9.7154641 81.829706,17.61986 96.484313,25.506193 c 1.20567,0.649657 2.167256,1.430835 2.637643,2.740479 0,0.577483 0,1.152406 0,1.72989 z"
id="path2"
style="fill:#030000;fill-opacity:1" />
style="fill:#030000;fill-opacity:1;stroke-width:3.77748823;stroke:none"
inkscape:connector-curvature="0" />
<path
d="M13.318 26.535C12.1576 25.9046 10.9972 25.2736 9.83614 24.6439C6.96644 23.0877 4.09674 21.533 1.22704 19.9762C0.694401 19.6876 0.466129 19.2343 0.669943 18.7722C0.759621 18.5691 0.931505 18.3653 1.11969 18.2512C1.66659 17.9182 2.23727 17.6228 2.80863 17.3329C2.89423 17.2892 3.04981 17.3206 3.14493 17.3712C6.40799 19.1031 9.66969 20.837 12.9239 22.5845C13.3703 22.8238 13.7609 22.83 14.208 22.59C17.4554 20.8472 20.7117 19.1202 23.9605 17.3801C24.1493 17.2789 24.2838 17.283 24.4632 17.3876C24.8926 17.6386 25.3301 17.8772 25.7751 18.1001C26.11 18.2683 26.3838 18.4857 26.5346 18.8385C26.5346 18.9916 26.5346 19.1441 26.5346 19.2972C26.4049 19.6528 26.1399 19.8613 25.8152 20.0363C22.9964 21.5549 20.1831 23.0829 17.3684 24.609C16.1863 25.2496 15.0055 25.893 13.8248 26.535C13.6556 26.535 13.4865 26.535 13.318 26.535Z"
fill="#003B8B"
d="M 49.104049,99.358227 C 44.712775,96.981166 40.321502,94.601846 35.927731,92.227428 25.067995,86.359443 14.208259,80.497116 3.3485241,74.626869 1.3328713,73.538641 0.46902716,71.829377 1.2403155,70.086931 1.5796818,69.321099 2.2301382,68.552628 2.942282,68.122389 c 2.0696204,-1.255646 4.2292307,-2.369516 6.3914144,-3.462645 0.323934,-0.164782 0.9126916,-0.04637 1.2726516,0.144418 12.348318,6.530498 24.69149,13.068538 37.006317,19.657859 1.689301,0.902332 3.167439,0.925709 4.859388,0.02073 12.289057,-6.571599 24.611793,-13.08362 36.906148,-19.645038 0.714471,-0.381596 1.223456,-0.366137 1.902355,0.02827 1.624968,0.946449 3.280589,1.846142 4.964592,2.686634 1.267353,0.634234 2.303488,1.453988 2.874156,2.784294 0,0.577297 0,1.152331 0,1.729627 -0.490824,1.340866 -1.493653,2.127059 -2.722407,2.786934 -10.667116,5.726205 -21.313419,11.487855 -31.965019,17.24234 -4.473392,2.415518 -8.941865,4.841595 -13.409958,7.262401 -0.6403,0 -1.280221,0 -1.917871,0 z"
id="path4"
style="fill:#030000;fill-opacity:1" />
style="fill:#030000;fill-opacity:1;stroke-width:3.77748823;stroke:none"
inkscape:connector-curvature="0" />
<path
d="M26.3988 13.7412C26.2956 13.9661 26.1026 14.081 25.8927 14.1924C21.8198 16.3577 17.749 18.5258 13.6815 20.7013C13.492 20.8025 13.3602 20.7902 13.1795 20.6938C9.09638 18.5114 5.01059 16.3359 0.924798 14.1582C0.399637 13.8786 0.307921 13.2646 0.735251 12.838C0.829005 12.7443 0.947217 12.6705 1.06407 12.6055C1.56545 12.3279 2.07635 12.0654 2.57297 11.7789C2.74214 11.6812 2.86579 11.6921 3.03291 11.7817C6.27492 13.5155 9.52303 15.2378 12.761 16.9792C13.2352 17.2343 13.6394 17.2322 14.1129 16.9772C17.3509 15.2358 20.5996 13.5142 23.8416 11.7796C24.0095 11.69 24.1338 11.6818 24.3016 11.7789C24.7384 12.0339 25.1821 12.2794 25.6352 12.5037C25.9701 12.6691 26.2426 12.8831 26.3995 13.2304C26.3988 13.4014 26.3988 13.5716 26.3988 13.7412Z"
fill="#003B8B"
d="m 98.605401,51.116473 c -0.390539,0.848033 -1.120903,1.281288 -1.915223,1.701345 C 81.277202,60.982544 65.872173,69.157826 50.479632,77.361013 49.762513,77.742609 49.263744,77.69623 48.579926,77.332731 33.128275,69.10353 17.66652,60.900342 2.204757,52.68886 0.21740311,51.63457 -0.1296755,49.319351 1.487459,47.710765 c 0.3547909,-0.353316 0.8021377,-0.631594 1.2443416,-0.876692 1.8973601,-1.046748 3.8307465,-2.03656 5.7100934,-3.11687 0.640186,-0.368399 1.1081116,-0.327298 1.74054,0.01056 12.268659,6.537662 24.560402,13.031962 36.813773,19.598282 1.794503,0.961908 3.324108,0.95399 5.115962,-0.0076 12.253485,-6.566321 24.54746,-13.05798 36.816082,-19.598659 0.63538,-0.337856 1.105765,-0.368776 1.740767,-0.0027 1.652971,0.961532 3.332054,1.887241 5.04671,2.733013 1.267354,0.623676 2.298568,1.430608 2.892325,2.740177 -0.003,0.644792 -0.003,1.286567 -0.003,1.926081 z"
id="path6"
style="fill:#030000;fill-opacity:1" />
style="fill:#030000;fill-opacity:1;stroke-width:3.77748823;stroke:none"
inkscape:connector-curvature="0" />
</svg>

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 4.3 KiB

View file

@ -32,6 +32,7 @@
{
"id": "climbing_club",
"name": {
"de": "Kletterverein",
"nl": "Klimclub",
"en": "Climbing club"
},
@ -56,19 +57,21 @@
"render": {
"en": "Climbing club",
"nl": "Klimclub",
"de": "Klettermöglichkeit"
"de": "Kletterverein"
},
"mappings": [
{
"if": "office~*",
"then": {
"nl": "Klimorganisatie",
"en": "Climbing NGO"
"en": "Climbing NGO",
"de": "Kletter-Organisation"
}
}
]
},
"description": {
"de": "Ein Kletterverein oder eine Organisation",
"nl": "Een klimclub of organisatie",
"en": "A climbing club or organisations"
},
@ -81,6 +84,7 @@
},
"question": {
"en": "What is the name of this climbing club or NGO?",
"de": "Wie lautet der Name dieses Vereins oder Organisation?",
"nl": "Wat is de naam van deze klimclub?"
},
"freeform": {
@ -119,10 +123,12 @@
"sport=climbing"
],
"title": {
"de": "Kletterverein",
"en": "Climbing club",
"nl": "Klimclub"
},
"description": {
"de": "Ein Kletterverein",
"nl": "Een klimclub",
"en": "A climbing club"
}
@ -133,12 +139,14 @@
"sport=climbing"
],
"title": {
"de": "Eine Kletter-Organisation",
"en": "Climbing NGO",
"nl": "Een klimorganisatie"
},
"description": {
"de": "Eine Organisation, welche sich mit dem Klettern beschäftigt",
"nl": "Een VZW die werkt rond klimmen",
"en": "A NGO workign around climbing"
"en": "A NGO working around climbing"
}
}
],
@ -287,8 +295,9 @@
{
"#": "Length",
"render": {
"en": "This route is {climbing:length} meter high",
"nl": "Deze klimroute is {climbing:length} meter hoog"
"de": "Diese Route ist {climbing:length} Meter lang",
"en": "This route is {climbing:length} meter long",
"nl": "Deze klimroute is {climbing:length} meter lang"
},
"freeform": {
"key": "climbing:length",
@ -298,6 +307,7 @@
{
"#": "Difficulty",
"render": {
"en": "Die Schwierigkeit ist {climbing:grade:french} entsprechend des französisch/belgischen Systems",
"en": "The difficulty is {climbing:grade:french} according to the french/belgian system",
"nl": "De klimmoeilijkheid is {climbing:grade:french} volgens het Franse/Belgische systeem"
},
@ -552,10 +562,12 @@
{
"#": "Difficulty-min",
"question": {
"de": "Welche Schwierigkeit hat hier die leichteste Route (französisch/belgisches System)?",
"en": "What is the level of the easiest route here, accoring to the french classification system?",
"nl": "Wat is het niveau van de makkelijkste route, volgens het Franse classificatiesysteem?"
},
"render": {
"de": "Die leichteste Route hat hier die Schwierigkeit {climbing:grade:french} (französisch/belgisches System)",
"en": "The minimal difficulty is {climbing:grade:french} according to the french/belgian system",
"nl": "De minimale klimmoeilijkheid is {climbing:grade:french} volgens het Franse/Belgische systeem"
},
@ -573,10 +585,12 @@
{
"#": "Difficulty-max",
"question": {
"de": "Welche Schwierigkeit hat hier die schwerste Route (französisch/belgisches System)?",
"en": "What is the level of the most difficult route here, accoring to the french classification system?",
"nl": "Wat is het niveau van de moeilijkste route, volgens het Franse classificatiesysteem?"
},
"render": {
"de": "Die schwerste Route hat hier die Schwierigkeit {climbing:grade:french} (französisch/belgisches System)",
"en": "The maximal difficulty is {climbing:grade:french} according to the french/belgian system",
"nl": "De maximale klimmoeilijkheid is {climbing:grade:french} volgens het Franse/Belgische systeem"
},
@ -618,6 +632,7 @@
{
"if": "climbing:boulder=limited",
"then": {
"de": "Bouldern ist hier nur an wenigen Routen möglich",
"en": "Bouldering is possible, allthough there are only a few routes",
"nl": "Bolderen kan hier, maar er zijn niet zoveel routes"
}

View file

@ -0,0 +1 @@
<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50" overflow="inherit"><path d="M7.206 31.141c2.885 0 5.219-2.399 5.219-5.368 0-2.953-2.334-5.353-5.219-5.353-2.873 0-5.206 2.4-5.206 5.353 0 2.968 2.333 5.368 5.206 5.368zm29.23 9.216c.243-.172.564-.12.741.117l.965 1.372c.164.238.114.58-.116.766l-7.08 5.287c-.229.172-.562.118-.743-.118l-.962-1.372c-.165-.238-.113-.579.116-.764l7.079-5.288zm-8.003-6.817l-2.808-5.063-1.474 1.107 2.808 5.09zm-6.551-11.827l-10.92-19.713-2.089.014 11.522 20.82zm10.281 10.43c.617-.461 2.029-1.143 2.837-1.143h10c1.974 0 3 1.986 3 4.004 0 2.03-1.026 2.996-3 2.996h-9l-10.836 8.502c-3.808 2.819-6.116-.278-6.116-.278l-8.483-8.729c-1.423-1.753-1.115-5.089.591-6.566l11.739-8.597c1.166-1 2.897-.843 3.885.343.976 1.2.822 2.994-.346 3.996l-7.515 5.657 5.399 5.484 7.845-5.669z"/></svg>

After

Width:  |  Height:  |  Size: 875 B

View file

@ -13,7 +13,7 @@
"nl"
],
"maintainer": "",
"icon": "https://upload.wikimedia.org/wikipedia/commons/0/00/Map_icons_by_Scott_de_Jonge_-_playground.svg",
"icon": "./assets/themes/playgrounds/playground.svg",
"version": "0",
"startLat": 50.535,
"startLon": 4.399,

View file

@ -45,8 +45,8 @@
padding: 0.5em;
border-radius: 999em;
margin-right: 0.4em;
width: 2em;
height: 2em;
width: min-content;
height: min-content;
background: var(--subtle-detail-color);
flex-shrink: 0;
}

View file

@ -29,6 +29,10 @@ html, body {
font-family: 'Helvetica Neue', Arial, sans-serif;
}
svg, img {
box-sizing: content-box;
}
a {
color: var(--foreground-color)
}
@ -123,10 +127,8 @@ a {
.simple-add-ui-icon {
position: relative;
display: block;
width: 3.5em;
width: 4em;
height: 3.5em;
padding-right: 0.3em;
padding-left: 0.3em;
}
.simple-add-ui-icon img {
@ -445,6 +447,7 @@ a {
height: 1em;
fill: black;
border-radius: 0;
display: inline;
}
.leaflet-popup-content {

View file

@ -58,6 +58,11 @@ let layoutToUse: LayoutConfig = AllKnownLayouts.allSets[defaultLayout.toLowerCas
const userLayoutParam = QueryParameters.GetQueryParameter("userlayout", "false");
const layoutFromBase64 = decodeURIComponent(userLayoutParam.data);
document.getElementById('centermessage').innerText = '';
document.getElementById("decoration-desktop").remove();
if (layoutFromBase64.startsWith("wiki:")) {
console.log("Downloading map theme from the wiki");
const themeName = layoutFromBase64.substr("wiki:".length);
@ -111,11 +116,11 @@ if (layoutFromBase64.startsWith("wiki:")) {
InitUiElements.InitAll(layoutToUse, layoutFromBase64, testing, defaultLayout);
} else {
// We fall through: no theme loaded: just show a few buttons
document.getElementById("decoration-desktop").remove();
State.state = new State(undefined);
document.getElementById("messagesboxmobile").remove();
new MoreScreen(true)
.SetStyle("pointer-events: all;")
.AddClass("block m-5")
.AttachTo("topleft-tools");
}
window.addEventListener('contextmenu', function (e) { // Not compatible with IE < 9

15015
package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -34,7 +34,6 @@
"@types/leaflet-providers": "^1.2.0",
"@types/leaflet.markercluster": "^1.4.3",
"autoprefixer": "^9.8.6",
"canvas": "^2.6.1",
"country-language": "^0.1.7",
"email-validator": "^2.0.4",
"escape-html": "^1.0.3",
@ -54,6 +53,7 @@
"parcel": "^1.12.4",
"postcss": "^7.0.35",
"tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
"sharp": "^0.27.0",
"turf": "^3.0.14"
},
"devDependencies": {
@ -62,7 +62,6 @@
"assert": "^2.0.0",
"fs": "0.0.1-security",
"marked": "^1.1.1",
"promise-svg2img": "^0.2.0",
"read-file": "^0.2.0",
"ts-node": "^9.0.0",
"ts-node-dev": "^1.0.0-pre.63",

View file

@ -1,17 +1,21 @@
// We HAVE to mark this while importing
import {Utils} from "../Utils";
Utils.runningFromConsole = true;
import LayoutConfig from "../Customizations/JSON/LayoutConfig";
import {AllKnownLayouts} from "../Customizations/AllKnownLayouts";
import {existsSync, mkdirSync, readFileSync, writeFile, writeFileSync} from "fs";
import Locale from "../UI/i18n/Locale";
<<<<<<< HEAD
// import svg2img from 'promise-svg2img';
=======
import * as sharp from "sharp"
>>>>>>> master
import Translations from "../UI/i18n/Translations";
import {Translation} from "../UI/i18n/Translation";
function enc(str: string): string {
return encodeURIComponent(str.toLowerCase());
}
@ -75,14 +79,14 @@ function validate(layout: LayoutConfig) {
}
function generateWikiEntry(layout: LayoutConfig){
if(layout.hideFromOverview){
function generateWikiEntry(layout: LayoutConfig) {
if (layout.hideFromOverview) {
return "";
}
const languages = layout.language.map(ln => `{{#language:${ln}|en}}`).join(", ")
let auth = "Yes";
if(layout.maintainer !== "" && layout.maintainer !== "MapComplete"){
auth=`Yes, by ${layout.maintainer};`
if (layout.maintainer !== "" && layout.maintainer !== "MapComplete") {
auth = `Yes, by ${layout.maintainer};`
}
return `{{service_item
|name= [https://mapcomplete.osm.be/${layout.id} ${layout.id}]
@ -101,8 +105,12 @@ function generateWikiEntry(layout: LayoutConfig){
const alreadyWritten = []
<<<<<<< HEAD
function createIcon(iconPath: string, size: number, layout: LayoutConfig) {
=======
async function createIcon(iconPath: string, size: number, layout: LayoutConfig) {
>>>>>>> master
let name = iconPath.split(".").slice(0, -1).join(".");
if (name.startsWith("./")) {
name = name.substr(2)
@ -127,16 +135,21 @@ function createIcon(iconPath: string, size: number, layout: LayoutConfig) {
/*
// We already read to file, in order to crash here if the file is not found
readFileSync(iconPath);
/* svg2img(iconPath,
// @ts-ignore
{width: size, height: size, preserveAspectRatio: true})
.then((buffer) => {
console.log("Writing icon", newname)
writeFileSync(newname, buffer);
}).catch((error) => {
console.log("ERROR while writing" + iconPath, error)
});
//*/
let img = await sharp(iconPath)
let resized = await img.resize(size)
await resized.toFile(newname)
/* svg2img(iconPath,
// @ts-ignore
{width: size, height: size, preserveAspectRatio: true})
.then((buffer) => {
console.log("Writing icon", newname)
writeFileSync(newname, buffer);
}).catch((error) => {
console.log("ERROR while writing" + iconPath, error)
});
//*/
} catch (e) {
console.error("Could not read icon", iconPath, "due to", e)
}
@ -144,9 +157,13 @@ function createIcon(iconPath: string, size: number, layout: LayoutConfig) {
return newname;
}
<<<<<<< HEAD
//*/
function createManifest(layout: LayoutConfig, relativePath: string) {
=======
async function createManifest(layout: LayoutConfig, relativePath: string) {
>>>>>>> master
const name = layout.id;
const icons = [];
@ -162,9 +179,13 @@ function createManifest(layout: LayoutConfig, relativePath: string) {
writeFileSync(path, layout.icon)
}
<<<<<<< HEAD
=======
>>>>>>> master
const sizes = [72, 96, 120, 128, 144, 152, 180, 192, 384, 512];
for (const size of sizes) {
const name = createIcon(path, size, layout);
const name = await createIcon(path, size, layout);
icons.push({
src: name,
sizes: size + "x" + size,
@ -197,7 +218,8 @@ function createManifest(layout: LayoutConfig, relativePath: string) {
}
const template = readFileSync("index.html", "utf8");
function createLandingPage(layout: LayoutConfig) {
async function createLandingPage(layout: LayoutConfig) {
Locale.language.setData(layout.language[0]);
@ -229,7 +251,7 @@ function createLandingPage(layout: LayoutConfig) {
}
let output = template
.replace("./manifest.manifest",`${enc(layout.id)}.webmanifest`)
.replace("./manifest.manifest", `${enc(layout.id)}.webmanifest`)
.replace("<!-- $$$OG-META -->", og)
.replace(/<title>.+?<\/title>/, `<title>${ogTitle}</title>`)
.replace("Loading MapComplete, hang on...", `Loading MapComplete theme <i>${ogTitle}</i>...`)
@ -249,11 +271,11 @@ function createLandingPage(layout: LayoutConfig) {
}
const generatedDir = "./assets/generated";
if (! existsSync(generatedDir)) {
if (!existsSync(generatedDir)) {
mkdirSync(generatedDir)
}
const blacklist = ["", "test", ".", "..", "manifest", "index", "land", "preferences", "account", "openstreetmap","custom"]
const blacklist = ["", "test", ".", "..", "manifest", "index", "land", "preferences", "account", "openstreetmap", "custom"]
const all = AllKnownLayouts.allSets;
let wikiPage = "{|class=\"wikitable sortable\"\n" +
@ -261,8 +283,6 @@ let wikiPage = "{|class=\"wikitable sortable\"\n" +
"|-";
for (const layoutName in all) {
if (blacklist.indexOf(layoutName.toLowerCase()) >= 0) {
console.log(`Skipping a layout with name${layoutName}, it is on the blacklist`);
@ -275,16 +295,16 @@ for (const layoutName in all) {
};
const layout = all[layoutName];
validate(layout)
const manif = JSON.stringify(createManifest(layout, ""));
const manifestLocation = encodeURIComponent(layout.id.toLowerCase()) + ".webmanifest";
writeFile(manifestLocation, manif, err);
createManifest(layout, "").then(manifObj => {
const manif = JSON.stringify(manifObj);
const manifestLocation = encodeURIComponent(layout.id.toLowerCase()) + ".webmanifest";
writeFile(manifestLocation, manif, err);
})
// Create a landing page for the given theme
const landing = createLandingPage(layout);
writeFile(enc(layout.id) + ".html", landing, err)
wikiPage += "\n"+generateWikiEntry(layout);
createLandingPage(layout).then(landing => {
writeFile(enc(layout.id) + ".html", landing, err)
wikiPage += "\n" + generateWikiEntry(layout);
});
}
wikiPage += "\n|}"