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

UX: improve attribution display, add magnifying class

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-08-28 15:07:18 +02:00
parent ac632206e9
commit 8465b59c7f
7 changed files with 97 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

67
src/UI/Image/ImageAttribution.svelte
View file

@ -4,11 +4,15 @@
import { Store, UIEventSource } from "../../Logic/UIEventSource"
import ToSvelte from "../Base/ToSvelte.svelte"
import { EyeIcon } from "@rgossiaux/svelte-heroicons/solid"
import Tr from "../Base/Tr.svelte"
import Translations from "../i18n/Translations"
/**
* A small element showing the attribution of a single image
*/
export let image: Partial<ProvidedImage> & { id: string; url: string }
export let attributionFormat: "minimal" | "medium" | "large" = "medium"
let license: Store<LicenseInfo> = UIEventSource.FromPromise(
image.provider?.DownloadAttribution(image)
)
@ -16,50 +20,59 @@
</script>
{#if $license !== undefined}
<div class="no-images flex items-center rounded-lg bg-black p-0.5 pl-3 pr-3 text-sm text-white">
<div class="no-images flex items-center rounded-lg bg-black-transparent p-0.5 px-3 text-sm text-white">
{#if icon !== undefined}
<div class="mr-2 h-6 w-6">
<ToSvelte construct={icon} />
</div>
{/if}
<div class="flex flex-col">
{#if $license.title}
{#if $license.informationLocation}
<a href={$license.informationLocation.href} target="_blank" rel="noopener nofollower">
{$license.title}
</a>
{:else}
$license.title
<div class="flex gap-x-2" class:flex-col={attributionFormat !== "minimal"}>
{#if attributionFormat !== "minimal" }
{#if $license.title}
{#if $license.informationLocation}
<a href={$license.informationLocation.href} target="_blank" rel="noopener nofollower">
{$license.title}
</a>
{:else}
$license.title
{/if}
{/if}
{/if}
{#if $license.artist}
<div class="font-bold">
{@html $license.artist}
</div>
{#if attributionFormat === "large"}
<Tr t={Translations.t.general.attribution.madeBy.Subs({author: $license.artist})} />
{:else}
<div class="font-bold">
{@html $license.artist}
</div>
{/if}
{/if}
<div class="flex w-full justify-between gap-x-1">
{#if $license.license !== undefined || $license.licenseShortName !== undefined}
<div>
{$license?.license ?? $license?.licenseShortName}
</div>
{/if}
{#if $license.views}
<div class="flex justify-around self-center">
<EyeIcon class="h-4 w-4 pr-1" />
{$license.views}
</div>
{/if}
</div>
{#if $license.date}
<div>
{$license.date.toLocaleDateString()}
</div>
{/if}
{#if attributionFormat !== "minimal"}
<div class="flex w-full justify-between gap-x-1">
{#if ($license.license !== undefined || $license.licenseShortName !== undefined)}
<div>
{$license?.license ?? $license?.licenseShortName}
</div>
{/if}
{#if $license.views}
<div class="flex justify-around self-center text-xs">
<EyeIcon class="h-4 w-4 pr-1" />
{$license.views}
</div>
{/if}
</div>
{/if}
</div>
</div>
{/if}