Toggle in the userbadge on small screens - more map space
This commit is contained in:
parent
69d4ea765c
commit
e2591f3dfe
6 changed files with 44 additions and 98 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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
12
index.css
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue