Closed tschaka1904 closed 7 years ago
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>
Looks nice! Thanks for looking into it! 👍
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.
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.
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.
In the new complex-portal, we have a tile-menu at the front page:![screen shot 2017-03-14 at 16 12 35](https://cloud.githubusercontent.com/assets/5269116/23910319/31480582-08d1-11e7-9c4a-74e57fb482cf.png)
Would it be worth to think of a common style? I've seen this one on the services site:![screen shot 2017-03-14 at 16 15 06](https://cloud.githubusercontent.com/assets/5269116/23910383/7511668c-08d1-11e7-9b9f-fc7588067dc4.png)
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.