Skip to content

fix: tags dont wrap when have too many #707

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

Open
nicolas4pitz wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: tags dont wrap when have too many #707

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
69 changes: 69 additions & 0 deletions src/components/ArrowSelectorTags.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<script>
import { getTagUrl } from "../utils/url-utils";
import Icon from "@iconify/svelte";

let { tags } = $props();

let prefLimitValue = $state(5);
let initialTagValue = $state(0);
let finalTagValue = $state(prefLimitValue);
let marginPattern = $state("-8px");

const handleClickRigth = () => {
initialTagValue = initialTagValue + 1;
finalTagValue = finalTagValue + 1;
}

const handleClickLeft = () => {
initialTagValue = initialTagValue - 1;
finalTagValue = finalTagValue - 1;
}

const visibleTags = $derived(tags.slice(initialTagValue, finalTagValue));
const canGoLeft = $derived(initialTagValue !== 0);
const canGoRight = $derived(finalTagValue < tags.length);
</script>

<div class="flex flex-row flex-nowrap items-center">
{#if tags.length > prefLimitValue}
<button
onclick={handleClickLeft}
class="transition"
style:margin-left={`${marginPattern}`}
class:opacity-0={!canGoLeft}
class:pointer-events-none={!canGoLeft}
class:hover:opacity-70={canGoLeft}
disabled={!canGoLeft}
>
<Icon icon="material-symbols:chevron-left-rounded" class="text-xl" />
</button>
{#each visibleTags as tag, i}
<div class:hidden={i == 0} class="mx-1.5 text-[var(--meta-divider)] text-sm">/</div>
<a href={getTagUrl(tag)} aria-label={`View all posts with the ${tag.trim()} tag`}
class="link-lg transition text-50 text-sm font-medium hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap">
{tag.trim()}
</a>
{/each}
<button
onclick={handleClickRigth}
class="transition"
class:opacity-0={!canGoRight}
class:pointer-events-none={!canGoRight}
class:hover:opacity-70={canGoRight}
disabled={!canGoRight}
>
<Icon icon="material-symbols:chevron-right-rounded" class="text-xl" />
</button>
{:else}
{#each tags as tag, i}
<div class:hidden={i == 0} class="mx-1.5 text-[var(--meta-divider)] text-sm">/</div>
<a href={getTagUrl(tag)} aria-label={`View all posts with the ${tag.trim()} tag`}
class="link-lg transition text-50 text-sm font-medium hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap">
{tag.trim()}
</a>
{/each}
{/if}
</div>

<style>
</style>
15 changes: 4 additions & 11 deletions src/components/PostMeta.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,8 @@ import { Icon } from "astro-icon/components";
import I18nKey from "../i18n/i18nKey";
import { i18n } from "../i18n/translation";
import { formatDateToYYYYMMDD } from "../utils/date-utils";
import { getCategoryUrl, getTagUrl } from "../utils/url-utils";
import { getCategoryUrl } from "../utils/url-utils";
import ArrowSelectorTags from "./ArrowSelectorTags.svelte";

interface Props {
class: string;
Expand Down Expand Up @@ -68,15 +69,7 @@ const className = Astro.props.class;
<Icon name="material-symbols:tag-rounded" class="text-xl"></Icon>
</div>
<div class="flex flex-row flex-nowrap items-center">
{(tags && tags.length > 0) && tags.map((tag, i) => (
<div class:list={[{"hidden": i == 0}, "mx-1.5 text-[var(--meta-divider)] text-sm"]}>/</div>
<a href={getTagUrl(tag)} aria-label={`View all posts with the ${tag.trim()} tag`}
class="link-lg transition text-50 text-sm font-medium
hover:text-[var(--primary)] dark:hover:text-[var(--primary)] whitespace-nowrap">
{tag.trim()}
</a>
))}
{!(tags && tags.length > 0) && <div class="transition text-50 text-sm font-medium">{i18n(I18nKey.noTags)}</div>}
<ArrowSelectorTags {tags} client:only="svelte"/>
</div>
</div>
</div>
</div>