fix(dashboard): make Explore page course cards fully clickable to open the preview modal (#899)

This commit is contained in:
Rotimi Best
2026-08-15 17:00:47 +01:00
committed by GitHub
3 changed files with 17 additions and 4 deletions
@@ -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';