Fix part of #18384: Reusable carousel component for learner dashboard redesign #20306

amyyeung17 · 2024-05-14T17:06:34Z

Overview

This PR addresses part of the 3rd breakpoint of #18384, adding a new reusable carousel component.

Includes 3 new files:

card-display.component.ts
card-display.component.spec.ts
card-display.component.html

Additional notes:

Will also be used for progress tab (view more instead of carousel)
The extra margin for one card (lessons in-progress) is noted as a to do for later on.
Placeholder data is used to demonstrate styling.

Essential Checklist

Please follow the instructions for making a code change.

I have linked the issue that this PR fixes in the "Development" section of the sidebar.
I have checked the "Files Changed" tab and confirmed that the changes are what I want to make.
I have written tests for my code.
The PR title starts with "Fix #bugnum: " or "Fix part of #bugnum: ...", followed by a short, clear summary of the changes.
I have assigned the correct reviewers to this PR (or will leave a comment with the phrase "@{{reviewer_username}} PTAL" if I can't assign them directly).

Proof that changes are correct

final-carousel.mov

Update with newest commits from PR 20185

…comments

oppiabot · 2024-05-14T17:06:46Z

Assigning @Nik-09 for the first pass review of this PR. Thanks!

oppiabot · 2024-05-21T18:05:19Z

Hi @amyyeung17, I'm going to mark this PR as stale because it hasn't had any updates for 7 days. If no further activity occurs within 4 days, it will be automatically closed so that others can take up the issue.
If you are still working on this PR, please make a follow-up commit within 4 days (and submit it for review, if applicable). Please also let us know if you are stuck so we can help you!

Nik-09 · 2024-05-25T18:25:23Z

Sorry @amyyeung17 for the delay. I will take a look tomorrow morning. Thank you

Nik-09

Thank you @amyyeung17 for the PR, I have added a few comments, PTAL.
Also sorry for the delayed review.
Thanks

Nik-09 · 2024-05-29T13:46:06Z

core/templates/components/summary-tile/learner-topic-summary-tile.component.ts

@@ -41,6 +41,7 @@ export class LearnerTopicSummaryTileComponent implements OnInit {
  thumbnailBgColor!: string;
  openInNewWindow = false;
  @Input() redesignFeatureFlag!: boolean;
+  @Input() last!: boolean;


This is a very generic name, can you please help me to understand what does this mean?

Done. This is temporarily used for styling the last card; I haven't been able to figure out how to do this with only CSS.

Nik-09 · 2024-05-29T13:46:37Z

core/templates/components/summary-tile/lesson-card.component.ts

@@ -34,6 +34,7 @@ import {StoryNode} from 'domain/story/story-node.model';
 export class LessonCardComponent implements OnInit {
  @Input() story!: StorySummary | LearnerExplorationSummary | CollectionSummary;
  @Input() topic!: string;
+  @Input() last!: boolean;


Same as prev comment

Nik-09 · 2024-05-29T13:49:41Z

core/templates/pages/learner-dashboard-page/card-display/card-display.component.ts

+import {downgradeComponent} from '@angular/upgrade/static';
+
+@Component({
+  selector: 'card-display',


Can we make the selector name oppia-card-display to make the component consistent throughout the codebase?

Nik-09 · 2024-06-03T15:18:51Z

Hi @amyyeung17 any update on this?

amyyeung17 · 2024-06-03T19:50:32Z

@Nik-09 Hi, sorry for the delay. My computer's OS recently updated and somehow broke my setup. The program is unable to detect Python 2 installed in my computer, despite pyenv stating otherwise.

It runs fine in Docker. Unfortunately, I won't be able to push anything until this is resolved on my end.

Nik-09 · 2024-06-04T05:44:46Z

@Nik-09 Hi, sorry for the delay. My computer's OS recently updated and somehow broke my setup. The program is unable to detect Python 2 installed in my computer, despite pyenv stating otherwise.

It runs fine in Docker. Unfortunately, I won't be able to push anything until this is resolved on my end.

Hi @amyyeung17 Sorry to hear this, feel free to create a GitHub discussion if you need any help from the community regarding the setup.
Thanks

amyyeung17 · 2024-06-06T20:07:03Z

@Nik-09 Hi, sorry for the delay. It took me some time to identify the cause of the issue, which was related to pyenv and Xcode.

Thanks for your patience!

Nik-09 · 2024-06-07T23:35:28Z

@Nik-09 Hi, sorry for the delay. It took me some time to identify the cause of the issue, which was related to pyenv and Xcode.

Thanks for your patience!

Thanks for the update, feel free to assign me once this PR is ready for review.

Nik-09

Thank you @amyyeung17; LGTM

oppiabot · 2024-06-10T06:39:33Z

Hi @amyyeung17, this PR is ready to be merged. Please address any remaining comments prior to merging, and feel free to ask someone to merge your PR once the CI checks pass and you're happy with it. Thanks!

…board redesign (oppia#20306) * Added nav Update with newest commits from PR 20185 * Updated margins * Corrected shifts for card nav * Updated shift * Fixed nav spacing * Added translation key * Replaced explicit width with var cardWidth * fixed margins and import errors * Updated spacing between sections * Changed width to include margin and added test cases * Added card-display tests * Refactored logic * Refactored nextCard() * Reverted testing statements to default * Removed comments * Updated TODO comments * Replaced headings with i18n keys,font-awesome for nav buttons; added comments * Renamed folder * Updated view more button * Updated styling for view more button * Fixed capitalization of description and community text for cards * Fixed lint errors, added copyright * Updated lesson card test case * Renamed variable * Changed selector * Updated variable names * Removed extra file from prev commit

amyyeung17 added 23 commits May 14, 2024 11:49

Added nav

769ea9e

Update with newest commits from PR 20185

Updated margins

5b16ce0

Corrected shifts for card nav

657983f

Updated shift

2250c36

Fixed nav spacing

3fd0b63

Added translation key

6625a92

Replaced explicit width with var cardWidth

ab3bdeb

fixed margins and import errors

3f866e6

Updated spacing between sections

d9e6bc8

Changed width to include margin and added test cases

c8a0561

Added card-display tests

ab8d8b5

Refactored logic

d3bf974

Refactored nextCard()

ea0ffa5

Reverted testing statements to default

4477218

Removed comments

dbfdb8a

Updated TODO comments

8800bfd

Replaced headings with i18n keys,font-awesome for nav buttons; added …

5d96262

…comments

Renamed folder

39975bf

Updated view more button

6bd021d

Updated styling for view more button

8e597b0

Fixed capitalization of description and community text for cards

ca6ac12

Fixed lint errors, added copyright

593ae57

Updated lesson card test case

afa885e

amyyeung17 requested a review from a team as a code owner May 14, 2024 17:06

amyyeung17 requested a review from Nik-09 May 14, 2024 17:06

oppiabot bot assigned Nik-09 May 14, 2024

amyyeung17 changed the title ~~Fix part of #18384: Reusable carousel for learner dashboard redesign~~ Fix part of #18384: Reusable carousel component for learner dashboard redesign May 14, 2024

amyyeung17 mentioned this pull request May 14, 2024

[Feature Request]: Learner Dashboard Redesign #18384

Open

Nik-09 requested changes May 29, 2024

View reviewed changes

Nik-09 assigned amyyeung17 and unassigned Nik-09 May 29, 2024

amyyeung17 added 2 commits May 31, 2024 16:07

Renamed variable

118db4e

Changed selector

05cf627

amyyeung17 added 2 commits June 3, 2024 15:34

Updated variable names

4fa5d20

Removed extra file from prev commit

b0afd7c

Merge branch 'develop' into learner-dash-redesign-card-display

ebb2f04

amyyeung17 assigned Nik-09 and unassigned amyyeung17 Jun 8, 2024

Nik-09 approved these changes Jun 10, 2024

View reviewed changes

Nik-09 assigned amyyeung17 and unassigned Nik-09 Jun 10, 2024

oppiabot bot added the PR: LGTM label Jun 10, 2024

seanlip enabled auto-merge June 10, 2024 15:12

Merge branch 'develop' into learner-dash-redesign-card-display

ffa26ae

seanlip added this pull request to the merge queue Jun 10, 2024

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Jun 10, 2024

Merge branch 'develop' into learner-dash-redesign-card-display

b3ab65f

seanlip added this pull request to the merge queue Jun 11, 2024

Merged via the queue into oppia:develop with commit 9cc8aab Jun 11, 2024
88 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix part of #18384: Reusable carousel component for learner dashboard redesign #20306

Fix part of #18384: Reusable carousel component for learner dashboard redesign #20306

amyyeung17 commented May 14, 2024

oppiabot bot commented May 14, 2024

oppiabot bot commented May 21, 2024

Nik-09 commented May 25, 2024

Nik-09 left a comment

Nik-09 May 29, 2024

amyyeung17 Jun 6, 2024

Nik-09 May 29, 2024

amyyeung17 Jun 6, 2024

Nik-09 May 29, 2024

amyyeung17 Jun 6, 2024

Nik-09 commented Jun 3, 2024

amyyeung17 commented Jun 3, 2024

Nik-09 commented Jun 4, 2024

amyyeung17 commented Jun 6, 2024

Nik-09 commented Jun 7, 2024

Nik-09 left a comment

oppiabot bot commented Jun 10, 2024

Fix part of #18384: Reusable carousel component for learner dashboard redesign #20306

Fix part of #18384: Reusable carousel component for learner dashboard redesign #20306

Conversation

amyyeung17 commented May 14, 2024

Overview

Essential Checklist

Proof that changes are correct

oppiabot bot commented May 14, 2024

oppiabot bot commented May 21, 2024

Nik-09 commented May 25, 2024

Nik-09 left a comment

Choose a reason for hiding this comment

Nik-09 May 29, 2024

Choose a reason for hiding this comment

amyyeung17 Jun 6, 2024

Choose a reason for hiding this comment

Nik-09 May 29, 2024

Choose a reason for hiding this comment

amyyeung17 Jun 6, 2024

Choose a reason for hiding this comment

Nik-09 May 29, 2024

Choose a reason for hiding this comment

amyyeung17 Jun 6, 2024

Choose a reason for hiding this comment

Nik-09 commented Jun 3, 2024

amyyeung17 commented Jun 3, 2024

Nik-09 commented Jun 4, 2024

amyyeung17 commented Jun 6, 2024

Nik-09 commented Jun 7, 2024

Nik-09 left a comment

Choose a reason for hiding this comment

oppiabot bot commented Jun 10, 2024