midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Tailwind for List of Themes

Browse source 
Style the list of themes with Tailwind. Add wrapper around the list of themes.

The non-linked list items are still TODO.

Also move the Streetcomplete-Note below the list and also the custom-build-Request-Line.
This commit is contained in:
Tobias 2021-01-17 21:14:48 +01:00
parent 740b54e476
commit 4c59ea3b1e
3 changed files with 41 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

54
UI/BigComponents/MoreScreen.ts
View file

@ -65,15 +65,14 @@ export default class MoreScreen extends UIElement {
}
let description = Translations.W(layout.shortDescription);
if (description !== undefined) {
description = new Combine(["<br/>", description]);
}
return new SubtleButton(layout.icon,
new Combine([
"<b>",
`<dt class='text-lg leading-6 font-medium text-gray-900 group-hover:text-blue-800'>`,
Translations.W(layout.title),
"</b>",
`</dt>`,
`<dd class='mt-1 text-base text-gray-500 group-hover:text-blue-900'>`,
description ?? "",
`</dd>`,
]), {url: linkText, newTab: false});
}
@ -83,21 +82,10 @@ export default class MoreScreen extends UIElement {
const els: UIElement[] = []
els.push(new VariableUiElement(
State.state.osmConnection.userDetails.map(userDetails => {
if (userDetails.csCount < Constants.userJourney.themeGeneratorReadOnlyUnlock) {
return tr.requestATheme.Render();
}
return new SubtleButton(Svg.pencil_ui(), tr.createYourOwnTheme, {
url: "./customGenerator.html",
newTab: false
}).Render();
})
));
const linkButton: UIElement[] = []
for (const k in AllKnownLayouts.allSets) {
const layout : LayoutConfig = AllKnownLayouts.allSets[k];
const layout: LayoutConfig = AllKnownLayouts.allSets[k];
if (k === personal.id) {
if (State.state.osmConnection.userDetails.data.csCount < Constants.userJourney.personalLayoutUnlock) {
continue;
@ -106,9 +94,26 @@ export default class MoreScreen extends UIElement {
if (layout.id !== k) {
continue; // This layout was added multiple time due to an uppercase
}
els.push(this.createLinkButton(layout));
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 VariableUiElement(
State.state.osmConnection.userDetails.map(userDetails => {
if (userDetails.csCount < Constants.userJourney.themeGeneratorReadOnlyUnlock) {
return tr.requestATheme.SetClass("block text-base mx-10 my-3").Render();
}
return new SubtleButton(Svg.pencil_ui(), tr.createYourOwnTheme, {
url: "./customGenerator.html",
newTab: false
}).Render();
})
));
const customThemesNames = State.state.installedThemes.data ?? [];
@ -125,16 +130,15 @@ export default class MoreScreen extends UIElement {
intro = new Combine([
LanguagePicker.CreateLanguagePicker(Translations.t.general.index.SupportedLanguages())
.SetStyle("position: absolute; right: 1.5em; top: 1.5em;"),
Translations.t.general.index.SetStyle("margin-top: 2em;display:block; margin-bottom: 1em;")
])
.SetClass("absolute top-2 right-3 dropdown-ui-element-2226"),
Translations.t.general.index.SetClass("sm:text-center lg:text-left block m-6 mt-8")
])
}
intro,
tr.streetcomplete
this._component = new Combine([
intro,
new Combine(els),
tr.streetcomplete.SetClass("block text-base mx-10 my-3 mb-10")
]);
return this._component.Render();
}