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": {
"plugins": [
"prettier-plugin-svelte",
"prettier-plugin-tailwindcss"
],
"overrides": [
{
"files": "*.svelte",
"options": {
"parser": "svelte"
}
}
]
}
}

View file

@ -14,22 +14,28 @@
$: dumpName = generateDumpName(params.dumpUrl);
</script>
<nav class="flex justify-between m-2">
<nav class="m-2 flex justify-between">
<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"}
>
<NavItem href={inject(routes.Dump, params)} active={kind === "dump"}
>{dumpName}</NavItem
>
{#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"}>
{params.portal}
</NavItem>
{/if}
{#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
href={inject(routes.Dataset, params)}
active={kind === "dataset"}

View file

@ -3,12 +3,12 @@
export let href: string;
</script>
<li class="flex items-center h-full">
<li class="min-w-0">
<a
{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}
>
<span><slot /></span>
<slot />
</a>
</li>