w33b/hstream
1
0
Fork 1
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

Update more modal designs

Browse Source
This commit is contained in:
w33b
2026-05-23 11:46:20 +02:00
parent 0d4545c2ab
commit d8cf70e747
5 changed files with 89 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
resources/views/modals/share.blade.php
View File

@@ -1,12 +1,15 @@
<!--Verically centered modal-->
<div data-te-modal-init
class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
id="modalShare" tabindex="-1" aria-labelledby="Share" aria-modal="true" role="dialog">
<div data-te-modal-dialog-ref
class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[95%] md:min-[576px]:max-w-[90%] lg:min-[576px]:max-w-[80%] xl:min-[576px]:max-w-[50%] 2xl:min-[576px]:max-w-[25%]">
<div
class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800">
<x-modal-header :title='__("Share {$episode->title} - {$episode->episode}")' />
<div
data-te-modal-init
id="modalShare"
tabindex="-1"
aria-labelledby="Share"
aria-modal="true"
role="dialog"
class="fixed inset-0 z-[1055] hidden overflow-y-auto bg-black/60 backdrop-blur-sm"
>
<div data-te-modal-dialog-ref class="flex min-h-screen items-center justify-center p-4">
<div class="relative w-full max-w-2xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900">
<x-modal-header title="Share {{ $episode->title }} - {{ $episode->episode }}" />
<!--Modal body-->
<div class="relative p-4">
@@ -15,8 +18,8 @@
$currentUrl = url()->current();
$text = 'Watch ' . $episode->title . ' - ' . $episode->episode . ' in 4k on hstream.moe!';
@endphp
<div class="flex flex-wrap justify-stretch">
<a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
<div class="flex flex-wrap justify-stretch gap-3">
<a class="cursor-pointer inline-flex items-center rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
target="_blank" rel="noopener"
href="https://facebook.com/sharer/sharer.php?u={{ $currentUrl }}"
aria-label="Share on Facebook" draggable="false">
@@ -29,7 +32,7 @@
</svg>
<span class="ml-2">Facebook</span>
</a>
<a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
<a class="cursor-pointer inline-flex items-center rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
target="_blank" rel="noopener"
href="https://twitter.com/intent/tweet?url={{ $currentUrl }}&amp;text={{ $text }}"
aria-label="Share on Twitter" draggable="false">
@@ -42,7 +45,7 @@
</svg>
<span class="ml-2">Twitter</span>
</a>
<a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
<a class="cursor-pointer inline-flex items-center rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
target="_blank" rel="noopener"
href="https://reddit.com/submit/?url={{ $currentUrl }}&amp;resubmit=true&amp;title={{ $text }}"
aria-label="Share on Reddit" draggable="false">
@@ -55,7 +58,7 @@
</svg>
<span class="ml-2">Reddit</span>
</a>
<a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
<a class="cursor-pointer inline-flex items-center rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
target="_blank" rel="noopener"
href="https://wa.me/?text={{ $text }}%20{{ $currentUrl }}"
aria-label="Share on Whatsapp" draggable="false" style="">
@@ -68,7 +71,7 @@
</svg>
<span class="ml-2">Whatsapp</span>
</a>
<a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
<a class="cursor-pointer inline-flex items-center rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
target="_blank" rel="noopener"
href="https://telegram.me/share/url?text={{ $text }}&amp;url={{ $currentUrl }}"
aria-label="Share on Telegram" draggable="false">
@@ -81,7 +84,7 @@
</svg>
<span class="ml-2">Telegram</span>
</a>
<a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
<a class="cursor-pointer inline-flex items-center rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
target="_blank" rel="noopener"
href="mailto:?subject={{ $text }}&amp;body={{ $currentUrl }}"
aria-label="Share by Email" draggable="false">
@@ -100,7 +103,7 @@
<div>
<button id="copy-button" type="button" data-te-clipboard-init
data-te-clipboard-target="#copy-target" data-te-ripple-init data-te-ripple-color="light"
class="inline-block rounded border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out focus:bg-rose-600 focus:outline-none focus:ring-0 active:bg-rose-700">
class="cursor-pointer rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700">
Copy
</button>
</div>