midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Toggle in the userbadge on small screens - more map space

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

6
UI/BigComponents/Basemap.ts
View file

@ -26,12 +26,6 @@ export class Basemap {
attributionControl: extraAttribution !== undefined
});
L.control.scale(
{
position: 'topright',
}
).addTo(this.map)
// Users are not allowed to zoom to the 'copies' on the left and the right, stuff goes wrong then
// We give a bit of leeway for people on the edges

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,14 +84,6 @@ 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),
@ -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")
}

25
css/mobile.css
View file

@ -15,15 +15,6 @@ Contains tweaks for small screens
display: none !important;
}
#help-button-mobile div {
box-shadow: 0 0 10px #0006;
margin-bottom: 10px;
}
#geolocate-button {
display: block;
}
#centermessage {
top: 30%;
left: 15%;
@ -57,21 +48,5 @@ Contains tweaks for small screens
}
@media only screen and (max-width: 600px) {
/* Portrait */
#userbadge-and-search {
display: inline-block;
width: auto;
max-width: 100vw;
}
.userbadge-login {
min-width: unset;
}
#userbadge {
margin-bottom: 0.3em;
}
}

43
css/userbadge.css
View file

@ -1,16 +1,4 @@
#userbadge {
display: inline-block;
background-color: var(--background-color);
color: var(--foreground-color);
margin: 0;
margin-bottom: 0.5em;
width: 100%;
min-width: 20em;
pointer-events: all;
border-radius: 999em;
max-width: 100vw;
overflow-x: hidden;
}
.userstats {
display: flex;
@ -45,28 +33,6 @@
display: block;
}
.usertext {
display: block;
width: max-content;
margin: 0;
padding: 0.9em;
padding-left: 4.7em; /* Should be half of profile-pic's width + actual padding (same as padding-right)*/
padding-right: 1.5em;
border-radius: 2em; /*Half border radius width/height*/
height: 2.2em; /*SHould equal profile-pic height - padding*/
z-index: 5000;
text-align: left;
background-color: var(--background-color);
color: var(--foreground-color);
background-size: 100%;
line-height: 0.75em;
}
.userbadge-login {
font-weight: bold;
font-size: large;
@ -81,10 +47,3 @@
min-width: 20em;
pointer-events: all;
}
#userbadge-and-search {
display: inline-block;
width: min-content;
overflow-x: hidden;
max-width: 100vw;
}

12
index.css
View file

@ -93,6 +93,18 @@ a {
color: var(--foreground-color);
}
.h-min {
height: min-content;
}
.w-min {
width: min-content;
}
.space-between{
justify-content: space-between;
}
.link-underline a {
text-decoration: underline 1px #0078a855;;
color: #0078A8;

6
index.html
View file

@ -59,9 +59,9 @@
<div id="fullscreen" class="hidden md:hidden fixed inset-0 block z-above-controls"></div>
<div id="topleft-tools" class="z-index-above-map">
<div id="userbadge-and-search" class="p-3">
<div id="userbadge" class="shadow rounded-3xl overflow-hidden"></div>
<div id="searchbox" class="shadow rounded-3xl overflow-hidden"></div>
<div class="p-3 flex flex-col items-end sm:items-start sm:flex-row sm:flex-wrap w-full sm:justify-between">
<div id="searchbox" class="shadow rounded-full h-min w-full overflow-hidden sm:max-w-sm"></div>
<div id="userbadge" class="m-1"></div>
</div>
<div id="messagesbox" class="rounded-3xl overflow-hidden ml-3"></div>
</div>