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

Experimenting with tailwind: splitting the index intro into a separate class; adding the logo

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-01-18 02:51:42 +01:00
parent 6864ba4fd6
commit 923b86b507
6 changed files with 88 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

28
UI/BigComponents/IndexText.ts Normal file
View file

@ -0,0 +1,28 @@
import {UIElement} from "../UIElement";
import Combine from "../Base/Combine";
import Translations from "../i18n/Translations";
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">`)
.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"),
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")
]);
this.AddClass("flex flex-col sm:flex-row");
}
}

9
UI/BigComponents/MoreScreen.ts
View file

@ -11,6 +11,7 @@ import Translations from "../i18n/Translations";
import * as personal from "../../assets/themes/personalLayout/personalLayout.json"
import Constants from "../../Models/Constants";
import LanguagePicker from "../LanguagePicker";
import IndexText from "./IndexText";
export default class MoreScreen extends UIElement {
private readonly _onMainScreen: boolean;
@ -129,11 +130,11 @@ export default class MoreScreen extends UIElement {
if(this._onMainScreen){
intro = new Combine([
LanguagePicker.CreateLanguagePicker(Translations.t.general.index.SupportedLanguages())
LanguagePicker.CreateLanguagePicker(Translations.t.index.title.SupportedLanguages())
.SetClass("absolute top-2 right-3 dropdown-ui-element-2226"),
// todo add logo above text
// new FixedUiElement(`<img class="h-24 w-24" src="./assets/svg/logo.svg" alt="MapComplete Logo">`),
Translations.t.general.index.SetClass("sm:text-center lg:text-left block m-6 mt-8")
new IndexText()
])
}