Display ODR websites + emails under Roles and remove position title from profile header

[wrenaria]

Some users with multiple positions also have a website associated with each position and/or an alternate email address. In order to maintain context for these links, we will keep the role website and email colocated with the associated role. This necessitates a number of changes.

We need to:

• [x] Change the "Additional Roles" section to be titled "Roles"
• [x] Remove the position title currently used in the header for all users and add it to the top of the "Roles" list
• [x] Remove the "Contact" section from profiles and relocate the email to display under the associated role next to an envelope icon.
• [x] Add a wesbite icon and link to the URL associated with the position. Please strip out any http, www, or ending slashes in the front-facing URL display (it both looks nicer and is less text for a screenreader to read).

Icon Assets

For URLS, we use will the same icon from the design for the Website section (issue #220), which is also the same one campus uses on SiteFarm directories: Font Awesome network-wired; here is an SVG of the network-wired icon.

For email, we will use Font Awesome envelope; here is an SVG of the envelope icon.

Color for these icons #73ABDD.

Mockup of Design Changes

Example above uses Niels Jensen's information.

• Profile on sandbox
• ODR listing

[qjhart]

@sbagg There are two locations for website locations now. Each role, and have one associated URL, but then the websites section on the RHS can have multiple ones.

Role Emails / Websites

All of this data are in the vcard entries for the users. For example, in Niels case: the Person API call includes the emails, and links in the ODR sections of the vcard:

    "hasContactInfo": [
    ...,
        {
            "@id": "ucdrp:person/5b15a7d5e96cf0f89d475ba730e77c4b#vcard-odr-2",
            "familyName": "Jensen",
            "givenName": "Niels",
            "hasEmail": {
                "@id": "ucdrp:person/5b15a7d5e96cf0f89d475ba730e77c4b#vcard-odr-2-email",
                "@type": "vcard:Email",
                "email": "ngjensen@math.ucdavis.edu"
            },
            "hasURL": {
                "@id": "ucdrp:person/5b15a7d5e96cf0f89d475ba730e77c4b#vcard-odr-2-url",
                "url": "https://www.math.ucdavis.edu/research/profiles/ngjensen"
            },
            "identifier": "odr-2",
            "middleName": "Gronbech",
            "organization": "Mathematics",
            "title": "Professor",
            "vivo:rank": 2
        },
        {
            "@id": "ucdrp:person/5b15a7d5e96cf0f89d475ba730e77c4b#vcard-odr-1",
            "familyName": "Jensen",
            "givenName": "Niels",
            "hasEmail": {
                "@id": "ucdrp:person/5b15a7d5e96cf0f89d475ba730e77c4b#vcard-odr-1-email",
                "@type": "vcard:Email",
                "email": "ngjensen@ucdavis.edu"
            },
            "hasURL": {
                "@id": "ucdrp:person/5b15a7d5e96cf0f89d475ba730e77c4b#vcard-odr-1-url",
                "url": "http://faculty.engineering.ucdavis.edu/jensen/"
            },
            "identifier": "odr-1",
            "middleName": "Gronbech",
            "organization": "Mech & Aero Engr",
            "title": "Professor",
            "vivo:rank": 1
        }
    ],

RHS websites

Now, for the RHS websites. These data are found in the VCARD link that is associated with the OAP vcard. Let's look at quinn's Person API

    "hasContactInfo": [
...        {
            "@id": "ucdrp:person/f9ef1e530c617cd598171497b4a49e82#vcard-oap-1",
            "experts:identifier": "oap-1",
            "familyName": "Hart",
            "givenName": "Quinn",
            "hasEmail": {
                "@id": "ucdrp:person/f9ef1e530c617cd598171497b4a49e82#vcard-oap-1-email-f7f04c510197b3b5f5763bf9e891b3f8",
                "@type": [
                    "vcard:Work",
                    "vcard:Email"
                ],
                "email": "qjhart@ucdavis.edu"
            },
            "hasURL": [
                {
                    "@id": "ucdrp:person/f9ef1e530c617cd598171497b4a49e82#vcard-oap-1-web-1",
                    "url": "http://id.worldcat.org/fast/917080"
                },
                {
                    "@id": "ucdrp:person/f9ef1e530c617cd598171497b4a49e82#vcard-oap-1-web-0",
                    "url": "https://scholar.google.com/citations?user=Od5weOkAAAAJ&hl=en&oi=ao"
                }
            ],
            "vivo:rank": 20
        },
...
    ],

These links need to go on the RHS, located with the identifier tags. You find this link, by searching for the experts:identifier: "oap-1" part of the vcard.

[Vensberg]

Most of it looks good to me. In this case https://dev.experts.ucdavis.edu/person/ae63d3a620682adb8440914428e50c33, the two roles use the same email. @wrenaria, in those cases do you want the email to appear twice? This question doesn't have to resolve for this release to be completed. If the answer is "no", but everything else looks good, let's open a different issue, and close this one.

[wrenaria]

I think we have to keep both email locations even though it's redundant in this case. If a person has 3 roles, for example, and two use the same email but a third uses a different one, that would need to be clear.

These roles are positioned too closely together though. It's looks like one entry, not two separate entries. They should have the same space between them as you see between Publications below so that they are more easily differentiated as two separate role entries.

[Vensberg]

I don't see the spacing between roles that Kimmy requested.

[sbagg]

All of this is on branch that is not pulled in yet into dev just running through the checks. I will move it back and over again when the branch is pulled through