Edu hub page UI needs to be improved

[WhiteMinds]

The current page directly reuses the design of the old blog page. Now that the design for the Edu hub page itself has been completed at https://www.figma.com/file/NuMAXnrvH4SQVRJfuZhZVw/Nervos.org-R3?node-id=3477-33700&t=2uhU8RYPAPNY75jm-0, it needs to be implemented according to the design.

In addition, the Edu article page needs to fix the entire section above the article title, as shown in the following example:

[WhiteMinds]

Regarding the design draft for edu on https://www.figma.com/file/NuMAXnrvH4SQVRJfuZhZVw/Nervos.org-R3?type=design&node-id=3477-33699&t=gZ4tIWfEd98Pboq8-0, I have some questions:

1. How do we determine which articles are included in "Trending on CKB"? Does "Trending" refer to popularity? If it's based on popularity, can we still use specific tags to identify them, just like before?

2. How do we determine the order of articles in "Trending on CKB"? Are the most recent articles displayed first, or is there a manual sorting mechanism using markdown meta?

3. Are the tags in "Categories" fixed, or are they automatically collected from all articles? If they are not fixed, how do we handle situations with a large number of tags?

4. The pagination has been changed to "LOAD MORE." What happens when it is clicked? There are several possibilities:

• The article list is fully loaded, and clicking it will display all articles. Searching will also be done through local filtering.
  The implementation cost is low, but if the number of articles increases in the future and we still want to switch to dynamic loading, otherwise there may be issues with page loading speed.

• Clicking it will display the pagination and automatically jump to the second page.
  The implementation cost is low, and it has a minimal impact on the existing code structure. I am inclined towards this solution.

• Clicking it will load and append the next page of data, while still displaying a "LOAD MORE" button at the end.

• Clicking it will load and append the next page of data, entering an infinite scroll mode where the next page is automatically loaded as long as there is more data.

5. Should the image display area be fixed at a 250x140 ratio to prevent poor layout effects due to different image proportions?

@matt-nervos

[ahromland]

Hey guys,

Please check the latest mock-up - made a few tweaks: https://www.figma.com/file/NuMAXnrvH4SQVRJfuZhZVw/Nervos.org-R3?type=design&node-id=3477%3A33699&t=BII1YAH8rfsnPQlT-1

1. It would be based on popularity - either most viewed or liked. Can we have 6 to 8 in the carousel?

2. Yes, we can sort by the most recent articles. We can sort by most liked or views as well, but if 2 articles have the same views or likes, then it would sort by the most recent of those two

3. Yes, it’ll be fixed.

4. Can we change it to infinite scroll? So, it would keep loading up the thumbnails as you scroll down. And add a floating button that stays on the screen and takes you back top when clicked.

5. Yes, fixed ratio.

Additional item:

6. Article page: Can we have a functionality that magnifies when the user clicks on the image? It would be like a pop-up.

Let me know if any further questions!

[matt-nervos]

@WhiteMinds any questions outstanding on this?