midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki 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
Show stats 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>'

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

48
index.css
View file

@ -492,52 +492,6 @@ a {
}
/** 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 {
height: 1em;
max-width: 1em;
@ -596,4 +550,4 @@ a {
.ornament svg polygon {
fill: var(--subtle-detail-color-light-contrast);
}
}