Improve datatable display of volunteers on /supervisors page

[elasticspoon]

What type(s) of User Does This Feature Affect?

• supervisors
• admins

Description

We currently have the follow page for supervisors to look at their volunteers (/supervisors):

We would like to make some small-ish improvements to it.

Goals

As you can see in the screenshot 16 is shorter than 13. This is because the page makes calls to dynamically generated CSS classes

casa/app/javascript/src/dashboard.js

Line 342 in 8ce3a07

<span class="attempted-contact status-btn success-bg text-white pl-${activeContactVolunteers * 15} pr-${activeContactVolunteers * 15}">

. Those classes aren't always built (or maybe they got minified out). Regardless, using classes like that isn't a good idea.

Count of Transition Age youth does not belong in the "Volunteer Info" column. Lets combine this information with volunteer information instead. Maybe something like:

or the two rows could be overlaid on each other.

Completion Criteria

• Make the table elements scale correctly
• Consider what do to do if the element if large enough that it would go off the page
• Change the transition aged data to overlay the volunteer data or be on another row

How to Access the QA Site

Login Details:
Link to QA site

Login Emails:

• [email protected] view site as a volunteer
• [email protected] view site as a supervisor
• [email protected] view site as an admin
• [email protected] view site as an all casa admin
  • go to /all_casa_admins/sign_in

password for all users: 12345678

Questions? Join Slack!

We highly recommend that you join us in slack #casa channel to ask questions quickly. And discord for office hours (currently Tuesday 5-7pm Pacific), stakeholder news, and upcoming new issues.

[github-actions]

This issue has been open without changes for a long time! What's up?