watzon
/
paste69
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

make share menu fit better with the test of the app

This commit is contained in:
Chris W 2023-10-21 17:36:25 -06:00
parent 085b7ee008
commit 54e5cb32ed
4 changed files with 767 additions and 2602 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1056
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

34
src/lib/components/ShareMenu.svelte
View File

@ -2,7 +2,7 @@
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import { getModalStore, getToastStore } from '@skeletonlabs/skeleton'; import { getModalStore, getToastStore } from '@skeletonlabs/skeleton';
import type { ModalSettings } from '@skeletonlabs/skeleton'; import type { ModalSettings } from '@skeletonlabs/skeleton';
import { BrandFacebookFilled, BrandMastodon, BrandMessenger, BrandTelegram, BrandTwitterFilled, BrandWhatsapp, ClipboardCopy, Copy } from "svelte-tabler"; import { BrandFacebook, BrandMastodon, BrandMessenger, BrandTelegram, BrandTwitter, BrandWhatsapp, ClipboardCopy, Copy } from "svelte-tabler";
export let pasteUrl: string; export let pasteUrl: string;
export let shareMessage: string = 'Check out this paste on Paste69: {url}' export let shareMessage: string = 'Check out this paste on Paste69: {url}'
@ -42,7 +42,7 @@
<div class="flex flex-col items-center gap-4"> <div class="flex flex-col items-center gap-4">
<!-- Twitter Share Button --> <!-- Twitter Share Button -->
<a <a
class="p-2 bg-[#1DA1F2] rounded w-min" class="p-2 bg-gray-900 rounded w-min"
href={`https://twitter.com/intent/tweet?text=${encodeURIComponent( href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(
shareMessage shareMessage
)}`} )}`}
@ -50,12 +50,12 @@
rel="noopener noreferrer" rel="noopener noreferrer"
title="Share on Twitter" title="Share on Twitter"
> >
<BrandTwitterFilled size="32" /> <BrandTwitter size="28" />
</a> </a>
<!-- Facebook Share Button --> <!-- Facebook Share Button -->
<a <a
class="p-2 bg-[#1877F2] rounded w-min" class="p-2 bg-gray-900 rounded w-min"
href={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent( href={`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
pasteUrl pasteUrl
)}`} )}`}
@ -63,12 +63,12 @@
rel="noopener noreferrer" rel="noopener noreferrer"
title="Share on Facebook" title="Share on Facebook"
> >
<BrandFacebookFilled size="32" /> <BrandFacebook size="28" />
</a> </a>
<!-- Messenger Share Button --> <!-- Messenger Share Button -->
<a <a
class="p-2 bg-gradient-to-tr from-[#0a92fc] to-[#fe6a65] rounded w-min" class="p-2 bg-gray-900 rounded w-min"
href={`https://www.facebook.com/dialog/send?app_id=521270401588372&link=${encodeURIComponent( href={`https://www.facebook.com/dialog/send?app_id=521270401588372&link=${encodeURIComponent(
pasteUrl pasteUrl
)}&redirect_uri=${encodeURIComponent( )}&redirect_uri=${encodeURIComponent(
@ -78,12 +78,12 @@
rel="noopener noreferrer" rel="noopener noreferrer"
title="Share on Messenger" title="Share on Messenger"
> >
<BrandMessenger size="32" /> <BrandMessenger size="28" />
</a> </a>
<!-- Whatsapp Share Button --> <!-- Whatsapp Share Button -->
<a <a
class="p-2 bg-[#189d0e] rounded w-min" class="p-2 bg-gray-900 rounded w-min"
href={`https://api.whatsapp.com/send?text=${encodeURIComponent( href={`https://api.whatsapp.com/send?text=${encodeURIComponent(
shareMessage shareMessage
)}`} )}`}
@ -91,12 +91,12 @@
rel="noopener noreferrer" rel="noopener noreferrer"
title="Share on Whatsapp" title="Share on Whatsapp"
> >
<BrandWhatsapp size="32" /> <BrandWhatsapp size="28" />
</a> </a>
<!-- Telegram Share Button --> <!-- Telegram Share Button -->
<a <a
class="p-2 bg-[#3da8e5] rounded w-min" class="p-2 bg-gray-900 rounded w-min"
href={`https://telegram.me/share/url?url=${encodeURIComponent( href={`https://telegram.me/share/url?url=${encodeURIComponent(
pasteUrl pasteUrl
)}&text=${encodeURIComponent(shareMessage)}`} )}&text=${encodeURIComponent(shareMessage)}`}
@ -104,34 +104,34 @@
rel="noopener noreferrer" rel="noopener noreferrer"
title="Share on Telegram" title="Share on Telegram"
> >
<BrandTelegram size="32" /> <BrandTelegram size="28" />
</a> </a>
<!-- Mastodon Share Button --> <!-- Mastodon Share Button -->
<button <button
class="p-2 bg-[#2b8fda] rounded w-min" class="p-2 bg-gray-900 rounded w-min"
title="Share on Mastodon" title="Share on Mastodon"
on:click={shareOnMastodon} on:click={shareOnMastodon}
> >
<BrandMastodon size="32" /> <BrandMastodon size="28" />
</button> </button>
<!-- Copy URL Button --> <!-- Copy URL Button -->
<button <button
class="p-2 bg-teal-500 rounded w-min" class="p-2 bg-gray-900 rounded w-min"
title="Copy URL" title="Copy URL"
on:click={copyUrl} on:click={copyUrl}
> >
<Copy size="32" /> <Copy size="28" />
</button> </button>
<!-- Copy content button --> <!-- Copy content button -->
<button <button
class="p-2 bg-pink-700 rounded w-min" class="p-2 bg-gray-900 rounded w-min"
title="Copy content" title="Copy content"
on:click={() => dispatch('copy')} on:click={() => dispatch('copy')}
> >
<ClipboardCopy size="32" /> <ClipboardCopy size="28" />
</button> </button>
</div> </div>
</div> </div>

2
src/lib/components/ToolBox.svelte
View File

@ -41,7 +41,7 @@
<div class="flex flex-row max-w-full md:min-w-[595px] bg-slate-800"> <div class="flex flex-row max-w-full md:min-w-[595px] bg-slate-800">
<a <a
href="/about" href="/about"
class="flex flex-col items-center justify-center py-2 px-8 bg-black bg-opacity-50" class="flex flex-col items-center justify-center py-2 px-8 bg-gray-900 bg-opacity-50"
> >
<img class="w-8" src={logo} alt="Paste69 Logo" /> <img class="w-8" src={logo} alt="Paste69 Logo" />
</a> </a>

2277
yarn.lock
View File

File diff suppressed because it is too large Load Diff