Customise CSS, header and footer e.g. for IDR

[will-moore]

Do we need unique styling for IDR, different from the vanilla Gallery? For header and footer, do we simply want to be able to add links, as in the webclient TOP_LINKS or more complex html injection? Logo etc?

[manics]

Could you provide a config option to set an css override file? Would it be easier to have the IDR create its own downstream app that inherits from gallery and modifies django templates blocks? Is there a way to override django template templates in an existing app, e.g. by passing an additional template dir with custom files?

[will-moore]

Providing a config option to add a css file should be doable. I think we will probably move to using Aurelia which compiles all it's html templates into JavaScript at build / install time. So I'm not sure how easy it is to allow injection of custom HTML after that. However, we could probably leave the Header (and footer) outside of the Aurelia app and they could be built via Django.

[joshmoore]

Some header/footer feedback based on the current deployment:

... snip ...

• The three IDRs beside each other in the menu is sub-optimal.
  • If we definitely want to keep the text, can we try the "About us" (perhaps just as "About") first?
  • if we can try something different:
    • Could the "IDR" be a drop down to show the two?
    • or reduce the text to just "Cell" and "Tissue"?
• Is there any way to make it clear that one is on e.g. "Cell IDR", i.e. highlighted menu?
• Not directly related to the Cell/Tissue work, but since the header is now fuller, I could see moving "Analysis" and "Deployment" into the "About" menu, making "Submission" more prominent.
• "Welcome to IDR" doesn't do much for me as this now stands
  • I could see dropping it.
  • Alternatively, a larger banner (with the previous background) would be good if it would auto-shrink.
  • Or perhaps a sidebar? (That's collapsible?)
  • Or perhaps increase the whitespace (cF. https://www.ebi.ac.uk/chembl/, https://www.ebi.ac.uk/gxa/home)
• Similarly for the footer:
  • if we definitely want it on the main landing page, can it be white at width=100%
  • if something else is possible, a bar more like the header might be better.

[will-moore]

@joshmoore Thanks for the points. I think we need to discuss a bit:

• I think "Cell-IDR" and "Tissue-IDR" need to be kept as they are since they are terms coming from EBI. Also, those links are coming from the same config used to generate the Orange button links.
• To reduce clutter on the header, maybe we move "About" to the right (and move Analysis and Deployment into it as you suggest). Any change we make here has to be duplicated on https://github.com/IDR/idr.openmicroscopy.org/pull/55
• Not sure what you mean by "auto-shrink" background?
• I think we need some page title like "Welcome to IDR". The current IDR simply has "Image Data Resource" here and the 'Welcome...' in the subheading, but the /cell and /tissue pages have "Welcome to Cell-IDR" etc so you know where you are. I don't think "Cell-Image Data Resource" works so well.
• Footer fixed in https://github.com/ome/omero-gallery/pull/35/commits/5b8a9f2421ead75d84e1230baff6c91ecc8b26b8

[will-moore]

Updated header links in https://github.com/ome/omero-gallery/pull/35/commits/120d11b0d595cfc5813f053d5430f685dbcfe26e and https://github.com/IDR/idr.openmicroscopy.org/pull/55/commits/62bc2e09d06f09d4efe274034aa014305a27cf56

[joshmoore]

since they are terms coming from EBI

I imagine that's true. And a drop down?

Not sure what you mean by "auto-shrink" background?

Something like:

• https://www.w3schools.com/howto/howto_js_shrink_header_scroll.asp
• https://codepen.io/tomdurkin/pen/nvAjd

I think we need some page title like "Welcome to IDR".

Hmm... for the very first visit, it makes good sense. But afterwards, it find it a distraction.

[will-moore]

Having a page change after the first visit is a bit unusual. Never see the front page the same again after your first visit? Do this via cookies? We could remove the title from the /search pages, which is where you spend most time. Although we'd need to find some other way to know if you're in 'Cell-IDR' or 'Tissue-IDR'. Highlighting the current link in the header might help (if they're not in a drop-down menu) but I'm not sure if that's enough.