modify RDM's published record landing page to include contributors roles, and jazz up somewhat

[zguillen]

Here's a landing page in prod: https://data.msdlive.org/records/643yd-zxa04

The add creator modal in the deposit page has a role drop down:

This task is to propose a layout change to the landing page's lit of creators so that their role on the record is also displayed. Then once we agree on how to display it, you'll need to implement adding the role to the landing page jinja template.

To do this from your container copy this file: /usr/local/lib/python3.9/site-packages/invenio_app_rdm/records_ui/templates/semantic-ui/invenio_app_rdm/records/details/creatibutors.html to: /opt/invenio/msdlive-rdm-app/templates/semantic-ui/invenio_app_rdm/records/details

Surround any changes you make in that file with MSD-LIVE BEGIN and END comments

[jugovimm]

Created a mockup for what adding contributor roles could look like. The mockup has the following positive features:

1. One line per contributor; makes the separation between contributors clearer and the list easier to read since its on multiple lines
2. Affiliations always shown; makes connection between superscript and affiliation clearer to the user, user can connect contributor with affiliation more easily
3. Includes contributor role; meets ticket requirement
4. Otherwise maintains previous info; includes contributor names, their affiliation, ORCID id

Potential changes:

1. Include a dropdown caret or button to the right of contributors and/or affiliations, which users can click to see such information

[zguillen]

I like it! @clansing @cdburley what do you two think?

Oh, a thought just occurred to me...wonder what the max number of contributors is and if that gets big this new layout will push description down as the number grows :/ which is probably more important to end users viewing the landing page than the contributors.

[jugovimm]

@zguillen New draft, let me know your thoughts

Some constraints:

1. We want to reduce the amount of vertical space that contributors take up; I resolved this by continuing the practice of displaying the list of contributors across a line (and onto a new line if the full possible width is used), but also drafting out a mockup that would hide the contributor roles behind a button click, like we currently do for affiliations
2. Contributors may have more than one role, which we will need to display. Thus we do want one user per line, as shown in the contributor role dropdown, but again, which is hidden behind a click and thus will not move the description down so far unless the user explicitly wants that

Some notes:

1. I vertically centered the two buttons in the mockup. We may only want to do this if the number of lines of contributors is 1-2
2. I think indenting any 2nd or further line of contributors would be a good practice, just to have the first contributor stand out
3. Not sure if I prefer affiliations above roles, or the other way around; either choice, I think whatever is above should have their button to the left of the other
4. We can get more horizontal space for contributor names by changing the role button to not include the text "contributor" on it