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

15
UI/Base/SubtleButton.ts
View file

@ -19,7 +19,7 @@ export class SubtleButton extends UIElement{
if ((imageUrl ?? "") === "") {
this.image = new FixedUiElement("");
} 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 {
this.image = imageUrl;
}
@ -37,15 +37,22 @@ export class SubtleButton extends UIElement{
if(this.linkTo != undefined){
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,
`</div>`,
`</div>`,
`<div class='ml-4'>`,
this.message,
'</a>'
`</div>`,
`</a>`
]).Render();
}
// Styling todo
return new Combine([
'<span class="subtle-button">',
'<span class="">',
this.image,
this.message,
'</span>'