Skip to content
Snippets Groups Projects
Commit 73b7cc14 authored by khawkins98's avatar khawkins98
Browse files

Update transitionary black bar vision

parent 7ebfd5a7
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
Showing
with 242 additions and 112 deletions
_includes/local_masthead.html
+ 2
− 21
View file @ 73b7cc14
......@@ -5,25 +5,6 @@
</div>
<header id="masthead-black-bar" class="clearfix masthead-black-bar">
<nav class="row">
<ul id="global-nav" class="menu global-nav text-right">
<!-- set active class as appropriate -->
<li class="home-mobile"><a href="//www.ebi.ac.uk"></a></li>
<li class="home active"><a href="//www.ebi.ac.uk">EMBL</a></li>
<li class="location grenoble active"><a href="#">Grenoble</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;">
<!-- The dropdown menu will be programatically added by script.js -->
</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 active"><a href="//www.ebi.ac.uk/research">Research</a></li>
<li class="services"><a href="//www.ebi.ac.uk/services">Services</a></li>
</ul>
</nav>
<!-- Will be populated by script.js -->
<!-- Active item will be set through embl:facet metatags -->
</header>
_includes/navigation_list.html
+ 2
− 2
View file @ 73b7cc14
{% for node in navigation_list %}
{% if group == null or group == node.group %}
{% if page.url == node.url %}
<li class="active"><a href="{{ site.domain }}{{ site.baseurl }}{{node.url}}" class="active">{{node.title}}</a></li>
<li class="active"><a href="{{ site.baseurl }}{{node.url}}" class="active">{{node.title}}</a></li>
{% else %}
<li><a href="{{ site.domain }}{{ site.baseurl }}{{node.url}}">{{node.title}}</a></li>
<li><a href="{{ site.baseurl }}{{node.url}}">{{node.title}}</a></li>
{% endif %}
{% endif %}
{% endfor %}
......
_layouts/default.html
+ 2
− 2
View file @ 73b7cc14
......@@ -9,7 +9,7 @@
<div class="masthead-inner row">
<!-- local-title -->
<div class="columns medium-7" id="local-title">
<h1><a href="{{ site.domain }}{{ site.baseurl }}" title="Back to {{ site.name }} homepage">{{ site.name }}</a></h1>
<h1><a href="{{ site.domain }}{{ site.baseurl }}" title="Back to {{ site.name }} homepage">{{ page.active_facet }}</a></h1>
</div>
<!-- /local-title -->
<!-- local-nav -->
......@@ -47,7 +47,7 @@
</nav>
-->
<div class="medium-9 columns padding-top-large">
{{ content }}
{{ content | markdownify}}
</div>
<div class="medium-3 columns sidebar" data-sticky-container>
</div>
......
css/ebi-css-build/_ebi_masthead_styles.scss
+ 48
− 20
View file @ 73b7cc14
......@@ -6,6 +6,11 @@
#local-title a { border-bottom: none; }
.masthead {
// h1 {
// font-weight: 400;
// letter-spacing: -2px; // fira kerning on light fonts and default sizes sucks :(
// }
// underline links in the textual area of the local masthead
#local-title .columns {
a { border-bottom: 1px dotted rgb(255,255,255); }
......@@ -21,21 +26,21 @@
body.no-global-search .masthead-black-bar ul#global-nav.menu li.search { display: none; }
// Mobile logo
@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; }
}
// @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: $ebi-colour-dark;
......@@ -61,9 +66,15 @@
li a:focus,
li.active a,
li.active-trail a {
color: white;
color: #fff;
border-bottom: none;
background: rgb(0,0,0);
background-color: #000;
// margin-left: 3px;
// position: relative;
// top: -3px;
}
li.active a {
font-weight: 700;
}
li {
......@@ -84,20 +95,38 @@
li.research,
li.training,
li.about,
li.grenoble,
li.embl,
li.ebi,
li.grenoble,
li.hamburg,
li.heidelberg,
li.hinxton,
li.rome,
li.barcelona {
float: right;
&.hover {
float: none;
}
&.active {
float: left;
}
}
li.location {
li.embl,
li.ebi,
li.grenoble,
li.hamburg,
li.heidelberg,
li.hinxton,
li.rome,
li.barcelona {
&.hover a:before {
content: "" !important;
}
}
li.where {
a:before {
content: '[';
}
......@@ -202,7 +231,6 @@
text-align: right;
li { float: none; display: inline-block; }
li.home-mobile { float: left; }
// make icon bar smaller for mobile
> li > a > img,
......
css/ebi-css-build/_embl_selector.scss
+ 5
− 2
View file @ 73b7cc14
......@@ -8,15 +8,18 @@
@mixin embl-selector {
li.embl-selector {
margin-left: 0.5rem;
border-left: .5px solid rgba(255,255,255,.5);
padding-left: 1.5rem;
}
.embl-bar {
height: 0; overflow: hidden;
display: none;
background-color: #000;
background-color: #eee;
color: #222;
// color: #fff;
a {
// color: #fff;
color: #222;
// border-bottom: 1px dashed #fff;
}
a:hover { border-bottom: 1px solid #fff; }
......
index.html
+ 1
− 0
View file @ 73b7cc14
---
layout: default
title: Project home
active_facet: Research
group: "in_local_navigation"
order: 1
---
......
js/documenation.md
+ 80
− 38
View file @ 73b7cc14
This diff is collapsed.
js/ebi-global-includes/script/4_ebiFrameworkContent.js
+ 101
− 27
View file @ 73b7cc14
......@@ -58,38 +58,81 @@ 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 = "&nbsp;";
}
// if ((elem=document.getElementById('masthead-black-bar')) !== null) {
// document.getElementById('masthead-black-bar').innerHTML = "&nbsp;";
// }
var barContents = document.createElement("div");
barContents.innerHTML = '<nav class="row">'+
'<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>'+
'<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>'+
'<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="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 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>'+
'</ul>'+
'</nav>';
document.getElementById("masthead-black-bar").insertBefore(barContents,document.getElementById("masthead-black-bar").firstChild);
document.getElementById("masthead-black-bar").innerHTML = barContents.innerHTML;
}
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) {};
}
/**
......@@ -110,14 +153,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>'+
......@@ -125,7 +168,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>'+
......@@ -156,6 +199,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) {};
}
......
js/ebi-global-includes/script/6_ebiFrameworkInvokeScripts.js
+ 1
− 0
View file @ 73b7cc14
......@@ -6,6 +6,7 @@
*/
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