breadcrumbs arreglar en mobile

This commit is contained in:
Cat /dev/Nulo 2023-12-09 01:04:28 -03:00
parent 9dd6ab32bf
commit d01d197bde
3 changed files with 22 additions and 7 deletions

View file

@ -36,7 +36,16 @@
}, },
"prettier": { "prettier": {
"plugins": [ "plugins": [
"prettier-plugin-svelte",
"prettier-plugin-tailwindcss" "prettier-plugin-tailwindcss"
],
"overrides": [
{
"files": "*.svelte",
"options": {
"parser": "svelte"
}
}
] ]
} }
} }

View file

@ -14,22 +14,28 @@
$: dumpName = generateDumpName(params.dumpUrl); $: dumpName = generateDumpName(params.dumpUrl);
</script> </script>
<nav class="flex justify-between m-2"> <nav class="m-2 flex justify-between">
<ol <ol
class="flex items-center mb-3 text-sm text-neutral-500 dark:text-neutral-300 [&_.active-breadcrumb]:text-neutral-600 dark:[&_.active-breadcrumb]:text-neutral-200 [&_.active-breadcrumb]:font-bold sm:mb-0" class="mb-3 flex items-center overflow-x-hidden text-sm text-neutral-500 dark:text-neutral-300 sm:mb-0 [&_.active-breadcrumb]:font-bold [&_.active-breadcrumb]:text-neutral-600 dark:[&_.active-breadcrumb]:text-neutral-200"
class:active-breadcrumb={kind === "dump"} class:active-breadcrumb={kind === "dump"}
> >
<NavItem href={inject(routes.Dump, params)} active={kind === "dump"} <NavItem href={inject(routes.Dump, params)} active={kind === "dump"}
>{dumpName}</NavItem >{dumpName}</NavItem
> >
{#if "portal" in params} {#if "portal" in params}
<ChevronRight class="w-5 h-5 text-neutral-400" fill="currentColor" /> <ChevronRight
class="h-5 w-5 shrink-0 text-neutral-400"
fill="currentColor"
/>
<NavItem href={inject(routes.Portal, params)} active={kind === "portal"}> <NavItem href={inject(routes.Portal, params)} active={kind === "portal"}>
{params.portal} {params.portal}
</NavItem> </NavItem>
{/if} {/if}
{#if "id" in params} {#if "id" in params}
<ChevronRight class="w-5 h-5 text-neutral-400" fill="currentColor" /> <ChevronRight
class="h-5 w-5 shrink-0 text-neutral-400"
fill="currentColor"
/>
<NavItem <NavItem
href={inject(routes.Dataset, params)} href={inject(routes.Dataset, params)}
active={kind === "dataset"} active={kind === "dataset"}

View file

@ -3,12 +3,12 @@
export let href: string; export let href: string;
</script> </script>
<li class="flex items-center h-full"> <li class="min-w-0">
<a <a
{href} {href}
class="inline-flex items-center px-2 py-1.5 space-x-1.5 rounded-md hover:text-neutral-900 hover:bg-neutral-100 dark:hover:text-gray-100 dark:hover:bg-gray-800" class="block w-full space-x-1.5 overflow-hidden text-ellipsis whitespace-nowrap rounded-md px-2 py-1.5 hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-gray-800 dark:hover:text-gray-100"
class:active-breadcrumb={active} class:active-breadcrumb={active}
> >
<span><slot /></span> <slot />
</a> </a>
</li> </li>