Bastian-Greshake-Tzovaras/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Toggle in the userbadge on small screens - more map space

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-07-03 20:18:52 +02:00
parent 69d4ea765c
commit e2591f3dfe
6 changed files with 44 additions and 98 deletions
Download patch file Download diff file Expand all files Collapse all files

50
UI/BigComponents/UserBadge.ts
View file

@ -1,6 +1,3 @@
/**
* Handles and updates the user badge
*/
import {VariableUiElement} from "../Base/VariableUIElement";
import Svg from "../../Svg";
import State from "../../State";
@ -21,7 +18,7 @@ export default class UserBadge extends Toggle {
const loginButton = Translations.t.general.loginWithOpenStreetMap
.Clone()
.SetClass("userbadge-login pt-3 w-full")
.SetClass("userbadge-login pt-3 w-full h-full")
.onClick(() => State.state.osmConnection.AttemptLogin());
@ -32,7 +29,7 @@ export default class UserBadge extends Toggle {
});
const userBadge = userDetails.map(user => {
const userBadge = new VariableUiElement(userDetails.map(user => {
{
const homeButton = new VariableUiElement(
userDetails.map((userinfo) => {
@ -78,7 +75,7 @@ export default class UserBadge extends Toggle {
let dryrun = new FixedUiElement("");
if (user.dryRun) {
dryrun = new FixedUiElement("TESTING").SetClass("alert");
dryrun = new FixedUiElement("TESTING").SetClass("alert font-xs p-0 max-h-4");
}
const settings =
@ -87,15 +84,7 @@ export default class UserBadge extends Toggle {
true)
const userIcon = new Link(
new Img(user.img)
.SetClass("rounded-full opacity-0 m-0 p-0 duration-500 w-16 h16 float-left")
,
`https://www.openstreetmap.org/user/${encodeURIComponent(user.name)}`,
true
);
const userName = new Link(
new FixedUiElement(user.name),
`https://www.openstreetmap.org/user/${user.name}`,
@ -113,24 +102,41 @@ export default class UserBadge extends Toggle {
.SetClass("userstats")
const usertext = new Combine([
userName,
dryrun,
new Combine([userName, dryrun]).SetClass("flex justify-end w-full"),
userStats
]).SetClass("usertext")
]).SetClass("flex flex-col sm:w-auto sm:pl-2 overflow-hidden w-0")
const userIcon =
new Img(user.img).SetClass("rounded-full opacity-0 m-0 p-0 duration-500 w-16 min-width-16 h16 float-left")
.onClick(() => {
if(usertext.HasClass("w-0")){
usertext.RemoveClass("w-0")
usertext.SetClass("w-min pl-2")
}else{
usertext.RemoveClass("w-min")
usertext.RemoveClass("pl-2")
usertext.SetClass("w-0")
}
})
return new Combine([
userIcon,
usertext,
]).SetClass("h-16")
userIcon,
]).SetClass("h-16 flex bg-white")
}
});
}));
userBadge.SetClass("inline-block m-0 w-full").SetStyle("pointer-events: all")
super(
new VariableUiElement(userBadge),
userBadge,
loginButton,
State.state.osmConnection.isLoggedIn
)
this.SetClass("shadow rounded-full h-min overflow-hidden block w-max")
}