Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Resource discovery: Implement resource card #12319

Closed
9 tasks done
MisRob opened this issue Jun 19, 2024 · 4 comments
Closed
9 tasks done

Resource discovery: Implement resource card #12319

MisRob opened this issue Jun 19, 2024 · 4 comments
Assignees

Comments

@MisRob
Copy link
Member

MisRob commented Jun 19, 2024

Blocked by

Summary

In support of coach resource discovery we need to implement a new resource card. This will be one of the first cards in Kolibri built on top of KCard.

The final card is expected to look like:

Screenshot from 2024-06-18 20-41-15

It needs to show

  • Resource title
  • Resource description
  • Metadata
  • Resource thumbnail picture
  • Resource thumbnail placeholder when picture is not available. The placeholder icon corresponds to learning activity type of the resource.
  • Bookmark button icon (only emits event on click)
  • Info button (only emits event on click)

References

Guidance

  • Create a completely new component <AccessibleResourceCard> and use <KCard> at its basis
  • Regarding the structure of production data that the card should display, examine existing resource cards in the Library and also see useSearch composable. In the scope of this issue, assume that data for the new card will have the same structure.
  • For the purpose of development and review, display the new card at any place in Kolibri and remove the preview shortly before the final merge. It may be handy to work on the Library page because it has access to all data.
  • Even though any of the existing cards shouldn’t be changed, they may contain some useful pieces of code for the new card so it’s recommended to examine them (see ResourceCard.vue when contentNode.is_leaf is truthy, LearningActivityIcon.vue, LearningActivityLabel.vue, ...)
  • It is possible that KCard will need further updates to support all Kolibri cards. If there’s something that KCard doesn’t support yet, discuss with relevant people and determine next steps.

Out of scope

  • Metadata pills
  • Anything grid related (this includes card’s min and max width which will be grid’s responsibility, as well as checkboxes)
  • Refactoring existing card components in Kolibri
  • Implementing other parts of the coach resource discovery such as the side panel where cards will be displayed
  • ‘Bookmark’ and ‘info’ fully functioning

Acceptance criteria

  • The card is built on top of the KCard and contains elements listed above
  • It supports all possible modes (e.g. for all various learning activities that a resource can have)
  • It follows the designs closely (or discrepancies get discussed)
  • It content tolerant (renders well for short strings, long strings, missing information, missing thumbnail picture, etc.)
  • It is responsive
  • It supports RTL (note that KCard will be responsible for basic layout RTL support, but some additional tweaks may be needed for content that is provided to it via slots etc.)
  • It is ready to receive production data, meaning it doesn’t use hardcoded data inside the card but rather receives data from outside like it would in the final feature, for example in the form of an object passed via prop (or any other relevant manner)
  • For the purpose of preview and QA, please include at least a couple of <AccessibleResourceCard>'s in <ul> and feed them with data that have same structure as production data and enough variance (see content tolerance criteria). Demonstrate all learning activities.
  • If some components used in the current cards are re-used in this new card and tweaked for the purpose, there are no regressions in the old cards
@Spoorthy1423
Copy link

Hey!! I would like to work on this issue @MisRob please assign me this issue!!

@MisRob
Copy link
Member Author

MisRob commented Aug 23, 2024

Hi @Spoorthy1423, thanks for volunteering. This issue is not available for assignment.

There are contributing opportunities in three repositories. See the contributing guidelines including links to issues suitable for contribution for each repository below. I would ask you to read the contributing guidelines at first and volunteer for one issue at a time.

You can also see the list of unassigned "help wanted" or "good first issue" issues across all repositories.

@MisRob
Copy link
Member Author

MisRob commented Aug 28, 2024

WIP in #12418

@AllanOXDi
Copy link
Member

completed in #12418

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants