Difference between revisions of "Template:Main2019"

 
(84 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
<script>
 
−
 
−
// This is the jquery part of your template.  Try not modify any of this code since it makes your menu work.
 
−
 
−
$(document).ready(function() {
 
−
 
−
$("#HQ_page").attr('id','');
 
−
 
−
//if HQ_info exists, display the content only for HQ
 
−
if ($("#HQ_info").length){
 
−
hide_HQ_info();
 
−
}
 
−
 
−
//if image_slider exists, activate the automatic rotation slider and functionality
 
−
if ($("#image_carrousel").length){
 
−
image_slider_rotation();
 
−
}
 
−
 
−
$( "#load_menu_here" ).load( "https://2019.igem.org/HQ:Menu #load_menu_content" , function() {
 
−
menu_functionality();
 
−
highlight_current_page_menu();
 
−
});
 
−
 
−
 
−
$(".collapsible_accordion_access").click(function(){
 
−
$(this).toggleClass("displaying_content");
 
−
$(this).parent().next().toggleClass("hide_content");
 
−
});
 
−
 
−
 
−
});
 
−
 
−
 
−
// if HQ_info exists, hide unless the user is an admin
 
−
function hide_HQ_info() {
 
−
 
−
switch ( wgUserName) {
 
−
case "Sifuentes anita": case "Vinoo": case "THaddock": case "Meagan": case "MariaB":  case "Abigail": case "Kitwa": case "Pdmillett": case "Suzie iGEM": case "Randy": case "AnneMeyer":
 
−
$("#HQ_info").show();
 
−
break;
 
−
 
−
default:
 
−
$("#HQ_info").hide();
 
−
break;
 
−
}
 
−
   
 
−
}
 
−
 
−
 
−
function menu_functionality() {
 
−
 
−
//accessing submenus and subsubmenus
 
−
$(".submenu_access").click(function(){
 
−
$(this).toggleClass("showing");
 
−
$(this).next().fadeToggle(400);
 
−
});
 
−
 
−
//mobile menu access
 
−
$(".igem_mobile_menu_bar").click(function(){
 
−
$(this).next().fadeToggle(400);
 
−
});
 
−
 
−
}
 
−
 
−
 
−
 
−
function highlight_current_page_menu() {
 
−
 
−
var page_url="https://2019.igem.org/";
 
−
 
−
switch ( (wgPageName.match( /\//g ) || []).length  ) {
 
−
 
−
//this is a hub
 
−
case 0:
 
−
page_url = page_url + wgPageName;
 
−
$("a[href$='"+ page_url +"']").parent().addClass("current_hub");
 
−
$(".current_hub .igem_submenu").fadeToggle(400);
 
−
$(".current_hub .igem_submenu").prev().toggleClass("showing");
 
−
break;
 
−
 
−
case 1:
 
−
//open the hub
 
−
page_url = page_url +wgPageName.substring(0, wgPageName.indexOf('/'));
 
−
$("a[href$='"+ page_url +"']").parent().addClass("current_hub");
 
−
$(".current_hub .igem_submenu").fadeToggle(400);
 
−
$(".current_hub .igem_submenu").prev().toggleClass("showing");
 
−
 
−
// select sub menu page
 
−
page_url ="https://2019.igem.org/"+wgPageName;
 
−
$("a[href$='"+page_url+"'] > .submenu_item").addClass("current_page");
 
−
 
−
// if sub menu has a sub sub menu - open it
 
−
$(".with_subsub_menu.current_page").parent().next().toggleClass("showing");
 
−
$(".with_subsub_menu.current_page").parent().next().next().fadeToggle(400);
 
−
 
−
break;
 
−
 
−
 
−
 
−
case 2:
 
−
 
−
//open the hub
 
−
page_url = page_url +wgPageName.substring(0, wgPageName.indexOf('/'));
 
−
$("a[href$='"+ page_url +"']").parent().addClass("current_hub");
 
−
$(".current_hub .igem_submenu").fadeToggle(400);
 
−
$(".current_hub .igem_submenu").prev().toggleClass("showing");
 
−
 
−
 
−
page_url ="https://2019.igem.org/";
 
−
page_url = page_url +wgPageName.substring(0, wgPageName.lastIndexOf('/'));
 
−
$("a[href$='"+page_url+"'] > .submenu_item").addClass("current_page");
 
−
 
−
$(".current_page").parent().next().toggleClass("showing");
 
−
$(".current_page").parent().next().next().fadeToggle(400);
 
−
 
−
page_url ="https://2019.igem.org/";
 
−
page_url = page_url+wgPageName;
 
−
$("a[href$='"+page_url+"'] > .subsubmenu_item").addClass("current_subpage");
 
−
 
−
// if sub menu has a sub sub menu - open it
 
−
break;
 
−
 
−
 
−
}
 
−
 
−
}
 
−
 
−
 
−
 
−
function image_slider_rotation() {
 
−
 
−
var slider_counter;
 
−
var clicked_image_number = 0;
 
−
var controller_number = 0;
 
−
 
−
 
−
//constant rotation
 
−
setInterval(function(){
 
−
 
−
slider_counter = $("ul.image_slider li.current_image").index()+1;
 
−
 
−
$("ul.image_slider li.current_image").removeClass("current_image");
 
−
$("ul.image_number li.current_image_number").removeClass("current_image_number");
 
−
 
−
if( slider_counter  >= $('ul.image_slider li').length ){
 
−
slider_counter = 1;
 
−
} 
 
−
else{
 
−
slider_counter+=1;
 
−
}
 
−
 
−
$("ul.image_slider li:nth-child("+slider_counter+")").addClass("current_image");
 
−
$("ul.image_number li:nth-child("+slider_counter+")").addClass("current_image_number");
 
−
 
−
}, 5000);
 
−
 
−
 
−
 
−
//if a number is clicked
 
−
$("ul.image_number li").click(function(){
 
−
clicked_image_number = $(this).index() + 1;
 
−
 
−
$("ul.image_slider li.current_image").removeClass("current_image");
 
−
$("ul.image_number li.current_image_number").removeClass("current_image_number");
 
−
 
−
$("ul.image_slider li:nth-child("+clicked_image_number+")").addClass("current_image");
 
−
$("ul.image_number li:nth-child("+clicked_image_number+")").addClass("current_image_number");
 
−
});
 
−
 
−
 
−
 
−
//if a controller next/prev is clicked
 
−
$(".image_controller").click(function(){
 
−
controller_number = $("ul.image_slider li.current_image").index() + 1;
 
−
 
−
$("ul.image_slider li.current_image").removeClass("current_image");
 
−
$("ul.image_number li.current_image_number").removeClass("current_image_number");
 
−
 
−
 
−
if( $(this).hasClass( "next" )) {
 
−
if( controller_number >= $('ul.image_slider li').length ){
 
−
controller_number = 1;
 
−
} 
 
−
else{
 
−
controller_number+=1;
 
−
}
 
−
}
 
−
else if( $(this).hasClass( "prev" )) {
 
−
if( controller_number <=1  ){
 
−
controller_number = $('ul.image_slider li').length;
 
−
} 
 
−
else{
 
−
controller_number-=1;
 
−
}
 
−
}
 
−
 
−
$("ul.image_slider li:nth-child("+controller_number+")").addClass("current_image");
 
−
$("ul.image_number li:nth-child("+controller_number+")").addClass("current_image_number");
 
−
 
−
});
 
−
}
 
−
 
−
 
−
 
−
</script>
 
−
 
−
 
−
 
−
 
 
<style>
 
<style>
−
 
  
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
Line 216: Line 6:
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
  
−
 
+
#home_logo, #sideMenu, #sideMenu, #top_title, .patrollink {display:none;}
−
#home_logo, #sideMenu { display:none; }
+
#content {margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
−
#sideMenu, #top_title, .patrollink {display:none;}
+
body {background-color:white;}
−
#content {   margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {margin-bottom: 0px;}
−
body {background-color:white; }
+
#bodyContent a[href ^="https://"], .link-https {padding-right:0px;}
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
−
 
+
−
/*#top_menu_under, #top_menu_14 { display:none;}*/
+
−
 
+
−
 
+
  
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
Line 268: Line 53:
  
 
#all_menu_items{ display:block;}
 
#all_menu_items{ display:block;}
 +
 +
  
 
/*menu item styling // layer one*/
 
/*menu item styling // layer one*/
Line 315: Line 102:
 
/*submenu and subsubmenus access button styling */
 
/*submenu and subsubmenus access button styling */
 
.submenu_access {
 
.submenu_access {
−
    background-color: #dcdcdc;
+
background-color: #dcdcdc;
−
    float: left;
+
float: left;  
−
    font-size: 130%;
+
font-size: 130%;
−
    font-weight: bold;
+
font-weight: bold;
−
    max-width: 100px;
+
height:61%;
−
    margin-top: -19.5px;
+
max-width:100px;
−
    padding: 10px 3% 9.7px 3%;
+
padding: 9px 3% 6.25px 3%;
−
    text-align: center;
+
text-align:center;
−
    width: 10%;
+
width: 10%;
 
}
 
}
  
Line 350: Line 137:
 
}
 
}
  
 +
 +
 +
 
/*submenu item styling // layer two*/
 
/*submenu item styling // layer two*/
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
Line 382: Line 172:
 
/* submenu access styling if its inside a submenu */
 
/* submenu access styling if its inside a submenu */
 
.igem_submenu > .submenu_access {
 
.igem_submenu > .submenu_access {
−
    background-color: #e8e8e8;
+
background-color: #e8e8e8;
−
    border-bottom: 1px solid #dcdcdc;
+
    border-bottom: 1px solid #dcdcdc;
−
    padding: 8.5px 3% 11.5px 3%;
+
    padding: 8.5px 3% 11.5px 3%;
−
    margin-top: 0px;
+
 
}
 
}
  
Line 412: Line 201:
 
}
 
}
  
 +
 
.submenu_item.subsection_title:hover{
 
.submenu_item.subsection_title:hover{
 
background-color:#e8e8e8;
 
background-color:#e8e8e8;
Line 426: Line 216:
 
display:none;
 
display:none;
 
}
 
}
−
 
  
 
.subsubmenu_item {
 
.subsubmenu_item {
Line 443: Line 232:
 
}
 
}
  
 +
 +
 
/*mobile menu bar styling*/
 
/*mobile menu bar styling*/
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
Line 455: Line 246:
 
margin-top: 0;
 
margin-top: 0;
 
padding: 5px 0;
 
padding: 5px 0;
 +
position:fixed;
 
width:100%;  
 
width:100%;  
 
}
 
}
Line 480: Line 272:
 
}
 
}
  
 +
  
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
Line 485: Line 278:
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
  
 +
 +
 
/* general wrapper for the content */
 
/* general wrapper for the content */
 
.igem_content_wrapper {
 
.igem_content_wrapper {
−
/*width: 88.9%;*/
 
−
width: -webkit-calc(100% -270px);
 
−
width:    -moz-calc(100% - 270px);
 
−
width:  calc(100% - 270px);
 
−
display:block;
 
 
background-color:white;  
 
background-color:white;  
 +
display:block;
 +
width:-webkit-calc(100% -270px);
 +
width:-moz-calc(100% - 270px);
 +
width:calc(100% - 270px);
 +
 
}
 
}
  
Line 506: Line 301:
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
  
−
 
−
/*STYLING */
 
  
 
/*font sizes for all the h titles*/
 
/*font sizes for all the h titles*/
Line 534: Line 327:
 
color: #00a19c;
 
color: #00a19c;
 
font-family: Freeroad_Bold;
 
font-family: Freeroad_Bold;
 +
line-height: initial;
 
padding: 5px 0px;
 
padding: 5px 0px;
 
}
 
}
Line 542: Line 336:
 
color: #212223;   
 
color: #212223;   
 
font-family: Freeroad_Regular;
 
font-family: Freeroad_Regular;
 +
line-height: initial;
 
padding: 5px 0px;
 
padding: 5px 0px;
 
}
 
}
Line 569: Line 364:
 
.igem_content_wrapper a:hover {  
 
.igem_content_wrapper a:hover {  
 
color: #13c0d7;
 
color: #13c0d7;
 +
text-decoration:none;
 +
}
 +
 +
/*for images that are href*/
 +
a.image_href{
 
text-decoration:none;
 
text-decoration:none;
 
}
 
}
Line 574: Line 374:
 
/* non numbered lists */
 
/* non numbered lists */
 
.igem_content_wrapper ul {
 
.igem_content_wrapper ul {
−
font-family:Tahoma, Geneva, sans-serif;  
+
font-family:Arial;  
−
font-size: 120%;
+
font-size: 130%;
−
padding:0px 20px;
+
 
list-style: disc;
 
list-style: disc;
 +
padding:0px 20px;
 
}
 
}
  
 
/*font size specifications for nested lists and other special cases*/
 
/*font size specifications for nested lists and other special cases*/
−
 
−
 
 
.igem_content_wrapper td > ul li, .igem_content_wrapper ol ol li, .igem_content_wrapper ul ol li, .igem_content_wrapper ol ul li, .igem_content_wrapper ul ul li  {  
 
.igem_content_wrapper td > ul li, .igem_content_wrapper ol ol li, .igem_content_wrapper ul ol li, .igem_content_wrapper ol ul li, .igem_content_wrapper ul ul li  {  
−
font-size: 85%;
+
font-size: 75%;
 +
margin-bottom: 10px;
 +
line-height: 18px;
 
}
 
}
  
Line 590: Line 390:
 
/* numbered lists */
 
/* numbered lists */
 
.igem_content_wrapper ol {
 
.igem_content_wrapper ol {
 +
font-family:Arial;
 +
font-size: 130%;
 
padding:0px;  
 
padding:0px;  
−
font-size: 115%;
 
−
font-family:Tahoma, Geneva, sans-serif;
 
 
}
 
}
  
Line 614: Line 414:
 
/* table headers */
 
/* table headers */
 
.igem_content_wrapper th {  
 
.igem_content_wrapper th {  
−
background-color:#fff;  
+
    background-color: #f2f2f2;
−
border: 1px solid #d3d3d3;  
+
    border: 1px solid #d3d3d3;
−
border-collapse: collapse;  
+
    border-collapse: collapse;
−
font-size: 110%;
+
    font-size: 110%;
−
padding: 10px;  
+
    padding: 10px;
−
vertical-align: text-top;  
+
    vertical-align: text-top;
 +
    text-align: left;
 
}
 
}
−
 
−
/*hide patrollink */
 
−
.patrollink {display:none;}
 
−
 
  
  
Line 665: Line 462:
 
clear:both;
 
clear:both;
 
}
 
}
 +
 
/*add extra space to page break with clear class*/
 
/*add extra space to page break with clear class*/
 
.clear.extra_space {
 
.clear.extra_space {
Line 672: Line 470:
 
/* horizontal gray line to divide the page*/
 
/* horizontal gray line to divide the page*/
 
.line_divider {
 
.line_divider {
−
     border-top: 1px solid #c1c1c1;
+
     border-top: 1px solid #848484;
 
  margin: auto;
 
  margin: auto;
 
   width: 98%;
 
   width: 98%;
 
}
 
}
  
−
.line_divider.dark {
+
.line_divider.dark {
−
    border-top: 1px solid #0a5157;
+
border-top: 1px solid #000000;
−
}
+
}
  
 
 
 
/* softer horizontal gray line to divide the page*/
 
/* softer horizontal gray line to divide the page*/
 
.line_divider.soft {
 
.line_divider.soft {
−
      border-top: 1px solid #e8e8e8;
+
border-top: 1px solid #c1c1c1;
 
}
 
}
 
 
Line 699: Line 497:
 
background-color: #f2f2f2;  
 
background-color: #f2f2f2;  
 
}
 
}
−
 
  
 
.highlight.decoration_top {
 
.highlight.decoration_top {
Line 705: Line 502:
 
}
 
}
  
−
.highlight.decoration_dark_top {
+
.highlight.decoration_red_top, .highlight.post_item.decoration_red_top {
−
    border-top: 4px solid #00a19c;
+
−
}
+
−
 
+
−
.highlight.decoration_medium_top {
+
−
    border-top: 4px solid #00a19c;
+
−
}
+
−
 
+
−
.highlight.decoration_light_top {
+
−
    border-top: 4px solid #00a19c;
+
−
}
+
−
+
−
.highlight.decoration_red_top {
+
 
     border-top: 4px solid #F42534;
 
     border-top: 4px solid #F42534;
 
}
 
}
  
−
.highlight.decoration_full {
+
.highlight.decoration_full, .highlight.post_item.decoration_full {
 
     border: 4px solid #00a19c;
 
     border: 4px solid #00a19c;
 
}
 
}
  
−
.highlight.decoration_dark_full {
 
−
    border: 4px solid #00a19c;
 
−
}
 
−
 
−
.highlight.decoration_medium_full {
 
−
    border: 4px solid #00a19c;
 
−
}
 
−
 
−
.highlight.decoration_light_full {
 
−
    border: 4px solid #00a19c;
 
−
}
 
 
 
−
.highlight.decoration_red_full {
+
.highlight.decoration_red_full, .highlight.post_item.decoration_red_full {
 
     border: 4px solid #F42534;
 
     border: 4px solid #F42534;
 
}
 
}
Line 748: Line 522:
  
 
/*special image that takes up the entire page*/
 
/*special image that takes up the entire page*/
−
.full_size_image {  width:100%; margin-top: -59px;}
+
.full_size_image {   
−
 
+
width:100%;  
 +
margin-top: -60px;
 +
}
  
  
Line 766: Line 542:
 
margin: auto;
 
margin: auto;
 
text-decoration: none !important;
 
text-decoration: none !important;
−
padding: 10px 15px;
+
padding: 10px 15px !important;
 
}
 
}
  
Line 834: Line 610:
 
/************************************************/
 
/************************************************/
  
−
.igem_content_wrapper p.image_caption {
+
.igem_content_wrapper p.image_caption {
−
    margin-top: -10px;
+
font-size: 100%;
−
    padding-top: 0;
+
    margin-top: -10px;
−
    font-size: 100%;
+
    padding-top: 0;
−
}
+
}
 +
 +
 
/*Post items*/
 
/*Post items*/
 
/************************************************/
 
/************************************************/
−
 
 
.highlight.post_item {
 
.highlight.post_item {
 
border: 1px solid #6f7173;
 
border: 1px solid #6f7173;
Line 873: Line 650:
 
border-bottom: 0px;
 
border-bottom: 0px;
 
color: #212223;
 
color: #212223;
−
font-size: 150%;
 
−
font-family: Freeroad_Regular;
 
 
float:left;
 
float:left;
 +
font-family: Freeroad_Regular;
 +
font-size: 150%;
 
}
 
}
 
 
 
.highlight.post_item  > .details > .date {
 
.highlight.post_item  > .details > .date {
 +
color: #6f7173;
 +
float: right;
 
font-family: Freeroad_Regular;
 
font-family: Freeroad_Regular;
−
  font-style: italic;
 
−
  color: #6f7173;
 
 
font-size: 150%;
 
font-size: 150%;
−
    float: right;
+
    font-style: italic;
 
}
 
}
 
 
 
.highlight.post_item  > .details > .icon {
 
.highlight.post_item  > .details > .icon {
 
   float: left;
 
   float: left;
−
  width: 30px;
 
−
  margin-top: -7px;
 
 
   margin-left: -4px;
 
   margin-left: -4px;
 +
  margin-top: -7px;
 +
width: 30px;
 
}
 
}
  
Line 897: Line 674:
 
 
 
.highlight.post_item  > .details > .icon.alert:after {
 
.highlight.post_item  > .details > .icon.alert:after {
−
background-image: url('https://static.igem.org/mediawiki/2019/7/75/Icon_alert.svg');
+
background-image: url('https://static.igem.org/mediawiki/2019/4/44/Small_icon_alert.svg');
 
   background-size: 25px 25px;
 
   background-size: 25px 25px;
 
content:"";
 
content:"";
Line 917: Line 694:
 
.highlight.post_item  > .details > .icon.note:after {
 
.highlight.post_item  > .details > .icon.note:after {
 
background-image: url('https://static.igem.org/mediawiki/2019/c/cb/Small_icon_note.svg');
 
background-image: url('https://static.igem.org/mediawiki/2019/c/cb/Small_icon_note.svg');
 +
background-size: 25px 25px;
 +
content:"";
 +
display: inline-block;
 +
height: 25px;
 +
width: 25px;
 +
}
 +
 +
 +
.highlight.post_item  > .details > .icon.notice:after {
 +
background-image: url('https://static.igem.org/mediawiki/2019/a/a8/Small_icon_notice.svg');
 
background-size: 25px 25px;
 
background-size: 25px 25px;
 
content:"";
 
content:"";
Line 944: Line 731:
 
}
 
}
  
 +
.highlight.post_item  > .details > .icon.why:after {
 +
background-image: url('https://static.igem.org/mediawiki/2019/5/51/Small_icon_why.svg');
 +
  background-size: 25px 25px;
 +
content:"";
 +
display: inline-block;
 +
height: 25px;
 +
width: 25px;
 +
}
 +
 +
 +
/*on this page */
 +
.on_page::after{
 +
background-image:url('https://static.igem.org/mediawiki/2019/9/9b/Igem_page.svg');
 +
background-size: 25px 25px;
 +
content:"";
 +
display: inline-block;
 +
height: 25px;
 +
width: 25px;
 +
}
  
  
−
/*REVIEW THIS ANA*/
 
 
/* center content */
 
/* center content */
−
.center_content p,
+
p.center_content,
−
.center_content h1,
+
h1.center_content,
−
.center_content h2,
+
h2.center_content,
−
.center_content h3,
+
h3.center_content,
−
.center_content h4,
+
h4.center_content,
−
.center_content h5,
+
h5.center_content,
−
.center_content h6 {
+
h6.center_content,
−
text-align:center;
+
img.center_content {
 +
margin:auto;
 +
text-align:center!important;
 
}
 
}
 
 
Line 976: Line 783:
 
}
 
}
  
 +
 +
 
/*Image slider/
 
/*Image slider/
 
/************************************************/
 
/************************************************/
Line 1,057: Line 866:
  
  
−
/* REVIEW THIS ANA*/
+
 
 
/*Navigation support/
 
/*Navigation support/
 
/************************************************/
 
/************************************************/
−
.column.full_size.navigation_support {
+
 
−
     padding: 0px 0px 0px 20px;
+
 
 +
.navigation_support_title {
 +
background-color: #f2f2f2;
 +
     border-radius: 7px;
 +
color: #797979;
 +
    cursor: pointer;
 +
float: left;
 +
    font-size: 120%;
 +
font-weight: bold;
 +
height: 25px;
 +
margin: 0px 10px 0px 0px;
 +
padding: 8px 3.5px 2px 3.5px;
 +
    text-align: center;
 +
width: 200px;
 
}
 
}
 +
  
 
.navigation_button {   
 
.navigation_button {   
−
    background-color: #ffffff;
+
border: 2px solid #c1c1c1;
−
     border: 2px solid #00a19c;
+
     border-radius: 15%;
−
  color: #00a19c;
+
    color: #797979;
−
     max-width: 40px;
+
cursor: pointer;
 +
display: block;
 +
float: left;
 +
font-size: 120%;
 +
    font-weight: bold;
 +
height: 25px;
 +
     margin-right: 15px;
 +
    padding: 6px 1.5px 0px 1.5px;
 
     text-align: center;
 
     text-align: center;
−
    padding: 3px 0px;
+
    width: 30px;
−
    font-size: 115%;
+
−
    cursor: pointer;
+
−
    border-radius: 50%;
+
−
    float: left;
+
−
    width: 25px;
+
−
    margin-right: 10px;
+
−
margin-top: 3px;
+
 
}
 
}
  
Line 1,087: Line 910:
  
 
.navigation_button.arrow_navigation:hover {
 
.navigation_button.arrow_navigation:hover {
−
  color: #542160;  
+
  color: #00a19c;  
 
background-color: #ffffff;
 
background-color: #ffffff;
 
border: 2px solid white;
 
border: 2px solid white;
 
}
 
}
  
−
.navigation_button.arrow_navigation.previous_item::before {
 
−
content: url(https://static.igem.org/mediawiki/2018/f/ff/Previous_demo_icon-14-21.svg);
 
−
}
 
−
 
−
 
−
.navigation_button.arrow_navigation.next_item::before {
 
−
content: url(https://static.igem.org/mediawiki/2018/1/12/Next_demo_icon-14-21-22.svg);
 
−
}
 
  
  
 
.navigation_button:hover, .title_extra:hover+.navigation_button, .navigation_button.active_navigation_button:hover  {  
 
.navigation_button:hover, .title_extra:hover+.navigation_button, .navigation_button.active_navigation_button:hover  {  
−
background-color: #542160;  
+
background-color: #00a19c;
 +
border: 2px solid #00a19c;
 
color: #ffffff;  
 
color: #ffffff;  
−
border: 2px solid #542160;
 
 
}
 
}
  
 
.navigation_button:hover+.title_extra, .title_extra:hover {   
 
.navigation_button:hover+.title_extra, .title_extra:hover {   
−
color: #90528f;  
+
color: #00a19c;  
 
display:block;  
 
display:block;  
 
}
 
}
  
 
.navigation_button.active_navigation_button {
 
.navigation_button.active_navigation_button {
−
background-color: #d3d3d3;  
+
color: #00a19c;
−
color: #5e5f5f;
+
background-color: #f2f2f2;  
−
border: 2px solid #5e5f5f;
+
border: 2px solid #00a19c;
 
}
 
}
  
−
+
 
 
/*REVIEW THIS ANA*/
 
/*REVIEW THIS ANA*/
 
.title_extra {
 
.title_extra {
−
color: #542160;  
+
color: #00a19c;
 +
display:none;
 
float:left;  
 
float:left;  
 +
margin-right: 20px;
 
padding: 7px 0px;  
 
padding: 7px 0px;  
−
margin-right: 20px;
 
−
display:none;
 
 
}
 
}
  
Line 1,136: Line 951:
 
.title_extra.support_item {
 
.title_extra.support_item {
 
display:block;
 
display:block;
−
margin-right:0px;
 
 
margin-left: -17px;
 
margin-left: -17px;
 +
margin-right:0px;
 
}
 
}
 
 
 
.title_extra.support_item:hover {  
 
.title_extra.support_item:hover {  
−
color: #542160;
+
color: #00a19c;
 
}
 
}
  
Line 1,150: Line 965:
  
  
 +
/*track navigation */
 +
/************************************************/
 +
 +
.track_navigation{
 +
float:left;
 +
width:8.33%;
 +
}
 +
 +
.track_navigation> img {
 +
opacity: 1.0;
 +
}
 +
 +
 +
.track_navigation> img:hover{
 +
opacity: 0.5;
 +
}
 +
 +
 
/*accordion */
 
/*accordion */
 
/************************************************/
 
/************************************************/
Line 1,219: Line 1,052:
 
}
 
}
  
 +
 +
 +
/*read more class for large sections of text*/
 +
 +
.read_more {
 +
background-color:#00A19B;
 +
border: 1px solid #00A19B;
 +
border-radius:5px;
 +
color: #ffffff;
 +
font-weight: bold;
 +
padding: 0px 12px;
 +
}
 +
 +
 +
.read_more:hover {
 +
background-color:#0a5157;
 +
border: 1px solid #0a5157;
 +
color: #ffffff;
 +
cursor:pointer;
 +
}
 +
 +
 +
.read_more::before{
 +
content: "Read more";
 +
white-space:nowrap;
 +
}
 +
 +
.read_more.show_less::before{
 +
content: "Show less";
 +
}
 +
 +
.read_more_text{
 +
display:none;
 +
}
 +
 +
 
/*mobile*/
 
/*mobile*/
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
Line 1,239: Line 1,108:
 
/************************************************/
 
/************************************************/
 
@media only screen and (max-width: 1450px) {
 
@media only screen and (max-width: 1450px) {
 +
 
.hub_title{ font-size: 90%;}
 
.hub_title{ font-size: 90%;}
 
.submenu_item {font-size:85%;}
 
.submenu_item {font-size:85%;}
 
.subsubmenu_item {font-size:80%;}
 
.subsubmenu_item {font-size:80%;}
 +
 
}
 
}
  
 +
 
/* 1200px  */
 
/* 1200px  */
 
/************************************************/
 
/************************************************/
−
 
 
@media only screen and (max-width: 1200px) {
 
@media only screen and (max-width: 1200px) {
−
#content {width:100%; }
+
 +
#content {width:100%;}
 
.igem_menu_wrapper {width:15%; right:0%;}
 
.igem_menu_wrapper {width:15%; right:0%;}
−
.load_menu_here, .menu_icon {display:none;}
+
.load_menu_here, .menu_icon, .hub_icon {display:none;}
−
ul.image_slider { padding:0px; width: 100%; margin: auto;}
+
ul.image_slider { padding:0px; width: 100%; margin: auto;}
−
.hub_icon{ display:none;}
+
 
.hub_title{ width: 77%; padding-left: 7%; padding-right:0; font-size:80%;}  
 
.hub_title{ width: 77%; padding-left: 7%; padding-right:0; font-size:80%;}  
 
.submenu_item{ padding-left: 16%; padding-right:0; font-size:75% }
 
.submenu_item{ padding-left: 16%; padding-right:0; font-size:75% }
 
.submenu_item.with_subsub_menu{ width:68%;}   
 
.submenu_item.with_subsub_menu{ width:68%;}   
 
.subsubmenu_item {font-size:70%;}
 
.subsubmenu_item {font-size:70%;}
 +
.igem_column_wrapper{padding-top:0px;}
 +
 
}
 
}
  
 +
 
/* 1100px  */
 
/* 1100px  */
 
/************************************************/
 
/************************************************/
 
@media only screen and (max-width: 1100px) {
 
@media only screen and (max-width: 1100px) {
 +
 
.igem_content_wrapper {width:100%; margin-left:0px;}
 
.igem_content_wrapper {width:100%; margin-left:0px;}
−
.half_size, .two_thirds_size, .third_size, .three_quarter_size, .quarter_size {width:100%; }
+
.igem_column_wrapper{padding-top:25px;}
−
.column.full_size > .highlight.news_item > .column.quarter_size, .column.full_size > .highlight.news_item > .column.three_quarter_size {width:100%;}
+
 
 +
.half_size, .two_thirds_size, .third_size, .three_quarter_size, .quarter_size,
 +
.column.full_size > .highlight.news_item > .column.quarter_size,  
 +
.column.full_size > .highlight.news_item > .column.three_quarter_size,
 +
.column.full_size > .highlight.post_item > .column.quarter_size,
 +
.column.full_size > .highlight.post_item > .column.three_quarter_size {width:100%;}
 +
 
.column img { width: 96%; padding: 2% 0px;}
 
.column img { width: 96%; padding: 2% 0px;}
 
.highlight {padding:15px 5px;}
 
.highlight {padding:15px 5px;}
 
.igem_menu { width: 100%; float: left; position: relative; max-width: 100%;}
 
.igem_menu { width: 100%; float: left; position: relative; max-width: 100%;}
−
.igem_mobile_menu_bar {display:block;}
+
.igem_mobile_menu_bar, .hub_icon {display:block;}
−
.hub_icon{ display:block;}
+
 
 
.hub_title{ width: 68%; padding-left:0%}  
 
.hub_title{ width: 68%; padding-left:0%}  
 
.igem_menu, .igem_menu_logo {display:none;}
 
.igem_menu, .igem_menu_logo {display:none;}
 +
 +
.highlight.post_item {padding:0px;}
 +
.highlight.post_item > .details { clear: both; max-height: 80px; padding:15px; width: 89%;}
 +
.highlight.post_item > .details > .icon, .highlight.post_item  > .details > .title {clear: both;}
 +
.highlight.post_item > .details > .date {clear: both; float:left;}
 +
.highlight.post_item img { padding: 2%; margin: auto;}
 +
 +
.igem_menu{  width: 30%; float: right; position: fixed; margin-top: 47px;  max-width: 100%;}
 +
.full_size_image { margin-top: 0px;}
 +
 +
}
 +
 +
/* 800px  */
 +
/************************************************/
 +
@media only screen and (max-width: 800px) {
 +
.igem_menu{  width: 50%;}
 +
}
 +
 +
/* 600px  */
 +
/************************************************/
 +
@media only screen and (max-width: 600px) {
 +
.igem_menu{  width: 60%;}
 
}
 
}
  
 +
 +
 
</style>
 
</style>
 +
 +
 +
 +
 +
 +
<script>
 +
 +
// This is the jquery part of your template.  Try not modify any of this code since it makes your menu work.
 +
 +
$(document).ready(function() {
 +
 +
$("#HQ_page").attr('id','');
 +
 +
//if HQ_info exists, display the content only for HQ
 +
if ($("#HQ_info").length){
 +
hide_HQ_info();
 +
}
 +
 +
$( "#load_menu_here" ).load( "https://2019.igem.org/HQ:Menu #load_menu_content" , function() {
 +
menu_functionality();
 +
highlight_current_page_menu();
 +
});
 +
 +
 +
if( $(".igem_mobile_menu_bar").is(":visible") ){
 +
$(".igem_content_wrapper").click(function() {
 +
$(".igem_menu").hide();
 +
});
 +
}
 +
 +
 +
//expand collapse functionality
 +
$(".collapsible_accordion_access").click(function(){
 +
$(this).toggleClass("displaying_content");
 +
$(this).parent().next().toggleClass("hide_content");
 +
});
 +
 +
//read more functionality
 +
$(".read_more").click(function(){
 +
$(this).toggleClass("show_less");
 +
$(this).prev(".read_more_text").fadeToggle(400);
 +
});
 +
 +
//if image_slider exists, activate the automatic rotation slider and functionality
 +
if ($("#image_carrousel").length){
 +
image_slider_rotation();
 +
}
 +
 +
 +
 +
//loading content ids
 +
 +
if ($("#load_sponsors_here").length) {
 +
load_these_items ( "https://2019.igem.org/Sponsors #all_sponsors", "load_sponsors_here");
 +
}
 +
 +
if ($("#load_news_here").length) {
 +
load_these_items ( "https://2019.igem.org/Teams/News_Archive #load_these_news_items", "load_news_here");
 +
}
 +
 +
});
 +
 +
 +
 +
 +
 +
// if HQ_info exists, hide unless the user is an admin
 +
function hide_HQ_info() {
 +
 +
switch ( wgUserName) {
 +
case "Sifuentes anita": case "Vinoo": case "THaddock": case "Meagan": case "MariaB":  case "Abigail": case "Kitwa": case "Pdmillett": case "Suzie iGEM": case "Randy": case "AnneMeyer": case "alexanian":
 +
$("#HQ_info").show();
 +
break;
 +
 +
default:
 +
$("#HQ_info").hide();
 +
break;
 +
}
 +
   
 +
}
 +
 +
 +
 +
 +
//general menu functionality
 +
function menu_functionality() {
 +
 +
//accessing submenus and subsubmenus
 +
$(".submenu_access").click(function(){
 +
$(this).toggleClass("showing");
 +
$(this).next().fadeToggle(400);
 +
});
 +
 +
//mobile menu access
 +
$(".igem_mobile_menu_bar").click(function(){
 +
$(this).next().fadeToggle(400);
 +
});
 +
 +
}
 +
 +
 +
 +
//highlight current page in the menu
 +
function highlight_current_page_menu() {
 +
 +
var page_url="https://2019.igem.org/";
 +
 +
switch ( (wgPageName.match( /\//g ) || []).length  ) {
 +
 +
//this is a hub
 +
case 0:
 +
page_url = page_url + wgPageName;
 +
$("a[href$='"+ page_url +"']").parent().addClass("current_hub");
 +
$(".current_hub .igem_submenu").fadeToggle(400);
 +
$(".current_hub .igem_submenu").prev().toggleClass("showing");
 +
break;
 +
 +
case 1:
 +
//open the hub
 +
page_url = page_url +wgPageName.substring(0, wgPageName.indexOf('/'));
 +
$("a[href$='"+ page_url +"']").parent().addClass("current_hub");
 +
$(".current_hub .igem_submenu").fadeToggle(400);
 +
$(".current_hub .igem_submenu").prev().toggleClass("showing");
 +
 +
// select sub menu page
 +
page_url ="https://2019.igem.org/"+wgPageName;
 +
$("a[href$='"+page_url+"'] > .submenu_item").addClass("current_page");
 +
 +
// if sub menu has a sub sub menu - open it
 +
$(".with_subsub_menu.current_page").parent().next().toggleClass("showing");
 +
$(".with_subsub_menu.current_page").parent().next().next().fadeToggle(400);
 +
 +
break;
 +
 +
 +
 +
case 2:
 +
 +
//open the hub
 +
page_url = page_url +wgPageName.substring(0, wgPageName.indexOf('/'));
 +
$("a[href$='"+ page_url +"']").parent().addClass("current_hub");
 +
$(".current_hub .igem_submenu").fadeToggle(400);
 +
$(".current_hub .igem_submenu").prev().toggleClass("showing");
 +
 +
 +
page_url ="https://2019.igem.org/";
 +
page_url = page_url +wgPageName.substring(0, wgPageName.lastIndexOf('/'));
 +
$("a[href$='"+page_url+"'] > .submenu_item").addClass("current_page");
 +
 +
$(".current_page").parent().next().toggleClass("showing");
 +
$(".current_page").parent().next().next().fadeToggle(400);
 +
 +
page_url ="https://2019.igem.org/";
 +
page_url = page_url+wgPageName;
 +
$("a[href$='"+page_url+"'] > .subsubmenu_item").addClass("current_subpage");
 +
 +
// if sub menu has a sub sub menu - open it
 +
break;
 +
 +
 +
}
 +
 +
}
 +
 +
 +
 +
//function for image sliders
 +
function image_slider_rotation() {
 +
 +
var slider_counter;
 +
var clicked_image_number = 0;
 +
var controller_number = 0;
 +
 +
 +
//constant rotation
 +
setInterval(function(){
 +
 +
slider_counter = $("ul.image_slider li.current_image").index()+1;
 +
 +
$("ul.image_slider li.current_image").removeClass("current_image");
 +
$("ul.image_number li.current_image_number").removeClass("current_image_number");
 +
 +
if( slider_counter  >= $('ul.image_slider li').length ){
 +
slider_counter = 1;
 +
} 
 +
else{
 +
slider_counter+=1;
 +
}
 +
 +
$("ul.image_slider li:nth-child("+slider_counter+")").addClass("current_image");
 +
$("ul.image_number li:nth-child("+slider_counter+")").addClass("current_image_number");
 +
 +
}, 5000);
 +
 +
 +
 +
//if a number is clicked
 +
$("ul.image_number li").click(function(){
 +
clicked_image_number = $(this).index() + 1;
 +
 +
$("ul.image_slider li.current_image").removeClass("current_image");
 +
$("ul.image_number li.current_image_number").removeClass("current_image_number");
 +
 +
$("ul.image_slider li:nth-child("+clicked_image_number+")").addClass("current_image");
 +
$("ul.image_number li:nth-child("+clicked_image_number+")").addClass("current_image_number");
 +
});
 +
 +
 +
 +
//if a controller next/prev is clicked
 +
$(".image_controller").click(function(){
 +
controller_number = $("ul.image_slider li.current_image").index() + 1;
 +
 +
$("ul.image_slider li.current_image").removeClass("current_image");
 +
$("ul.image_number li.current_image_number").removeClass("current_image_number");
 +
 +
 +
if( $(this).hasClass( "next" )) {
 +
if( controller_number >= $('ul.image_slider li').length ){
 +
controller_number = 1;
 +
} 
 +
else{
 +
controller_number+=1;
 +
}
 +
}
 +
else if( $(this).hasClass( "prev" )) {
 +
if( controller_number <=1  ){
 +
controller_number = $('ul.image_slider li').length;
 +
} 
 +
else{
 +
controller_number-=1;
 +
}
 +
}
 +
 +
$("ul.image_slider li:nth-child("+controller_number+")").addClass("current_image");
 +
$("ul.image_number li:nth-child("+controller_number+")").addClass("current_image_number");
 +
 +
});
 +
}
 +
 +
 +
 +
// load desired content function
 +
function load_these_items ( source_page , destination_div ) {
 +
 +
$("#"+destination_div ).load( source_page , function() { 
 +
});
 +
}
 +
 +
 +
</script>
 +
  
  
Line 1,300: Line 1,457:
 
 
 
<div class="igem_logo_mobile">
 
<div class="igem_logo_mobile">
−
<img src="https://static.igem.org/mediawiki/2018/4/4f/2018_igem_mobile_menu_logo.svg">
+
<img src="https://static.igem.org/mediawiki/2019/3/3c/Igem_mobile_menu_logo.svg">
 
</div>
 
</div>
  
  
 
<div class="igem_menu_control_mobile">
 
<div class="igem_menu_control_mobile">
−
<img id="menu_control_image" src="https://static.igem.org/mediawiki/igem.org/3/3b/Menu_icon.svg">
+
<img id="menu_control_image" src="https://static.igem.org/mediawiki/2019/2/25/Main_menu_icon.svg">
 
</div>
 
</div>
  
Line 1,337: Line 1,494:
 
<div class=" igem_column_wrapper">
 
<div class=" igem_column_wrapper">
  
−
<div class="clear extra_space"></div>
 
−
 
−
 
−
 
−
 
−
<div class="column full_size" id="construction_message">
 
−
<div class="highlight decoration_dark_full">
 
−
 
−
<div style="width:10%; float:left">
 
−
<img src="https://static.igem.org/mediawiki/2019/7/75/Icon_alert.svg" height="80px">
 
−
</div>
 
−
 
−
<div style="width:90%; float:left;">
 
−
<h3>Alert</h3>
 
−
<p>This page is in draft form and may be changing. Please check back often for updates, or you can email us at <i>hq [at] igem [dot] org</i> with questions.</p>
 
−
</div>
 
−
 
−
<div class="clear"></div>
 
−
</div>
 
−
 
−
</div>
 
−
 
−
<div id="HQ_info">
 
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>

Latest revision as of 18:02, 20 November 2019

Loading...