Improve UX/UI for Roster List Shown when an Assignment is Accepted #2266
Conversation
|
I'm not sure if making the list wider solves the issue for long lists with over 20 names. (I feel bad for the person whose name starts with a Z.) Maybe add a way to search/auto-suggest to help hone in on their identifier? Also, I noticed that once I select an identifier, on the next screen it just says the following message:
It doesn't actually confirm the identifier you selected. What if you accidentally selected the wrong name? There's no way to confirm. And I actually couldn't figure out how to escape the screen in case I did select someone else's identifier by accident. Should I create another issue for this (in case it hasn't been documented already)? PS: Thank you sooo much for updating the custom classes to Primer! ❤️❤️❤️ |
|
@femmebot this PR was addressing an issue where the roster list took up very little space on large/high-resolution screens since it was frozen to 200px. I tried to find a middle-ground solution of allowing it to be longer on high-res screens without letting it be so long that you had to scroll extra to see the skip button. I also added the I definitely think there's a lot that could be done to improve the roster management experience from the student and teacher side. From our meeting today, it sounds like there is a larger conversation that's happening with product/design around roster management. Is there anything specific that should be included here as part of this PR? |
|
I've created a high-level issue for roster improvements(#2268), should I add this update to it? |
|
@shaunakpp if that issue is focused solely on the teacher side of things, no need to add this. If we want it to track all things roster, definitely add this in! If we go that route, I'd love to get some thoughts around student-side improvements like searching (rather than scrolling) to find a name. We should probably add something in for security as well (currently, everyone sees the entire list of unclaimed roster entries - it feels weird to provide an entire class list of names/emails/school ids/etc to the other students. I'm wondering if there's a way to show less without adding too much friction to the roster process. |
…ount with a roster entry.
| @@ -73,6 +73,9 @@ def success; end | |||
| def join_roster | |||
| super | |||
|
|
|||
| entry = organization.roster.roster_entries.find_by(user_id: current_user.id) | |||
| flash[:success] = "Your account is linked to #{entry.identifier} on the roster. If this is wrong, please reach out to your instructor." | |||
Closes #1882
The roster area was previously set to be 200px regardless of the screen size. This updates it to be a portion of the view height. There will still be some unused space on very large screens or screens with high resolutions. I'm open to suggestions for ways of handling that better with CSS.
Here's an example of the space it will take up at 50% zoom:
While I was in there, I also replaced a number of custom classes with Primer classes so we can benefit from the accessibility and responsiveness of Primer.
I also did some small look and feel updates to the roster list to make it more obvious which name you were about to select. We now highlight the row you're about to select when you hover over it!
And, I added a flash notice to indicate you were successfully linked on the roster. It indicates that you should reach out to the instructor if you connected with the wrong listing as there is not currently a way for a student to unlink on their own:
I've tested on Chrome, Safari and Firefox but all screenshots below are from Chrome.
Updated Screenshots
Updated Roster with One Student:
Updated Roster with Multiple Students:
Current Screenshots
Current Roster with One Student:
Current Roster with Multiple Students:
