1094 reorganize featured variables

[chowington]

Resolves #1094

New version in context:

[dmfalke]

The code looks good, but I'm not able to test since the data isn't currently available. I will try again over the weekend or on Monday.

[bobular]

I thought because qa.clinepidb.org was up (qa.vectorbase.org has been down for a few days), I'd be able to test, but it seems that no studies are available on the qa back end :-(

[dmfalke]

I was able to play with this a little, using the prod site as a backend. I think it might look a little better if the entity names were indented to the same level as the variable names... and then indent the variable names by another space. I would also use semantic tags for the entity names and replace the <span> with <h4>. It will require some additional styling to make it work in this context.

[bobular]

Looking at this now! I know it's out of the remit of this ticket but we have some serious entity diagram label overflow going on.

[dmfalke]

Looking at this now! I know it's out of the remit of this ticket but we have some serious entity diagram label overflow going on.

Perhaps we can make the width of the boxes based on the longest entity name, on a per-study basis.

[bobular]

All the nuts and bolts look good.
As for styling, I don't think indenting more is a great use of space. I'd probably remove the 🔻 and show/hide from the "Featured variables" heading (but make that stronger?)

Probably not best to rely on my design skills though!

As for the semantic headings, maybe it should be nested <ul>s like the main variable tree?

Either way, I'd be happy for this to go out!

[dmfalke]

As for the semantic headings, maybe it should be nested <ul>s like the main variable tree?

That's fine, too. I'm also okay with keep the indentation as-is.