You've already forked AstralRinth
forked from didirus/AstralRinth
c39bb78e38
* Start of app redesign * format * continue progress * Content page nearly done * Fix recursion issues with content page * Fix update all alignment * Discover page progress * Settings progress * Removed unlocked-size hack that breaks web * Revamp project page, refactor web project page to share code with app, fixed loading bar, misc UI/UX enhancements, update ko-fi logo, update arrow icons, fix web issues caused by floating-vue migration, fix tooltip issues, update web tooltips, clean up web hydration issues * Ads + run prettier * Begin auth refactor, move common messages to ui lib, add i18n extraction to all apps, begin Library refactor * fix ads not hiding when plus log in * rev lockfile changes/conflicts * Fix sign in page * Add generated * (mostly) Data driven search * Fix search mobile issue * profile fixes * Project versions page, fix typescript on UI lib and misc fixes * Remove unused gallery component * Fix linkfunction err * Search filter controls at top, localization for locked filters * Fix provided filter names * Fix navigating from instance browse to main browse * Friends frontend (#2995) * Friends system frontend * (almost) finish frontend * finish friends, fix lint * Fix lint --------- Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com> * Refresh macOS app icon * Update web search UI more * Fix link opens * Fix frontend build --------- Signed-off-by: Geometrically <18202329+Geometrically@users.noreply.github.com> Co-authored-by: Jai A <jaiagr+gpg@pm.me> Co-authored-by: Geometrically <18202329+Geometrically@users.noreply.github.com>
110 lines
2.5 KiB
Vue
110 lines
2.5 KiB
Vue
<template>
|
|
<div class="tooltip-parent flex items-center justify-center">
|
|
<RouterLink
|
|
v-if="typeof to === 'string'"
|
|
:to="to"
|
|
v-bind="$attrs"
|
|
:class="{
|
|
'router-link-active': isPrimary && isPrimary(route),
|
|
'subpage-active': isSubpage && isSubpage(route),
|
|
}"
|
|
class="w-12 h-12 rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast"
|
|
>
|
|
<slot />
|
|
</RouterLink>
|
|
<button
|
|
v-else
|
|
v-bind="$attrs"
|
|
class="button-animation border-none text-primary cursor-pointer w-12 h-12 rounded-full flex items-center justify-center text-2xl transition-all bg-transparent hover:bg-button-bg hover:text-contrast"
|
|
@click="to"
|
|
>
|
|
<slot />
|
|
</button>
|
|
<div class="tooltip-label">
|
|
<slot name="label" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { RouteLocationNormalizedLoaded } from 'vue-router'
|
|
import { RouterLink, useRoute } from 'vue-router'
|
|
|
|
const route = useRoute()
|
|
|
|
type RouteFunction = (route: RouteLocationNormalizedLoaded) => boolean
|
|
|
|
defineProps<{
|
|
to: (() => void) | string
|
|
isPrimary?: RouteFunction
|
|
isSubpage?: RouteFunction
|
|
}>()
|
|
|
|
defineOptions({
|
|
inheritAttrs: false,
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.router-link-active,
|
|
.subpage-active {
|
|
svg {
|
|
filter: drop-shadow(0 0 0.5rem black);
|
|
}
|
|
}
|
|
|
|
.router-link-active {
|
|
@apply text-[--color-button-text-selected] bg-[--color-button-bg-selected];
|
|
}
|
|
|
|
.subpage-active {
|
|
@apply text-contrast bg-button-bg;
|
|
}
|
|
|
|
.tooltip-parent {
|
|
position: relative;
|
|
border-radius: var(--radius-max);
|
|
}
|
|
|
|
.tooltip-parent:hover .tooltip-label {
|
|
opacity: 1;
|
|
translate: 0 0;
|
|
scale: 1;
|
|
}
|
|
|
|
.tooltip-label:not(:empty) {
|
|
--_tooltip-bg: black;
|
|
--_tooltip-color: var(--dark-color-contrast);
|
|
|
|
position: absolute;
|
|
background-color: var(--_tooltip-bg);
|
|
color: var(--_tooltip-color);
|
|
text-wrap: nowrap;
|
|
padding: 0.5rem 0.5rem;
|
|
border-radius: var(--radius-sm);
|
|
left: calc(100% + 0.5rem);
|
|
font-size: 1rem;
|
|
line-height: 1;
|
|
font-weight: bold;
|
|
filter: drop-shadow(5px 5px 0.8rem rgba(0, 0, 0, 0.35));
|
|
pointer-events: none;
|
|
user-select: none;
|
|
|
|
opacity: 0;
|
|
translate: -0.5rem 0;
|
|
scale: 0.9;
|
|
transition: all ease-in-out 0.1s;
|
|
}
|
|
|
|
.tooltip-label:not(:empty)::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 100%; /* To the left of the tooltip */
|
|
margin-top: -5px;
|
|
border-width: 5px;
|
|
border-style: solid;
|
|
border-color: transparent var(--_tooltip-bg) transparent transparent;
|
|
}
|
|
</style>
|