Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

style: scroll long breadcrumbs #2677

Merged
merged 5 commits into from
Mar 21, 2024
Merged

style: scroll long breadcrumbs #2677

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cae5619
style: scroll long breadcrumbs
steveoh Mar 21, 2024
e56c9c9
feat: add gradient prop to update fades
steveoh Mar 21, 2024
3a1f7de
style: animate crumbs to signify ui
steveoh Mar 21, 2024
a4bf0b3
style: color elipsis
steveoh Mar 21, 2024
ac5f27b
refactor: fix breadcrumb overflow
steveoh Mar 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
189 changes: 95 additions & 94 deletions src/components/data/BreadCrumbs.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,115 +1,116 @@
---
import type { SgidCategory } from '@models/types';

import BreadCrumbChrome from '@components/supporting/BreadCrumbChrome.astro';

interface Props {
product?: string;
category: SgidCategory | string;
class?: string;
gradients?: string;
}

const { product, category, class: className } = Astro.props;
const { product, category, class: className, gradients = 'from-white dark:from-primary-950' } = Astro.props;
---

<nav class:list={['pl-2', className]}>
<ol class="flex items-center">
<li class="hidden lg:flex">
<a
class="custom-style relative block select-none rounded-full px-3 py-2 text-sm font-medium leading-none text-zinc-600 no-underline outline-none hover:bg-zinc-200 hover:text-zinc-900 focus:shadow-[0_0_0_2px] focus:shadow-primary dark:text-zinc-50 dark:hover:bg-white/20 dark:hover:text-zinc-100 dark:focus:shadow-zinc-200"
href="/"
><svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
></path>
</svg>
<span class="sr-only">Home</span>
</a>
</li>
<li class="hidden items-center lg:flex">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-3 shrink-0 text-primary dark:text-accent"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
</svg>
<a
class="custom-style relative block select-none rounded-full px-3 py-2 text-sm font-normal leading-none text-zinc-600 no-underline outline-none hover:bg-zinc-200 hover:text-zinc-900 focus:shadow-[0_0_0_2px] focus:shadow-primary dark:text-zinc-50 dark:hover:bg-white/20 dark:hover:text-zinc-100 dark:focus:shadow-zinc-200"
href="/products/sgid">SGID</a
>
</li>
<li class="flex items-center">
<svg
<BreadCrumbChrome class={className} gradients={gradients}>
<li class="relative flex shrink-0 items-center">
<a
class="custom-style relative block select-none rounded-full px-3 py-2 text-sm font-medium leading-none text-zinc-600 no-underline outline-none hover:bg-zinc-200 hover:text-zinc-900 focus:shadow-[0_0_0_2px] focus:shadow-primary dark:text-zinc-50 dark:hover:bg-white/20 dark:hover:text-zinc-100 dark:focus:shadow-zinc-200"
href="/"
><svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hidden size-3 shrink-0 text-primary lg:flex dark:text-accent"
class="size-6"
aria-hidden="true"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
></path>
</svg>
<a
class="custom-style relative block select-none rounded-full px-3 py-2 text-sm font-normal leading-none text-zinc-600 no-underline outline-none hover:bg-zinc-200 hover:text-zinc-900 focus:shadow-[0_0_0_2px] focus:shadow-primary dark:text-zinc-50 dark:hover:bg-white/20 dark:hover:text-zinc-100 dark:focus:shadow-zinc-200"
href="/products/sgid/categories">SGID Categories</a
>
</li>
<li class="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-3 shrink-0 text-primary dark:text-accent"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
</svg>
{
product ? (
<a
class="custom-style relative block select-none rounded-full px-3 py-2 text-sm font-normal leading-none text-zinc-600 no-underline outline-none hover:bg-zinc-200 hover:text-zinc-900 focus:shadow-[0_0_0_2px] focus:shadow-primary dark:text-zinc-50 dark:hover:bg-white/20 dark:hover:text-zinc-100 dark:focus:shadow-zinc-200"
href={`/products/sgid/${category.toLowerCase()}`}
>
{category.replaceAll('-', ' ')}
</a>
) : (
<span class="custom-style px-3 font-medium dark:text-white dark:focus:shadow-zinc-200" aria-current="page">
{category.replaceAll('-', ' ')}
</span>
)
}
</li>
<span class="sr-only">Home</span>
</a>
</li>
<li class="relative flex shrink-0 items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-3 shrink-0 text-primary dark:text-accent"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
</svg>
<a
class="custom-style relative block select-none rounded-full px-3 py-2 text-sm font-normal leading-none text-zinc-600 no-underline outline-none hover:bg-zinc-200 hover:text-zinc-900 focus:shadow-[0_0_0_2px] focus:shadow-primary dark:text-zinc-50 dark:hover:bg-white/20 dark:hover:text-zinc-100 dark:focus:shadow-zinc-200"
href="/products/sgid">SGID</a
>
</li>
<li class="relative flex shrink-0 items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="hidden size-3 shrink-0 text-primary lg:flex dark:text-accent"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
</svg>
<a
class="custom-style relative block select-none rounded-full px-3 py-2 text-sm font-normal leading-none text-zinc-600 no-underline outline-none hover:bg-zinc-200 hover:text-zinc-900 focus:shadow-[0_0_0_2px] focus:shadow-primary dark:text-zinc-50 dark:hover:bg-white/20 dark:hover:text-zinc-100 dark:focus:shadow-zinc-200"
href="/products/sgid/categories">SGID Categories</a
>
</li>
<li class="relative flex shrink-0 items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-3 shrink-0 text-primary dark:text-accent"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
</svg>
{
product && (
<li class="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-3 shrink-0 text-primary dark:text-accent"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
<span class="custom-style px-3 font-medium dark:text-white dark:focus:shadow-zinc-200" aria-current="page">
{product}
</span>
</li>
product ? (
<a
class="custom-style relative block select-none rounded-full px-3 py-2 text-sm font-normal leading-none text-zinc-600 no-underline outline-none hover:bg-zinc-200 hover:text-zinc-900 focus:shadow-[0_0_0_2px] focus:shadow-primary dark:text-zinc-50 dark:hover:bg-white/20 dark:hover:text-zinc-100 dark:focus:shadow-zinc-200"
href={`/products/sgid/${category.toLowerCase()}`}
>
{category.replaceAll('-', ' ')}
</a>
) : (
<span class="custom-style px-3 font-medium dark:text-white dark:focus:shadow-zinc-200" aria-current="page">
{category.replaceAll('-', ' ')}
</span>
)
}
</ol>
</nav>
</li>
{
product && (
<li class="relative flex shrink-0 items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-3 shrink-0 text-primary dark:text-accent"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
<span class="custom-style px-3 font-medium dark:text-white dark:focus:shadow-zinc-200" aria-current="page">
{product}
</span>
</li>
)
}
</BreadCrumbChrome>
143 changes: 72 additions & 71 deletions src/components/page/BreadCrumbs.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
---
import BreadCrumbChrome from '@components/supporting/BreadCrumbChrome.astro';

import capitalize from 'lodash.capitalize';

interface Props {
path: string;
class?: string;
gradients?: string;
}

import capitalize from 'lodash.capitalize';

const { path, class: className } = Astro.props;
const { path, class: className, gradients = 'from-white dark:from-primary-950' } = Astro.props;

const capitalizeAcronyms = (str: string) => {
const acronyms = ['TURN', 'SGID', 'UGRC', 'API', 'GIS', 'GISAC'];
Expand All @@ -30,72 +33,70 @@ const parts = path
const length = parts.length - 1;
---

<nav class:list={['pl-2', className]}>
<ol class="flex items-center">
<li class="flex">
<a
class="custom-style relative block select-none rounded-full px-3 py-2 text-sm font-medium leading-none text-zinc-600 no-underline outline-none hover:bg-zinc-200 hover:text-zinc-900 focus:shadow-[0_0_0_2px] focus:shadow-primary dark:text-zinc-50 dark:hover:bg-white/20 dark:hover:text-zinc-100 dark:focus:shadow-zinc-200"
href="/"
><svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
></path>
</svg>
<span class="sr-only">Home</span>
</a>
</li>
{
parts.map((segment, index) =>
index !== length ? (
<li class="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-3 shrink-0 text-primary dark:text-accent"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
<a
class="custom-style relative block select-none rounded-full p-2 text-sm font-normal leading-none text-zinc-600 no-underline outline-none hover:bg-zinc-200 hover:text-zinc-900 focus:shadow-[0_0_0_2px] focus:shadow-primary dark:text-zinc-50 dark:hover:bg-white/20 dark:hover:text-zinc-100 dark:focus:shadow-zinc-200"
href={`/${parts
.slice(0, index + 1)
.join('/')
.toLowerCase()}`}
>
{segment.replaceAll('-', ' ')}
</a>
</li>
) : (
<li class="flex items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-3 shrink-0 text-primary dark:text-accent"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
<span class="custom-style px-3 font-medium dark:text-white" aria-current="page">
{segment.replaceAll('-', ' ')}
</span>
</li>
)
<BreadCrumbChrome class={className} gradients={gradients}>
<li class="relative flex shrink-0 items-center">
<a
class="custom-style relative block select-none rounded-full px-3 py-2 text-sm font-medium leading-none text-zinc-600 no-underline outline-none hover:bg-zinc-200 hover:text-zinc-900 focus:shadow-[0_0_0_2px] focus:shadow-primary dark:text-zinc-50 dark:hover:bg-white/20 dark:hover:text-zinc-100 dark:focus:shadow-zinc-200"
href="/"
><svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-6"
aria-hidden="true"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
></path>
</svg>
<span class="sr-only">Home</span>
</a>
</li>
{
parts.map((segment, index) =>
index !== length ? (
<li class="relative flex shrink-0 items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-3 shrink-0 text-primary dark:text-accent"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
<a
class="custom-style relative block select-none rounded-full p-2 text-sm font-normal leading-none text-zinc-600 no-underline outline-none hover:bg-zinc-200 hover:text-zinc-900 focus:shadow-[0_0_0_2px] focus:shadow-primary dark:text-zinc-50 dark:hover:bg-white/20 dark:hover:text-zinc-100 dark:focus:shadow-zinc-200"
href={`/${parts
.slice(0, index + 1)
.join('/')
.toLowerCase()}`}
>
{segment.replaceAll('-', ' ')}
</a>
</li>
) : (
<li class="relative flex shrink-0 items-center">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="size-3 shrink-0 text-primary dark:text-accent"
>
<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
</svg>
<span class="custom-style px-3 font-medium dark:text-white" aria-current="page">
{segment.replaceAll('-', ' ')}
</span>
</li>
)
}
</ol>
</nav>
)
}
</BreadCrumbChrome>
2 changes: 1 addition & 1 deletion src/components/page/QuickLinks.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const { links } = Astro.props;
links.map((section) => {
if (section.title) {
return (
<li class="max-w-xs overflow-hidden text-ellipsis lg:max-w-none">
<li class="max-w-xs overflow-hidden text-ellipsis text-primary lg:max-w-none dark:text-accent">
<a href={'#' + createIdFromTitle(section.title)}>{section.title}</a>
</li>
);
Expand Down
Loading