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

Fixing css styling bugs, most works correctly now

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-01-18 19:36:19 +01:00
commit db91c5ead4
16 changed files with 394 additions and 14849 deletions
Download patch file Download diff file Expand all files Collapse all files

26
UI/Base/SubtleButton.ts
View file

@ -16,16 +16,19 @@ export class SubtleButton extends UIElement{
if(this.message !== null){
this.message.dumbMode = false;
}
let img;
if ((imageUrl ?? "") === "") {
this.image = new FixedUiElement("");
img = new FixedUiElement("");
} else if (typeof (imageUrl) === "string") {
this.image = new FixedUiElement(`<img class="" src="${imageUrl}" alt="">`);
img = new FixedUiElement(`<img style="width: 100%;" src="${imageUrl}" alt="">`);
} else {
this.image = imageUrl;
img = imageUrl;
}
// Reset the loading message once things are loaded
document.getElementById('centermessage').innerText = '';
img.AddClass("block flex items-center justify-center h-11 w-11 flex-shrink0")
this.image = new Combine([img])
.AddClass("flex-shrink-0");
}
InnerRender(): string {
@ -37,12 +40,8 @@ export class SubtleButton extends UIElement{
if(this.linkTo != undefined){
return new Combine([
`<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'>`,
`<a class='block flex group p-3 my-2 bg-blue-100 rounded-lg hover:shadow-xl hover:bg-blue-200' href="${this.linkTo.url}" ${this.linkTo.newTab ? 'target="_blank"' : ""}>`,
this.image,
`</div>`,
`</div>`,
`<div class='ml-4'>`,
this.message,
`</div>`,
@ -52,11 +51,10 @@ export class SubtleButton extends UIElement{
// Styling todo
return new Combine([
'<span class="">',
this.image,
this.message,
'</span>'
]).Render();
]).AddClass("block flex p-3 my-2 bg-blue-100 rounded-lg hover:shadow-xl hover:bg-blue-200")
.Render();
}