improvements to Instructor Tools

[Alex-Jordan]

This makes changes to Instructor Tools. Also it makes changes to scrollingRecordList which is used by Instructor Tools, and also by the Assigner Tool, Email, Hardcopy, and Past Answer pages. So testing should look at all five pages.

There are cosmetic changes that could be better. I won't describe them here; feel free to make suggestions for improving anything cosmetic. The functional improvements are:

• The sort options are only ones that make sense for the available display formats.
• There are now three format options for displaying sets. (There was only one before.) The two I added might not be best, but it's clear how to change them or add more. Note: the new format methods for sets include displaying the set's due date. This calls on formatDateTime and presently generates an error message. But #2263 will make that go away.
• Previously there were no filter options for sets. Now you can filter by type (e.g. "Proctored Test") and you can filter by Visible/NotVisible. Note that you have to have at least two types to see those filtering options. And you have to have both visible and not visible sets present to see those filtering options.
• I tried to make the functionality of all buttons more clear with changes to the wording.
• "Statistics for one user" is a silly thing, that is really just "Progress for one user". So I removed "Statistics for one user".
• If you are using this to add new users, you can choose ahead of time how many you want to add. Previously it was fixedat 5.
• Previously there was a button to take you to the Set Detail page for a set, and a separate button to take you to the Set Detail page for a set but with some subset of users selected. I combined these into one button. De-select all users if you want the regular Set Detail page.

A screenshot of what to expect:

[somiaj]

I think the words are better than symbols. Though you could use the logic equivalent of "And" / "Or", though I don't think that would be as clear (just shorter).

Personally I would adjust the css so the column that has the labels is large enough it won't wrap (though unsure the best way to do this). In almost all cases on the narrow screens in my testing there is still plenty of space in the other column that could be used to avoid wrapping.

[somiaj]

I also think adding a small description of the options in the help for the page would be useful.

[Alex-Jordan]

The width of those regions is discretely sized with bootstrap grid columns. Here is what it looks like (on the left) if I bump it up to the next possibility:

I like the idea to change the wording to "AND" and "OR". I'll wait to see if more people want to give input.

[somiaj]

Adding text-nowrap to the div that contains the button / label, keeps wrapping from happening, but then it does get to small in some cases. I also tried switching from col-2 / col-10, to col-3 / col-9, and this mostly works (there is a small point right before the smallest break point that this causes a small issue, and on larger widths there is to much white space, but we could also configure the column size based on break points, so smaller break points swap to col-3 / col-9, but use the current setup for the larger breakpoints.

[somiaj]

Note there is already an issue right before the smallest break point before this change where the end of Sort By: and Format: are getting cutoff, but I don't know css/bootstrap well enough to have any suggestions other than just playing around.

[somiaj]

Here is another possible layout suggestion:

[drgrice1]

Instead of trying to squeeze the intersection and union radio buttons to the left, where it is really never going to fit, just put it in a horizontal format below the filter select (sort of as @somiaj suggested, but leave the filter label to the left as it is).

[drgrice1]

Also, you have the problem that came up before with the current structure of the grid layout also. There are elements with col classes that are not direct descendants of row divs.

[drgrice1]

I added another pull request that implements the suggestions I made in the last few comments.

[Alex-Jordan]

There is now one little cosmetic thing that @somiaj found. If you make the screen narrow so that the main content is a little over 500px wide, you don't have space for some words: "Sort By:", "Format:", and "Filter(s):".

[drgrice1]

There is now one little cosmetic thing that @somiaj found. If you make the screen narrow so that the main content is a little over 500px wide, you don't have space for some words: "Sort By:", "Format:", and "Filter(s):".

Yeah, that was that way before though. Although before it wasn't quite as bad, and only really affected "Format". This only happens right at the cut of from the md to the sm break point (assuming you have the site nav open), and if you make the window really narrow below the sm breakpoint. The latter case is not really concerning. Even on a mobile device with really the narrowest layout that I think can validly be supported it fits fine. It is not to bad right at the cut of from md to sm either. So I don't think that this is to big of a deal.

Also, I think that @somiaj is right that comments in the help files might be a good idea for the union/intersect radios. Unfortunately, that will need to be added to all of the pages that use the scrolling record list. Or perhaps you could create a separate template help file for scrolling record lists, and include that in the help files that use it.

[drgrice1]

One option would be to drop the horizontal layout when you are below the lg breakpoint. That would fix that issue entirely, but would make the scrolling record list longer.

[drgrice1]

I added a pull request that drops out of the horizontal layout below the lg break point so you can try that out.

[drgrice1]

It is to bad that there is not a css media query that applies to container width instead of window width, because things are quite different in the range from the md to the lg breakpoints when the site nav is open and when it is not.

[drgrice1]

I further tweaked the pull request so it only changes between the md and lg breakpoints. Below the md and above the lg breakpoints the labels are to the left.

[drgrice1]

There is something else that I missed with the union/intersect radio button labels. The font sizes for those are a bit larger than the other labels. This is because the others use the col-form-label-sm class. There is not sm variant for form-check-labels. However, there is a math4.scss class that I created to accommodate this that gives the same font size. It is font-sm. So you might want to add that class to those labels.

[drgrice1]

I added the font-sm to the pull request. Here is a screen shot of what it looks like:

[Alex-Jordan]

Also, I think that @somiaj is right that comments in the help files might be a good idea for the union/intersect radios. Unfortunately, that will need to be added to all of the pages that use the scrolling record list. Or perhaps you could create a separate template help file for scrolling record lists, and include that in the help files that use it.

I added these. I did it in each place. The scrolling record list is not used consistently (sometimes it's only used for users, sometimes it is used for users and sets) and because of that it seems like it could get awkward to word things well in a uniform way in some common template.

[Alex-Jordan]

OK, unless I forgot about something, I think this is ready for last looks.

[Alex-Jordan]

There is an indentation issue in three of the help files. Probably a cut and paste issue.

Fixed now. Searching for ^, I found a few unrelated instances among the template files as well.

[drgrice1]

Yeah, I try to do that on occasion. I want to keep the template code clean, because there is nothing like perltidy for those files to help with formatting the template code.