From 871f512c0dc8f7d1c27ee638af1b7d38bb51ce6e Mon Sep 17 00:00:00 2001 From: Tobias Date: Wed, 20 Jan 2021 21:48:47 +0100 Subject: [PATCH] Move border custom css to Tailwind Class - migrate custom css to Tailwind class - introduce class-parameter for `AsImageElement` - migrate width of login button to Tailwind class --- InitUiElements.ts | 4 +++- Svg.ts | 2 +- UI/Base/Img.ts | 8 ++++---- UI/BigComponents/UserBadge.ts | 2 +- css/mobile.css | 1 - css/userbadge.css | 10 ---------- index.css | 4 ---- index.html | 6 +++--- 8 files changed, 12 insertions(+), 25 deletions(-) diff --git a/InitUiElements.ts b/InitUiElements.ts index 27661bb..64da98e 100644 --- a/InitUiElements.ts +++ b/InitUiElements.ts @@ -260,6 +260,7 @@ export class InitUiElements { const fullOptions = new FullWelcomePaneWithTabs(); + // ?-Button on Desktop, opens panel with close-X. const help = Svg.help_svg().SetClass("open-welcome-button block"); const close = Svg.close_svg().SetClass("close-welcome-button"); const checkbox = new CheckBox( @@ -294,8 +295,9 @@ export class InitUiElements { } + // ?-Button on Mobile, opens full screen layer with close-button at the bottom Svg.help_svg() - .SetClass("open-welcome-button block shadow") + .SetClass("open-welcome-button block rounded-3xl overflow-hidden shadow" ) .onClick(() => { State.state.fullScreenMessage.setData({content: fullOptions2, hashText: "welcome"}) }).AttachTo("help-button-mobile"); diff --git a/Svg.ts b/Svg.ts index 2505dc8..d3f302b 100644 --- a/Svg.ts +++ b/Svg.ts @@ -255,7 +255,7 @@ export default class Svg { public static ring_ui() { return new FixedUiElement(Svg.ring_img);} public static search = " " - public static search_img = Img.AsImageElement(Svg.search) + public static search_img = Img.AsImageElement(Svg.search, 'rounded-3xl') public static search_svg() { return new FixedUiElement(Svg.search);} public static search_ui() { return new FixedUiElement(Svg.search_img);} diff --git a/UI/Base/Img.ts b/UI/Base/Img.ts index 1186ae9..34b238d 100644 --- a/UI/Base/Img.ts +++ b/UI/Base/Img.ts @@ -4,16 +4,16 @@ import {Utils} from "../../Utils"; export default class Img { public static runningFromConsole = false; - + static AsData(source:string){ if(Utils.runningFromConsole){ return source; } return `data:image/svg+xml;base64,${(btoa(source))}`; } - - static AsImageElement(source: string): string{ - return ``; + + static AsImageElement(source: string, css_class: string): string{ + return ``; } } diff --git a/UI/BigComponents/UserBadge.ts b/UI/BigComponents/UserBadge.ts index 19de2db..18207e8 100644 --- a/UI/BigComponents/UserBadge.ts +++ b/UI/BigComponents/UserBadge.ts @@ -29,7 +29,7 @@ export default class UserBadge extends UIElement { this._loginButton = Translations.t.general.loginWithOpenStreetMap .Clone() - .SetClass("userbadge-login") + .SetClass("userbadge-login pt-3 w-full") .onClick(() => State.state.osmConnection.AttemptLogin()); this._logout = Svg.logout_svg() diff --git a/css/mobile.css b/css/mobile.css index 069e7a9..56655e8 100644 --- a/css/mobile.css +++ b/css/mobile.css @@ -92,7 +92,6 @@ Contains tweaks for small screens .userbadge-login { min-width: unset; - width: calc(100vw - 5px); } #userbadge { diff --git a/css/userbadge.css b/css/userbadge.css index ca36f51..3291ffb 100644 --- a/css/userbadge.css +++ b/css/userbadge.css @@ -2,11 +2,6 @@ display: inline-block; background-color: var(--background-color); color: var(--foreground-color); - -webkit-border-radius: 2em; - -moz-border-radius: 2em; - border-radius: 2em; - border-bottom-right-radius: 1.5em; - border-top-right-radius: 1.5em; margin: 0; margin-bottom: 0.5em; width: 100%; @@ -101,11 +96,6 @@ display: inline-block; text-align: center; - -webkit-border-radius: 2em; - -moz-border-radius: 2em; - border-radius: 2em; - border-bottom-right-radius: 1.5em; - border-top-right-radius: 1.5em; margin: 0; min-width: 20em; diff --git a/index.css b/index.css index b75d094..e59f893 100644 --- a/index.css +++ b/index.css @@ -244,7 +244,6 @@ a { transition: all 500ms linear; pointer-events: all; - border-radius: 1.3em; margin: 0 0 0.5em; width: 100%; } @@ -282,7 +281,6 @@ a { float: right; height: 1.2em; border: 2px solid black; - border-radius: 2em; padding: 0.4em; margin-left: 0.5em; margin-right: 0; @@ -349,7 +347,6 @@ a { height: 3.5em; width: 3.5em; padding: 0.75em; - border-radius: 1em; } .open-welcome-button svg { @@ -363,7 +360,6 @@ a { padding: 0; pointer-events: all; box-shadow: 0 0 10px var(--shadow-color); - border-radius: 1em; width: min-content; background-color: var(--background-color); color: var(--foreground-color); diff --git a/index.html b/index.html index e93c852..873bf21 100644 --- a/index.html +++ b/index.html @@ -50,10 +50,10 @@
-
+