Registry badges update

[bedroesb]

This part is a start to make the linking of tools to other registries more clear. The current look in the screenshot is not final and I need help in deciding what will be the text in the badge, and what will be the text when you hover over it.

Preview website

@lauportell @korbinib @martin-nc

TO DO:

• 1. bio.tools has a lowercase 'b' at the beginning. Of course that's not usual in a proper noun, but there we are.
• 2. I would make all the labels consistent, so they just name the resource: 'FAIRsharing', 'bio.tools' and 'TeSS'. Then when you hover over them you'd get: 'Find related policies and standards' (FAIRsharing), ' Find a scientific and technical description of the resource' (bio.tools) and 'Find training for this resource' (TeSS).
• 3. I'm not sure about the label colours. I wouldn't know which orange applied to which resource, and orange is a warm colour so it jumps out. I'd be worried it jumped out more than the actual resource/tool name! Maybe they should all be the same colour, but a cooler one. Would the link blue work as a background? Or the dark grey or dark blue we have in the style guide (with contrast reversed)?
• 4. I'd make the table heading sticky.
• 5. I find the hover state on the rows distracting. I think the table rows are big enough for you to understand which one you are on. Maybe that's just my taste, though.

[martin-nc]

Here are a few thoughts:

1. bio.tools has a lowercase 'b' at the beginning. Of course that's not usual in a proper noun, but there we are.
2. I would make all the labels consistent, so they just name the resource: 'FAIRsharing', 'bio.tools' and 'TeSS'. Then when you hover over them you'd get: 'Find related policies and standards' (FAIRsharing), ' Find a scientific and technical description of the resource' (bio.tools) and 'Find training for this resource' (TeSS).
3. I'm not sure about the label colours. I wouldn't know which orange applied to which resource, and orange is a warm colour so it jumps out. I'd be worried it jumped out more than the actual resource/tool name! Maybe they should all be the same colour, but a cooler one. Would the link blue work as a background? Or the dark grey or dark blue we have in the style guide (with contrast reversed)?
4. I'd make the table heading sticky.
5. I find the hover state on the rows distracting. I think the table rows are big enough for you to understand which one you are on. Maybe that's just my taste, though.

EDIT: another thought related to 2. Maybe there should be a key at the bottom of the table explaining what the 'Registry' column means. We could even have an asterisk next to the column heading, then at the bottom of the table put:

* Links to related information in ELIXIR registries: related policies and standards in FAIRsharing, scientific and technical descriptions of the resource in bio.tools, and related training in TeSS.

This would be good for mobile users and other who don't or can't hover. The names of the registries would be links, of course.

[bedroesb]

@martin-nc Thanks martin for the feedback, one thing I was wondering, we now have the info icon next the the Tool or resource column, can't we use the same to explain the registry column?

[martin-nc]

@bedroesb Yes, that's an idea. Do you mean instead of hovering over the registry name, or instead of a footnote, or instead of both?

The Tool or resource icon isn't in your screenshot, though, for some reason.

[bedroesb]

@martin-nc true because the table gets explained in the text above the all tools and resources page. The info icon only gets used in the tool tables on the other pages.

[bedroesb]

@martin-nc the sticky header doesn't seem to work in combination with overflow-x: auto; and the solutions are not straight forward

[lauportell]

Hi Bert, sorry I didn't say anything about this before. I agree with all Martin's suggetions and I think it looks very good right now. I don't think they need different colours and it is perfect that when you hover over you see the explaination of what you will find when you click. Thank you!!

[martin-nc]

@bedroesb Ah, okay - I don't think it's worth going to that length. Maybe leave them non-sticky for now.

[martin-nc]

Actually, I've just had another thought (sorry!). Would it look better to make the first column bold and decrease the font size of the description to .9em or so, just to decrease the length of the table and make the tool name stand out more? I guess something like (untested!):

td:nth-child(1) a {font-weight: bold;}
td:nth-child(2) {font-size: .9em;}

Anyway, it's just a thought.

[bedroesb]

I think it is an improvement, you can see the update in the preview. Thanks @martin-nc !