Team:Waterloo
From 2013.igem.org
(Cropped and resized photos. All headshots present.) |
(Link formatting and navbar colour changes. Fetching notebook from an uploaded file now and dynamically generating sublinks.) |
||
Line 3: | Line 3: | ||
TODO: | TODO: | ||
- The header takes too much space - especially on the home page | - The header takes too much space - especially on the home page | ||
- | |||
--> | --> | ||
- | |||
<head> | <head> | ||
<!--<script type="text/javascript" src="https://2013.igem.org/common/jquery-latest.min.js"></script>--> | <!--<script type="text/javascript" src="https://2013.igem.org/common/jquery-latest.min.js"></script>--> | ||
Line 101: | Line 99: | ||
color: white; | color: white; | ||
- | /* http://www.colorzilla.com/gradient-editor/# | + | /* http://www.colorzilla.com/gradient-editor/#5abfce+0,0ba5bc+100;Custom */ |
- | background: rgb( | + | background: rgb(90,191,206); /* Old browsers */ |
- | background: -moz-linear-gradient(45deg, rgba( | + | background: -moz-linear-gradient(45deg, rgba(90,191,206,1) 0%, rgba(11,165,188,1) 100%); /* FF3.6+ */ |
- | background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba( | + | background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(90,191,206,1)), color-stop(100%,rgba(11,165,188,1))); /* Chrome,Safari4+ */ |
- | background: -webkit-linear-gradient(45deg, rgba( | + | background: -webkit-linear-gradient(45deg, rgba(90,191,206,1) 0%,rgba(11,165,188,1) 100%); /* Chrome10+,Safari5.1+ */ |
- | background: -o-linear-gradient(45deg, rgba( | + | background: -o-linear-gradient(45deg, rgba(90,191,206,1) 0%,rgba(11,165,188,1) 100%); /* Opera 11.10+ */ |
- | background: -ms-linear-gradient(45deg, rgba( | + | background: -ms-linear-gradient(45deg, rgba(90,191,206,1) 0%,rgba(11,165,188,1) 100%); /* IE10+ */ |
- | background: linear-gradient(45deg, rgba( | + | background: linear-gradient(45deg, rgba(90,191,206,1) 0%,rgba(11,165,188,1) 100%); /* W3C */ |
- | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='# | + | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5abfce', endColorstr='#0ba5bc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ |
} | } | ||
Line 173: | Line 171: | ||
.link { | .link { | ||
font-size: 24px; | font-size: 24px; | ||
+ | line-height: 25px; | ||
} | } | ||
.sublink { | .sublink { | ||
- | margin | + | margin: 0 0 14px 20px; |
font-size: 20px; | font-size: 20px; | ||
+ | line-height: 23px; | ||
} | } | ||
/* TODO animate resizing this */ | /* TODO animate resizing this */ | ||
Line 220: | Line 220: | ||
'#/Home', | '#/Home', | ||
'#/Project', | '#/Project', | ||
- | |||
'#/MathModelling', | '#/MathModelling', | ||
- | '#/ | + | '#/HumanPractices', |
'#/Gallery', | '#/Gallery', | ||
'#/Notebook', | '#/Notebook', | ||
'#/Safety', | '#/Safety', | ||
- | '#/Sponsors' | + | '#/Sponsors', |
+ | '#/Team' | ||
]; | ]; | ||
+ | var MONTHS = { | ||
+ | 'january': 'January', | ||
+ | 'february': 'February', | ||
+ | 'march': 'March', | ||
+ | 'april': 'April', | ||
+ | 'may': 'May', | ||
+ | 'june': 'June', | ||
+ | 'july': 'July', | ||
+ | 'august': 'August', | ||
+ | 'september': 'September', | ||
+ | 'october': 'October', | ||
+ | 'november': 'November', | ||
+ | 'december': 'December' | ||
+ | }; | ||
var navBar = null; | var navBar = null; | ||
var page_idx_map = {}; | var page_idx_map = {}; | ||
Line 292: | Line 306: | ||
for (var i = 0; i < this.links.length; i++) { | for (var i = 0; i < this.links.length; i++) { | ||
var link_wrapper = $('<li class="hiddenSublinks"/>'); | var link_wrapper = $('<li class="hiddenSublinks"/>'); | ||
- | var link_string = '<div class="link"><a href="{0}"> | + | var link_string = '<div class="link"><a href="{0}">{1}</a></div>'; |
var link = $(link_string.format(this.links[i].link, this.links[i].text)); | var link = $(link_string.format(this.links[i].link, this.links[i].text)); | ||
link_wrapper.append(link); | link_wrapper.append(link); | ||
Line 298: | Line 312: | ||
var sublinks = this.sublinks[i]; | var sublinks = this.sublinks[i]; | ||
for (var j = 0; j < sublinks.length; j++) { | for (var j = 0; j < sublinks.length; j++) { | ||
- | var sublink_string = '<div class="sublink"><a href="{0}"> | + | var sublink_string = '<div class="sublink"><a href="{0}">{1}</a></div>'; |
var sublink = $(sublink_string.format(sublinks[j].link, sublinks[j].text)); | var sublink = $(sublink_string.format(sublinks[j].link, sublinks[j].text)); | ||
link_wrapper.append(sublink); | link_wrapper.append(sublink); | ||
Line 310: | Line 324: | ||
return page_links; | return page_links; | ||
}; | }; | ||
+ | |||
+ | |||
+ | function createNavBar(notebook_sublinks, show_notebook) { | ||
+ | // Create NavBar | ||
+ | navBar = new NavBar(); | ||
+ | //navBar.addLink(new Link('#/Home', 'Home')); | ||
+ | navBar.addLink( | ||
+ | new Link('#/Project', 'Project'), | ||
+ | [ | ||
+ | new Link('#/Project/Abstract', 'Abstract'), | ||
+ | new Link('#/Project/Video', 'Video'), | ||
+ | new Link('#/Project/Results', 'Results'), | ||
+ | new Link('#/Project/Future', 'Future Aspirations'), | ||
+ | new Link('#/Project/Biobricks', 'Biobricks') | ||
+ | ] | ||
+ | ); | ||
+ | navBar.addLink( | ||
+ | new Link('#/MathModelling', 'Math & Modelling'), | ||
+ | [ | ||
+ | new Link('#/MathModelling/Switch', 'Switch Modelling'), | ||
+ | new Link('#/MathModelling/PopulationInfection', 'Population and Infection Modelling'), | ||
+ | new Link('#/MathModelling/PhageParticle', 'Phage Particle Production Modelling') | ||
+ | ] | ||
+ | ); | ||
+ | navBar.addLink( | ||
+ | new Link('#/HumanPractices', 'HumanPractices'), | ||
+ | [ | ||
+ | new Link('#/HumanPractices/IntentToInvent', 'Intent to Invent'), | ||
+ | new Link('#/HumanPractices/Vlogs', 'Vlogs'), | ||
+ | new Link('#/HumanPractices/SpecialProject', 'Special Project') | ||
+ | ] | ||
+ | ); | ||
+ | navBar.addLink( | ||
+ | new Link('#/Gallery', 'Gallery'), | ||
+ | [ | ||
+ | new Link('#/Gallery/IntentToInvent', 'Intent to Invent'), | ||
+ | new Link('#/Gallery/Laboratory', 'Laboratory') | ||
+ | ] | ||
+ | ); | ||
+ | if (show_notebook) { | ||
+ | navBar.addLink( | ||
+ | new Link('#/Notebook', 'Notebook'), | ||
+ | notebook_sublinks | ||
+ | ); | ||
+ | } | ||
+ | navBar.addLink( | ||
+ | new Link('#/Safety', 'Safety') | ||
+ | ); | ||
+ | navBar.addLink( | ||
+ | new Link('#/Sponsors', 'Sponsors'), | ||
+ | [ | ||
+ | new Link('#/Sponsors/Sponsors', 'Sponsors') | ||
+ | ] | ||
+ | ); | ||
+ | navBar.addLink( | ||
+ | new Link('#/Team', 'Team'), | ||
+ | [ | ||
+ | new Link('#/Team/Administrators', 'Administrators'), | ||
+ | new Link('#/Team/Advisors', 'Advisors'), | ||
+ | new Link('#/Team/LabDesign', 'Lab & Design'), | ||
+ | new Link('#/Team/HumanPractices', 'Human Practices'), | ||
+ | new Link('#/Team/MathModelling', 'Math & Modelling') | ||
+ | ] | ||
+ | ); | ||
+ | var nav_bar_element = $('.navBar'); | ||
+ | nav_bar_element.append(navBar.render()); | ||
+ | nav_bar_element.append(socialButtons( | ||
+ | [ | ||
+ | new ImageLink('https://www.facebook.com/WaterlooiGEM', 'https://static.igem.org/mediawiki/2013/8/81/Waterloo_facebook_button_64.jpg'), | ||
+ | new ImageLink('http://www.youtube.com/user/WaterlooiGEM?feature=watch', 'https://static.igem.org/mediawiki/2013/8/8f/Waterloo_youtube_button_64.jpg'), | ||
+ | new ImageLink('https://twitter.com/Waterloo_iGEM', 'https://static.igem.org/mediawiki/2013/a/a9/Waterloo_twitter_button_64.jpg'), | ||
+ | ] | ||
+ | )); | ||
+ | } | ||
function socialButtons(image_links) { | function socialButtons(image_links) { | ||
Line 354: | Line 442: | ||
} | } | ||
); | ); | ||
- | setupGroup('# | + | setupGroup('#labTeamPhotos', |
{ | { | ||
'Paul': 'https://static.igem.org/mediawiki/2013/b/bd/Waterloo_paul.JPG', | 'Paul': 'https://static.igem.org/mediawiki/2013/b/bd/Waterloo_paul.JPG', | ||
Line 370: | Line 458: | ||
} | } | ||
); | ); | ||
+ | setupGroup('#mathModellingTeamPhotos', {}); | ||
+ | setupGroup('#humanPracticesTeamPhotos', {}); | ||
// TODO | // TODO | ||
setupGroup('#intentToInventPhotos', {}); | setupGroup('#intentToInventPhotos', {}); | ||
setupGroup('#labPhotos', {}); | setupGroup('#labPhotos', {}); | ||
+ | } | ||
+ | |||
+ | /** | ||
+ | * Renders raw notebook text into lists on the #notebook element. | ||
+ | * Returns notebook sublinks that should be rendered in the navbar. | ||
+ | */ | ||
+ | function createNotebook(raw) { | ||
+ | var sublinks = []; | ||
+ | var notebook_elem = $('#notebook'); | ||
+ | var current_list = null; | ||
+ | var current_month = null; | ||
+ | |||
+ | var lines = raw.split('\n'); | ||
+ | for (var i = 0; i < lines.length; i++) { | ||
+ | var line = lines[i].trim(); | ||
+ | if (line == '') continue; | ||
+ | var maybe_month_lower = line.substring(0, line.indexOf(' ')).toLowerCase(); | ||
+ | var maybe_month = MONTHS[maybe_month_lower]; | ||
+ | if (maybe_month) { | ||
+ | if (current_month != maybe_month) { | ||
+ | current_month = maybe_month; | ||
+ | sublinks.push(new Link('#/Notebook/' + current_month, current_month)); | ||
+ | notebook_elem.append($('<h1 id="{0}">{1}</h1>'.format('s_Notebook_' + current_month, current_month))); | ||
+ | current_list = $('<ul></ul>'); | ||
+ | notebook_elem.append(current_list); | ||
+ | } | ||
+ | if (!current_list) { | ||
+ | current_list = $('<ul></ul>'); | ||
+ | notebook_elem.append(current_list); | ||
+ | } | ||
+ | current_list.append($('<li>{0}</li>'.format(line))); | ||
+ | } | ||
+ | } | ||
+ | return sublinks; | ||
} | } | ||
Line 385: | Line 509: | ||
var new_left_layer = new_left * layer_factors[layer] + LAYER_OFFSET; | var new_left_layer = new_left * layer_factors[layer] + LAYER_OFFSET; | ||
- | |||
/* | /* | ||
- | if (idx == | + | // Remove animation from team page |
+ | if (idx == 8 || page_idx == 8) { | ||
$('#layer' + layer).css('left', new_left_layer + 'px'); | $('#layer' + layer).css('left', new_left_layer + 'px'); | ||
if (complete) complete(); | if (complete) complete(); | ||
Line 456: | Line 580: | ||
//page.scrollTop(scroll_dest); | //page.scrollTop(scroll_dest); | ||
- | page.animate({scrollTop: scroll_dest}, | + | page.animate({scrollTop: scroll_dest}, |
{ | { | ||
'duration': 400, | 'duration': 400, | ||
Line 496: | Line 620: | ||
} | } | ||
- | // | + | // Fetch notebook data and create section |
- | + | var notebook_url = 'https://static.igem.org/mediawiki/2013/d/dc/Waterloo_notebook.txt'; | |
- | + | $.ajax({ | |
- | + | url: notebook_url, | |
- | + | type: 'GET', | |
- | + | success: function(data) { | |
- | + | var notebook_sublinks = createNotebook(data); | |
- | + | createNavBar(notebook_sublinks, true); | |
- | + | }, | |
- | + | error: function() { | |
- | + | // On failure create the navbar anyway. | |
- | + | createNavBar([], false); | |
- | + | } | |
- | + | }); | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
setupPhotos(); | setupPhotos(); | ||
Line 632: | Line 703: | ||
<h1 id="s_Project_Future">Future Aspirations</h1> | <h1 id="s_Project_Future">Future Aspirations</h1> | ||
<h1 id="s_Project_Biobricks">Biobricks</h1> | <h1 id="s_Project_Biobricks">Biobricks</h1> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</div> | </div> | ||
</div> | </div> | ||
Line 648: | Line 708: | ||
<!--Math & Modelling--> | <!--Math & Modelling--> | ||
- | <div id=" | + | <div id="p2" class="page"> |
<div class="pageStuff"> | <div class="pageStuff"> | ||
<h1 id="s_MathModelling_Switch">Switch Modelling</h1> | <h1 id="s_MathModelling_Switch">Switch Modelling</h1> | ||
Line 658: | Line 718: | ||
a b c | a b c | ||
</p> | </p> | ||
- | <h1 id="s_MathModelling_PhageParticle">Phage Particle Production | + | <h1 id="s_MathModelling_PhageParticle">Phage Particle Production Modelling</h1> |
<p> | <p> | ||
a b c | a b c | ||
Line 665: | Line 725: | ||
</div> | </div> | ||
- | <!-- | + | <!--HumanPractices--> |
- | <div id=" | + | <div id="p3" class="page"> |
<div class="pageStuff"> | <div class="pageStuff"> | ||
- | <h1 id=" | + | <h1 id="s_HumanPractices_IntentToInvent">Intent to Invent</h1> |
<p> | <p> | ||
<!-- TODO video? --> | <!-- TODO video? --> | ||
</p> | </p> | ||
- | <h1 id=" | + | <h1 id="s_HumanPractices_Vlogs">Vlogs</h1> |
+ | <h1 id="s_HumanPractices_SpecialProject">Special Project</h1> | ||
</div> | </div> | ||
</div> | </div> | ||
<!--Gallery--> | <!--Gallery--> | ||
- | <div id=" | + | <div id="p4" class="page"> |
<div class="pageStuff"> | <div class="pageStuff"> | ||
<h1 id="s_Gallery_IntentToInvent">Intent to Invent</h1> | <h1 id="s_Gallery_IntentToInvent">Intent to Invent</h1> | ||
Line 691: | Line 752: | ||
<!--Notebook--> | <!--Notebook--> | ||
- | <div id=" | + | <div id="p5" class="page"> |
<div class="pageStuff"> | <div class="pageStuff"> | ||
- | <div id="notebook"> | + | <div id="notebook"> </div> |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</div> | </div> | ||
</div> | </div> | ||
<!--Safety--> | <!--Safety--> | ||
- | <div id=" | + | <div id="p6" class="page"> |
<div class="pageStuff"> | <div class="pageStuff"> | ||
<h1>Safety</h1> | <h1>Safety</h1> | ||
Line 751: | Line 769: | ||
<!--Sponsors--> | <!--Sponsors--> | ||
- | <div id=" | + | <div id="p7" class="page"> |
<div class="pageStuff"> | <div class="pageStuff"> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
<h1 id="s_Sponsors_Sponsors">Sponsors</h1> | <h1 id="s_Sponsors_Sponsors">Sponsors</h1> | ||
<p> | <p> | ||
Line 764: | Line 777: | ||
</div> | </div> | ||
</div> | </div> | ||
+ | |||
+ | <!--Team--> | ||
+ | <div id="p8" class="page"> | ||
+ | <div class="pageStuff"> | ||
+ | <h1 id="s_Team_Administrators">Administrators</h1> | ||
+ | <div id="administratorPhotos" class="photoSection"></div> | ||
+ | |||
+ | <div class="clearFix"></div> | ||
+ | <h1 id="s_Team_Advisors">Advisors</h1> | ||
+ | <div id="advisorPhotos" class="photoSection"></div> | ||
+ | |||
+ | <div class="clearFix"></div> | ||
+ | <h1 id="s_Team_LabDesign">Lab & Design</h1> | ||
+ | <div id="labTeamPhotos" class="photoSection"></div> | ||
+ | |||
+ | <div class="clearFix"></div> | ||
+ | <h1 id="s_Team_HumanPractices">Human Practices</h1> | ||
+ | <div id="humanPracticesTeamPhotos" class="photoSection"></div> | ||
+ | |||
+ | <div class="clearFix"></div> | ||
+ | <h1 id="s_Team_MathModelling">Math & Modelling</h1> | ||
+ | <div id="mathModellingTeamPhotos" class="photoSection"></div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
</div> | </div> |
Revision as of 04:09, 29 July 2013
Abstract
This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract. This is the abstract.
Video
Results
Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results Results.
Future Aspirations
Biobricks
Switch Modelling
x y z
Population & Infection Modelling
a b c
Phage Particle Production Modelling
a b c
Intent to Invent
Vlogs
Special Project
Intent to Invent
Laboratory
Safety
This page is still in progress
Sponsors