search

WikiEducationFoundation / WikiEduDashboard

Wiki Education Foundation's Wikipedia course dashboard system
https://dashboard.wikiedu.org
MIT License
388 stars 626 forks source link

On the P&E Dashboard "Articles" tab of a Program add informative text to the "See more" button on hover #5569

Open Ibom99 opened 9 months ago

Ibom99 commented 9 months ago

Current Behavior:

Currently on the Dashboard before a user can see or navigate through large sets of articles available in a program using pagination, the "See more" button needs to be selected before the pagination reflects the following number of subset articles (500 more articles). After the subset of 500 articles is reflected in the pagination and the user still wants to navigate through more articles, they need to select the "See more" button again, before the pagination reflects the next set of articles and so on till all articles have loaded (the "See more" button disappears, once the full set of articles have loaded) and are reflected in the pagination.

Desired Behavior:

On the "Articles" tab of a program the "See more" button on hover should have informative text, informing the user of the relationship between the button and the pagination beside it reflecting more loaded articles. POSSIBLE INFORMATIVE TEXT ="Click "See more" to load the next subset of 500 articles and continue the seamless navigation through the articles with the pagination on the left."

Additional context:

Screenshot (88)

In the image below the "See more" button has been clicked on. The pagination range on the left increases and the numbers under the "See more" button increase as well. This shows that the next subset of articles have loaded and the pagination on the left reflects the loaded subset of articles.

Screenshot (89)

Ibom99 commented 9 months ago

Hi @ragesoss @Aminehassou what file in the codebase can this feature be implemented?

ragesoss commented 9 months ago

@Ibom99 the 'Articles Edited' view is from the ArticleList component (article_list.jsx), and the pagination UI is the PaginatedArticleControls component (PaginatedArticleControls.jsx) within the list component.

MrBlackGhostt commented 9 months ago

@Ibom99 i want to contribute on this can i work on it

PR4NJ41 commented 8 months ago

@ragesoss I want to work on this issue

PR4NJ41 commented 8 months ago

@ragesoss I have implemented the hover on see more button. If it looks fine to you, Can I raise a PR ??

image

ragesoss commented 8 months ago

Sure. I think the text will need some changes, but if you open a PR that will make it easy to discuss the wording.

PR4NJ41 commented 8 months ago

@ragesoss I have created the PR. Please review it. Thank You!