Common tile layout

[tschaka1904]

In the new complex-portal, we have a tile-menu at the front page:

Would it be worth to think of a common style? I've seen this one on the services site:

Which looks nice on a small scale, but I'm not sure for a bigger menu. Also, even if I hate it, it might be worth to discuss colours for the different tile type.

[khawkins98]

So, there's the "Button Grid" pattern at https://ebiwd.github.io/EBI-Pattern-library/patterns/button-grid/

But, you're right: we also need to develop a pattern variant for "large" button grids.

I've made a first version using the Button Grid pattern and adjust the spacing: https://ebiwd.github.io/EBI-Pattern-library/patterns/button-grid/

And the code for it:

<div class="row button-grid" data-equalizer data-equalize-on="medium" id="large-button-grid">
  <div class="column medium-3 small-6 text-center padding-bottom-large"> <a class="button medium-12 columns" data-equalizer-watch href="#"><h3 class="icon icon-functional white-color" data-icon="="></h3> <h5 class="white-color">Download</h5></a></div>
  <div class="column medium-3 small-6 text-center padding-bottom-large"> <a class="button medium-12 columns" data-equalizer-watch href="#"><h3 class="icon icon-species white-color" data-icon="H"></h3> <h5 class="white-color">Organisims</h5></a></div>
  <div class="column medium-3 small-6 text-center padding-bottom-large"> <a class="button medium-12 columns" data-equalizer-watch href="#"><h3 class="icon icon-conceptual white-color" data-icon="o"></h3> <h5 class="white-color">Ontologies</h5></a></div>
  <div class="column medium-3 small-6 text-center padding-bottom-large"> <a class="button medium-12 columns" data-equalizer-watch href="#"><h3 class="icon icon-conceptual white-color" data-icon="o"></h3> <h5 class="white-color">Pathways</h5></a></div>
  <div class="column medium-3 small-6 text-center padding-bottom-large"> <a class="button medium-12 columns training-background" data-equalizer-watch href="#"><h3 class="icon icon-generic white-color" data-icon="\"></h3> <h5 class="white-color">Request<br/>Complex</h5></a></div>
  <div class="column medium-3 small-6 text-center padding-bottom-large"> <a class="button medium-12 columns industry-background" data-equalizer-watch href="#"><h3 class="icon icon-generic white-color" data-icon="t"></h3> <h5 class="white-color">Training</h5></a></div>
  <div class="column medium-3 small-6 text-center padding-bottom-large"> <a class="button medium-12 columns industry-background" data-equalizer-watch href="#"><h3 class="icon icon-generic white-color" data-icon="?"></h3> <h5 class="white-color">Documentation</h5></a></div>
  <div class="column medium-3 small-6 text-center padding-bottom-large"> <a class="button medium-12 columns industry-background" data-equalizer-watch href="#"><h3 class="icon icon-generic white-color" data-icon="P"></h3> <h5 class="white-color">Citation</h5></a></div>
</div>

[tschaka1904]

Looks nice! Thanks for looking into it! 👍

[tschaka1904]

Can we change the colour the tile changes to when we hover it? Right now it is turning always into a greenish kind of colour.

• Don't be surprised by the grey icons of the lower row. Thats a problem we have with one of our third party libs we need to solve.

[khawkins98]

Yeah, it's a thing that I've been meaning to address.

Eventually it will show up in the main source, but in the meantime, if your code structure is like:

<a href="#" class="button industry-background">

Then add this chunk of CSS to your styling somewhere:

.button.ebi-background:hover { background: #007c82; }
.button.services-background:hover { background: #389198; }
.button.research-background:hover { background: #6dab49; }
.button.training-background:hover { background: #e9b400; }
.button.industry-background:hover { background: #0086b4; }
.button.elixir-background:hover { background: #fb6a2a; }
.button.white-background:hover { background: white; }
.button.secondary-background:hover { background: #666; }
.button.medium-gray-background:hover { background: #999; }

Eventually that CSS will be redundant, but it will mask the issue for now.

[khawkins98]

Closing the issue.

General note for any googlers: In v1.2 a fix should now be in place -- the above workaround css no longer necessary.