Difference between revisions of "Template:Lund"

(Undo revision 167432 by Adham (talk))
 
(28 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
 
 
<script type="text/x-mathjax-config">
 
<script type="text/x-mathjax-config">
 
   MathJax.Ajax.config.path["mhchem"] = "https://cdnjs.cloudflare.com/ajax/libs/mathjax-mhchem/3.1.0";
 
   MathJax.Ajax.config.path["mhchem"] = "https://cdnjs.cloudflare.com/ajax/libs/mathjax-mhchem/3.1.0";
Line 11: Line 10:
 
   src="https://2017.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
 
   src="https://2017.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
 
</script>
 
</script>
−
 
+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
 
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Varela+Round" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Varela+Round" rel="stylesheet">
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
−
<link rel="stylesheet" type="text/css" href="/Team:Lund/styles/wrapper?action=raw&ctype=text/css&cache=37">
+
<link rel="stylesheet" type="text/css" href="/Team:Lund/styles/wrapper?action=raw&ctype=text/css&cache=67">
 
<script type="text/javascript" src="/Team:Lund/scripts/bootstrap?action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="/Team:Lund/scripts/bootstrap?action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="/Team:Lund/scripts/ScrollTrigger?action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="/Team:Lund/scripts/ScrollTrigger?action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="/Team:Lund/scripts/jquery-scrollTo?action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="/Team:Lund/scripts/jquery-scrollTo?action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="/Team:Lund/scripts/featherlight?action=raw&ctype=text/javascript"></script>
 
<script type="text/javascript" src="/Team:Lund/scripts/featherlight?action=raw&ctype=text/javascript"></script>
 +
 
<script>
 
<script>
 
   $(document).ready(function() {
 
   $(document).ready(function() {
Line 33: Line 33:
 
       'Team:Lund/Attributions':                      '#li_team',
 
       'Team:Lund/Attributions':                      '#li_team',
 
       'Team:Lund/Description':                        '#li_team',
 
       'Team:Lund/Description':                        '#li_team',
−
       'Team:Lund/Design':       i                    '#li_team',
+
       'Team:Lund/Design':                             '#li_team',
 
       'Team:Lund/Description':                        '#li_team',
 
       'Team:Lund/Description':                        '#li_team',
 
       'Team:Lund/Attributions':                      '#li_team',
 
       'Team:Lund/Attributions':                      '#li_team',
Line 59: Line 59:
 
       'Team:Lund/Modeling/Implementation':            '#li_model',
 
       'Team:Lund/Modeling/Implementation':            '#li_model',
 
       'Team:Lund/Safety':                            '#li_safety',
 
       'Team:Lund/Safety':                            '#li_safety',
−
       'Team:Lund/HP/Silver':                          '#li_hp',
+
       'Team:Lund/Human_Practices':                   '#li_hp',
−
      'Team:Lund/HP/Gold_Integrated':                '#li_hp',
+
       'Team:Lund/Public_Engagement':                 '#li_hp',
−
      'Team:Lund/Engagement':                        '#li_hp',
+
−
      'Team:Lund/HP/Media':                           '#li_hp',
+
−
       'Team:Lund/Communication':                     '#li_hp',
+
 
     };
 
     };
  
Line 72: Line 69:
  
 
<script>
 
<script>
−
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
 
  
−
$(document).ready(function() {
+
  // This is the jquery part of your template.
 +
  // Try not modify any of this code too much since it makes your menu work.
  
−
$("#HQ_page").attr('id','');
+
  $(document).ready(function() {
  
 +
    $("#HQ_page").attr('id','');
  
−
//highlight current page on the menu
+
    // call the functions that control the menu
−
highlight_current_page_menu();
+
    menu_functionality();
 +
    hide_show_menu();
  
−
//accessing submenus
 
−
$(".menu_item").click(function(){
 
−
$(".submenu_control_icon", this).toggleClass("open");
 
−
$(this).next(".submenu").fadeToggle(400);
 
−
});
 
  
−
//mobile menu access
 
−
$(".igem_2018_team_mobile_bar").click(function(){
 
−
$(this).next().toggleClass("displaying_menu");
 
−
});
 
  
−
});
+
    //this function controls the expand and collapse buttons of the menu and changes the +/- symbols
 +
    function menu_functionality() {
  
 +
      //when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu
 +
      $(".menu_button").click(function(){
  
−
function highlight_current_page_menu() {
+
        // add or remove the class "open" , this class holds the "-"
 +
        $(this).children().toggleClass("open");
 +
        // show or hide the submenu
 +
        $(this).next('.submenu_wrapper').fadeToggle(400);
 +
      });
  
−
var page_url="https://2018.igem.org/";
+
      // when the screen size is smaller than 800px, the display_menu_control button appears and will show/hide the whole menu
−
page_url = page_url + wgPageName;
+
      $("#display_menu_control").click(function(){
−
$("a[href$='"+ page_url +"']").children().addClass("current_page");
+
        $('#menu_content').fadeToggle(400);
 +
      });
  
−
//if the page is in a submenu, open the submenu and make the appropiate changes
+
      // call the current page highlight function
−
if( $( ".current_page" ).hasClass( "submenu_item" )){
+
      highlight_current_page();
 +
    }
  
−
$(".current_page").parent().parent().fadeToggle(400);
 
−
$(".current_page").parent().parent().prev().addClass("current_page");
 
−
$(".menu_item.current_page > .submenu_control_icon").toggleClass("open");
 
  
−
}
+
    // call the highlight current page function to show it on the menu with a different background color
−
}
+
    function highlight_current_page() {
  
 +
      // select a page from the menu based on the id assigned to it and the current page name and add the class "current page" to make it change background color
 +
      $("#"+  wgPageName.substring(wgPageName.lastIndexOf("/")+1, wgPageName.length ) + "_page").addClass("current_page");
  
−
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
      // now that the current_page class has been added to a menu item, make the submenu fade in
−
</script>
+
      $(".current_page").parents(".submenu_wrapper").fadeIn(400);
 +
      // change the +/- symbol of the corresponding menu button
 +
      $(".current_page").parents(".submenu_wrapper").prev().children().toggleClass("open");
  
 +
    }
  
−
<style>
 
−
/**************************************************************************************************************************************************************************************************/
 
  
  
 +
    // allow button on the black menu bar to show/hide the side menu
 +
    function hide_show_menu() {
  
−
/**************************************************************************************************************************************************************************************************/
+
      // in case you preview mode is selected, the menu is hidden for better visibility
−
/* DEFAULT WIKI SETTINGS */
+
      if (window.location.href.indexOf("submit") >= 0) {
−
/**************************************************************************************************************************************************************************************************/
+
        $(".igem_2017_menu_wrapper").hide();
 +
      }
  
 +
      // if the black menu bar has been loaded
 +
        if (document.getElementById('bars_item')) {
  
−
#home_logo, #sideMenu { display:none; }
+
        // when the "bars_item" has been clicked
−
#sideMenu, #top_title, .patrollink  {display:none;}
+
        $("#bars_item").click(function() {
−
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
+
          $("#sideMenu").hide();
−
body {background-color:white; }
+
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
  
−
.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}
+
          // show/hide the menu wrapper
 +
          $(".igem_2017_menu_wrapper").fadeToggle("100");
 +
        });
 +
        }
  
 +
      // because the black menu bars loads at a different time than the rest of the page, this function is set on a time out so it can run again in case it has not been loaded yet
 +
      else {
 +
            setTimeout(hide_show_menu, 15);
 +
      }
 +
    }
  
−
/**************************************************************************************************************************************************************************************************/
 
−
/* MENU */
 
−
/**************************************************************************************************************************************************************************************************/
 
  
−
/*this wraps the whole of the menu*/
+
  });
−
.igem_2018_team_menu {
+
−
background-color:#c4baba;
+
−
border-left: 1px solid #c4baba;
+
−
display:block;
+
−
float:right;
+
−
height:100vh;
+
−
max-width: 270px;
+
−
overflow-y: auto;
+
−
overflow-x: hidden;
+
−
padding:0px;
+
−
position:fixed;
+
−
right:0%;
+
−
text-align:left;
+
−
width: 15%;
+
−
}
+
  
 +
$(document).ready(function() {
 +
  var visible = false;
 +
  //Check to see if the window is top if not then display button
 +
  $(window).scroll(function() {
 +
    var scrollTop = $(this).scrollTop();
 +
    if (!visible) {
 +
      if (scrollTop > 400) {
 +
        $("#scroll-to-top-btn").fadeIn();
 +
        visible = true;
 +
      }
 +
    }
 +
    else if (scrollTop <= 400) {
 +
      $("#scroll-to-top-btn").fadeOut();
 +
      visible = false;
 +
    }
 +
  });
  
−
.igem_2018_team_menu.displaying_menu{
+
  $("#scroll-to-top-btn").click(function() {
−
display:block;
+
    $(window).scrollTo(0, 250);
−
}
+
  });
 +
});
  
−
.igem_2018_team_menu  a {
+
</script>
−
color: #484848;
+
−
text-decoration:none;
+
−
}
+
  
−
.igem_2018_team_menu img {
+
<style type="text/css">
−
width:100%;
+
  /***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
−
}
+
  
 +
  /* Clear the default wiki settings */
  
−
.igem_2018_team_menu .menu_item {
+
  #home_logo, #sideMenu { display:none; }
−
    background-color: #c4baba;
+
  #sideMenu, #top_title, .patrollink {display:none;}
−
    border-bottom: 1px solid #928b8b;
+
  #content { width:100%; padding:0px; margin-top:-7px; margin-left:0px;}
−
    clear: both;
+
  body {background-color:white; }
−
color: #484848;
+
  #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
−
    cursor: pointer;
+
−
float: left;
+
−
    font-size: 120%;
+
−
    font-weight: bold;
+
−
    padding: 15px 0px 15px 5%;
+
−
  width: 100%;
+
−
}
+
−
 
+
−
.igem_2018_team_menu .menu_item.direct_link {
+
−
color: #484848;
+
−
padding-left: 15%;
+
−
}
+
−
.igem_2018_team_menu .menu_item:hover {
+
−
background-color: #ecb656;
+
−
}
+
−
 
+
−
 
+
−
.igem_2018_team_menu .menu_item .submenu_control_icon {
+
−
color: #484848;
+
−
float: left;
+
−
width: 10%;
+
−
}
+
−
 
+
−
/* submenu icon "+" "-"*/
+
−
.igem_2018_team_menu .menu_item .submenu_control_icon::before {
+
−
content: "+";
+
−
}
+
−
 
+
−
/* submenu icon "+"  "-"*/
+
−
.igem_2018_team_menu .menu_item .submenu_control_icon.open::before {
+
−
content: "-";
+
−
}
+
−
 
+
−
/*submenu wrapper*/
+
−
.igem_2018_team_menu .submenu{
+
−
background-color: #e4dede;
+
−
clear:both;
+
−
display:none;
+
−
float: left;
+
−
width:100%;
+
−
}
+
−
 
+
−
/*styling for a submenu item*/
+
−
.igem_2018_team_menu .submenu .submenu_item {
+
−
border-bottom: 1px solid #c4baba;
+
−
  color: #635d5d;
+
−
    height: 30px;
+
−
  float: left;
+
−
    font-size: 110%;
+
−
font-weight: bold;
+
−
    padding: 12px 0px 0px 15%;
+
−
    width: 100%;
+
−
}
+
−
 
+
−
.igem_2018_team_menu .submenu .submenu_item:hover {
+
−
background-color: #f3bd5d;
+
−
}
+
−
 
+
−
 
+
−
.igem_2018_team_menu .submenu .submenu_item.current_page,
+
−
.igem_2018_team_menu .menu_item.current_page,
+
−
.igem_2018_team_menu .menu_item.direct_link.current_page {
+
−
background-color:#7acbd8;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
/*mobile menu bar styling*/
+
−
/**************************************************************************************************************************************************************************************************/
+
−
 
+
−
 
+
−
.igem_2018_team_mobile_bar {
+
−
background-color:#e4dede;
+
−
border-bottom: 1px solid #c4baba;
+
−
cursor:pointer;
+
−
display:none;
+
−
float:left;
+
−
margin-top: 0;
+
−
padding: 5px 0;
+
−
position:fixed;
+
−
width:100%;
+
−
}
+
−
 
+
−
.igem_logo_mobile img {
+
−
width:70px;
+
−
}
+
−
 
+
−
.igem_logo_mobile {
+
−
float:left;
+
−
padding-left: 5%;
+
−
width: 30%;
+
−
}
+
−
 
+
−
.igem_menu_control_mobile img {
+
−
width:25px;
+
−
}
+
−
 
+
−
.igem_menu_control_mobile {
+
−
float:right;
+
−
padding-right:5%;
+
−
padding-top:5px;
+
−
text-align:right;
+
−
width: 30%;
+
−
}
+
−
 
+
 
</style>
 
</style>
−
 
−
 
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
−
<!--- THIS IS WHERE THE HTML BEGINS --->
 
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
  
 
<head>
 
<head>
−
 
+
  <meta name="viewport" content="width=device-width, initial-scale=1">
−
<!-- This tells the browser that your page is responsive -->
+
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
−
 
+
 
</head>
 
</head>
−
 
−
 
−
 
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
−
<!--- Menu --->
 
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
−
 
  
 
<nav id="navbar" class="navbar navbar-inverse navbar-static-top">
 
<nav id="navbar" class="navbar navbar-inverse navbar-static-top">
Line 313: Line 199:
 
       </button>
 
       </button>
 
       <a class="navbar-brand" href="/Team:Lund">
 
       <a class="navbar-brand" href="/Team:Lund">
−
         <img alt="iGEM Lund" src="https://static.igem.org/mediawiki/2017/c/cb/T--Lund--logo-web.svg">
+
         <img alt="iGEM Lund" src="https://static.igem.org/mediawiki/2018/b/b6/T--Lund--logo_rescaled.svg" style="height:60px">
 
       </a>
 
       </a>
 
     </div>
 
     </div>
Line 322: Line 208:
 
         <li id="li_home"><a href="/Team:Lund">Home</a></li>
 
         <li id="li_home"><a href="/Team:Lund">Home</a></li>
  
−
         <li id="li_team" class="dropdown">
+
         <li id="li_team"><a href="/Team:Lund/People">People</a></li>
−
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Team <span class="caret"></span></a>
+
−
          <ul class="dropdown-menu">
+
−
            <li><a href="/Team:Lund/Team">Team</a></li>
+
−
            <li><a href="/Team:Lund/Collaborations">Collaborations</a></li>
+
−
            <li><a href="/Team:Lund/Attributions">Attributions</a></li>
+
−
          </ul>
+
−
        </li>
+
  
 
         <li id="li_project" class="dropdown">
 
         <li id="li_project" class="dropdown">
Line 336: Line 215:
 
             <li><a href="/Team:Lund/Description">Description</a></li>
 
             <li><a href="/Team:Lund/Description">Description</a></li>
 
             <li><a href="/Team:Lund/Design">Design</a></li>
 
             <li><a href="/Team:Lund/Design">Design</a></li>
 +
            <li><a href="/Team:Lund/Applied_Design">Product Design</a></li>
 
             <li><a href="/Team:Lund/Results">Results</a></li>
 
             <li><a href="/Team:Lund/Results">Results</a></li>
 
             <li><a href="/Team:Lund/InterLab">InterLab</a></li>
 
             <li><a href="/Team:Lund/InterLab">InterLab</a></li>
 
             <li><a href="/Team:Lund/Parts">Parts</a></li>
 
             <li><a href="/Team:Lund/Parts">Parts</a></li>
 
             <li><a href="/Team:Lund/Experiments">Protocols</a></li>
 
             <li><a href="/Team:Lund/Experiments">Protocols</a></li>
 +
            <li><a href="/Team:Lund/Safety">Safety</a></li>
 
             <li><a href="/Team:Lund/Notebook">Notebook</a></li>
 
             <li><a href="/Team:Lund/Notebook">Notebook</a></li>
 
           </ul>
 
           </ul>
Line 345: Line 226:
  
 
         <li id="li_model"><a href="/Team:Lund/Model">Model</a></li>
 
         <li id="li_model"><a href="/Team:Lund/Model">Model</a></li>
−
        <li id="li_safety"><a href="/Team:Lund/Safety">Safety</a></li>
 
−
        <li id="li_hp"><a href="/Team:Lund/HP/Silver">Practices</a></li>
 
  
 +
        <li id="li_hp" class="dropdown">
 +
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Practices <span class="caret"></span></a>
 +
          <ul class="dropdown-menu">
 +
            <li><a href="/Team:Lund/Human_Practices">Integrated</a></li>
 +
            <li><a href="/Team:Lund/Public_Engagement">Engagement</a></li>
 +
          </ul>
 +
        </li>
 
       </ul>
 
       </ul>
 
     </div><!-- /.navbar-collapse -->
 
     </div><!-- /.navbar-collapse -->
Line 353: Line 239:
 
</nav>
 
</nav>
  
 +
<button type="button" id="scroll-to-top-btn">
 +
  <i class="fa fa-arrow-up" aria-hidden="true"></i>
 +
</button>
  
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
</html>
−
<!--- Content of the page  --->
+
−
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
+
−
 
+
−
 
+
−
<div class="igem_2018_team_content">
+
−
<div class="igem_2018_team_column_wrapper">
+
−
<div class="clear extra_space"></div>
+
−
<div class="clear extra_space"></div>
+

Latest revision as of 02:37, 18 October 2018