diff --git a/UI/AllThemesGui.ts b/UI/AllThemesGui.ts index f71c34ccf..111cdadd0 100644 --- a/UI/AllThemesGui.ts +++ b/UI/AllThemesGui.ts @@ -27,7 +27,7 @@ export default class AllThemesGui { new LoginToggle(undefined, Translations.t.index.logIn, { osmConnection, featureSwitchUserbadge: new ImmutableStore(true), - }), + }).SetClass("flex justify-center w-full"), Translations.t.general.aboutMapComplete.intro.SetClass("link-underline"), new FixedUiElement("v" + Constants.vNumber).SetClass("block"), ]) diff --git a/UI/Base/SubtleButton.ts b/UI/Base/SubtleButton.ts index bb4a5e41f..d4d80c9f3 100644 --- a/UI/Base/SubtleButton.ts +++ b/UI/Base/SubtleButton.ts @@ -4,13 +4,15 @@ import { UIElement } from "../UIElement" import { VariableUiElement } from "./VariableUIElement" import Lazy from "./Lazy" import Loading from "./Loading" -import SubtleButtonSvelte from "./SubtleButton.svelte" import SvelteUIElement from "./SvelteUIElement" import SubtleLink from "./SubtleLink.svelte"; import Translations from "../i18n/Translations"; import Combine from "./Combine"; import Img from "./Img"; +/** + * @deprecated + */ export class SubtleButton extends UIElement { private readonly imageUrl: string | BaseUIElement private readonly message: string | BaseUIElement @@ -42,7 +44,7 @@ export class SubtleButton extends UIElement { return new SvelteUIElement(SubtleLink, {href: this.options.url, newTab: this.options.newTab}) } - const classes = "block flex p-3 my-2 bg-subtle rounded-lg hover:shadow-xl hover:bg-unsubtle transition-colors transition-shadow link-no-underline"; + const classes = "button"; const message = Translations.W(this.message)?.SetClass("block overflow-ellipsis no-images flex-shrink"); let img; const imgClasses = "block justify-center flex-none mr-4 " + (this.options?.imgSize ?? "h-11 w-11") diff --git a/UI/Base/SubtleLink.svelte b/UI/Base/SubtleLink.svelte index 4a0c647d6..a146268b0 100644 --- a/UI/Base/SubtleLink.svelte +++ b/UI/Base/SubtleLink.svelte @@ -32,7 +32,7 @@ @@ -48,16 +48,3 @@ - - diff --git a/UI/BigComponents/HiddenThemeList.svelte b/UI/BigComponents/HiddenThemeList.svelte index eabf33dfb..abf54f391 100644 --- a/UI/BigComponents/HiddenThemeList.svelte +++ b/UI/BigComponents/HiddenThemeList.svelte @@ -13,9 +13,9 @@ export let onMainScreen: boolean = true const prefix = "mapcomplete-hidden-theme-" - const hiddenThemes: LayoutInformation[] = themeOverview.filter( + const hiddenThemes: LayoutInformation[] = (themeOverview["default"] ?? themeOverview)?.filter( (layout) => layout.hideFromOverview - ) + ) ?? [] const userPreferences = state.osmConnection.preferencesHandler.preferences const t = Translations.t.general.morescreen @@ -45,3 +45,4 @@

+ diff --git a/UI/BigComponents/MoreScreen.ts b/UI/BigComponents/MoreScreen.ts index ebfbfabb7..cc1622000 100644 --- a/UI/BigComponents/MoreScreen.ts +++ b/UI/BigComponents/MoreScreen.ts @@ -1,17 +1,13 @@ import Svg from "../../Svg" import Combine from "../Base/Combine" -import { SubtleButton } from "../Base/SubtleButton" import Translations from "../i18n/Translations" -import BaseUIElement from "../BaseUIElement" -import LayoutConfig, { LayoutInformation } from "../../Models/ThemeConfig/LayoutConfig" -import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource" +import LayoutConfig, {LayoutInformation} from "../../Models/ThemeConfig/LayoutConfig" +import {ImmutableStore, Store, UIEventSource} from "../../Logic/UIEventSource" import Loc from "../../Models/Loc" import UserRelatedState from "../../Logic/State/UserRelatedState" -import { Utils } from "../../Utils" -import Title from "../Base/Title" +import {Utils} from "../../Utils" import themeOverview from "../../assets/generated/theme_overview.json" -import { Translation } from "../i18n/Translation" -import { TextField } from "../Input/TextField" +import {TextField} from "../Input/TextField" import Locale from "../i18n/Locale" import SvelteUIElement from "../Base/SvelteUIElement" import ThemesList from "./ThemesList.svelte" diff --git a/UI/BigComponents/NoThemeResultButton.svelte b/UI/BigComponents/NoThemeResultButton.svelte index c8b6717af..6c7d490fc 100644 --- a/UI/BigComponents/NoThemeResultButton.svelte +++ b/UI/BigComponents/NoThemeResultButton.svelte @@ -1,64 +1,36 @@ - - -
{t.noMatchingThemes.toString()}
- - +
+
{t.noMatchingThemes.toString()}
+
- + +
+
diff --git a/UI/BigComponents/ProfessionalServicesButton.svelte b/UI/BigComponents/ProfessionalServicesButton.svelte index 2a3aa60e5..e88f97057 100644 --- a/UI/BigComponents/ProfessionalServicesButton.svelte +++ b/UI/BigComponents/ProfessionalServicesButton.svelte @@ -13,13 +13,13 @@ {t.hookMore.toString()} +
+ - +
+ +
+
- diff --git a/UI/BigComponents/ThemeButton.svelte b/UI/BigComponents/ThemeButton.svelte index 74f6e196c..046b69d28 100644 --- a/UI/BigComponents/ThemeButton.svelte +++ b/UI/BigComponents/ThemeButton.svelte @@ -86,7 +86,7 @@ - + diff --git a/UI/BigComponents/ThemesList.svelte b/UI/BigComponents/ThemesList.svelte index 43f82672d..8bdb71189 100644 --- a/UI/BigComponents/ThemesList.svelte +++ b/UI/BigComponents/ThemesList.svelte @@ -21,7 +21,7 @@ $: filteredThemes = themes.filter((theme) => MoreScreen.MatchesLayout(theme, $search)) -
+
{#if onMainScreen}
@@ -51,13 +51,7 @@
{/if} - {#if filteredThemes.length == 0} + {#if filteredThemes.length === 0} {/if}
- - diff --git a/UI/BigComponents/UnofficialThemeList.svelte b/UI/BigComponents/UnofficialThemeList.svelte index b39dcf1b6..c9d1a3f46 100644 --- a/UI/BigComponents/UnofficialThemeList.svelte +++ b/UI/BigComponents/UnofficialThemeList.svelte @@ -1,37 +1,39 @@ - - - - {@html t.customThemeIntro.toString()} - - +{#if customThemes.length > 0} + + + + {@html t.customThemeIntro.toString()} + + +{/if} diff --git a/Utils.ts b/Utils.ts index 501b954b4..62e4e2e65 100644 --- a/Utils.ts +++ b/Utils.ts @@ -704,10 +704,10 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be if (Array.isArray(leaf)) { for (let i = 0; i < (leaf).length; i++) { const l = (leaf)[i] - collectedList.push({ leaf: l, path: [...travelledPath, "" + i] }) + collectedList.push({leaf: l, path: [...travelledPath, "" + i]}) } } else { - collectedList.push({ leaf, path: travelledPath }) + collectedList.push({leaf, path: travelledPath}) } return collectedList } @@ -785,7 +785,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be }) } - const cp = { ...json } + const cp = {...json} for (const key in json) { cp[key] = Utils.WalkJson(json[key], f, isLeaf, [...path, key]) } @@ -915,11 +915,11 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be const xhr = new XMLHttpRequest() xhr.onload = () => { if (xhr.status == 200) { - resolve({ content: xhr.response }) + resolve({content: xhr.response}) } else if (xhr.status === 302) { - resolve({ redirect: xhr.getResponseHeader("location") }) + resolve({redirect: xhr.getResponseHeader("location")}) } else if (xhr.status === 509 || xhr.status === 429) { - resolve({ error: "rate limited", url, statuscode: xhr.status }) + resolve({error: "rate limited", url, statuscode: xhr.status}) } else { resolve({ error: "other error: " + xhr.statusText, @@ -989,10 +989,10 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be } const promise = /*NO AWAIT as we work with the promise directly */ Utils.downloadJsonAdvanced( - url, - headers - ) - Utils._download_cache.set(url, { promise, timestamp: new Date().getTime() }) + url, + headers + ) + Utils._download_cache.set(url, {promise, timestamp: new Date().getTime()}) return await promise } @@ -1011,11 +1011,11 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be const injected = Utils.injectedDownloads[url] if (injected !== undefined) { console.log("Using injected resource for test for URL", url) - return new Promise((resolve, _) => resolve({ content: injected })) + return new Promise((resolve, _) => resolve({content: injected})) } const result = await Utils.downloadAdvanced( url, - Utils.Merge({ accept: "application/json" }, headers ?? {}) + Utils.Merge({accept: "application/json"}, headers ?? {}) ) if (result["error"] !== undefined) { return <{ error: string; url: string; statuscode?: number }>result @@ -1023,12 +1023,12 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be const data = result["content"] try { if (typeof data === "string") { - return { content: JSON.parse(data) } + return {content: JSON.parse(data)} } - return { content: data } + return {content: data} } catch (e) { console.error("Could not parse ", data, "due to", e, "\n", e.stack) - return { error: "malformed", url } + return {error: "malformed", url} } } @@ -1052,7 +1052,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be const element = document.createElement("a") let file if (typeof contents === "string") { - file = new Blob([contents], { type: options?.mimetype ?? "text/plain" }) + file = new Blob([contents], {type: options?.mimetype ?? "text/plain"}) } else { file = contents } @@ -1169,7 +1169,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be if (typeof window === "undefined") { return "https://mapcomplete.osm.be" } - const path = (window.location.protocol+ window.location.host + window.location.pathname) .split("/") + const path = (window.location.protocol + "//" + window.location.host + window.location.pathname).split("/") path.pop() path.push("index.html") return path.join("/") @@ -1318,7 +1318,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be if (match == undefined) { return undefined } - return { r: Number(match[1]), g: Number(match[2]), b: Number(match[3]) } + return {r: Number(match[1]), g: Number(match[2]), b: Number(match[3])} } if (!hex.startsWith("#")) { @@ -1366,7 +1366,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be d.setUTCMinutes(0) } - public static scrollIntoView(element: HTMLBaseElement){ + public static scrollIntoView(element: HTMLBaseElement) { console.log("Scrolling into view:", element) // Is the element completely in the view? const parentRect = Utils.findParentWithScrolling( @@ -1384,6 +1384,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be console.log("Actually scrolling...") element.scrollIntoView({behavior: "smooth", block: "nearest"}) } + public static findParentWithScrolling(element: HTMLBaseElement): HTMLBaseElement { // Check if the element itself has scrolling if (element.scrollHeight > element.clientHeight) { @@ -1396,7 +1397,7 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be } // If the element has a parent, repeat the process for the parent element - return Utils.findParentWithScrolling( element.parentElement) + return Utils.findParentWithScrolling(element.parentElement) } /** @@ -1428,12 +1429,6 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be } return true } - private static colorDiff( - c0: { r: number; g: number; b: number }, - c1: { r: number; g: number; b: number } - ) { - return Math.abs(c0.r - c1.r) + Math.abs(c0.g - c1.g) + Math.abs(c0.b - c1.b) - } static SameObject(a: any, b: any) { if (a === b) { @@ -1463,4 +1458,11 @@ In the case that MapComplete is pointed to the testing grounds, the edit will be } return false } + + private static colorDiff( + c0: { r: number; g: number; b: number }, + c1: { r: number; g: number; b: number } + ) { + return Math.abs(c0.r - c1.r) + Math.abs(c0.g - c1.g) + Math.abs(c0.b - c1.b) + } } diff --git a/index.css b/index.css index b9413de6c..d3ea05a5a 100644 --- a/index.css +++ b/index.css @@ -397,6 +397,8 @@ select:hover { .subtle { /* For all information that is not important for 99% of the users */ color: #999; + font-size: medium; + font-weight: normal; } .link-underline .subtle a { diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css index 8c85f7460..ca35ffcaa 100644 --- a/public/css/index-tailwind-output.css +++ b/public/css/index-tailwind-output.css @@ -800,11 +800,6 @@ video { margin-right: 0.25rem; } -.my-2 { - margin-top: 0.5rem; - margin-bottom: 0.5rem; -} - .my-4 { margin-top: 1rem; margin-bottom: 1rem; @@ -815,6 +810,11 @@ video { margin-right: 1rem; } +.my-2 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} + .mx-10 { margin-left: 2.5rem; margin-right: 2.5rem; @@ -1137,11 +1137,6 @@ video { width: 50%; } -.w-max { - width: -webkit-max-content; - width: max-content; -} - .w-96 { width: 24rem; } @@ -1150,6 +1145,11 @@ video { width: 2.5rem; } +.w-max { + width: -webkit-max-content; + width: max-content; +} + .w-48 { width: 12rem; } @@ -1493,11 +1493,6 @@ video { background-color: rgb(248 113 113 / var(--tw-bg-opacity)); } -.bg-subtle { - --tw-bg-opacity: 1; - background-color: rgb(219 234 254 / var(--tw-bg-opacity)); -} - .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); @@ -1553,10 +1548,6 @@ video { padding: 0px; } -.p-3 { - padding: 0.75rem; -} - .p-8 { padding: 2rem; } @@ -1571,11 +1562,6 @@ video { padding-right: 1rem; } -.py-4 { - padding-top: 1rem; - padding-bottom: 1rem; -} - .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; @@ -1848,18 +1834,6 @@ video { transition-duration: 150ms; } -.transition-shadow { - transition-property: box-shadow; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.transition-\[color\2c background-color\2c box-shadow\] { - transition-property: color,background-color,box-shadow; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, -webkit-transform, -webkit-filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; @@ -2246,6 +2220,8 @@ select:hover { .subtle { /* For all information that is not important for 99% of the users */ color: #999; + font-size: medium; + font-weight: normal; } .link-underline .subtle a { @@ -2432,11 +2408,6 @@ a.link-underline { overflow-y: hidden; } -.hover\:bg-unsubtle:hover { - --tw-bg-opacity: 1; - background-color: rgb(191 219 254 / var(--tw-bg-opacity)); -} - .hover\:bg-indigo-200:hover { --tw-bg-opacity: 1; background-color: rgb(199 210 254 / var(--tw-bg-opacity)); @@ -2451,12 +2422,6 @@ a.link-underline { opacity: 1; } -.hover\:shadow-xl:hover { - --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); -} - @media (max-width: 480px) { .max-\[480px\]\:w-full { width: 100%;