Nulo/schreiben
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity

mejorar modal breadcrumbs
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Details

Browse source
This commit is contained in:
Cat /dev/Nulo 2023-09-07 12:42:32 -03:00
parent 6688c02aa2
commit cf01aa26b1
2 changed files with 12 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/Modal.svelte
View file

@ -31,17 +31,21 @@
on:keydown={keydown} on:keydown={keydown}
> >
<div <div
class="h-full w-full overflow-y-auto rounded-2xl bg-neutral-100 px-5 py-4 shadow-xl dark:bg-neutral-800 sm:h-auto sm:w-auto" class="h-full w-full overflow-y-auto bg-neutral-100 shadow-xl dark:bg-neutral-900 sm:h-auto sm:w-auto sm:rounded-2xl dark:sm:bg-neutral-800"
> >
<div class="mb-3 flex items-center justify-between"> <div
<h3 class="text-2xl" id="modal-title"> class="flex items-center justify-between border-b bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:sm:bg-neutral-700"
>
<h3 class="px-4 text-2xl font-medium" id="modal-title">
<slot name="title" /> <slot name="title" />
</h3> </h3>
<button on:click={onClose} <button class="px-3 py-2" on:click={onClose}
><CloseIcon class="h-10 w-10 fill-current" /></button ><CloseIcon class="h-10 w-10 fill-current" /></button
> >
</div> </div>
<slot /> <div class="p-4">
<slot />
</div>
<!--<div <!--<div
class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0" class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
> >

5
src/views/Page/Breadcrumbs.svelte
View file

@ -67,10 +67,11 @@
{#if breadcrumbsModalOpen} {#if breadcrumbsModalOpen}
<Modal onClose={() => (breadcrumbsModalOpen = false)}> <Modal onClose={() => (breadcrumbsModalOpen = false)}>
<svelte:fragment slot="title">Breadcrumbs</svelte:fragment>
<ol class="h-full w-full"> <ol class="h-full w-full">
{#each $pageBreadcrumbs as crumb, index} {#each $pageBreadcrumbs as crumb, index}
<li <li
class="flex items-center overflow-hidden text-ellipsis whitespace-nowrap" class="flex items-center overflow-hidden text-ellipsis whitespace-nowrap border-b dark:border-neutral-700"
> >
{#if index !== 0} {#if index !== 0}
<span aria-hidden="true" class="text-lg">↪</span> <span aria-hidden="true" class="text-lg">↪</span>
@ -78,7 +79,7 @@
<a <a
href={inject(routes.Page, { worldId, pageId: crumb })} href={inject(routes.Page, { worldId, pageId: crumb })}
on:click={() => ((breadcrumbsModalOpen = false), true)} on:click={() => ((breadcrumbsModalOpen = false), true)}
class="overflow-hidden text-ellipsis whitespace-nowrap py-2 pl-4 text-lg" class="w-full overflow-hidden text-ellipsis whitespace-nowrap py-2 pl-4 text-lg"
class:active-breadcrumb={crumb === pageId} class:active-breadcrumb={crumb === pageId}
>{$crumbsTitles[index] || crumb}</a >{$crumbsTitles[index] || crumb}</a
> >