midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki 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
Show stats 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 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.lg\:flex-row {
flex-direction: row;
}
}
@media (min-width: 1280px) {

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

@ -1,59 +1,61 @@
<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
export let state: ThemeViewState = undefined
async function shareCurrentLink() {
await navigator.share({
title: Translations.W(state.layout.title)?.ConstructElement().textContent ?? "MapComplete",
text: Translations.W(state.layout.description)?.ConstructElement().textContent ?? "",
url: text,
})
}
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"
let isCopied = false
const tr = Translations.t.general.sharescreen
async function copyCurrentLink() {
await navigator.clipboard.writeText(text)
isCopied = true
await Utils.waitFor(5000)
isCopied = false
}
export let text: string
export let state: ThemeViewState = undefined
async function shareCurrentLink() {
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>
<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 class="flex justify-center">
{#if isCopied}
<Tr t={tr.copiedToClipboard} cls="thanks m-2" />
{/if}
</div>
<div class="flex justify-center">
{#if isCopied}
<Tr t={tr.copiedToClipboard} cls="thanks m-2" />
{/if}
</div>
</div>