Skip to content

Commit b69ffac

Browse files
rohitpaulkrohitpaulk
committed
feat(course-card): improve layout and fix lock icon opacity
Refactor the course card component to enhance layout structure by moving the lock icon opacity styles to a child wrapper. This improves visual consistency when hovering. Update skeleton states for logo and text to match new layout. Remove redundant elements and streamline the flexbox setup to better support responsive design and interactions.
1 parent 781a2d4 commit b69ffac

File tree

1 file changed

+78
-77
lines changed

1 file changed

+78
-77
lines changed

‎app/components/course-card/index.hbs‎

Lines changed: 78 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,100 @@
11
<LinkTo
2-
class="group bg-white dark:bg-gray-925/70 p-5 rounded-md shadow-sm hover:shadow-md transition-shadow cursor-pointer flex flex-col justify-between border border-gray-200 dark:border-white/5 relative
3-
{{if this.shouldShowLockIcon 'opacity-50 hover:opacity-100'}}"
2+
class="flex flex-col justify-stretch group bg-white dark:bg-gray-925/70 p-5 rounded-md shadow-sm hover:shadow-md transition-shadow cursor-pointer border border-gray-200 dark:border-white/5 relative"
43
@route={{this.linkToRoute.name}}
54
@model={{this.linkToRoute.model}}
65
@query={{this.linkToRoute.query}}
76
data-test-course-card={{not this.isSkeleton}}
87
>
9-
{{! Logo }}
10-
<div class="w-8 transform scale-100 group-hover:scale-105 shrink-0 transition-transform absolute top-5 right-5">
11-
{{#if this.isSkeleton}}
12-
<div class="bg-gray-100 dark:bg-gray-900 w-8 h-8 rounded-full" />
13-
{{else}}
14-
<CourseLogo @course={{this.course}} />
15-
{{/if}}
16-
</div>
17-
18-
{{! Text }}
19-
<div class="mb-6">
20-
<div class="flex items-center mb-3 flex-wrap gap-y-2 pr-10">
21-
<div class="text-lg font-semibold text-gray-900 dark:text-gray-200 mr-2" data-test-course-name>
22-
{{#if this.isSkeleton}}
23-
<span class="inline-block bg-gray-100 dark:bg-gray-900 rounded-sm">{{#each (repeat 30)}}&nbsp;{{/each}}</span>
24-
{{else}}
25-
<span>{{this.course.name}}</span>
26-
{{/if}}
27-
</div>
28-
</div>
29-
30-
<div class="text-sm leading-relaxed text-gray-600 dark:text-gray-400 pr-10" data-test-course-description>
8+
<div class="flex flex-col justify-between flex-grow {{if this.shouldShowLockIcon 'opacity-50 group-hover:opacity-100'}}">
9+
{{! Logo }}
10+
<div class="w-8 transform scale-100 group-hover:scale-105 shrink-0 transition-transform absolute top-5 right-5">
3111
{{#if this.isSkeleton}}
32-
<div>
33-
<div class="relative inline-block w-full">{{#each (repeat 15)}}&nbsp;{{/each}}
34-
<div class="absolute left-0 right-0 top-[2px] bottom-[2px] bg-gray-100 dark:bg-gray-900 rounded-sm"></div>
35-
</div>
36-
<div class="relative inline-block w-full">{{#each (repeat 15)}}&nbsp;{{/each}}
37-
<div class="absolute left-0 right-0 top-[2px] bottom-[2px] bg-gray-100 dark:bg-gray-900 rounded-sm"></div>
38-
</div>
39-
</div>
12+
<div class="bg-gray-100 dark:bg-gray-900 w-8 h-8 rounded-full" />
4013
{{else}}
41-
<span>{{this.course.shortDescription}}</span>
14+
<CourseLogo @course={{this.course}} />
4215
{{/if}}
4316
</div>
44-
</div>
4517

46-
{{! Footer }}
47-
<div class="flex items-center justify-between">
48-
<div class="flex items-center gap-3">
49-
{{#if this.isSkeleton}}
50-
<div class="bg-gray-100 dark:bg-gray-900 rounded-sm h-4 w-24"></div>
51-
{{else}}
52-
{{#if this.lastUsedRepository}}
53-
<CourseCard::ProgressBar @course={{this.course}} @lastUsedRepository={{this.lastUsedRepository}} class="shrink-0" />
54-
{{else}}
55-
{{#if this.course.releaseStatusIsAlpha}}
56-
<div
57-
class="text-xs text-gray-400 dark:text-gray-600 font-semibold border border-gray-300 dark:border-gray-700 rounded-sm px-1 py-0.25 mr-3"
58-
data-test-course-alpha-label
59-
>
60-
ALPHA
61-
</div>
62-
{{else if this.course.releaseStatusIsBeta}}
63-
<BetaCourseLabel class="mr-3" />
64-
{{else if (and this.course.isFree (not this.currentUser.canAccessMembershipBenefits))}}
65-
<FreeCourseLabel @course={{this.course}} />
18+
{{! Text }}
19+
<div class="mb-6">
20+
<div class="flex items-center mb-3 flex-wrap gap-y-2 pr-10">
21+
<div class="text-lg font-semibold text-gray-900 dark:text-gray-200 mr-2" data-test-course-name>
22+
{{#if this.isSkeleton}}
23+
<span class="inline-block bg-gray-100 dark:bg-gray-900 rounded-sm">{{#each (repeat 30)}}&nbsp;{{/each}}</span>
6624
{{else}}
67-
<div class="flex items-center">
68-
{{svg-jar "academic-cap" class="w-4 mr-1 fill-current text-gray-400 dark:text-gray-600"}}
69-
<span class="text-xs text-gray-500">{{this.course.stages.length}} stages</span>
70-
</div>
25+
<span>{{this.course.name}}</span>
7126
{{/if}}
27+
</div>
28+
</div>
29+
30+
<div class="text-sm leading-relaxed text-gray-600 dark:text-gray-400 pr-10" data-test-course-description>
31+
{{#if this.isSkeleton}}
32+
<div>
33+
<div class="relative inline-block w-full">{{#each (repeat 15)}}&nbsp;{{/each}}
34+
<div class="absolute left-0 right-0 top-[2px] bottom-[2px] bg-gray-100 dark:bg-gray-900 rounded-sm"></div>
35+
</div>
36+
<div class="relative inline-block w-full">{{#each (repeat 15)}}&nbsp;{{/each}}
37+
<div class="absolute left-0 right-0 top-[2px] bottom-[2px] bg-gray-100 dark:bg-gray-900 rounded-sm"></div>
38+
</div>
39+
</div>
40+
{{else}}
41+
<span>{{this.course.shortDescription}}</span>
7242
{{/if}}
73-
{{/if}}
43+
</div>
7444
</div>
7545

76-
<div class="flex items-center">
77-
{{#if this.shouldShowLockIcon}}
78-
<div class="flex items-center justify-center" data-test-lock-icon>
79-
{{svg-jar "lock-closed" class="w-4 mr-1 fill-current text-gray-400 dark:text-gray-600"}}
80-
</div>
81-
{{else}}
82-
<span class="font-bold text-teal-500 text-xs mr-2 opacity-0 group-hover:opacity-100 transition-opacity" data-test-action-text>
83-
{{#if this.lastUsedRepository.allStagesAreComplete}}
84-
Start Again
85-
{{else if this.lastUsedRepository}}
86-
Resume
46+
{{! Footer }}
47+
<div class="flex items-center justify-between">
48+
<div class="flex items-center gap-3">
49+
{{#if this.isSkeleton}}
50+
<div class="bg-gray-100 dark:bg-gray-900 rounded-sm h-4 w-24"></div>
51+
{{else}}
52+
{{#if this.lastUsedRepository}}
53+
<CourseCard::ProgressBar @course={{this.course}} @lastUsedRepository={{this.lastUsedRepository}} class="shrink-0" />
8754
{{else}}
88-
Start
55+
{{#if this.course.releaseStatusIsAlpha}}
56+
<div
57+
class="text-xs text-gray-400 dark:text-gray-600 font-semibold border border-gray-300 dark:border-gray-700 rounded-sm px-1 py-0.25 mr-3"
58+
data-test-course-alpha-label
59+
>
60+
ALPHA
61+
</div>
62+
{{else if this.course.releaseStatusIsBeta}}
63+
<BetaCourseLabel class="mr-3" />
64+
{{else if (and this.course.isFree (not this.currentUser.canAccessMembershipBenefits))}}
65+
<FreeCourseLabel @course={{this.course}} />
66+
{{else}}
67+
<div class="flex items-center">
68+
{{svg-jar "academic-cap" class="w-4 mr-1 fill-current text-gray-400 dark:text-gray-600"}}
69+
<span class="text-xs text-gray-500">{{this.course.stages.length}} stages</span>
70+
</div>
71+
{{/if}}
8972
{{/if}}
90-
</span>
73+
{{/if}}
74+
</div>
9175

92-
{{svg-jar
93-
"arrow-right"
94-
class="w-4 fill-current text-gray-300 dark:text-gray-700 group-hover:text-teal-500 dark:group-hover:text-teal-500 transition-colors"
95-
}}
96-
{{/if}}
76+
<div class="flex items-center">
77+
{{#if this.shouldShowLockIcon}}
78+
<div class="flex items-center justify-center" data-test-lock-icon>
79+
{{svg-jar "lock-closed" class="w-4 mr-1 fill-current text-gray-400 dark:text-gray-600"}}
80+
</div>
81+
{{else}}
82+
<span class="font-bold text-teal-500 text-xs mr-2 opacity-0 group-hover:opacity-100 transition-opacity" data-test-action-text>
83+
{{#if this.lastUsedRepository.allStagesAreComplete}}
84+
Start Again
85+
{{else if this.lastUsedRepository}}
86+
Resume
87+
{{else}}
88+
Start
89+
{{/if}}
90+
</span>
91+
92+
{{svg-jar
93+
"arrow-right"
94+
class="w-4 fill-current text-gray-300 dark:text-gray-700 group-hover:text-teal-500 dark:group-hover:text-teal-500 transition-colors"
95+
}}
96+
{{/if}}
97+
</div>
9798
</div>
9899
</div>
99100
</LinkTo>

0 commit comments

Comments
 (0)