Toggle in the userbadge on small screens - more map space

UI/BigComponents/Basemap.ts

@@ -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

UI/BigComponents/UserBadge.ts

@@ -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,
+                    new Combine([userName, dryrun]).SetClass("flex justify-end w-full"),
-                    dryrun,
                     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")
+        
     }
 
 

css/mobile.css

@@ -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;
-    }
-}
 
 

css/userbadge.css

@@ -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;
-}

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;

index.html

@@ -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 class="p-3 flex flex-col items-end sm:items-start sm:flex-row sm:flex-wrap w-full sm:justify-between">
-        <div id="userbadge" class="shadow rounded-3xl overflow-hidden"></div>
+        <div id="searchbox" class="shadow rounded-full h-min w-full overflow-hidden sm:max-w-sm"></div>
-        <div id="searchbox" class="shadow rounded-3xl overflow-hidden"></div>
+        <div id="userbadge" class="m-1"></div>
     </div>
     <div id="messagesbox" class="rounded-3xl overflow-hidden ml-3"></div>
 </div>