From e2591f3dfe454a432ba343c913d985477bd49fb4 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Sat, 3 Jul 2021 20:18:52 +0200 Subject: [PATCH] Toggle in the userbadge on small screens - more map space --- UI/BigComponents/Basemap.ts | 6 ----- UI/BigComponents/UserBadge.ts | 50 ++++++++++++++++++++--------------- css/mobile.css | 25 ------------------ css/userbadge.css | 43 +----------------------------- index.css | 12 +++++++++ index.html | 6 ++--- 6 files changed, 44 insertions(+), 98 deletions(-) diff --git a/UI/BigComponents/Basemap.ts b/UI/BigComponents/Basemap.ts index 4ad5bc8f6..2da6415b6 100644 --- a/UI/BigComponents/Basemap.ts +++ b/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 diff --git a/UI/BigComponents/UserBadge.ts b/UI/BigComponents/UserBadge.ts index 26214661a..576c47a55 100644 --- a/UI/BigComponents/UserBadge.ts +++ b/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,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") + } diff --git a/css/mobile.css b/css/mobile.css index 7165f0cd7..0fd405ac4 100644 --- a/css/mobile.css +++ b/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; - } -} diff --git a/css/userbadge.css b/css/userbadge.css index 2fe2efec1..8d9897cfe 100644 --- a/css/userbadge.css +++ b/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; -} diff --git a/index.css b/index.css index ebf83ca4b..47178a06f 100644 --- a/index.css +++ b/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; diff --git a/index.html b/index.html index eb45c805a..22113fa9d 100644 --- a/index.html +++ b/index.html @@ -59,9 +59,9 @@
-