Osmwithspace/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) {

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

@ -1,59 +1,61 @@
<script lang="ts"> <script lang="ts">
import { Utils } from "../../Utils" import { Utils } from "../../Utils"
import Share from "@babeard/svelte-heroicons/solid/Share" import Share from "@babeard/svelte-heroicons/solid/Share"
import { DocumentDuplicateIcon } from "@rgossiaux/svelte-heroicons/outline" import { DocumentDuplicateIcon } from "@rgossiaux/svelte-heroicons/outline"
import Tr from "./Tr.svelte" import Tr from "./Tr.svelte"
import Translations from "../i18n/Translations" import Translations from "../i18n/Translations"
import ThemeViewState from "../../Models/ThemeViewState" import ThemeViewState from "../../Models/ThemeViewState"
const tr = Translations.t.general.sharescreen
export let text: string const tr = Translations.t.general.sharescreen
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 export let text: string
export let state: ThemeViewState = undefined
async function copyCurrentLink() { async function shareCurrentLink() {
await navigator.clipboard.writeText(text) await navigator.share({
isCopied = true title: Translations.W(state.layout.title)?.ConstructElement().textContent ?? "MapComplete",
await Utils.waitFor(5000) text: Translations.W(state.layout.description)?.ConstructElement().textContent ?? "",
isCopied = false 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>