Tailwind for List of Themes

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

View file

@ -19,7 +19,7 @@ export class SubtleButton extends UIElement{
if ((imageUrl ?? "") === "") { if ((imageUrl ?? "") === "") {
this.image = new FixedUiElement(""); this.image = new FixedUiElement("");
} else if (typeof (imageUrl) === "string") { } else if (typeof (imageUrl) === "string") {
this.image = new FixedUiElement(`<img style="height:3em" src="${imageUrl}">`); this.image = new FixedUiElement(`<img class="" src="${imageUrl}" alt="">`);
} else { } else {
this.image = imageUrl; this.image = imageUrl;
} }
@ -37,15 +37,22 @@ export class SubtleButton extends UIElement{
if(this.linkTo != undefined){ if(this.linkTo != undefined){
return new Combine([ return new Combine([
`<a class="subtle-button" href="${this.linkTo.url}" ${this.linkTo.newTab ? 'target="_blank"' : ""}>`, `<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'>`,
this.image, this.image,
`</div>`,
`</div>`,
`<div class='ml-4'>`,
this.message, this.message,
'</a>' `</div>`,
`</a>`
]).Render(); ]).Render();
} }
// Styling todo
return new Combine([ return new Combine([
'<span class="subtle-button">', '<span class="">',
this.image, this.image,
this.message, this.message,
'</span>' '</span>'

View file

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

View file

@ -492,52 +492,6 @@ a {
} }
/** Switch layout **/ /** Switch layout **/
.subtle-button {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
font-size: large;
margin: 0.5em;
background-color: var(--subtle-detail-color);
color: var(--subtle-detail-color-contrast);
border-radius: 1em;
align-items: center;
text-decoration: none;
}
.subtle-button a {
text-decoration: unset !important;
color: unset !important;
display: block ruby;
}
.round-button .subtle-button {
width: 2em;
height: 2em;
border-radius: 1em;
display: block !important;
margin: 0;
padding: 0.5em;
}
.small-button .subtle-button {
height: 2em;
}
.small-button .subtle-button img {
max-height: 1.8em;
}
.subtle-button img {
max-width: 3em;
height: 3em;
margin-right: 0.5em;
padding: 0;
padding-bottom: 0.2em;
}
.small-image img { .small-image img {
height: 1em; height: 1em;
max-width: 1em; max-width: 1em;