search

tl-its-umich-edu / canvas-course-manager-next

Canvas Course Manager Next: A redesign of the existing CCM application. It extends Canvas features, makes cumbersome features easier to use, and adds new features.
8 stars 9 forks source link

Make alignment and breakpoints consistent across UI #352

Closed ssciolla closed 2 years ago

ssciolla commented 2 years ago

The UI currently has a few visual inconsistencies related to spacing and content alignment. For example:

On the home page, the breadcrumbs, course renaming, feature group title, and feature cards are not left aligned. For the most part, content on the feature pages is left aligned, so this leads to some horizontal jumping of content when clicking around.

Screen Shot 2022-02-23 at 11 12 27 AM

In "Merge Sections", the grid containing the two section lists extends into the left margin, again creating inconsistent alignment.

Screen Shot 2022-02-23 at 11 12 51 AM

There is also some inconsistent setting of breakpoints so that sometimes the entire width is used in lg viewports ("Merge Sections") and not in others (Add Non-UM Users). I don't think the full width needs to be used in many cases unless the viewport is md or smaller (maybe just sm or smaller).

Admittedly, these may be considered minor, cosmetic issues. However, I generally believe that small defects like this add up to the user feeling less confident in the tool. Also, it points to the need for more global setting of layout related values. Right now root container padding is set in several places, where this could be set in one using a wrapper component that allows for children.

I'll try to resolve all this in one PR.

melindakraft commented 2 years ago

alignment issues appear to be resolved.