fix(dashboard): make Explore page course cards fully clickable to open the preview modal (#899)
This commit is contained in:
@@ -142,8 +142,10 @@
|
|||||||
|
|
||||||
let cost = $derived(calcCourseDiscount(pricingData.discount, pricingData.cost ?? 0, !!pricingData.showDiscount));
|
let cost = $derived(calcCourseDiscount(pricingData.discount, pricingData.cost ?? 0, !!pricingData.showDiscount));
|
||||||
|
|
||||||
|
const isExploreClickable = $derived(!!(isLMS && isExplore && onExploreClick));
|
||||||
|
|
||||||
let courseUrl = $derived.by(() => {
|
let courseUrl = $derived.by(() => {
|
||||||
if (onExploreClick && isLMS && isExplore) {
|
if (isExploreClickable) {
|
||||||
return undefined;
|
return undefined;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -225,6 +227,7 @@
|
|||||||
|
|
||||||
<CourseCard
|
<CourseCard
|
||||||
href={courseUrl ? resolve(courseUrl, {}) : undefined}
|
href={courseUrl ? resolve(courseUrl, {}) : undefined}
|
||||||
|
onclick={isExploreClickable ? onExploreClick : undefined}
|
||||||
{title}
|
{title}
|
||||||
{description}
|
{description}
|
||||||
{typeBadge}
|
{typeBadge}
|
||||||
@@ -318,7 +321,15 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if isLMS}
|
{#if isLMS}
|
||||||
<Button variant="outline" onclick={isExplore && onExploreClick ? onExploreClick : undefined}>
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onclick={(event) => {
|
||||||
|
if (isExploreClickable) {
|
||||||
|
event.stopPropagation();
|
||||||
|
onExploreClick?.();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
{isCertificateView
|
{isCertificateView
|
||||||
? $t('certificates.view_certificate')
|
? $t('certificates.view_certificate')
|
||||||
: isExplore
|
: isExplore
|
||||||
|
|||||||
@@ -25,6 +25,8 @@
|
|||||||
iconClass?: string;
|
iconClass?: string;
|
||||||
};
|
};
|
||||||
class?: string;
|
class?: string;
|
||||||
|
/** Click handler for the card wrapper (e.g. opening a preview modal when `href` is absent) */
|
||||||
|
onclick?: (event: MouseEvent) => void;
|
||||||
/** Custom banner area (e.g. optimized `Image`); overrides `bannerImage` */
|
/** Custom banner area (e.g. optimized `Image`); overrides `bannerImage` */
|
||||||
media?: Snippet;
|
media?: Snippet;
|
||||||
/** Optional overlay inside the link (e.g. dropdown), typically absolutely positioned */
|
/** Optional overlay inside the link (e.g. dropdown), typically absolutely positioned */
|
||||||
@@ -42,6 +44,7 @@
|
|||||||
typeBadge,
|
typeBadge,
|
||||||
visibilityBadge,
|
visibilityBadge,
|
||||||
class: className = '',
|
class: className = '',
|
||||||
|
onclick,
|
||||||
media,
|
media,
|
||||||
overlay,
|
overlay,
|
||||||
tags,
|
tags,
|
||||||
@@ -51,7 +54,7 @@
|
|||||||
const resolvedBannerImage = $derived(bannerImage?.trim() ? bannerImage : DEFAULT_COURSE_BANNER_IMAGE);
|
const resolvedBannerImage = $derived(bannerImage?.trim() ? bannerImage : DEFAULT_COURSE_BANNER_IMAGE);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Item.Root variant="outline" class={cn('ui:group ui:relative ui:max-w-[320px] ui:p-3!', className)}>
|
<Item.Root variant="outline" class={cn('ui:group ui:relative ui:max-w-[320px] ui:p-3!', className)} {onclick}>
|
||||||
{#snippet child({ props })}
|
{#snippet child({ props })}
|
||||||
{#if href}
|
{#if href}
|
||||||
<a {href} {...props} class={cn('ui:block', props.class as string)}>
|
<a {href} {...props} class={cn('ui:block', props.class as string)}>
|
||||||
|
|||||||
@@ -12,4 +12,3 @@ export * from './compliance';
|
|||||||
export * from './public-course';
|
export * from './public-course';
|
||||||
export * from './section';
|
export * from './section';
|
||||||
export * from './invite';
|
export * from './invite';
|
||||||
export { ZCourseGetParam, type TCourseGetParam } from './course';
|
|
||||||
|
|||||||
Reference in New Issue
Block a user