Compare commits

..

3 commits

Author SHA1 Message Date
cf01aa26b1 mejorar modal breadcrumbs
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
2023-09-07 12:42:32 -03:00
6688c02aa2 ellipsis modal breadcrumbs 2023-09-07 12:33:08 -03:00
e2fbfa3a8e breadcrumbs: cerrar modal cuando se clickea en link 2023-09-07 12:23:55 -03:00
2 changed files with 18 additions and 7 deletions

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>
<div class="p-4">
<slot /> <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"
> >

View file

@ -67,12 +67,19 @@
{#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 border-b dark:border-neutral-700"
>
{#if index !== 0}
<span aria-hidden="true" class="text-lg"></span>
{/if}
<a <a
href={inject(routes.Page, { worldId, pageId: crumb })} href={inject(routes.Page, { worldId, pageId: crumb })}
class="flex items-center text-ellipsis whitespace-nowrap p-4" on:click={() => ((breadcrumbsModalOpen = false), true)}
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
> >