tcsenpai/pensieve
1
0
Fork 0
mirror of https://github.com/tcsenpai/pensieve.git synced 2025-06-07 03:35:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(web): update style make modal fixed height

Browse Source
This commit is contained in:
arkohut 2024-07-07 16:57:41 +08:00
parent b8c7a80f9a
commit 0c05194b85
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/src/lib/Figure.svelte
View File

@ -33,7 +33,7 @@
<div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full" id="my-modal"> <div class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full" id="my-modal">
<div <div
class="relative top-10 mx-auto p-10 border w-11/12 max-w-14xl shadow-lg rounded-md bg-white group" class="relative top-10 mx-auto p-10 border w-11/12 max-w-10xl shadow-lg rounded-md bg-white group h-5/6"
> >
<!-- Button container --> <!-- Button container -->
<div class="group"> <div class="group">
@ -51,13 +51,13 @@
</button> </button>
<!-- Your modal content goes here --> <!-- Your modal content goes here -->
</div> </div>
<div class="flex"> <div class="flex flex-col md:flex-row h-full">
<!-- Image container --> <!-- Image container -->
<div class="flex-none w-full md:w-1/2 h-96 md:h-auto"> <div class="flex-none w-full md:w-1/2 h-full">
<img class="h-full w-full object-cover" src={image} alt={title} /> <img class="w-full h-full object-contain" src={image} alt={title} />
</div> </div>
<!-- Description container --> <!-- Description container -->
<div class="mt-4 md:mt-0 md:ml-6 overflow-y-auto h-96 md:h-auto"> <div class="mt-4 md:mt-0 md:ml-6 overflow-y-auto max-h-full">
<div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Image Title</div> <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Image Title</div>
<p class="block mt-1 text-lg leading-tight font-medium text-black hover:underline"> <p class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">
{title} {title}
@ -92,4 +92,4 @@
</button> </button>
</div> </div>
</div> </div>
</div> </div>