This happens when the browser window is resized, or indeed starts off on the small side.
The code in ebi-global.css needs to have the following reviewed/removed:

local-title.logo-title img, #local-title.logo-title-strapline img{

position: relative;
left: -5.5rem;
margin-right: -5rem;
}

Currently is in the format of name="ebi-owner", should be name="ebi:owner"

Accessibility was one of the reasons Foundation won out over Bootstrap for the EBI Framework.

Foundation has had a good approach for a couple versions now, with good accessibility structure and Aria support throughout. (Granted Bootstrap v4 plays a great deal of catchup, but that’s still in dev.)

We should do more to leverage these accessibility features and promote best practices in the v1.2 release.

I was following the data-toggle instructions on http://foundation.zurb.com/sites/docs/toggler.html to have a Show more/Show less button and this is the pattern I’m following:

<div id="description-more" data-toggler=".is-visible" style="display:none;">
    <p>More info</p>
</div>

<div class="button-group float-left">
    <a class="button" id="show-more" data-toggle="description-more show-more show-less" data-toggler=".hide" >Read more about Expression Atlas</a>
    <a class="button" id="show-less" data-toggle="description-more show-more show-less" data-toggler=".is-visible" style="display:none;">Show less about Expression Atlas</a>
</div>

The above works, but if I try to animate it like this:

<div id="description-more" data-toggler data-animate="fade-in fade-out" style="display:none;">

Then it stops working: clicking on the Read more... button shows the hidden paragraph (with no animation) and clicking on Show less... just changes the button but doesn’t hide the paragraph.

Aren’t animations supported yet?

Because elements are added and removed from the DOM dynamically, running the following inline is not possible as some DOM elements are not present at the time:

      $(document).foundation();
      $(document).foundationExtendEBI();

One way to counteract this is to run it in your 'app.run' instead:

  $rootScope.$on('$viewContentLoaded', function () {
      $(document).foundation();
      $(document).foundationExtendEBI();
  }

However this is still not ideal as it deals with views but not dynamically added components (ng-repeats etc...). A better alternative would be to encapsulate foundation into directives, such as what this project are doing https://circlingthesun.github.io/angular-foundation-6/

If I execute this:

jQuery('head').append('<script defer="defer" src="https://github.com/ebiwd/EBI-Pattern-library/blob/gh-pages/sample-site/migrations/testMigration.js"></script>\n');

I optain the following js console message:

Refused to execute script from 'https://github.com/ebiwd/EBI-Pattern-library/blob/gh-pages/sample-site/migrations/testMigration.js?_=1476886367594' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

The is-visible class has display:block, which doesn’t work nicely with buttons, which have display:inline-block. This makes it unsuitable to show and hide buttons.

I think that is-visible should be implemented with display:unset.

I don’t know if the description of the issue makes sense, so here are a few images of what I mean.

This is our header:

It’s taller than the predefined header because it has a h4 element below the title and the search box.

We keep scrolling down, like this:

But one pixel downwards the sticky behaviour of the menu kicks in:

This introduces a small but noticeable jitter when scrolling up or down. When the header is just one h1 element such as in the blank boilerplate page it works fine. I assume that the menu sticks at a preddefined height. Where can I change it so that it adjusts to our header height?

Several efficiencies and optimisations have been done for the update. Below are some proposed testing tasks to evaluate the effectiveness of the layout:

• Navigating to
  • the EBI homepage
  • the About section
  • a sub section, such as about/news

Rinse and repeat the above for tablet and mobile devices.

We should be loading the theme in production off an EBI location (or CDN maybe?)

Proposed pattern:
//www.ebi.ac.uk/web_guidelines/[repo-name]/[tag/release]/[repo-files]
that is:
//www.ebi.ac.uk/web_guidelines /EBI-Framework/v1.1/js/script.js

For those interested, please comment below and indicate in which ways you'd like to be involved:

• Receiving training or assistance on how to implement
• Helping improve code and test
• Joining a working group

Or something else entirely.

Would it be possible to create a parallel set of class selectors for styles currently being applied to id?

We're currently using webpack to compile css on the new interpro design and running into problems where identity-based selectors e.g. '#global-masthead' are defined in multiple locations such as ebi-global and also theme-embl-petrol. Having class selectors would allow us to reference both styles in a single element.

Posting on behalf of the Variation team.

We are in the process of adapting new EBI visual framework for our European Variation Archive website.

There is a issue we noticed when using ultra-wide page [body.full-width].

Here is the prototype [removed]

You can see empty space in right side even when using full-width. we want to use entire page width.

Is this a bug?. If so we would like to use entire width of the page. basically we want to remove the margin space in the right.

'HelveticaNeueLT Pro' font files are missing for fonts.css @ http://www.ebi.ac.uk/web_guidelines/EBI-Icon-fonts/v1.1/fonts.css

Here's a first attempt to address a need to have minimal EBI chrome to better support data-heavy pages.

Attempt is to balance "more space" with "continuing EBI brand and UX patterns".

I would like to have a reset icon; in my mind is like the refresh icon but mirrored

Creates both technical and visual issues.

Hi @khawkins98
I guest that responsive design allows zoom in/out web page to any levels without scrolling horizontal bars. If I report correctly, EBI's home page shows the horizontal bar when I zoom in to 175% in Google Chrome.

Let's try to test the following arbitrary responsive website:
http://trentwalton.com/
We can make a zoom from 25% to 500% without displaying horizontal bar.

How do you think about it?

Is this functionality helpful?

Is vacant spacing at top necessary?

(Posting on behalf of Ardan Patwardhan)

The responsive "Also in this section" will sometimes not render sub-menus correctly. The behvaiour only occurs when there is one sub-menu in the sub-menu. If there are two, everything is fine.

The bug was first noticed on http://wwwdev.ebi.ac.uk/pdbe/emdb/emdb_2017

Attempts to destroy and/or re-init the foundation dropdown menu plugin do not seem to help.

In the meantime there is a workaround by adding an invisible child menu item:

<li style="">
  <a href="#">A workaround</a> 
  <ul class="menu"> <li><a href="#">for a bug where the dropdown menu fails sometimes unless there are two submenus in the submenu</a></li></ul>
</li>

Other single-child menus seem to work fine. Unsure if this is a Foundation bug or how we're making the responsive menu, though all appears to be fine.

We could push this workaround into foundationExtendEBI.js

            var responsiveMenuSubMenuBugFix = '<li class="bug-fix-placeholder" style="display:none !important;"><a href="#">A workaround</a> <ul class="menu"> <li><a href="#">for a bug where the dropdown menu fails sometimes unless there are two submenus in the submenu</a></li></ul>  </li>';
            $(localMenuClass).append('<li class="extra-items-menu"><a href="#">Also in this section</a><ul class="menu">'+responsiveMenuSubMenuBugFix+'</ul></li>');

In the script.js function scrollMeUp(), limit the scope of clicks to not impact links.

Perhaps also add some class to disable the scrolling.

Hi,
The collapse function (depending on space left in the banner) of the local menu into a button "Also in this section" is a great new feature.
But there seem to be a small issue, just before the last items of the menu transform into a collapse button, the menu row goes on two lines, during a very brief moment - see attached image.

Cheers
Sebastien

I am facing the issue.
Below is a part of the page showing lots of records. I just captured two first ones among these.

When I scroll down a bit to see the other models, there is a white span as below.

Any one having such a problem?

Hi,
I've noticed a issue when resizing the browser page. when the browser is resized to mobile size and back to normal state it adds multiple items of the menu items in the menu.
some time the browser hangs as well. please see screen shot attached.
it occurs when adding the "float-left" class to

Adjust migration script to viewport metatag exists

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

Is there any reason to keep this polyfill around in this script.js?
It is also only used twice in the codebase (same file line 217) and in fontpresentation.js line 140.
And using foundation 6 already assumes dropped support for IE < 9 (ref), and IE 9 is were String.prototype.trim was introduced.

Does it still make sense for deeper book-style nav to be on the right? Is this understood?

Example: http://www.ebi.ac.uk/ena/about/data-availability-policy#

Remove http: and https: from href and src in example html

This has been raised as a ticket before from different services (ENA/Expression Atlas), and a functionality for quick contextual feedback can be developed as a pattern and applied throughout the services pages..

Like on www.gov.uk - at the bottom of every page - there is a
"Is there anything wrong with this page" link, which opens up a very specific form to help users report issues.

Let's discuss!

Another example for contextual feedback opportunity: mixcloud

As we continue this framework's rollout, the Web Guidelines Committee will be hosting open-door weekly clinics.

This a chance to put the framework through paces and see where improvements can be made and problems fixed.

Bring your content/menu/responsive questions!

Visual Framework Clinic dates:

• Thursday, 20th October; 13.30 - 14.30; A3-01
• Thursday, 3rd November; 13.30 - 14.30; Courtyard Room

Posting on behalf of External Relations.

The "outstation" wording is no longer used.

Need to change: Copyright © EMBL-EBI 2016 | EBI is an outstation of the European Molecular Biology Laboratory

To: Copyright © EMBL-EBI 2016 | EMBL-EBI is <a href="http://www.embl.org/">part of the European Molecular Biology Laboratory</a>

If you're happy to use the Foundation Framework: there's nothing to see here, move along.

For teams that want to keep using Bootstrap (or another CSS/JS framework), this is of relevance to you.

The recommended and preferred development path is to use the main version of the EBI Visual Framework, and that means using the Foundation Framework. If you do that you'll get better support from cross-institute collaboration and help feed back into knowledge growth and pattern library creation.

However, we're also pragmatists and know teams have spent a good bit of time implementing other frameworks, like Bootstrap.

What to do today?

We recommend using the EBI Visual Framework (including the Foundation CSS) alongside your framework -- testing shows no conflicts (so far).

What about tomorrow?

We're looking into making a "lite" version of the EBI Visual Framework (draft target for the v1.2 release in June 2017). This would have a much reduced version of the Foundation CSS (and no Foundation JS).

This script adds responsify.js and downtime.js which are not in the repo.
Is that because:

• Those won't be required in the new version of the guidelines ?
  or
• Those are just not in the repo (in which case they should maybe be in the repo with the rest of the scripts)

Things that we know need doing, and any associated issues.

• Need to locate an EBI site using Bootstrap (Issue #2)
• We need to find people interested in helping/testing (Issue #1)
• ~~Documentation is a heavy work in progress ~~
• Top nav does not properly respond at some mobile breakponts/cause side scrolling
• Some testing has been done in Firefox/IE, but more could be done (primary dev work being done against Blink engine)
• We're looking into an "EBI" GitHub account, or at least one for the Web Guidelines Committee use
• Need some sort of pattern and functionality to support full screen apps
• Pan-EMBL navigation drop down

Creates an issue with the font sizes in the header section @Metabolights

http://www.ebi.ac.uk/metabolights/

When the tabs are first loaded in any page (e.g. https://ebiwd.github.io/EBI-Pattern-library/components/badges/#component-detail) the active tab has the default text colour. If you click on the active tab colour it changes to blue (the hover colour) and stays blue until you click somewhere else.

To avoid dropping random stuff in the library folder that might never get updated to the latest version.

I propose using npm (but if something else exists that might be better, please mention it)

Targeted resources:

• foundation
• LiveFilter
• modernizr
• tablesorter
• fonts (are those custom made or are they coming from somewhere?)

Could provide a PR with a package.json and the corresponding changes in the current example code if interested.

Documenting change on behalf of External Relations.

Hi Ken,

Mary asked for an industry banner artwork this morning so I revisited the other too and brightened them all up.

Best regards

Spencer

As raised by @aurel-l in #24 there is plenty of room for improving and brodening the functionality of downtime.js

And has downtime.js ever been use recently? I think that every team already displays downtime information in its own way anyway and I don't remember any team or service using this prior to the “Great Shutdown of August 2016”.
If this is set to remain in the codebase the possibility to use this should be more publicly communicated.
@aurel-l

As more examples are added to http://ebiwd.github.io/EBI-Framework/#design-patterns it might be a good idea to add a fixed table of contents instead of the "See also" section. Foundation's magellan would be perfect for that.

We need to identify EBI site using bootstrap to test compatibility options with this framework.

I know Expression Atlas uses Bootstrap in a few places (tabs), but ideally we'd test on a service that is:

1. Using near-full EBI Compliance templates (Expression Atlas has this)
2. Using Bootstrap for both JS features (tabs) and layout (EA does not have this)

Suggestions?

We won't need active participation from the service group, as the plan is to scrape a few pages and test integration.

If there is a custom image in the header area that is white on the left side, the local-nav content is lost due to the default text also being white.

An option for switching the colour from white to a dark grey would be useful, or a translucent bar for the buttons to sit on (although this is going backwards visually somewhat)

Pic attached as an example of the issue:

Creating a ticket for this on behalf of Joon Lee

Could I ask a couple of things below please?
https://ebiwd.github.io/EBI-Pattern-library/sample-site/boilerplate/right-sidebar.html

Q1.

When I adjust the window size smaller, or see it on mobile size view, the blank is made. I tried to find the reason, but have no idea. The full width view is no problem, anyway.
It is happened as well, on my migrated pages as followed the same guide.

Q2. The location tag is made two lines, although on full-width (1 line) and the smaller width (Hidden) is fine.

Should it be kept just one line or hidden?

Regards,
Joon

JOON LEE
Web Production Team
European Bioinformatics Institute (EMBL-EBI)
Wellcome Genome Campus
Hinxton, Cambridge, CB10 1SD

I can see horizontal scroll with blank space on right side when the header is completely visible. It disappears on scrolling down when the header is changed to small sticky header.

An opportunity for outreach and for teams to learn how to make the most of the new framework's features.

We need to setup dates in coordination with the WGC.

Update: Go here for the next round of clinics.

In the run up to the launch of the Visual Framework on 3 October, the Web Guidelines Committee will be hosting open-door weekly clinics.

This a chance to put the framework through paces and see where improvements can be made and problems fixed.

Bring your content/menu/responsive questions!

Visual Framework Clinic dates:

• Wednesday, 14 September 14.30-16.00 - A2-33
• Tuesday, 20 September 13.30-15.00 - Sawston Room South Building
• Friday, 30 September 13.00-14.30 - Hall View
• Wednesday, 5 October 13.00-14.30 - Media Suite South Building
• More dates to be announced

For some reason the styles in ebi-global.css override the styles in theme-embl-petrol.css, rendering the links in the search box white (on a white background). See images:

This is unlike https://ebiwd.github.io/EBI-Pattern-library/components/search/.

I was trying to use the following pattern from Foundation:
http://foundation.zurb.com/sites/docs/forms.html#file-upload-button

And this is what I’m getting:

Is there anything I’m missing or is this feature not yet supported?

The ul.menu li table-cell display causes much pain on medium and smaller.

http://www.ebi.ac.uk/about