zephyr/horse
1
0
Fork 0
Code Issues 17 Pull Requests Actions Packages Projects Releases Wiki Activity

zenno: show icons on skills

Browse Source
This commit is contained in:
zephyr
2026-07-24 22:56:31 -04:00
parent 435da61405
commit 7bac55ca43
4 changed files with 52 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
zenno/src/lib/Skill.svelte
+7 -1
View File
@@ -9,6 +9,7 @@
type Ability,
type Skill,
} from './data/skill';
import SkillIcon from './SkillIcon.svelte';
interface Props {
skill: Skill | null | undefined;
@@ -63,9 +64,13 @@
<span class="group relative inline-block hyphens-none">
<span
class="skill-tip invisible absolute bottom-4 -left-1/2 flex w-80 flex-col rounded-lg border px-2 text-center opacity-0 shadow-lg transition-all group-hover:visible group-hover:bottom-6 group-hover:opacity-100"
class="skill-tip invisible absolute bottom-4 -left-1/2 flex min-w-80 flex-col rounded-lg border px-2 pt-2 text-center opacity-0 shadow-lg transition-all group-hover:visible group-hover:bottom-6 group-hover:opacity-100"
role="tooltip"
>
<span class="block text-xl">
<SkillIcon icon_id={skill?.icon_id} size={32} class="inline" />
{s.name}
</span>
<span class="block border-b py-1 hyphens-auto">
{s.description}
</span>
@@ -92,5 +97,6 @@
</span>
{/each}
</span>
<SkillIcon icon_id={skill?.icon_id} size={16} class="inline max-h-lh align-text-bottom" />
<span class={[spanClass, 'cursor-pointer']}>{s.name}</span>
</span>