Difference between revisions of "Template:Main2018"

 
(39 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
 
 
<script>
 
<script>
  
Line 7: Line 6:
 
$(document).ready(function() {
 
$(document).ready(function() {
  
−
$("#HQ_page").attr('id','');
+
$("#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://2018.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":
 +
$("#HQ_info").show();
 +
break;
 +
 +
default:
 +
$("#HQ_info").hide();
 +
break;
 +
}
 +
   
 +
}
 
 
−
 
−
var page_url="https://2018.igem.org/";
 
−
$( "#load_menu_here" ).load( "https://2018.igem.org/HQ:Menu #load_menu_content" , function() {
 
  
 +
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);
 +
});
 +
 +
}
  
−
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;
 
  
 +
function highlight_current_page_menu() {
 +
 +
var page_url="https://2018.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:
+
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");
  
−
//open the hub
+
// select sub menu page
−
page_url = page_url +wgPageName.substring(0, wgPageName.indexOf('/'));
+
page_url ="https://2018.igem.org/"+wgPageName;
−
$("a[href$='"+ page_url +"']").parent().addClass("current_hub");
+
$("a[href$='"+page_url+"'] > .submenu_item").addClass("current_page");
−
$(".current_hub .igem_submenu").fadeToggle(400);
+
−
$(".current_hub .igem_submenu").prev().toggleClass("showing");
+
  
−
// select sub menu page
+
// if sub menu has a sub sub menu - open it
−
page_url ="https://2018.igem.org/"+wgPageName;
+
$(".with_subsub_menu.current_page").parent().next().toggleClass("showing");
−
$("a[href$='"+page_url+"'] > .submenu_item").addClass("current_page");
+
$(".with_subsub_menu.current_page").parent().next().next().fadeToggle(400);
  
−
// if sub menu has a sub sub menu - open it
+
break;
−
$(".with_subsub_menu.current_page").parent().next().toggleClass("showing");
+
−
$(".with_subsub_menu.current_page").parent().next().next().fadeToggle(400);
+
  
−
break;
 
  
  
 +
case 2:
  
−
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");
  
−
//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://2018.igem.org/";
 +
page_url = page_url +wgPageName.substring(0, wgPageName.lastIndexOf('/'));
 +
$("a[href$='"+page_url+"'] > .submenu_item").addClass("current_page");
  
−
page_url ="https://2018.igem.org/";
+
$(".current_page").parent().next().toggleClass("showing");
−
page_url = page_url +wgPageName.substring(0, wgPageName.lastIndexOf('/'));
+
$(".current_page").parent().next().next().fadeToggle(400);
−
$("a[href$='"+page_url+"'] > .submenu_item").addClass("current_page");
+
  
−
$(".current_page").parent().next().toggleClass("showing");
+
page_url ="https://2018.igem.org/";
−
$(".current_page").parent().next().next().fadeToggle(400);
+
page_url = page_url+wgPageName;
 +
$("a[href$='"+page_url+"'] > .subsubmenu_item").addClass("current_subpage");
  
−
page_url ="https://2018.igem.org/";
+
// if sub menu has a sub sub menu - open it
−
page_url = page_url+wgPageName;
+
break;
−
$("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);
  
  
−
//accessing submenus and subsubmenus
 
−
$(".submenu_access").click(function(){
 
−
$(this).toggleClass("showing");
 
−
$(this).next().fadeToggle(400);
 
−
});
 
  
−
//mobile menu access
+
//if a number is clicked
−
$(".igem_mobile_menu_bar").click(function(){
+
$("ul.image_number li").click(function(){
−
$(this).next().fadeToggle(400);
+
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");
 +
});
  
−
});
 
−
</script>
 
  
  
 +
//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>
  
  
Line 178: Line 281:
 
height: 39px;
 
height: 39px;
 
width:100%;  
 
width:100%;  
 +
}
 +
 +
.igem_menu_item.last_item{
 +
margin-bottom:60px;
 
}
 
}
  
Line 374: Line 481:
 
/* general wrapper for the content */
 
/* general wrapper for the content */
 
.igem_content_wrapper {
 
.igem_content_wrapper {
−
width: 88.9%;
+
/*width: 88.9%;*/
 +
width: -webkit-calc(100% -270px);
 +
width:    -moz-calc(100% - 270px);
 +
width:  calc(100% - 270px);
 
display:block;
 
display:block;
 
background-color:white;  
 
background-color:white;  
Line 394: Line 504:
  
 
/*font sizes for all the h titles*/
 
/*font sizes for all the h titles*/
−
.igem_content_wrapper h1 { font-size: 180%;}
+
.igem_content_wrapper h1 { font-size: 210%;}
 
.igem_content_wrapper h2 { font-size: 160%;}
 
.igem_content_wrapper h2 { font-size: 160%;}
 
.igem_content_wrapper h3 { font-size: 150%;}
 
.igem_content_wrapper h3 { font-size: 150%;}
Line 459: Line 569:
 
.igem_content_wrapper ul {
 
.igem_content_wrapper ul {
 
font-family:Tahoma, Geneva, sans-serif;  
 
font-family:Tahoma, Geneva, sans-serif;  
−
font-size: 115%;
+
font-size: 120%;
 
padding:0px 20px;
 
padding:0px 20px;
 +
list-style: disc;
 
}
 
}
  
 
/*font size specifications for nested lists and other special cases*/
 
/*font size specifications for nested lists and other special cases*/
−
.igem_content_wrapper ul ul li { font-size: 90%; }
+
 
−
.igem_content_wrapper td > ul li { font-size: 85%;}
+
 
 +
.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%;
 +
}
  
  
Line 557: Line 671:
 
}
 
}
  
 +
 +
/* softer horizontal gray line to divide the page*/
 +
.line_divider.soft {
 +
      border-top: 1px solid #f2f2f2;
 +
}
 +
 +
/*highlight class can be used style divs in multiple combinations*/
 
.highlight {  
 
.highlight {  
 
padding: 15px 20px;
 
padding: 15px 20px;
Line 571: Line 692:
 
.highlight.decoration_top {
 
.highlight.decoration_top {
 
     border-top: 4px solid #90528f;
 
     border-top: 4px solid #90528f;
 +
}
 +
 +
.highlight.decoration_dark_top {
 +
    border-top: 4px solid #542160;
 +
}
 +
 +
.highlight.decoration_medium_top {
 +
    border-top: 4px solid #90528f;
 +
}
 +
 +
.highlight.decoration_light_top {
 +
    border-top: 4px solid #b48cb7;
 +
}
 +
 +
.highlight.decoration_red_top {
 +
    border-top: 4px solid #c30000;
 
}
 
}
  
 
.highlight.decoration_full {
 
.highlight.decoration_full {
 
     border: 4px solid #90528f;
 
     border: 4px solid #90528f;
 +
}
 +
 +
.highlight.decoration_dark_full {
 +
    border: 4px solid #542160;
 +
}
 +
 +
.highlight.decoration_medium_full {
 +
    border: 4px solid #90528f;
 +
}
 +
 +
.highlight.decoration_light_full {
 +
    border: 4px solid #b48cb7;
 +
}
 +
 +
.highlight.decoration_red_full {
 +
    border: 4px solid #c30000;
 
}
 
}
  
Line 584: Line 737:
  
 
/*special image that takes up the entire page*/
 
/*special image that takes up the entire page*/
−
.full_size_image {  width:100%; }  
+
.full_size_image {  width:100%; margin-top: -59px;}  
  
  
Line 663: Line 816:
 
/*used to hide content when it is added to a class */
 
/*used to hide content when it is added to a class */
 
.hide_content,  
 
.hide_content,  
−
.calendar_month_content.hide_content {
+
.collapsible_accordion_content.hide_content {
 
display:none;
 
display:none;
 
}
 
}
Line 677: Line 830:
  
 
.news_date {
 
.news_date {
−
font-style: italic;
+
font-style: italic;
 
     display: inline-block;
 
     display: inline-block;
 
     color: #333333;
 
     color: #333333;
Line 684: Line 837:
 
     padding-right: 15px;
 
     padding-right: 15px;
 
}
 
}
 +
 +
/* icon decorations for the news class*/
 +
 +
.news_item_icon.igemlogo:after {
 +
    background-image: url('https://static.igem.org/mediawiki/igem.org/e/e4/Main_igem_logo.svg');
 +
    background-size: 25px 25px;
 +
    display: inline-block;
 +
    width: 25px;
 +
    height: 25px;
 +
    content:"";
 +
 +
}
 +
 +
.news_item_icon.pinned:after {
 +
    background-image: url('https://static.igem.org/mediawiki/2018/2/25/Icon_news_pinned.svg');
 +
    background-size: 25px 25px;
 +
    display: inline-block;
 +
    width: 25px;
 +
    height: 25px;
 +
    content:"";
 +
 +
}
 +
 +
 +
.news_item_icon.reminder:after {
 +
    background-image: url('https://static.igem.org/mediawiki/2018/a/a2/Icon_news_reminder.svg');
 +
    background-size: 25px 25px;
 +
    display: inline-block;
 +
    width: 25px;
 +
    height: 25px;
 +
    content:"";
 +
}
 +
 +
 +
 +
.news_item_icon.info:after {
 +
    background-image: url('https://static.igem.org/mediawiki/2018/b/b7/Icon_news_info.svg');
 +
    background-size: 25px 25px;
 +
    display: inline-block;
 +
    width: 25px;
 +
    height: 25px;
 +
    content:"";
 +
}
 +
 +
 +
.news_item_icon.announcement:after {
 +
    background-image: url('https://static.igem.org/mediawiki/2018/a/a7/Icon_news_announcement.svg');
 +
    background-size: 25px 25px;
 +
    display: inline-block;
 +
    width: 25px;
 +
    height: 25px;
 +
    content:"";
 +
}
 +
 +
 +
 +
 +
 +
/* center content */
 +
.center_content p,
 +
.center_content h1,
 +
.center_content h2,
 +
.center_content h3,
 +
.center_content h4,
 +
.center_content h5,
 +
.center_content h6 {
 +
text-align:center;
 +
}
 +
 +
 +
  
 
/*Multiple links in a ul */
 
/*Multiple links in a ul */
Line 698: Line 922:
 
/************************************************/
 
/************************************************/
 
.red_text {
 
.red_text {
−
color: red;  
+
color: #c30000;  
 
font-weight:bold;
 
font-weight:bold;
 
}
 
}
Line 704: Line 928:
 
/*Image slider/
 
/*Image slider/
 
/************************************************/
 
/************************************************/
 +
.image_slider img {  width:100%; }
 +
 
ul.image_slider {
 
ul.image_slider {
−
list-style: none;
+
    list-style: none;
−
margin: 0px -19px;
+
    margin: 0px;
−
padding:0px;
+
    padding: 0px 0px 15px 0px;
 
}
 
}
  
−
.image_slider ul {
+
/* image list hidden by default*/
−
padding: 0px;
+
ul.image_slider li{
 +
display:none;
 
}
 
}
 +
 +
/*if the image is the current one, display it*/
 +
ul.image_slider li.current_image {
 +
display:block;
 +
}
 +
 +
/*list of numbers for marking which number of image is displayed*/
 +
ul.image_number{
 +
    list-style: none;
 +
margin: auto;
 +
    padding: 0px;
 +
    text-align: center;
 +
}
 +
 +
/*decoration for the numbers*/
 +
ul.image_number li{
 +
border: 1px solid #989898;
 +
    border-radius: 15%;
 +
color: #989898;
 +
cursor:pointer;
 +
    display: block;
 +
float: left;
 +
height: 25px;
 +
    margin-right: 15px;
 +
padding-top:5px;
 +
    width: 30px;
 +
}
 +
 +
/*styling change when hovering or active*/
 +
ul.image_number li.current_image_number, ul.image_number li:hover{
 +
background-color:#542160;
 +
border: 1px solid #542160;
 +
color:#fff;
 +
}
 +
 +
/*buttons for moving forward and backward between the images*/
 +
.image_controller{
 +
border-radius: 15%;
 +
cursor:pointer;
 +
color: #989898;
 +
float:left;
 +
height: 25px;
 +
text-align:center;
 +
margin-right: 15px;
 +
padding-top:7px;
 +
width:30px;
 +
}
 +
 +
/*status change when hovering on the button*/
 +
.image_controller:hover{
 +
background-color:#542160;
 +
color:#fff;
 +
}
 +
 +
 +
/*text content for next button*/
 +
.image_controller.next::before{
 +
content:"▶";
 +
}
 +
 +
 +
/*text content for previous button*/
 +
.image_controller.prev::before{
 +
content:"◀ ";
 +
}
 +
  
  
Line 805: Line 1,098:
  
  
−
/*calendar */
+
/*accordion */
 
/************************************************/
 
/************************************************/
  
 
/*wrapper for each month*/
 
/*wrapper for each month*/
−
.calendar_month {  
+
.collapsible_accordion {  
 
border-bottom: 1px solid #ddd;  
 
border-bottom: 1px solid #ddd;  
 
float: left;  
 
float: left;  
Line 816: Line 1,109:
 
}
 
}
  
−
/*contains all the deadlines for the month*/
+
/*content to show/hide*/
−
.calendar_month_content {
+
.collapsible_accordion_content {
 
display:block;
 
display:block;
 
margin-top:30px;
 
margin-top:30px;
 
}
 
}
 +
 +
 +
/* button controling the show/hide of the month's events*/
 +
.collapsible_accordion_access{
 +
background-color: #90528f;
 +
border: 2px solid #90528f;
 +
border-radius: 14%;
 +
color: #fff !important;
 +
float: right;
 +
margin-top: -5px;
 +
text-align: center;
 +
padding: 6px 5px;
 +
width: 25px;
 +
}
 +
 +
/*when hovering on the show/hide month content button*/
 +
.collapsible_accordion_access:hover {
 +
background-color:#542160;
 +
border: 2px solid #542160;
 +
cursor:pointer;
 +
}
 +
 +
 +
/*calendar*/
 +
/************************************************/
  
 
/*deadline's date*/
 
/*deadline's date*/
Line 826: Line 1,144:
 
     border: 2px solid #ddd;
 
     border: 2px solid #ddd;
 
border-radius: 5%;
 
border-radius: 5%;
−
color: #989898;
+
color: #000;
 
float: left;
 
float: left;
 
    font-size: 155%;
 
    font-size: 155%;
Line 843: Line 1,161:
 
}
 
}
  
−
/* button controling the show/hide of the month's events*/
+
/*controlled image size*/
−
.calendar_month_access{
+
−
background-color: #90528f;
+
−
border: 2px solid #90528f;
+
−
border-radius: 14%;
+
−
color: #fff !important;
+
−
float: right;
+
−
margin-top: -5px;
+
−
text-align: center;
+
−
padding: 6px 5px;
+
−
width: 25px;
+
−
}
+
  
−
/*when hovering on the show/hide month content button*/
+
.controlled_size_image{
−
.calendar_month_access:hover {
+
max-width: 300px;
−
background-color:#542160;
+
}
−
border: 2px solid #542160;
+
−
cursor:pointer;  
+
−
}
+
  
−
 
+
/*mobile*/
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
/*support classes*/
+
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
  
  
−
/* 2000px  */
+
/* 1784px */
−
/************************************************/
+
−
@media only screen and (max-width: 2000px) {
+
−
.igem_content_wrapper { width: 86.6%;}
+
−
}
+
−
 
+
−
/* 1800px */
+
 
/************************************************/
 
/************************************************/
−
@media only screen and (max-width: 1800px) {
+
@media only screen and (max-width: 1784px) {
−
.igem_content_wrapper { width: 85.4%;}
+
.igem_content_wrapper { width:85%;}
 
}
 
}
  
−
/* 1700px */
+
/* 1602px */
 
/************************************************/
 
/************************************************/
−
@media only screen and (max-width: 1700px) {
+
@media only screen and (max-width: 1602px) {
−
.igem_content_wrapper { width: 85%;}
+
−
.hub_title{ font-size: 115%;}
+
−
}
+
−
 
+
−
/* 1550px  */
+
−
/************************************************/
+
−
@media only screen and (max-width: 1550px) {
+
 
.hub_title{ font-size: 105%;}
 
.hub_title{ font-size: 105%;}
 
}
 
}
Line 935: Line 1,218:
 
@media only screen and (max-width: 885px) {
 
@media only screen and (max-width: 885px) {
 
.igem_content_wrapper {width:100%; margin-left:0px;}
 
.igem_content_wrapper {width:100%; margin-left:0px;}
−
.half_size, .two_thirds_size, .third_size, .three_quarters_size, .quarter_size {width:100%; }
+
.half_size, .two_thirds_size, .third_size, .three_quarter_size, .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;}
Line 1,010: Line 1,293:
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
 
<div class="clear extra_space"></div>
−
 
−
</html>
 

Latest revision as of 18:23, 20 July 2018

Loading...