midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

More layout tweaks

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-06-18 17:55:47 +02:00
parent 8081f8da04
commit 6e276291f0
10 changed files with 55 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
langs/en.json
View file

@ -65,7 +65,8 @@
"title": "Missing items"
},
"noDataLoaded": "The external website has no linked data that could be loaded",
"overwrite": "Overwrite in OpenStreetMap"
"overwrite": "Overwrite in OpenStreetMap",
"title": "Structured data loaded from the external website"
},
"favourite": {
"loginNeeded": "<h3>Log in</h3>A personal layout is only available for OpenStreetMap users",

15
public/css/tagrendering.css
View file

@ -22,6 +22,21 @@
width: unset;
}
.mapping-icon-small-width {
width: 1.5rem;
}
.mapping-icon-medium-width {
width: 3rem;
}
.mapping-icon-large-width {
width: 5rem;
}
.mapping-icon-small {
/* A mapping icon type */
width: 1.5rem;

6
src/UI/BigComponents/UserProfile.svelte
View file

@ -41,13 +41,13 @@
class="link-no-underline flex items-center self-end"
>
<PencilAltIcon slot="image" class="h-8 w-8 p-2" />
<Tr slot="message" t={Translations.t.userinfo.editDescription} />
<Tr t={Translations.t.userinfo.editDescription} />
</a>
{:else}
<Tr t={Translations.t.userinfo.noDescription} />
<a href={osmConnection.Backend() + "/profile/edit"} target="_blank" class="flex items-center">
<PencilAltIcon slot="image" class="h-8 w-8 p-2" />
<Tr slot="message" t={Translations.t.userinfo.noDescriptionCallToAction} />
<Pencil class="h-8 w-8 p-2" />
<Tr t={Translations.t.userinfo.noDescriptionCallToAction} />
</a>
{/if}
</div>

6
src/UI/Comparison/ComparisonTool.svelte
View file

@ -13,6 +13,7 @@
import Translations from "../i18n/Translations"
import Tr from "../Base/Tr.svelte"
import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
import GlobeAlt from "@babeard/svelte-heroicons/mini/GlobeAlt"
export let externalData: Store<
| { success: { content: Record<string, string> } }
@ -40,7 +41,10 @@
</div>
{:else if $externalData["success"] !== undefined}
<AccordionSingle>
<span slot="header">Structured data from the website</span>
<span slot="header" class="flex">
<GlobeAlt class="w-6 h-6"/>
<Tr t={Translations.t.external.title}/>
</span>
<ComparisonTable
externalProperties={$externalData["success"]}
{state}

2
src/UI/Image/UploadImage.svelte
View file

@ -93,7 +93,7 @@
<Tr t={t.currentLicense.Subs({ license: $licenseStore })} />
</button>
<br />
<Tr t={t.respectPrivacy} />
<Tr cls="subtle italic" t={t.respectPrivacy} />
</div>
</div>
</LoginToggle>

10
src/UI/Map/Marker.svelte
View file

@ -1,17 +1,23 @@
<script lang="ts">
import Icon from "./Icon.svelte"
import { twMerge } from "tailwind-merge"
/**
* Renders a 'marker', which consists of multiple 'icons'
*/
export let icons: { icon: string; color: string }[]
/**
* Class which is applied onto the individual icons
*/
export let clss = ""
export let size = "w-full h-full"
</script>
{#if icons !== undefined && icons.length > 0}
<div class="relative h-full w-full">
<div class={twMerge("relative", size)}>
{#each icons as icon}
<div class="absolute top-0 left-0 h-full w-full">
<Icon icon={icon.icon} color={icon.color} />
<Icon icon={icon.icon} color={icon.color} {clss} />
</div>
{/each}
</div>

7
src/UI/Popup/TagRendering/TagRenderingAnswer.svelte
View file

@ -28,11 +28,12 @@
</script>
{#if config !== undefined && (config?.condition === undefined || config.condition.matchesProperties($tags))}
<div {id} class={twMerge("link-underline inline-block w-full h-full", extraClasses)}>
<div {id} class={twMerge("link-underline flex flex-col w-full", extraClasses)}>
{#if $trs.length === 1}
<TagRenderingMapping mapping={$trs[0]} {tags} {state} {selectedElement} {layer} clss={config?.classes?.join(" ") ?? ""}/>
<TagRenderingMapping mapping={$trs[0]} {tags} {state} {selectedElement} {layer}
clss={config?.classes?.join(" ") ?? ""} />
{/if}
{#if $trs.length > 1}
{#if $trs.length > 1}
<ul>
{#each $trs as mapping}
<li>

2
src/UI/Popup/TagRendering/TagRenderingEditable.svelte
View file

@ -106,7 +106,7 @@
</button>
</TagRenderingQuestion>
{:else}
<div class="low-interaction flex items-center justify-between overflow-hidden rounded px-2">
<div class="low-interaction flex items-center justify-between overflow-hidden rounded pl-2">
<TagRenderingAnswer id={answerId} {config} {tags} {selectedElement} {state} {layer} />
<EditButton
arialabel={config.editButtonAriaLabel}

16
src/UI/Popup/TagRendering/TagRenderingMapping.svelte
View file

@ -7,6 +7,7 @@
import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
import { twJoin } from "tailwind-merge"
import Icon from "../../Map/Icon.svelte"
import Marker from "../../Map/Marker.svelte"
export let selectedElement: Feature
export let tags: UIEventSource<Record<string, string>>
@ -30,13 +31,22 @@
| "large-height"
| string
}
function iconToMarker(spec: string) {
return spec.split(";").map(subspec => {
const [icon, color] = subspec.split(":")
return {
icon, color: color ?? "black"
}
})
}
</script>
{#if mapping.icon !== undefined}
<div class="inline-flex items-center">
<Icon
icon={mapping.icon}
clss={twJoin(`mapping-icon-${mapping.iconClass ?? "small"}`, "mr-2")}
<Marker
icons={iconToMarker(mapping.icon)}
size={twJoin(`mapping-icon-${mapping.iconClass ?? "small"}-height mapping-icon-${mapping.iconClass ?? "small"}-width`, "mr-2", "shrink-0 mx-2")}
clss={`mapping-icon-${mapping.iconClass ?? "small"}`}
/>
<SpecialTranslation t={mapping.then} {tags} {state} {layer} feature={selectedElement} {clss} />
</div>

3
src/UI/Popup/TagRendering/TagRenderingQuestion.svelte
View file

@ -325,6 +325,8 @@
</div>
{#if config.questionhint}
<span class="italic">
{#if config.questionHintIsMd}
<Markdown srcWritable={config.questionhint.current} />
{:else}
@ -338,6 +340,7 @@
/>
</div>
{/if}
</span>
{/if}
</legend>