MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(ui): repair link in card with `to` route (whole card as link)

This commit is contained in:
upsiflu 2024-12-14 14:48:17 +01:00
parent 58e5e84610
commit ee2819d826
1 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
front/src/components/ui/Card.vue
View File

@ -25,8 +25,6 @@ const image = typeof props.image === 'string' ? { src: props.image } : props.ima
const isExternalLink = computed(() => { const isExternalLink = computed(() => {
return typeof props.to === 'string' && props.to.startsWith('http') return typeof props.to === 'string' && props.to.startsWith('http')
}) })
const c = useCssModule()
</script> </script>
<style module> <style module>
@ -49,6 +47,14 @@ const c = useCssModule()
>.covering { >.covering {
position: absolute; position: absolute;
inset: 0; inset: 0;
&~:is(.title, .content) {
pointer-events:none;
}
&:hover~:is(.content) {
text-decoration: underline
}
} }
&:has(>.image) { &:has(>.image) {
@ -139,50 +145,44 @@ const c = useCssModule()
</style> </style>
<template> <template>
<Layout stack :class="{ [c.card]: true, [c['is-category']]: category }" style="--gap:16px"> <Layout stack :class="{ [$style.card]: true, [$style['is-category']]: category }" style="--gap:16px">
<a v-if="props.to && isExternalLink" :class="c.covering" :href="to?.toString()" target="_blank"> <!-- Link -->
Link to `to` <a v-if="props.to && isExternalLink" :class="$style.covering" :href="to?.toString()" target="_blank" />
</a> <RouterLink v-if="props.to && !isExternalLink" :class="$style.covering" :to="props.to"
/>
<RouterLink v-if="props.to && !isExternalLink" :to="props.to" v-slot="{ isActive, href, navigate }">
<a :href="href" @click="navigate" :class="{ [c.covering]: true, activeClass: isActive }">
LINK
</a>
</RouterLink>
<!-- Image --> <!-- Image -->
<div v-if="$slots.image" :class="c.image"> <div v-if="$slots.image" :class="$style.image">
<slot name="image" :src="image" /> <slot name="image" :src="image" />
</div> </div>
<img v-else-if="image" :src="image?.src" <img v-else-if="image" :src="image?.src"
:class="{ [c.image]: true, [c['with-padding']]: image?.style === 'withPadding' }" /> :class="{ [$style.image]: true, [$style['with-padding']]: image?.style === 'withPadding' }" />
<Spacer v-else style="--size:12px" /> <Spacer v-else style="--size:12px" />
<!-- Content --> <!-- Content -->
<component :class="c.title" :is="typeof category === 'string' ? category : 'h6'">{{ title }}</component> <component :class="$style.title" :is="typeof category === 'string' ? category : 'h6'">{{ title }}</component>
<Alert v-if="$slots.alert" :class="c.alert"> <Alert v-if="$slots.alert" :class="$style.alert">
<slot name="alert" /> <slot name="alert" />
</Alert> </Alert>
<div v-if="tags" :class="c.tags"> <div v-if="tags" :class="$style.tags">
<Pill v-for="tag in tags" :key="tag"> <Pill v-for="tag in tags" :key="tag">
#{{ tag }} #{{ tag }}
</Pill> </Pill>
</div> </div>
<div v-if="$slots.default" :class="c.content"> <div v-if="$slots.default" :class="$style.content">
<slot /> <slot />
</div> </div>
<!-- Footer and Action --> <!-- Footer and Action -->
<div v-if="$slots.footer" :class="c.footer"> <div v-if="$slots.footer" :class="$style.footer">
<slot name="footer" /> <slot name="footer" />
</div> </div>
<div v-if="$slots.action" :class="c.action"> <div v-if="$slots.action" :class="$style.action">
<slot name="action" /> <slot name="action" />
</div> </div>
<Spacer v-else-if="!$slots.footer" style="--size:16px" /> <Spacer v-else-if="!$slots.footer" style="--size:16px" />