Yimaru/Yimaru-Admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(content): uniform lesson card heights and wire descriptions

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Yared Yemane 2026-05-13 05:34:50 -07:00
parent bb6680acfb
commit f1b6172f91
3 changed files with 32 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/pages/content-management/CourseModuleDetailPage.tsx
View File

@ -719,6 +719,7 @@ export function CourseModuleDetailPage() {
hoverModuleActions hoverModuleActions
onEdit={() => openEditLesson(lesson)} onEdit={() => openEditLesson(lesson)}
onDelete={() => setDeletingLessonId(lesson.id)} onDelete={() => setDeletingLessonId(lesson.id)}
description={lesson.description}
/> />
)) ))
) )

1
src/pages/content-management/ModuleDetailPage.tsx
View File

@ -398,6 +398,7 @@ export function ModuleDetailPage() {
thumbnailGradient={LESSON_THUMB_GRADIENTS[i % LESSON_THUMB_GRADIENTS.length]} thumbnailGradient={LESSON_THUMB_GRADIENTS[i % LESSON_THUMB_GRADIENTS.length]}
onEdit={() => openEditLesson(lesson)} onEdit={() => openEditLesson(lesson)}
onDelete={() => setDeletingLesson(lesson)} onDelete={() => setDeletingLesson(lesson)}
description={lesson.description}
onAddPractice={() => onAddPractice={() =>
navigate( navigate(
`/new-content/learn-english/${level}/courses/add-practice?backTo=module&courseId=${courseId}&moduleId=${moduleId}&lessonId=${lesson.id}&lessonTitle=${encodeURIComponent(lesson.title)}`, `/new-content/learn-english/${level}/courses/add-practice?backTo=module&courseId=${courseId}&moduleId=${moduleId}&lessonId=${lesson.id}&lessonTitle=${encodeURIComponent(lesson.title)}`,

49
src/pages/content-management/components/VideoCard.tsx
View File

@ -41,6 +41,8 @@ interface VideoCardProps {
/** When set (e.g. on module lesson cards), shows an "Add practice" control scoped to this lesson. */ /** When set (e.g. on module lesson cards), shows an "Add practice" control scoped to this lesson. */
onAddPractice?: () => void; onAddPractice?: () => void;
onPublish?: () => void; onPublish?: () => void;
/** Shown under title on module lesson cards; reserved height keeps grid rows even. */
description?: string | null;
} }
export function VideoCard({ export function VideoCard({
@ -55,6 +57,7 @@ export function VideoCard({
onPublish, onPublish,
onAddPractice, onAddPractice,
hoverModuleActions = false, hoverModuleActions = false,
description,
}: VideoCardProps) { }: VideoCardProps) {
const [thumbFailed, setThumbFailed] = useState(false); const [thumbFailed, setThumbFailed] = useState(false);
const [previewOpen, setPreviewOpen] = useState(false); const [previewOpen, setPreviewOpen] = useState(false);
@ -113,13 +116,13 @@ export function VideoCard({
return ( return (
<div <div
className={cn( className={cn(
"group relative bg-white rounded-[24px] border border-grayScale-50 overflow-hidden shadow-sm hover:shadow-lg transition-all duration-300 flex flex-col", "group relative flex h-full min-h-0 flex-col overflow-hidden rounded-[24px] border border-grayScale-50 bg-white shadow-sm transition-all duration-300 hover:shadow-lg",
)} )}
> >
{/* Thumbnail */} {/* Thumbnail */}
<div <div
className={cn( className={cn(
"relative h-44 w-full overflow-hidden", "relative h-44 w-full shrink-0 overflow-hidden",
useGradient && "bg-gradient-to-br", useGradient && "bg-gradient-to-br",
useGradient && thumbnailGradient, useGradient && thumbnailGradient,
!useGradient && "bg-grayScale-100", !useGradient && "bg-grayScale-100",
@ -299,11 +302,11 @@ export function VideoCard({
</DialogContent> </DialogContent>
</Dialog> </Dialog>
{/* Content */} {/* Content — flex-1 + min-h-0 so grid rows equalize; title min-height stabilizes card body */}
<div className="p-5 space-y-4 flex-1 flex flex-col"> <div className="flex min-h-0 flex-1 flex-col p-5">
<div <div
className={cn( className={cn(
"flex items-center gap-2", "mb-4 flex shrink-0 items-center gap-2",
hoverModuleActions ? "justify-start" : "justify-between", hoverModuleActions ? "justify-start" : "justify-between",
)} )}
> >
@ -341,28 +344,36 @@ export function VideoCard({
) : null} ) : null}
</div> </div>
<h3 className="text-[16px] font-medium text-grayScale-900 line-clamp-2 leading-snug"> <h3 className="line-clamp-2 min-h-[3rem] shrink-0 text-[16px] font-medium leading-snug text-grayScale-900">
{title} {title}
</h3> </h3>
{hoverModuleActions ? (
<p className="mt-1 line-clamp-2 min-h-[2.5rem] shrink-0 text-[13px] leading-snug text-grayScale-500">
{description?.trim() ? description.trim() : "\u00a0"}
</p>
) : null}
{hoverModuleActions && onAddPractice ? ( {hoverModuleActions && onAddPractice ? (
<Button <div className="mt-auto shrink-0 pt-3">
type="button" <Button
variant="outline" type="button"
className="h-9 w-full shrink-0 rounded-lg border-brand-200 text-[12px] font-bold text-brand-600 hover:bg-brand-50" variant="outline"
onClick={(e) => { className="h-9 w-full rounded-lg border-brand-200 text-[12px] font-bold text-brand-600 hover:bg-brand-50"
e.stopPropagation(); onClick={(e) => {
onAddPractice(); e.stopPropagation();
}} onAddPractice();
> }}
<Calendar className="mr-1.5 h-3.5 w-3.5" aria-hidden /> >
Add practice <Calendar className="mr-1.5 h-3.5 w-3.5" aria-hidden />
</Button> Add practice
</Button>
</div>
) : null} ) : null}
{/* Actions (footer) — not used for API lesson cards with hover tools */} {/* Actions (footer) — not used for API lesson cards with hover tools */}
{!hoverModuleActions ? ( {!hoverModuleActions ? (
<div className="pt-2 space-y-3 mt-auto"> <div className="mt-auto shrink-0 space-y-3 pt-2">
<Button <Button
variant="outline" variant="outline"
onClick={onEdit} onClick={onEdit}