oppia/oppia

[Feature Request]: Improve the lesson search and search bar navigation process

Open

#19763 opened on Feb 16, 2024

View on GitHub
 (39 comments) (0 reactions) (0 assignees)Python (5,292 stars) (3,534 forks)batch import
EUJ CL.2Impact: MediumWork: Lowenhancementfrontendgood first issue

Description

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

The core functionality of the search bar is to quickly find a specific lesson or category of lesson that is otherwise not easily browsable. Having multiple filters (language, category) on the search bar component makes it more confusing to use the core search feature, so we are planning to remove them.

Additionally, we want to make sure that the search bar on the classroom page entry point and the community library search bar match, in terms of both design and behaviour.

Describe the solution (or solutions) you'd like

Please see the Web/Mobile Hi-Fi Mocks Rev. 2 in this link: https://www.figma.com/file/jV6rP1PrpxSgMOPmA7Zkgr/Oppia-Lesson-Search-and-Search-Bar-Navigation-Pattern-Web-Mobile-Mocks?type=design&node-id=196-2275&mode=design&t=raphn03R6VzuzgP1-0

Key improvements include:

  • Adding breadcrumbs to the navbars of the affected pages (in accordance with https://github.com/oppia/design-team/issues/216)
  • Dropping filters from the search bar component
  • Updating the search results page to have the category and language menu options as filters instead.

Describe alternatives you've considered and rejected

No response

Additional context

This is filed based on https://github.com/oppia/design-team/issues/85. The design team's point of contact is @S4v8n, please contact him if you need any information about the proposed design.

Contributor guide

Tech stack
typescriptangularhtmlcss
Domain
frontendaccessibility
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
3-5 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
Angular basicsHTML/CSSUnderstanding of existing search component
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Review the Figma design for the search bar and lessons page (linked in the issue). Examine the existing search bar component and search results page in the codebase (likely under core/templates/...). Check comments for any maintainer guidance, especially from @S4v8n or the design team. Implement the changes as per the design, ensuring consistency between the classroom page and community library search bars.