ebiwd / EBI-Framework

The EMBL-EBI Visual Framework for websites and services.
https://www.ebi.ac.uk/style-lab/websites/
19 stars 16 forks source link

Elixir logo in Drupal site #126

Closed ebiwd-jros closed 6 years ago

ebiwd-jros commented 6 years ago

On 02/03/2018 13:08, Jag Kandasamy wrote:

Hi Joseph,

We need to add Elixir CDR logo like array express in our EGA website which is a drupal site https://www.ebi.ac.uk/arrayexpress/browse.html Is it possible to add via EBI visual framework drupal theme?

Thanks, Jag

ebiwd-jros commented 6 years ago

from @khawkins98

If we wanted to be fancy we could add this as a theme option, that shouldn’t be too hard but would take a half day or so. (as we need not only a tickbox to turn on, but to specify any options: colour, CDR logo, text) and we’d want to specify applicable paths/urls

ebiwd-jros commented 6 years ago

Testing the Elixir Affiliation feature in the EBI Frameworl Drupal Theme on my local. We need to agree on what parts are configurable and on what the defaults should be

khawkins98 commented 6 years ago

You mean as configurable through the theme settings?

If so, we could mirror the option set that is passed through the HTML:

data-color="blue" (orange, grey, blue, green, none) data-use-cdr-logo="true" (true, false) data-name="This service" (string) data-description="I am a super cool service" (string) data-more-information-link="https://www.elixir-europe.org/about-us/who-we-are/nodes/embl-ebi" (string) data-use-basic-styles="true" (true, false)

ebiwd-jros commented 6 years ago

@khawkins98: to reference the elixirBanner.js, should we default it to 1.3 and make it configurable? Should it be a select with options? Free text?

peter-walter commented 6 years ago

I personally don't think we need to over-engineer this, as there is limited usage within drupal and where it is required is a one-time setup.

I think the easiest thing might be to provide a new region in the theme so that we can place a block outside of the 'row' to get the full width background.

khawkins98 commented 6 years ago

Yeah, I'd probably lean towards @pwalter-ebi 's thinking. The ELIXIR banner is fairly new and could still change some. Plus just using a block might allow use to insert other future things there.

And we have some regions that we need to drop -- as they don't fit our usage (these get wrapped in .medium-3): image

We should also add a local footer region.

So maybe we add:

  1. local_footer Normally behaving local footer.
  2. local_footer_expanded Local footer after local_footer, but not encased in .row
khawkins98 commented 6 years ago

Updating this ticket.

Thanks to @ebiwd-jros, you can add the ELIXIR banner to any site that doesn't easily allow placement of the banner (including some Drupal configurations):

jQuery("<div id='elixir-banner' data-color='grey' data-name='This service' data-description=' am a super cool service' data-more-information-link='https://www.elixir-europe.org/about-us/who-we-are/nodes/embl-ebi' data-use-basic-styles='true'></div> <script defer='defer' src='https://ebi.emblstatic.net/web_guidelines/EBI-Framework/v1.3/js/elixirBanner.js'></script>").insertBefore('#global-footer');

This particular implementation uses jQuery, but it could be easily adapted to vanilla JS.

The method has been noted at https://www.ebi.ac.uk/style-lab/websites/patterns/banner-elixir.html

In the coming weeks/months there may also be a more specific Drupal solution, but this is currently backlogged.

Closing for now -- please reopen if you have a relevant question/idea.