Skip to content
Snippets Groups Projects
Commit 910c0234 authored by khawkins98's avatar khawkins98
Browse files

Update compiled

parent 411d3432
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
css/ebi-global.css
+ 105
− 26
View file @ 910c0234
......@@ -4382,22 +4382,6 @@ nav ul#global-nav.menu li {
body.no-global-search .masthead-black-bar ul#global-nav.menu li.search {
display: none; }
@media screen and (max-width: 40em) {
nav ul#global-nav.menu li.home {
display: none; }
nav ul#global-nav.menu li.home-mobile a {
display: block;
height: 50px;
width: 67px;
background-image: url("../images/logos/EMBL-EBI/EMBL_EBI_Logo_white.svg");
background-size: 64px 47px;
background-repeat: no-repeat;
margin-left: 6px; } }
@media screen and (min-width: 40em) {
nav ul#global-nav.menu li.home-mobile {
display: none; } }
.masthead-black-bar {
background-color: #222; }
.masthead-black-bar,
......@@ -4405,12 +4389,17 @@ body.no-global-search .masthead-black-bar ul#global-nav.menu li.search {
.masthead-black-bar a:hover {
color: white; }
.masthead-black-bar li.embl-selector {
margin-left: 0.5rem; }
margin-left: 0.5rem;
border-left: 0.5px solid rgba(255, 255, 255, 0.5);
padding-left: 1.5rem; }
.masthead-black-bar .embl-bar {
height: 0;
overflow: hidden;
display: none;
background-color: #000; }
background-color: #eee;
color: #222; }
.masthead-black-bar .embl-bar a {
color: #222; }
.masthead-black-bar .embl-bar a:hover {
border-bottom: 1px solid #fff; }
.masthead-black-bar .embl-bar .youarehere {
......@@ -4491,9 +4480,11 @@ body.no-global-search .masthead-black-bar ul#global-nav.menu li.search {
.masthead-black-bar .global-nav li a:focus,
.masthead-black-bar .global-nav li.active a,
.masthead-black-bar .global-nav li.active-trail a {
color: white;
color: #fff;
border-bottom: none;
background: black; }
background-color: #000; }
.masthead-black-bar .global-nav li.active a {
font-weight: 700; }
.masthead-black-bar .global-nav li a:before {
font-family: 'EBI-Generic';
display: inline-block;
......@@ -4503,26 +4494,53 @@ body.no-global-search .masthead-black-bar ul#global-nav.menu li.search {
.masthead-black-bar .global-nav li.research,
.masthead-black-bar .global-nav li.training,
.masthead-black-bar .global-nav li.about,
.masthead-black-bar .global-nav li.grenoble,
.masthead-black-bar .global-nav li.embl,
.masthead-black-bar .global-nav li.ebi,
.masthead-black-bar .global-nav li.grenoble,
.masthead-black-bar .global-nav li.hamburg,
.masthead-black-bar .global-nav li.heidelberg,
.masthead-black-bar .global-nav li.hinxton,
.masthead-black-bar .global-nav li.rome,
.masthead-black-bar .global-nav li.barcelona {
float: right; }
.masthead-black-bar .global-nav li.home.hover,
.masthead-black-bar .global-nav li.services.hover,
.masthead-black-bar .global-nav li.research.hover,
.masthead-black-bar .global-nav li.training.hover,
.masthead-black-bar .global-nav li.about.hover,
.masthead-black-bar .global-nav li.embl.hover,
.masthead-black-bar .global-nav li.ebi.hover,
.masthead-black-bar .global-nav li.grenoble.hover,
.masthead-black-bar .global-nav li.hamburg.hover,
.masthead-black-bar .global-nav li.heidelberg.hover,
.masthead-black-bar .global-nav li.hinxton.hover,
.masthead-black-bar .global-nav li.rome.hover,
.masthead-black-bar .global-nav li.barcelona.hover {
float: none; }
.masthead-black-bar .global-nav li.home.active,
.masthead-black-bar .global-nav li.services.active,
.masthead-black-bar .global-nav li.research.active,
.masthead-black-bar .global-nav li.training.active,
.masthead-black-bar .global-nav li.about.active,
.masthead-black-bar .global-nav li.grenoble.active,
.masthead-black-bar .global-nav li.embl.active,
.masthead-black-bar .global-nav li.ebi.active,
.masthead-black-bar .global-nav li.grenoble.active,
.masthead-black-bar .global-nav li.hamburg.active,
.masthead-black-bar .global-nav li.heidelberg.active,
.masthead-black-bar .global-nav li.hinxton.active,
.masthead-black-bar .global-nav li.rome.active,
.masthead-black-bar .global-nav li.barcelona.active {
float: left; }
.masthead-black-bar .global-nav li.location a:before {
.masthead-black-bar .global-nav li.embl.hover a:before,
.masthead-black-bar .global-nav li.ebi.hover a:before,
.masthead-black-bar .global-nav li.grenoble.hover a:before,
.masthead-black-bar .global-nav li.hamburg.hover a:before,
.masthead-black-bar .global-nav li.heidelberg.hover a:before,
.masthead-black-bar .global-nav li.hinxton.hover a:before,
.masthead-black-bar .global-nav li.rome.hover a:before,
.masthead-black-bar .global-nav li.barcelona.hover a:before {
content: "" !important; }
.masthead-black-bar .global-nav li.where a:before {
content: '['; }
.masthead-black-bar .global-nav li.home a:before {
content: 'H'; }
......@@ -4558,8 +4576,6 @@ body.no-global-search .masthead-black-bar ul#global-nav.menu li.search {
.masthead-black-bar nav ul.menu li {
float: none;
display: inline-block; }
.masthead-black-bar nav ul.menu li.home-mobile {
float: left; }
.masthead-black-bar nav ul.menu > li > a > img,
.masthead-black-bar nav ul.menu > li > a:before {
display: block;
......@@ -4812,7 +4828,7 @@ pre > code {
.global-footer {
border-top: 5px solid #eee;
padding-top: .5rem; }
padding-top: 1.5rem; }
.global-footer h5 {
margin-top: 1.25rem;
margin-bottom: 5px; }
......@@ -5313,6 +5329,69 @@ a.no-underline:hover .underline {
.padding-bottom-xlarge {
padding-bottom: 2rem; }
.size-0 {
font-size: 0%; }
.size-25 {
font-size: 25%; }
.size-50 {
font-size: 50%; }
.size-75 {
font-size: 75%; }
.size-100 {
font-size: 100%; }
.size-125 {
font-size: 125%; }
.size-150 {
font-size: 150%; }
.size-175 {
font-size: 175%; }
.size-200 {
font-size: 200%; }
.size-225 {
font-size: 225%; }
.size-250 {
font-size: 250%; }
.size-275 {
font-size: 275%; }
.size-300 {
font-size: 300%; }
.size-325 {
font-size: 325%; }
.size-350 {
font-size: 350%; }
.size-375 {
font-size: 375%; }
.size-400 {
font-size: 400%; }
.size-425 {
font-size: 425%; }
.size-450 {
font-size: 450%; }
.size-475 {
font-size: 475%; }
.size-500 {
font-size: 500%; }
/* print styles */
@media print {
a, a:visited {
......
css/ebi-global.min.css
+ 1
− 1
View file @ 910c0234
source diff could not be displayed: it is too large. Options to address this: view the blob.
js/documenation.md
+ 44
− 44
View file @ 910c0234
This diff is collapsed.
js/ebi-global-includes/script/4_ebiFrameworkContent.js
+ 20
− 17
View file @ 910c0234
......@@ -58,37 +58,40 @@ function ebiFrameworkAssignImageByMetaTags() {
function ebiFrameworkPopulateBlackBar() {
try {
// Clear any existing black bar contents
// if ((elem=document.getElementById('masthead-black-bar')) !== null) {
// document.getElementById('masthead-black-bar').innerHTML = " ";
// }
if ((elem=document.getElementById('masthead-black-bar')) !== null) {
document.getElementById('masthead-black-bar').innerHTML = "";
}
var barContents = document.createElement("div");
barContents.innerHTML = '<nav class="row">'+
'<ul id="global-nav" class="menu global-nav">'+
'<li class="where embl hide"><a href="http://www.embl.org">More EMBL sites:</a></li>'+
// '<li class="where embl hide"><a href="http://www.embl.org">EMBL</a></li>'+
'<li class="where ebi hide"><a href="//www.ebi.ac.uk">EBI</a></li>'+
'<li class="where barcelona hide"><a href="#">Barcelona</a></li>'+
'<li class="where hamburg hide"><a href="#">Hamburg</a></li>'+
'<li class="where heidelberg hide"><a href="#">Heidelberg</a></li>'+
'<li class="where grenoble hide"><a href="#">Grenoble</a></li>'+
'<li class="where rome hide"><a href="#">Rome</a></li>'+
'<ul id="global-nav" class="menu global-nav text-right">'+
'<li class="home-mobile"><a href="//www.ebi.ac.uk"></a></li>'+
'<li class="location embl hide"><a href="http://www.embl.org">EMBL</a></li>'+
'<li class="location ebi hide"><a href="//www.ebi.ac.uk">EBI</a></li>'+
'<li class="location barcelona hide"><a href="#">Barcelona</a></li>'+
'<li class="location hamburg hide"><a href="#">Hamburg</a></li>'+
'<li class="location grenoble hide"><a href="#">Heidelberg</a></li>'+
'<li class="location grenoble hide"><a href="#">Grenoble</a></li>'+
'<li class="location rome hide"><a href="#">Rome</a></li>'+
'<li class="float-right show-for-medium embl-selector">'+
'<button class="button float-right">&nbsp;</button>'+
'</li>'+
'<li class="float-right search">'+
'<a href="#" data-toggle="search-global-dropdown"><span class="show-for-small-only">Search</span></a>'+
'<div id="search-global-dropdown" class="dropdown-pane" data-dropdown data-options="closeOnClick:true;">'+
'</div>'+
'</li>'+
'<li class="what mission hide"><a href="//www.embl.org">More mission areas:</a></li>'+
'<li class="what about"><a href="//www.ebi.ac.uk/about">About us</a></li>'+
'<li class="what training"><a href="//www.ebi.ac.uk/training">Training</a></li>'+
'<li class="what research"><a href="//www.ebi.ac.uk/research">Research</a></li>'+
'<li class="what services"><a href="//www.ebi.ac.uk/services">Services</a></li>'+
'<li class="float-right embl-selector">'+
'<a class="button float-right">&nbsp;</a>'+
'</li>'+
// '<li class="float-right embl-selector">'+
// '<a class="button float-right">&nbsp;</a>'+
// '</li>'+
// '<li class="what mission hide"><a href="//www.embl.org">More mission areas:</a></li>'+
'</ul>'+
'</nav>';
document.getElementById("masthead-black-bar").innerHTML = barContents.innerHTML;
document.getElementById("masthead-black-bar").insertBefore(barContents,document.getElementById("masthead-black-bar").firstChild);
}
catch(err) {};
}
......
js/script.js
+ 89
− 11
View file @ 910c0234
......@@ -227,10 +227,14 @@ function ebiFrameworkPopulateBlackBar() {
'<div id="search-global-dropdown" class="dropdown-pane" data-dropdown data-options="closeOnClick:true;">'+
'</div>'+
'</li>'+
'<li class="about"><a href="//www.ebi.ac.uk/about">About us</a></li>'+
'<li class="training"><a href="//www.ebi.ac.uk/training">Training</a></li>'+
'<li class="research"><a href="//www.ebi.ac.uk/research">Research</a></li>'+
'<li class="services"><a href="//www.ebi.ac.uk/services">Services</a></li>'+
'<li class="what about"><a href="//www.ebi.ac.uk/about">About us</a></li>'+
'<li class="what training"><a href="//www.ebi.ac.uk/training">Training</a></li>'+
'<li class="what research"><a href="//www.ebi.ac.uk/research">Research</a></li>'+
'<li class="what services"><a href="//www.ebi.ac.uk/services">Services</a></li>'+
// '<li class="float-right embl-selector">'+
// '<a class="button float-right">&nbsp;</a>'+
// '</li>'+
// '<li class="what mission hide"><a href="//www.embl.org">More mission areas:</a></li>'+
'</ul>'+
'</nav>';
document.getElementById("masthead-black-bar").insertBefore(barContents,document.getElementById("masthead-black-bar").firstChild);
......@@ -238,6 +242,48 @@ function ebiFrameworkPopulateBlackBar() {
catch(err) {};
}
/**
* Active tabs in `#masthead-black-bar` accoriding to metadata
*/
function ebiFrameworkActivateBlackBar() {
// Look at the embl:facet-* meta tags to set active states
// <meta name="embl:facet-who" content="primary" data-tag="Sample group" />
// <meta name="embl:facet-what" content="parent" data-tag="Research" />
// <meta name="embl:facet-where" content="parent" data-tag="EBI" />
try {
function ebiGetFacet(passedAttribute){
var tag = "#masthead-black-bar ." + passedAttribute.toLowerCase();
return document.querySelectorAll(tag)[0];
}
var metas = document.getElementsByTagName('meta');
for (var i = 0; i < metas.length; i++) {
if (metas[i].getAttribute("name") == "embl:facet-who") {
if (metas[i].getAttribute("content").toLowerCase() == "parent") {
var targetFacet = ebiGetFacet(metas[i].getAttribute("data-tag"));
// todo: insert this as a new facet, i think?
}
}
if (metas[i].getAttribute("name") == "embl:facet-what") {
if (metas[i].getAttribute("content").toLowerCase() == "parent") {
var targetFacet = ebiGetFacet(metas[i].getAttribute("data-tag"));
ebiToggleClass(targetFacet,'active');
}
}
if (metas[i].getAttribute("name") == "embl:facet-where") {
if (metas[i].getAttribute("content").toLowerCase() == "parent") {
var targetFacet = ebiGetFacet(metas[i].getAttribute("data-tag"));
ebiToggleClass(targetFacet,'active');
ebiToggleClass(targetFacet,'hide'); // as we hide these by default
}
}
}
}
catch(err) {};
}
/**
* Insert EMBL dropdown menu into `#masthead-black-bar`
*/
......@@ -256,14 +302,14 @@ function ebiFrameworkInsertEMBLdropdown() {
'</div>'+
'<div class="columns medium-8">'+
'<div class="large-8 medium-12">'+
'<p><h3 class="inline white-color">EMBL</h3> was founded in 1974 by its member states to promote the molecular life sciences in Europe and beyond.</p>'+
'<p><h3 class="inline">EMBL</h3> was founded in 1974 by its member states to promote the molecular life sciences in Europe and beyond.</p>'+
'</div>'+
'<div class="row large-up-5 medium-up-3 small-up-2 no-underline">'+
'<div class="column"><a class="" href="#research"><h5 class="inline white-color underline">Research</h5> the molecular basis of life</a></div>'+
'<div class="column"><a class="" href="#"><h5 class="inline white-color underline">Services</h5> and infrastructure for research</a></div>'+
'<div class="column"><a class="" href="#"><h5 class="inline white-color underline">Training</h5> and inspiring scientists</a></div>'+
'<div class="column"><a class="" href="#"><h5 class="inline white-color underline">Transfer</h5> and deverlopment of technology</a></div>'+
'<div class="column"><a class="" href="#"><h5 class="inline white-color underline">Integrating</h5> life science research in Europe</a></div>'+
'<div class="column"><a class="" href="#research"><h5 class="inline underline">Research</h5> the molecular basis of life</a></div>'+
'<div class="column"><a class="" href="#"><h5 class="inline underline">Services</h5> and infrastructure for research</a></div>'+
'<div class="column"><a class="" href="#"><h5 class="inline underline">Training</h5> and inspiring scientists</a></div>'+
'<div class="column"><a class="" href="#"><h5 class="inline underline">Transfer</h5> and deverlopment of technology</a></div>'+
'<div class="column"><a class="" href="#"><h5 class="inline underline">Integrating</h5> life science research in Europe</a></div>'+
'</div>'+
'<div class="margin-top-xlarge no-underline">'+
'<h3><a href="//embl.org" class="readmore">More about EMBL</a></h3>'+
......@@ -271,7 +317,7 @@ function ebiFrameworkInsertEMBLdropdown() {
'</div>'+
'<div class="columns medium-4">'+
'<div class="large-10 medium-12">'+
'<p><h3 class="inline white-color">Six locations</h3> represent EMBL across Europe, each has its own focus.</p>'+
'<p><h3 class="inline">Six locations</h3> represent EMBL across Europe, each has its own focus.</p>'+
'</div>'+
'<div class="row large-up-3 medium-up-2 small-up-2">'+
'<div class="column"><h5><a href="//www.embl-barcelona.es/">Barcelona</a></h5><p class="small">Tissue biology and disease modelling</p></div>'+
......@@ -302,6 +348,37 @@ function ebiFrameworkInsertEMBLdropdown() {
window.scrollTo(0, 0);
}, false);
// we do this bit with jquery to prototype, would need ro rewire as vanilla JS..
// we do this bit with jquery to prototype, would need ro rewire as vanilla JS..
$('#masthead-black-bar .where.active').on('mouseover', function() {
emblResetContext(); // clear any other states
$('#masthead-black-bar .where.hide').addClass('hover').removeClass('hide');
// $('#masthead-black-bar .where.hide').removeClass('hide').addClass('hover');
$('#masthead-black-bar .what').addClass('hide');
});
$('#masthead-black-bar .what.active').on('mouseover', function() {
emblResetContext(); // clear any other states
$('#masthead-black-bar .what.mission').removeClass('hide');
$('#masthead-black-bar .what').addClass('hover');
});
// reset when user engages with content
function emblResetContext() {
// ebiFrameworkActivateBlackBar();
$('#masthead-black-bar .where.hover').removeClass('hover').addClass('hide');
$('#masthead-black-bar .what').removeClass('hide');
$('#masthead-black-bar .what.mission').addClass('hide');
$('#masthead-black-bar .what.hover').removeClass('hover');
// reset everything on the next mouse into content
$('#content').one('mouseover', function() {
console.log('purged');
emblResetContext();
});
}
}
catch(err) {};
}
......@@ -451,6 +528,7 @@ function ebiFrameworkCookieBanner() {
*/
function ebiFrameworkInvokeScripts() {
ebiFrameworkPopulateBlackBar();
ebiFrameworkActivateBlackBar();
ebiFrameworkExternalLinks();
ebiFrameworkManageGlobalSearch();
ebiFrameworkSearchNullError();
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment