Article Preview Small Redesign

[tfnribeiro]

Since users have been confused about the Stats for an Article, I propose a small refactoring:

• Moved the feed + publishing time to the top close to the save articles, with a smaller font.
• Use the CEFR levels to display the difficulty of an article by using an Icon and the level.
• Use an estimate of minutes rather than number of words to display the length of an article.
• Added "..." to the end of article previews to safeguard against when we cut a word in the middle.
• Requires Backend Change: Show the Feed Name next to the icon in case we get sources with no icon or in general to allow users to see what's the source's name.

As we have a project soon to redesign this component of the app, I thought about suggesting these changes, but I understand if we just wait until we get a full redesign.

How it looks:

Desktop	Mobile

Current Look:

Desktop	Mobile

Different difficulty icons:

In the app:

Icons used:

A1 -> A2 -> B1 -> B2 -> C1 -> C2

With the Optional Backend change of showing Sources Name:

Desktop	Mobile

[netlify[bot]]

✅ Deploy Preview for voluble-nougat-015dd1 ready!

Name	Link
🔨 Latest commit	52adfac695a0a60d554485febe1335f189fc2f13
🔍 Latest deploy log	https://app.netlify.com/sites/voluble-nougat-015dd1/deploys/666967aa4906180008efeef4
😎 Deploy Preview	https://deploy-preview-394--voluble-nougat-015dd1.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[tfnribeiro]

Something I noticed for the Teacher Dashboard:

Current Look:

If the Teacher has too many classes the classes break:

This UI does not scale on the phone:

New Look:

It still doesn't scale to the phone:

[mircealungu]

Something I noticed for the Teacher Dashboard:

Current Look:

If the Teacher has too many classes the classes break:

This UI does not scale on the phone:

New Look:

It still doesn't scale to the phone:

Good catch with the teacher dashboard responsiveness... Let's nevertheless ignore it for now: there are too few teachers, and we don't know whether they even use the phone.

Is this ready to be merged?

[tfnribeiro]

Should be ready to merge, I refactored the two comments you made into their own components