Bastian-Greshake-Tzovaras/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Further work on professional services page

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-11-30 21:29:17 +01:00
parent 9a20451e81
commit 5aeff895a9
5 changed files with 59 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

48
UI/ProfessionalGui.ts
View file

@ -17,7 +17,8 @@ class TableOfContents extends Combine {
private readonly titles: Title[]
constructor(elements: Combine | Title[], options: {
noTopLevel: false | boolean
noTopLevel: false | boolean,
maxDepth?: number
}) {
let titles: Title[]
if (elements instanceof Combine) {
@ -49,7 +50,7 @@ class TableOfContents extends Combine {
}
if (options.noTopLevel) {
const minLevel = Math.min(...els.map(e => e.level))
els = els.filter(e => e.level !== minLevel)
els = els.filter(e => e.level !== minLevel && e.level <= (options.maxDepth + minLevel))
}
@ -97,10 +98,18 @@ class TableOfContents extends Combine {
}
class Snippet extends Toggleable {
constructor(translations) {
constructor(translations, ...extraContent: BaseUIElement[]) {
super(
new Title(translations.title, 3),
new Combine([
new SnippetContent(translations, ...extraContent)
)
}
}
class SnippetContent extends Combine {
constructor(translations:any, ...extras: BaseUIElement[]) {
super([
translations.intro,
new List([
translations.li0,
@ -111,9 +120,10 @@ class Snippet extends Toggleable {
translations.li5,
translations.li6,
]),
translations.outro
]).SetClass("flex flex-col")
)
translations.outro,
...extras
])
this.SetClass("flex flex-col")
}
}
@ -128,14 +138,14 @@ export default class ProfessionalGui {
new FixedUiElement(`<img class="w-12 h-12 sm:h-24 sm:w-24" src="./assets/svg/logo.svg" alt="MapComplete Logo">`)
.SetClass("flex-none m-3"),
new Combine([
new Title(t.title, 1).SetClass("font-bold text-3xl"),
new Title(t.title, 1),
t.intro
]).SetClass("flex flex-col")
]).SetClass("flex")
const content = new Combine([
header,
new Title(t.osmTitle, 2).SetClass("text-2xl"),
new Title(t.osmTitle, 2),
t.text0,
t.text1,
new Accordeon([
@ -145,20 +155,26 @@ export default class ProfessionalGui {
new Snippet(t.aboutOsm.vandalism),
]).SetClass("flex flex-col"),
new Title(t.aboutMc.title, 2).SetClass("text-2xl"),
new Title(t.aboutMc.title, 2),
t.aboutMc.text0,
t.aboutMc.text1,
t.aboutMc.text2,
new Accordeon([
new Snippet(t.aboutMc.layers),
new Snippet(t.aboutMc.survey),
new Snippet(t.aboutMc.internalUse)
new Snippet(t.aboutMc.internalUse),
new Snippet(t.services)
]),
new Title(t.drawbacks.title, 2).SetClass("text-2xl"),
t.drawbacks.intro,
new Accordeon([
new Snippet(t.drawbacks.unsuitedData),
new Snippet(t.drawbacks.licenseNuances)
new Snippet(t.drawbacks.licenseNuances,
new Title( t.drawbacks.licenseNuances.usecaseMapDifferentSources.title, 4),
new SnippetContent(t.drawbacks.licenseNuances.usecaseMapDifferentSources),
new Title( t.drawbacks.licenseNuances.usecaseGatheringOpenData.title, 4),
new SnippetContent(t.drawbacks.licenseNuances.usecaseGatheringOpenData)
)
]),
]).SetClass("flex flex-col pb-12 m-3 lg:w-3/4 lg:ml-10 link-underline")
@ -175,10 +191,12 @@ export default class ProfessionalGui {
const leftContents: BaseUIElement[] = [
backToIndex,
new TableOfContents(content, {
noTopLevel: true
noTopLevel: true,
maxDepth: 2
}).SetClass("subtle"),
LanguagePicker.CreateLanguagePicker(Translations.t.index.title.SupportedLanguages()).SetClass("mt-4 self-end flex-col"),
].map(el => el.SetClass("pl-4"))
LanguagePicker.CreateLanguagePicker(Translations.t.professional.title.SupportedLanguages())?.SetClass("mt-4 self-end flex-col"),
].map(el => el?.SetClass("pl-4"))
const leftBar = new Combine([
new Combine(leftContents).SetClass("sticky top-4 m-4")
]).SetClass("block w-full md:w-2/6 lg:w-1/6")