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.

Sign up for GitHub

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

Jump to bottom

[Feature Request]: Learner Dashboard Redesign #18384

Open
dchen97 opened this issue Jun 14, 2023 · 9 comments
Open

[Feature Request]: Learner Dashboard Redesign #18384

dchen97 opened this issue Jun 14, 2023 · 9 comments
Assignees
@amyyeung17
Labels
enhancement Label to indicate an issue is a feature/improvement Impact: High Blocks or significantly slows down a core workflow. Work: High It's not clear what the solution is; will need investigation.

Comments

@dchen97
Copy link
Contributor

dchen97 commented Jun 14, 2023

Is your feature request related to a problem? Please describe.

Our current learner dashboard architecture can be confusing to navigate and is inconsistent between mobile and desktop, which can only add to confusion.

Describe the solution you'd like

Redesign the learner dashboard information architecture so that users can more intuitively navigate it and find what they need.

Describe alternatives you've considered

No response

Additional context

Mocks
Primer
Design ticket
@dchen97 dchen97 added triage needed enhancement Label to indicate an issue is a feature/improvement labels Jun 14, 2023
@dchen97 dchen97 mentioned this issue Jun 14, 2023
Closed
@seanlip
Copy link
Member

seanlip commented Jun 15, 2023

(Tagging @juliafalarini as the design contact for this project so she can follow along. Also assigning to @SubhashThenua since he is working on this as part of GSoC.)

@Rijuta-s Rijuta-s added Impact: High Blocks or significantly slows down a core workflow. Work: High It's not clear what the solution is; will need investigation. labels Jun 16, 2023
@SubhashThenua SubhashThenua mentioned this issue Jun 22, 2023
Merged
4 tasks
@SubhashThenua SubhashThenua mentioned this issue Jun 29, 2023
Merged
5 tasks
@SubhashThenua SubhashThenua mentioned this issue Jul 6, 2023
Closed
5 tasks
@seanlip seanlip mentioned this issue Oct 29, 2023
Closed
@seanlip seanlip mentioned this issue Dec 22, 2023
Closed
@seanlip seanlip mentioned this issue Jan 26, 2024
Open
@amyyeung17
Copy link
Collaborator

@seanlip, thanks in advance! Here are the questions.

  1. I wanted to double-check if I understood everything in the features flag tutorial correctly. I should be enabling the SHOW_REDESIGNED_LEARNER_DASHBOARD flag for every subsequent PR, right?
  2. What would be the best way to break down the work and how do we want to track the progress? (ex. like each PR is for a component/feature such as sidebar menu, tabs, etc)

@seanlip
Copy link
Member

seanlip commented Jan 28, 2024 •
edited

@amyyeung17 Ah -- it looks like SHOW_REDESIGNED_LEARNER_DASHBOARD is already in the codebase. You don't need to add or enable that flag when submitting your changes (the flag should be disabled by default), but when testing them locally you should enable the flag so that you can play around with the feature. We'll only turn on the flag "for real" once the code is ready to release.

Note that when the flag is turned off, the existing experience should continue to show -- the new learner dashboard should only show up when the flag is turned on. (So you'd probably need some logic like: if flag is turned on, load component Y, else load component Z.)

I think a suggested rough high-level breakdown would be:

  • Overall page structure and layout (sidebar, switching tabs to home/goals/progress with corresponding URL changes, etc.)
  • Implement home page
  • Implement goals page
  • Implement progress page

This is sort of a "minimum" breakdown, feel free to break each of these down further into separate PRs if you like. Note that each PR should work on both desktop/mobile and that tests should be added with the PRs rather than in separate PRs after the fact.

Does this help? Feel free to let me know if you have more questions, thanks!

@amyyeung17
Copy link
Collaborator

@seanlip Yes, that was extremely helpful. Thank you so much for taking the time to give such an in-detailed answer.

Okay, so the flags are used in the way I kind of expected with the conditional loading, and the breakdowns make sense. I'll get started on the first one then!

@seanlip
Copy link
Member

seanlip commented Jan 30, 2024

Sounds good, thanks @amyyeung17! I'll assign you, don't hesitate to reach out if you have any questions :)

@hrshkshri
Copy link
Contributor

Hi @amyyeung17
Could you please provide me with an update on when you plan to open the PR?
Thanks!

@amyyeung17
Copy link
Collaborator

Hi @hrshkshri, I will be busy for the next couple of days so I can't give you a firm date yet. Apologies.

@amyyeung17 amyyeung17 mentioned this issue Feb 4, 2024
Merged
5 tasks
@amyyeung17
Copy link
Collaborator

amyyeung17 commented Feb 23, 2024 •
edited

@seanlip Here's the plan for now; I'll update as progress is made with dates and such.

  • Responsive layout for mobile & desktop, menu - PR Fix part of #18384: Menu and general layout for learner dashboard redesign #19674
  • Home
  • Progress (currently called the community-lessons tab)
  • RTL ~ approx. 6/20
    • Margin between content and sidebar
    • Carousel direction, margins of last card
  • Home 2 ~ approx. 6/27
    • Move save data from progress (community lessons)
    • Use I18N keys in-common from progress
    • Layout for lessons in-progress and recommended for you
    • Search bar
  • Learner groups (consolidate with home tab)
  • Goals
  • Go back (x - some might require finishing the entire implementation of new dashboard before possible)
    • Implement tags for generic card (after goals and learner-groups)
    • Rename community tab to progress - x
    • Prevent loading screen from occurring (which reloads community lessons) - x
    • Remove subscription & relevant e2e new progress tab - x
    • Rename learner-topic-summary - x
    • Remove obsolete code (files, classes, methods) - x
  • Extra Considerations - temporarily addressed with placeholders. May need to modify the backend.
    • Collections (affects all)
    • Canonical Stories (affects all)
    • Recommendations (affects home)
    • Sorting lessons by most recent (currently there's no way to distinguish between explorations & class topics)
    • Add & delete lessons from progress
    • Accessibility

@seanlip
Copy link
Member

seanlip commented Feb 25, 2024

Thanks @amyyeung17! Looks great, I'd just suggest adding the PRs to the list as you create them, for easy tracking. (I did that directly for the first checkbox, but just wanted to let you know.)

@seanlip seanlip mentioned this issue Feb 29, 2024
Open
10 tasks
github-merge-queue bot pushed a commit that referenced this issue Mar 16, 2024
@amyyeung17
Fix part of #18384: Menu and general layout for learner dashboard red…
7d0d2ba 
…esign (#19674)

* Rough functioning version of sidebar

* removed comment and fixed closing tags

* Fixed linting issues

* Added frontend testing

* Fixed width for breakpoints, added responsive heights, profile img

* Fixed profile picture and flag errors

* Fixed i18n

* Fixed I18n problem

* empty refresh commit

* refresh

* Updated class names and fixed sidebar buttons for mobile screen

* Updated class names, replaced icons, removed comments

* Fixed lint

* Prettier update
@amyyeung17 amyyeung17 mentioned this issue Mar 21, 2024
Merged
5 tasks
github-merge-queue bot pushed a commit that referenced this issue Apr 15, 2024
@amyyeung17
Fix part of #18384: Home tab and classroom topic cards, learner dashb…
259edab 
…oard redesign (#20012)

* Rough functioning version of sidebar

* removed comment and fixed closing tags

* Fixed linting issues

* Added frontend testing

* Fixed width for breakpoints, added responsive heights, profile img

* Rough edits

* Updated subheadings and style

* Updated card and text styling

* Updated home and classroom cards

* Merged updates from learner-dash-redesign

* Update

* Updated learner-topic-summary card styles

* Updated classes, i18n

* Fixed eslint errors

* Updated testing to include translate pipe

* Addressed comments

* Corrected routerlink

* fixed eslint error

* Added spaces to interpolation

* added spaces

* removed comments

* Removed extra comment

* Removed comment

* Removed comment

* retrigger checks
This was referenced Apr 18, 2024
Closed
Merged
github-merge-queue bot pushed a commit that referenced this issue May 13, 2024
@amyyeung17
Fix part of #18384: Reusable card component for learner dashboard red…
ecec43b 
…esign (#20185)

* Rough functioning version of sidebar

* removed comment and fixed closing tags

* Fixed linting issues

* Added frontend testing

* Fixed width for breakpoints, added responsive heights, profile img

* Rough edits

* Updated subheadings and style

* Updated card and text styling

* Updated home and classroom cards

* Merged updates from learner-dash-redesign

* Update

* Updated learner-topic-summary card styles

* Updated classes, i18n

* Fixed eslint errors

* Updated testing to include translate pipe

* Generic & topic available cards implemented - basic

Update with  most recent learner-dash-redesign-home commits

* Data handled in generic component instead of passing props

resolve conflicts

* Added comments and card

resolve conflicts

* Fixed links for cards

resolve conflicts

* added collections

Resolve conflicts

* Clean up

Resolve conflicts

* Updated i18n, styling, and card for collections

* test width

* Updated test cases

* Updated all test cases, removed community lessons form menu

* Fixed test cases

* resolved conflict

* corrected spelling

* resolved conflict for 883fca0

* removed comments

* Fixed Eslint

* Fixed errors

* Updated edge cases

* Fixed typescript

* Updated typescript

* Updated typescript

* Updated combined-tests-spec.ts

* Updated test coverage

* Updated test cases

* Update discrepency

* Updated fa-icon classes to fas

* Updated feature flag name and replaced div with ng-container

* Removed comments

* Replaced let with const, updated test case

* Fixed todo comment

* Fixed getStorySummaryThumbnailUrl

* Added image error handler

* Added test case for handleImageError

* Renamed test values

* Added progress bar library

* Removed getProgress and updated translation for button

* Added test cases

* Removed styling from home tab

* Updated tests

* Refactored ngoninit

* Fixed eslint error

* replaced with const and removed if statement

* Replaced with hardcoded

* Renamed node titles to more distinct names

* Replaced logic with values in tests

* Replaced logic with values in tests, removed providers

* Renamed setButtonText to getButtonTranslationKey

* Corrected comment

* Corrected function call in html

* Addressed comments

* Fixed ts error

* Fixed lint errors

* Replaced argument calls for functions

* Extracted api calls

* Updated getStorySummaryLessonUrl to match other implementation

* Fix typescript error

* Updated getStorySummaryLessonUrl to match other implementation

* Fixed typescript error

* TS

* Fix strict TS

* TS

* TS

* Fixed testcase node

* Rerun e2e
@amyyeung17 amyyeung17 mentioned this issue May 14, 2024
Open
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@amyyeung17 amyyeung17

Labels
enhancement Label to indicate an issue is a feature/improvement Impact: High Blocks or significantly slows down a core workflow. Work: High It's not clear what the solution is; will need investigation.
Projects
LaCE Quality Team
Status: In Progress
Milestone
No milestone
Development

No branches or pull requests
7 participants
@seanlip @dchen97 @amyyeung17 @Rijuta-s @SubhashThenua @hrshkshri @prafulbbandre