granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

replace home button hover expand with tooltip

Browse source
This commit is contained in:
Justin Edmund 2025-12-23 15:03:15 -08:00
parent a234004303
commit d0592935be
1 changed files with 10 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/lib/components/Navigation.svelte
View file

@ -8,6 +8,7 @@
import { createQuery } from '@tanstack/svelte-query' import { createQuery } from '@tanstack/svelte-query'
import { crewQueries } from '$lib/api/queries/crew.queries' import { crewQueries } from '$lib/api/queries/crew.queries'
import Button from './ui/Button.svelte' import Button from './ui/Button.svelte'
import Tooltip from './ui/Tooltip.svelte'
import Icon from './Icon.svelte' import Icon from './Icon.svelte'
import DropdownItem from './ui/dropdown/DropdownItem.svelte' import DropdownItem from './ui/dropdown/DropdownItem.svelte'
import NotificationBadge from './ui/NotificationBadge.svelte' import NotificationBadge from './ui/NotificationBadge.svelte'
@ -147,9 +148,6 @@
// Invitations modal state // Invitations modal state
let invitationsModalOpen = $state(false) let invitationsModalOpen = $state(false)
// Database back button hover state
let databaseBackHovered = $state(false)
// Query for the user's crew (to determine if phantom claims should be fetched) // Query for the user's crew (to determine if phantom claims should be fetched)
const myCrewQuery = createQuery(() => ({ const myCrewQuery = createQuery(() => ({
...crewQueries.myCrew(), ...crewQueries.myCrew(),
@ -201,18 +199,15 @@
<!-- Back button --> <!-- Back button -->
<ul role="list" class="database-back-section"> <ul role="list" class="database-back-section">
<li> <li>
<a <Tooltip content="Back to site">
href={galleryHref} <a
class="database-back-button" href={galleryHref}
aria-label="Back to gallery" class="database-back-button"
onmouseenter={() => (databaseBackHovered = true)} aria-label="Back to site"
onmouseleave={() => (databaseBackHovered = false)} >
> <Icon name="home" size={21} />
<Icon name="home" size={21} /> </a>
{#if databaseBackHovered} </Tooltip>
<span class="database-back-label">Back to site</span>
{/if}
</a>
</li> </li>
</ul> </ul>
@ -533,14 +528,9 @@
aspect-ratio: 1; aspect-ratio: 1;
&:hover { &:hover {
aspect-ratio: auto;
color: colors.$grey-30; color: colors.$grey-30;
} }
} }
.database-back-label {
margin-left: spacing.$unit-half;
}
} }
.database-subnav { .database-subnav {