diff --git a/Professional.md b/Professional.md index fbe9c35a81..a82b9eafc5 100644 --- a/Professional.md +++ b/Professional.md @@ -1,36 +1,5 @@ -What about vandalism? ---------------------- - -As anyone can edit the data, it is indeed possible that a malicious change is made. However, this is extremely rare for a few reasons: - -- the technical barrier to make changes is high -- a small malicious change has low impact, thus little reward for a vandal -- a high impact change is quickly noticed and reverted since so many people use this data -- all changes are tracked and tied to a single user. A repeating offender is quickly banned -- In Belgium (and some other countries), the first edit by a new contributor is systematically checked and corrected if needed. - - -Using MapComplete in your organization -========= - -If an existing MapComplete theme is what you need to survey data or to show on your website, feel free to embed it. -Embedding those is free and will always be. - -Do you need some other data, but does the theme not exist yet? The MapComplete-developers can build it for you on a decent budget. Get in touch via [email](mailto:pietervdvn@posteo.net), [github](https://github.com/pietervdvn/MapComplete/issues) or [send a message via osm.org](https://www.openstreetmap.org/message/new/Pieter%20Vander%20Vennet) - -If you still feel unsure, the possibilities are outlined below. Additionally, some common questions are answered - - What data can be shown with MapComplete? --------- - -MapComplete has a powerful templating system, which allows to quickly create a map showing precisely those features that you need and showing relevant attributes in the popups. - -This data can be fetched from OpenStreetMap directly, but MapComplete can also use external datasets - -e.g. to compare OpenStreetMap with another dataset or to show data that is not suited for OpenStreetMap (planned activities, statistics, ...) - - What are the survey possibilities? ---- diff --git a/UI/Base/Toggleable.ts b/UI/Base/Toggleable.ts new file mode 100644 index 0000000000..447869073e --- /dev/null +++ b/UI/Base/Toggleable.ts @@ -0,0 +1,61 @@ +import BaseUIElement from "../BaseUIElement"; +import {UIEventSource} from "../../Logic/UIEventSource"; +import Combine from "./Combine"; + +export class Accordeon extends Combine { + + constructor(toggles: Toggleable[]) { + + for (const el of toggles) { + el.isVisible.addCallbackAndRun(isVisible => toggles.forEach(toggle => { + if (toggle !== el && isVisible) { + toggle.isVisible.setData(false) + } + })) + } + + super(toggles); + } + +} + + +export default class Toggleable extends BaseUIElement { + public readonly isVisible = new UIEventSource(false) + private readonly title: BaseUIElement; + private readonly content: BaseUIElement; + + constructor(title: BaseUIElement, content: BaseUIElement) { + super() + this.title = title; + this.content = content; + this.content.SetClass("animate-height border-l-4 border-gray-300 pl-2") + this.title.SetClass("background-subtle rounded-lg") + const self = this + this.onClick(() => self.isVisible.setData(!self.isVisible.data)) + } + + protected InnerConstructElement(): HTMLElement { + + const title = this.title.ConstructElement() + const content = this.content.ConstructElement() + + this.isVisible.addCallbackAndRun(isVisible => { + if (isVisible) { + content.style.maxHeight = "100vh" + content.style["-webkit-mask-image"] = "unset" + } else { + content.style["-webkit-mask-image"] = "-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))" + content.style.maxHeight = "2rem" + } + }) + + const div = document.createElement("div") + div.appendChild(title) + div.appendChild(content) + + + return div; + } + +} \ No newline at end of file diff --git a/UI/ProfessionalGui.ts b/UI/ProfessionalGui.ts index ce14762c95..d1b72ffa9a 100644 --- a/UI/ProfessionalGui.ts +++ b/UI/ProfessionalGui.ts @@ -1,16 +1,73 @@ import {FixedUiElement} from "./Base/FixedUiElement"; +import Translations from "./i18n/Translations"; +import Combine from "./Base/Combine"; +import Title from "./Base/Title"; +import Toggleable, {Accordeon} from "./Base/Toggleable"; +import List from "./Base/List"; + +class Snippet extends Toggleable { + constructor(translations) { + super( + new Title(translations.title, 3), + new Combine([ + translations.intro, + new List([ + translations.li0, + translations.li1, + translations.li2, + translations.li3, + translations.li4, + translations.li5, + translations.li6, + ]), + translations.outro + ]).SetClass("flex flex-col") + ) + } +} export default class ProfessionalGui { + constructor() { - - new FixedUiElement("Hello world").AttachTo("main") - + const t = Translations.t.professional + + new Combine([ + new Combine([ + new FixedUiElement(`MapComplete Logo`) + .SetClass("flex-none m-3"), + new Combine([ + + new Title(t.title, 1).SetClass("font-bold text-3xl"), + t.intro + ]).SetClass("flex flex-col") + + ]).SetClass("flex"), + + new Title(t.osmTitle, 2).SetClass("text-2xl"), + t.text0, + t.text1, + new Accordeon([ + new Snippet(t.aboutOsm.aboutOsm), + new Snippet(t.aboutOsm.benefits), + new Snippet(t.aboutOsm.license), + new Snippet(t.aboutOsm.vandalism), + ]).SetClass("flex flex-col"), + + new Title(t.aboutMc.title, 2).SetClass("text-2xl"), + t.aboutMc.text0, + t.aboutMc.text1, + t.aboutMc.text2 + + + ]) + .SetClass("flex flex-col pb-12 m-5 lg:w-3/4 lg:ml-40") + .AttachTo("main") + } } -console.log("Hello world") new FixedUiElement("").AttachTo("decoration-desktop") new ProfessionalGui() \ No newline at end of file diff --git a/css/index-tailwind-output.css b/css/index-tailwind-output.css index 2a9b65a04b..4872ff01c1 100644 --- a/css/index-tailwind-output.css +++ b/css/index-tailwind-output.css @@ -816,6 +816,10 @@ video { margin: 0px; } +.m-3 { + margin: 0.75rem; +} + .m-2 { margin: 0.5rem; } @@ -824,10 +828,6 @@ video { margin: 1rem; } -.m-3 { - margin: 0.75rem; -} - .m-6 { margin: 1.5rem; } @@ -988,6 +988,10 @@ video { height: 2.5rem; } +.h-12 { + height: 3rem; +} + .h-8 { height: 2rem; } @@ -996,10 +1000,6 @@ video { height: 50%; } -.h-12 { - height: 3rem; -} - .h-screen { height: 100vh; } @@ -1048,6 +1048,10 @@ video { width: 2.5rem; } +.w-12 { + width: 3rem; +} + .w-8 { width: 2rem; } @@ -1056,10 +1060,6 @@ video { width: 0px; } -.w-12 { - width: 3rem; -} - .w-screen { width: 100vw; } @@ -1287,6 +1287,10 @@ video { border-width: 2px; } +.border-l-4 { + border-left-width: 4px; +} + .border-b { border-bottom-width: 1px; } @@ -1393,6 +1397,10 @@ video { padding: 0.125rem; } +.pb-12 { + padding-bottom: 3rem; +} + .pl-2 { padding-left: 0.5rem; } @@ -1482,6 +1490,16 @@ video { line-height: 1.75rem; } +.text-3xl { + font-size: 1.875rem; + line-height: 2.25rem; +} + +.text-2xl { + font-size: 1.5rem; + line-height: 2rem; +} + .text-lg { font-size: 1.125rem; line-height: 1.75rem; @@ -1492,11 +1510,6 @@ video { line-height: 1.25rem; } -.text-2xl { - font-size: 1.5rem; - line-height: 2rem; -} - .text-base { font-size: 1rem; line-height: 1.5rem; @@ -2230,6 +2243,11 @@ li::marker { width: unset; } +.animate-height { + transition: max-height .5s ease-in-out; + overflow-y: hidden; +} + .hover\:bg-blue-200:hover { --tw-bg-opacity: 1; background-color: rgba(191, 219, 254, var(--tw-bg-opacity)); diff --git a/index.css b/index.css index 90988d29e8..2e08dfcceb 100644 --- a/index.css +++ b/index.css @@ -473,3 +473,8 @@ li::marker { height: var(--image-carousel-height); width: unset; } + +.animate-height { + transition: max-height .5s ease-in-out; + overflow-y: hidden; +} diff --git a/langs/en.json b/langs/en.json index 7ce7f5fdb3..47d15ae701 100644 --- a/langs/en.json +++ b/langs/en.json @@ -322,15 +322,18 @@ "title": "Professional support with MapComplete", "intro": "The developer of MapComplete offers professional support. This document outlines some of the possibilities, common questions and the boundaries of MapComplete", "osmTitle": "What can OpenStreetMap and MapComplete do for your organisation?", - "osmText": "Maintaining a set of up-to-date geodata is hard, error prone and expensive.
To add insult to injury, many organizations end up collecting the same data independently - resulting in duplicated efforts, non-standardized data formats and many incomplete, unmaintained datasets.
At the same time, there is a huge community which gathers a lot of geodata into one shared, global and standardized database - namely OpenStreetMap.org.
This dataset has a very liberal license which allows for infinite reuse but can be hard to edit, especially for non-technical users as most OpenStreetMap editors show all data at once and require some technical knowledge.A user who wishes to update information on their topic of choice (e.g. a bench, a shop, a waste basket, ...) is confronted with every street, every building and every other feature nearby.
MapComplete is the in-between solution, offering a more traditional map focused on just one topic while offering powerful editing capabilities disguised as simple-to-use building blocks.", - + "text0": "

Maintaining a set of up-to-date geodata is hard, error prone and expensive.
To add insult to injury, many organizations end up collecting the same data independently - resulting in duplicated efforts, non-standardized data formats and many incomplete, unmaintained datasets.

At the same time, there is a huge community which gathers a lot of geodata into one shared, global and standardized database - namely OpenStreetMap.org.

", + "text1": "

MapComplete is the editor to make contributing data to OpenStreetMap easy.

", + "aboutOsm": { - "title": "What is OpenStreetMap and why use it in your organisation?", + "aboutOsm": { + "title": "What is OpenStreetMap?", "intro": "OpenStreetMap is a shared, global database, built by volunteers. All geodata can be contributed to OpenStreetMap, as long as it can be verified on the ground.
OpenStreetMap has grown to be a very broad and deep dataset as it contains data over thousands of categories of objects.An individual object might also have a ton of attributes, bringing a lot of nuance, e.g.:", "li0": "Streets have geometry, but might also have information about the maxspeed, surface, wether they are lit, their name, a link to Wikipedia, a link to what they are named after, which hiking-, cycle- and busroutes run over theme", "li1": "Shops and other amenities might have opening hours, a phone number, a link to the website, which payment methods are supported, what they sell, which services they offer, ...", "li2": "Toilets might have information about wheelchair accessibility, a changing table, if payment is needed, ...", - "li3": "and much, much more...", + "li3": "and much, much more..." + }, "benefits": { "title": "Benefits of the OSM-ecosystem", "intro": "It can be very hard to leave your own dataset behind, as building this dataset often took a lot of time and effort.
However, the benefits of switching over to OSM are huge:", @@ -340,9 +343,9 @@ }, "license": { "title": "The license", - "intro": "OpenStreetMap is licensed under the Open Database License. The [full copyright text](https://osm.org/copyright) can be summarized as following:", + "intro": "OpenStreetMap is licensed under the Open Database License. The full copyright text can be summarized as following:", "li0": "A product using OpenStreetMap data must give attribution.", - "li1": "OpenStreetMap-data must remain _open_. This means that data of a map containing OpenStreetMap data can be copied again.", + "li1": "OpenStreetMap-data must remain open. This means that data of a map containing OpenStreetMap data can be copied again.", "outro": "The license has a few implications - these are explained below." }, "vandalism": { @@ -350,10 +353,29 @@ "intro": "As anyone can edit the data, it is indeed possible that a malicious change is made. However, this is extremely rare for a few reasons:", "li0": "the technical barrier to make changes is high", "li1": "a small malicious change has low impact, thus little reward for a vandal", - "li": "a high impact change is quickly noticed and reverted since so many people use this data", - "li": "all changes are tracked and tied to a single user. A repeating offender is quickly banned", - "li": "In Belgium (and some other countries), the first edit by a new contributor is systematically checked and corrected if needed." + "li2": "a high impact change is quickly noticed and reverted since so many people use this data", + "li3": "all changes are tracked and tied to a single user. A repeating offender is quickly banned", + "li4": "In Belgium (and some other countries), the first edit by a new contributor is systematically checked and corrected if needed." } + }, + "aboutMc": { + "title": "Using MapComplete in your organization", + "text0": "If an existing MapComplete theme is what you need to survey data or to show on your website, feel free to embed it. Embedding the public themes is free and always will be.", + "text1": "Do you need some other data, but does the theme not exist yet? The MapComplete-developers can build it for you on a decent budget. Get in touch via email, github or send a message via osm.org", + "text2": "If you still feel unsure, the possibilities are outlined below. Additionally, some common questions are answered", +"layers": { + "title": "What data can be shown with MapComplete?", + "intro": "

MapComplete has a powerful templating system, which allows to quickly create a map showing precisely those features that you need and showing relevant attributes in the popups.

This data can be fetched from OpenStreetMap directly, but MapComplete can also use external datasets - e.g. to compare OpenStreetMap with another dataset or to show data that is not suited for OpenStreetMap (planned activities, statistics, ...)" +} + + + + + + + } + + } }