Small layout tweaks, fix #751

Logic/DetermineLayout.ts

@@ -117,7 +117,7 @@ export default class DetermineLayout {
             error.SetClass("alert"),
             new SubtleButton(Svg.back_svg(),
                 "Go back to the theme overview",
-                {url: window.location.protocol + "//" + window.location.hostname + "/index.html", newTab: false}),
+                {url: window.location.protocol + "//" + window.location.host + "/index.html", newTab: false}),
             json !== undefined ? new SubtleButton(Svg.download_svg(),"Download the JSON file").onClick(() => {
                 Utils.offerContentsAsDownloadableFile(JSON.stringify(json, null, "  "), "theme_definition.json")
             }) : undefined

Models/ThemeConfig/LayoutConfig.ts

@@ -130,7 +130,7 @@ export default class LayoutConfig {
 
         this.extraLink = new ExtraLinkConfig(json.extraLink ?? {
             icon: "./assets/svg/pop-out.svg",
-            href: "https://mapcomplete.osm.be/{theme}.html?lat={lat}&lon={lon}&z={zoom}&language={language}",
+            href: "https://{basepath}/{theme}.html?lat={lat}&lon={lon}&z={zoom}&language={language}",
             newTab: true,
             requirements: ["iframe", "no-welcome-message"]
         }, context + ".extraLink")

UI/Base/SubtleButton.ts

@@ -29,24 +29,21 @@ export class SubtleButton extends UIElement {
 
     protected InnerRender(): string | BaseUIElement {
         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 message = Translations.W(this.message);
+        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")
         if ((this.imageUrl ?? "") === "") {
             img = undefined;
         } else if (typeof (this.imageUrl) === "string") {
-            img = new Img(this.imageUrl)
+            img = new Img(this.imageUrl)?.SetClass(imgClasses)
         } else {
-            img = this.imageUrl;
+            img = this.imageUrl?.SetClass(imgClasses);
         }
-        const image = new Combine([img?.SetClass("block flex items-center justify-center "+(this.options?.imgSize ?? "h-11 w-11")+" flex-shrink0 mr-4")])
-            .SetClass("flex-shrink-0");
-
-        message?.SetClass("block overflow-ellipsis no-images")
-
             const button = new Combine([
-            image,
+            img,
             message
-        ]).SetClass("flex group w-full")
+         ]).SetClass("flex items-center group w-full")
+
         
         if (this.options?.url == undefined) {
             this.SetClass(classes)

UI/BigComponents/CopyrightPanel.ts

@@ -106,29 +106,35 @@ export default class CopyrightPanel extends Combine {
 
         const t = Translations.t.general.attribution
         const layoutToUse = state.layoutToUse
-        const iconStyle = "height: 1.5rem; width: auto"
+        const imgSize = "h-6 w-6"
+        const iconStyle = "height: 1.5rem; width: 1.5rem"
         const actionButtons = [
-            new SubtleButton(Svg.liberapay_ui().SetStyle(iconStyle), t.donate, {
+            new SubtleButton(Svg.liberapay_ui(), t.donate, {
                 url: "https://liberapay.com/pietervdvn/",
-                newTab: true
+                newTab: true,
+                imgSize
             }),
-            new SubtleButton(Svg.bug_ui().SetStyle(iconStyle), t.openIssueTracker, {
+            new SubtleButton(Svg.bug_ui(), t.openIssueTracker, {
                 url: "https://github.com/pietervdvn/MapComplete/issues",
-                newTab: true
+                newTab: true,
+                imgSize
             }),
-            new SubtleButton(Svg.statistics_ui().SetStyle(iconStyle), t.openOsmcha.Subs({theme: state.layoutToUse.title}), {
+            new SubtleButton(Svg.statistics_ui(), t.openOsmcha.Subs({theme: state.layoutToUse.title}), {
                 url: Utils.OsmChaLinkFor(31, state.layoutToUse.id),
-                newTab: true
+                newTab: true,
+                imgSize
             }),
-            new SubtleButton(Svg.mastodon_ui().SetStyle(iconStyle),
+            new SubtleButton(Svg.mastodon_ui(),
                 new Combine([t.followOnMastodon.SetClass("font-bold"), t.followBridge]).SetClass("flex flex-col"),
                 {
                 url:"https://en.osm.town/web/notifications",
-                newTab: true
+                newTab: true,
+                    imgSize
             }),
-            new SubtleButton(Svg.twitter_ui().SetStyle(iconStyle), t.followOnTwitter, {
+            new SubtleButton(Svg.twitter_ui(), t.followOnTwitter, {
                 url:"https://twitter.com/mapcomplete",
-                newTab: true
+                newTab: true,
+                imgSize
             }),
             new OpenIdEditor(state, iconStyle),
             new MapillaryLink(state, iconStyle),

UI/BigComponents/ExtraLinkButton.ts

@@ -45,10 +45,12 @@ export default class ExtraLinkButton extends UIElement {
 
         let link: BaseUIElement
         const theme = this.state.layoutToUse?.id ?? ""
+        const basepath = window.location.host
         const href = this.state.locationControl.map(loc => {
             const subs = {
                 ...loc,
                 theme: theme,
+                basepath,
                 language: Locale.language.data
             }
             return Utils.SubstituteKeys(c.href, subs)
@@ -68,8 +70,7 @@ export default class ExtraLinkButton extends UIElement {
         }
 
         link = new SubtleButton(img, text, {
-            url:
+            url: href,
-            href,
             newTab: c.newTab
         })
 

UI/BigComponents/MapillaryLink.ts

@@ -14,7 +14,7 @@ export class MapillaryLink extends VariableUiElement {
             const mapillaryLink = `https://www.mapillary.com/app/?focus=map&lat=${location?.lat ?? 0}&lng=${location?.lon ?? 0}&z=${Math.max((location?.zoom ?? 2) - 1, 1)}`
             return new SubtleButton(Svg.mapillary_black_ui().SetStyle(iconStyle),
                 new Combine([
-                    new Title(t.openMapillary,3),
+                    t.openMapillary.SetClass("font-bold"),
                     t.mapillaryHelp]), {
                     url: mapillaryLink,
                     newTab: true

UI/BigComponents/MoreScreen.ts

@@ -188,15 +188,17 @@ export default class MoreScreen extends Combine {
         BaseUIElement {
 
         const url = MoreScreen.createUrlFor(layout, isCustom, state)
-        return new SubtleButton(layout.icon,
+        let content = new Combine([
-            new Combine([
-                `<dt class='text-lg leading-6 font-medium text-gray-900 group-hover:text-blue-800'>`,
             new Translation(layout.title, !isCustom && !layout.mustHaveLanguage ? "themes:" + layout.id + ".title" : undefined),
-                `</dt>`,
-                `<dd class='mt-1 text-base text-gray-500 group-hover:text-blue-900 overflow-ellipsis'>`,
             new Translation(layout.shortDescription)?.SetClass("subtle") ?? "",
-                `</dd>`,
+        ]).SetClass("overflow-hidden flex flex-col")
-            ]), {url, newTab: false});
+        
+        if(state.layoutToUse === undefined){
+            // Currently on the index screen: we style the buttons equally large
+            content = new Combine([content]).SetClass("flex flex-col justify-center h-24")
+        }
+        
+        return new SubtleButton(layout.icon, content, {url, newTab: false});
     }
 
     public static CreateProffessionalSerivesButton() {
@@ -208,7 +210,7 @@ export default class MoreScreen extends Combine {
         ]).SetClass("flex flex-col border border-gray-300 p-2 rounded-lg")
     }
     private static createUnofficialThemeList(buttonClass: string, state: UserRelatedState, themeListClasses: string, search: UIEventSource<string>): BaseUIElement {
-        var currentIds: UIEventSource<string[]> = state.installedUserThemes
+        var currentIds: Store<string[]> = state.installedUserThemes
 
         var stableIds = Stores.ListStabilized<string>(currentIds)
         return new VariableUiElement(