ember-learn/deprecation-app

Improve readability of deprecation lists?

bertdeblock opened this issue · 5 comments

At the moment deprecations are visually listed like so:
Screenshot 2020-11-18 at 18 00 06

I think readability can be improved by simply re-adding the bullets:
Screenshot 2020-11-18 at 18 00 33

If you guys think this is useful, I could issue a PR if someone lets me know how it should look like visually.

Hi, @bertdeblock. Thanks for suggesting the idea of adding bullets to the list. I think adding bullets does help with improving readability.

It looks like we can modify line 14:

<ul aria-labelledby={{this.id}} class="level-3 list-unstyled">

Maybe write class="p-0" instead, which will add bullets and (re)set padding to 0. (Not sure why level-3 class was needed.) However, it seems we need to apply word-break as well?

Screen Shot 2020-11-18 at 12 35 41 PM

You may want to investigate if there's a built-in class (from ember-styleguide or an existing stylesheet in app/styles) that will apply word-break: break-word;. If not, I think we could create a CSS class in the app.

I hope this made sense. If you have questions or would like clarification, please feel free to ask!

This also sounds great, thanks @bertdeblock! I just want to make sure we're okay with taking the time to make the changes given that the website redesign strike team may adjust the UI of this sidebar entirely in the near'ish future.

I personally still think it is worth making these changes because we don't know when the redesign efforts touch the deprecations app.

Coolio, I'll create a PR later today and you guys can still decide if you want it merged or not. Another option would be to add some space between the list items?

Example:
Screenshot 2020-11-19 at 08 18 16

I think that's also pretty clear and looks a bit "calmer" compared to the bullets?

@bertdeblock Feel free to try the 3 combinations (bullets only, margins only, or both) and decide what you liked. 👍

As a temporary solution to design, bullets have been used in upgrade-guide and whats-new-in-emberland. (In case you didn't feel comfortable with adding bullets and might have wanted a precedence.)

Addressed by #717