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();
}

8
UI/BigComponents/IndexText.ts
View file

@ -6,23 +6,23 @@ import {FixedUiElement} from "../Base/FixedUiElement";
export default class IndexText extends Combine {
constructor() {
super([
new FixedUiElement(`<img class="h-24 w-24" src="./assets/svg/logo.svg" alt="MapComplete Logo">`)
new FixedUiElement(`<img class="w-12 h-12 sm:h-24 sm:w-24" src="./assets/svg/logo.svg" alt="MapComplete Logo">`)
.AddClass("flex-none m-3"),
new Combine([
Translations.t.index.title
.AddClass("text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl block text-gray-800 xl:inline"),
.AddClass("text-2xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl block text-gray-800 xl:inline"),
Translations.t.index.intro.AddClass(
"mt-3 text-base font-semibold text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"),
Translations.t.index.pickTheme.AddClass("mt-3 text-base text-green-600 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0")
]).AddClass("flex flex-col sm:text-center lg:text-left m-6 mt-8")
]).AddClass("flex flex-col sm:text-center lg:text-left m-1 mt-2 md:m-2 md:mt-4")
]);
this.AddClass("flex flex-col sm:flex-row");
this.AddClass("flex flex-row");
}
}

6
UI/BigComponents/MoreScreen.ts
View file

@ -98,11 +98,7 @@ export default class MoreScreen extends UIElement {
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 Combine(linkButton))
els.push(new VariableUiElement(
State.state.osmConnection.userDetails.map(userDetails => {