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

More style tweaks

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-06-28 02:06:29 +02:00
parent 3723eab4bd
commit 470f62f7a8
2 changed files with 54 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

4
public/css/index-tailwind-output.css
View file

@ -7633,6 +7633,10 @@ svg.apply-fill path {
.lg\:grid-cols-3 { .lg\:grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-columns: repeat(3, minmax(0, 1fr));
} }
.lg\:flex-row {
flex-direction: row;
}
} }
@media (min-width: 1280px) { @media (min-width: 1280px) {

98
src/UI/Base/Copyable.svelte
View file

@ -1,59 +1,61 @@
<script lang="ts"> <script lang="ts">
import { Utils } from "../../Utils"
import Share from "@babeard/svelte-heroicons/solid/Share"
import { DocumentDuplicateIcon } from "@rgossiaux/svelte-heroicons/outline"
import Tr from "./Tr.svelte"
import Translations from "../i18n/Translations"
import ThemeViewState from "../../Models/ThemeViewState"
const tr = Translations.t.general.sharescreen
export let text: string import { Utils } from "../../Utils"
export let state: ThemeViewState = undefined import Share from "@babeard/svelte-heroicons/solid/Share"
async function shareCurrentLink() { import { DocumentDuplicateIcon } from "@rgossiaux/svelte-heroicons/outline"
await navigator.share({ import Tr from "./Tr.svelte"
title: Translations.W(state.layout.title)?.ConstructElement().textContent ?? "MapComplete", import Translations from "../i18n/Translations"
text: Translations.W(state.layout.description)?.ConstructElement().textContent ?? "", import ThemeViewState from "../../Models/ThemeViewState"
url: text,
})
}
let isCopied = false const tr = Translations.t.general.sharescreen
async function copyCurrentLink() { export let text: string
await navigator.clipboard.writeText(text) export let state: ThemeViewState = undefined
isCopied = true
await Utils.waitFor(5000) async function shareCurrentLink() {
isCopied = false await navigator.share({
} title: Translations.W(state.layout.title)?.ConstructElement().textContent ?? "MapComplete",
text: Translations.W(state.layout.description)?.ConstructElement().textContent ?? "",
url: text,
})
}
let isCopied = false
async function copyCurrentLink() {
await navigator.clipboard.writeText(text)
isCopied = true
await Utils.waitFor(5000)
isCopied = false
}
</script> </script>
<div class="flex flex-col"> <div class="flex flex-col w-full">
<div class="flex w-full">
<div class="literal-code w-full" on:click={(e) => Utils.selectTextIn(e.target)}>
{text}
</div>
<div class="flex flex-col lg:flex-row">
{#if typeof navigator?.share === "function" && state !== undefined}
<button class="h-8 w-8 shrink-0 p-1" on:click={shareCurrentLink}>
<Share />
</button>
{/if}
{#if navigator.clipboard !== undefined}
<button class="no-image-background h-8 w-8 shrink-0 p-1" on:click={copyCurrentLink}>
<DocumentDuplicateIcon />
</button>
{/if}
</div>
<div class="flex">
<div class="literal-code" on:click={(e) => Utils.selectTextIn(e.target)}>
{text}
</div>
<div class="flex flex-col">
{#if typeof navigator?.share === "function" && state !== undefined}
<button class="h-8 w-8 shrink-0 p-1" on:click={shareCurrentLink}>
<Share />
</button>
{/if}
{#if navigator.clipboard !== undefined}
<button class="no-image-background h-8 w-8 shrink-0 p-1" on:click={copyCurrentLink}>
<DocumentDuplicateIcon />
</button>
{/if}
</div> </div>
</div> <div class="flex justify-center">
{#if isCopied}
<Tr t={tr.copiedToClipboard} cls="thanks m-2" />
<div class="flex justify-center"> {/if}
{#if isCopied} </div>
<Tr t={tr.copiedToClipboard} cls="thanks m-2" />
{/if}
</div>
</div> </div>