Difference between revisions of "Template:Example"

(Prototype team template page)
 
(76 intermediate revisions by 2 users not shown)
Line 8: Line 8:
 
#content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;}
 
#content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;}
 
body {background-color:white; }
 
body {background-color:white; }
−
 
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
−
 
+
  
 
/********************************* MENU ********************************/
 
/********************************* MENU ********************************/
Line 37: Line 36:
 
.menu_item:hover {  
 
.menu_item:hover {  
 
color:#000000;  
 
color:#000000;  
−
background-color: #32ddb5;
+
background-color: #72c9b6;
 
}
 
}
−
 
−
/* button on top of the page that takes you back to home */
 
−
.team_home {
 
−
padding: 35px 15px;
 
−
font-size:18px;
 
−
font-weight:bold;
 
−
border-bottom: 1px solid #d2d2d2;
 
−
background-color: #32ddb5;
 
−
color:#000000;
 
−
cursor: pointer;
 
−
}
 
−
 
−
/* hover state for the back to home button */
 
−
.team_home:hover  {
 
−
background-color:#000000;
 
−
color: #32ddb5;
 
−
}
 
−
 
  
 
/* decoration icon for the menu buttons*/
 
/* decoration icon for the menu buttons*/
Line 99: Line 80:
 
-ms-transition: all 0.4s ease;  
 
-ms-transition: all 0.4s ease;  
 
-o-transition: all 0.4s ease; transition: all 0.4s ease;   
 
-o-transition: all 0.4s ease; transition: all 0.4s ease;   
 +
}
 +
 +
.menu_item a {
 +
width: 100%;
 +
margin-left: -20px;
 +
padding: 11px 90px 12px 20px;
 +
text-decoration: none;
 +
color:black;
 
}
 
}
  
 
/* When hovering on a menu item */
 
/* When hovering on a menu item */
 
.menu_items li:hover {  
 
.menu_items li:hover {  
−
background-color:#32ddb5;  
+
background-color:#72c9b6;
 
color: #000000;
 
color: #000000;
 
}
 
}
Line 109: Line 98:
 
/* styling for the submenus */
 
/* styling for the submenus */
 
.submenu {
 
.submenu {
−
display: none; 
 
 
width:100%;  
 
width:100%;  
−
cursor:pointer;  
+
display: none;
 
font-weight:bold;
 
font-weight:bold;
 +
cursor:pointer;
 +
 
}
 
}
  
 
/* moving the margin for the submenu ul list */
 
/* moving the margin for the submenu ul list */
 
ul.submenu {  
 
ul.submenu {  
−
margin: 10px 0px -11px -10px;  
+
width: 100%;
−
width: 100%;  
+
margin: 10px 0px -11px 0px;
 +
list-style: none;
 
}
 
}
  
Line 124: Line 115:
 
.submenu li {  
 
.submenu li {  
 
width: 100%;  
 
width: 100%;  
−
background-color:white;  
+
margin-left: 10px;
 +
margin-bottom: 0px;
 
}
 
}
  
  
 
/* hover state for the submenu buttons */
 
/* hover state for the submenu buttons */
−
.submenu li:hover {
 
−
background-color:#000000;
 
−
}
 
−
 
−
 
 
.submenu li a {
 
.submenu li a {
 
width: 100%;  
 
width: 100%;  
−
color:#000000;
+
padding: 5px 10px;  
−
padding: 2px;
+
−
text-decoration:none;
+
 
display: inline-block;
 
display: inline-block;
 +
border-bottom: 1px solid #d3d3d3;
 +
background-color:white;
 +
text-decoration:none;
 +
color:#000000;
 
}
 
}
 +
  
  
 
.submenu li a:hover  {
 
.submenu li a:hover  {
−
color: #32ddb5;  
+
background-color:#000000;
 +
color: #72c9b6;
 
}
 
}
 +
  
 
/* When the screen is smaller than 680px, the menu has the option to hide/show - this button controls that */
 
/* When the screen is smaller than 680px, the menu has the option to hide/show - this button controls that */
Line 155: Line 147:
 
text-align:center;   
 
text-align:center;   
 
font-weight:bold;  
 
font-weight:bold;  
−
color:#32ddb5;  
+
color:#72c9b6;
 
cursor:pointer;  
 
cursor:pointer;  
 
-webkit-transition: all 0.4s ease;  
 
-webkit-transition: all 0.4s ease;  
Line 166: Line 158:
 
/* when hovering on that button */
 
/* when hovering on that button */
 
.collapsable_menu_control:hover {  
 
.collapsable_menu_control:hover {  
−
background-color: #32ddb5;
+
background-color: #72c9b6;
 
color:#000000;   
 
color:#000000;   
 
}
 
}
Line 216: Line 208:
 
background-color: #f2f2f2;  
 
background-color: #f2f2f2;  
 
}
 
}
 +
 +
.judges-will-not-evaluate {
 +
border: 4px solid #72c9b6;
 +
display: block;
 +
margin: 5px 15px;
 +
width: 95%;
 +
font-weight:bold;
 +
}
 +
  
 
/*STYLING */
 
/*STYLING */
Line 221: Line 222:
 
/* styling for the titles */
 
/* styling for the titles */
 
.content_wrapper h1, .content_wrapper h2 {
 
.content_wrapper h1, .content_wrapper h2 {
−
padding:0px 15px;  
+
padding:5px 15px;  
 
border-bottom:0px;  
 
border-bottom:0px;  
−
color: #32ddb5;  
+
color:#72c9b6;
 +
 
 
}
 
}
 
.content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 {  
 
.content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 {  
−
padding:0px 15px;  
+
padding:5px 15px;  
 
border-bottom:0px;  
 
border-bottom:0px;  
 
color: #000000;   
 
color: #000000;   
Line 243: Line 245:
 
font-weight: bold;  
 
font-weight: bold;  
 
text-decoration: underline;
 
text-decoration: underline;
−
text-decoration-color:#32ddb5;  
+
text-decoration-color:#72c9b6;
−
color: #32ddb5;  
+
color: #72c9b6;
 
-webkit-transition: all 0.4s ease;
 
-webkit-transition: all 0.4s ease;
 
-moz-transition: all 0.4s ease;  
 
-moz-transition: all 0.4s ease;  
Line 303: Line 305:
 
text-align:center;  
 
text-align:center;  
 
font-weight:bold;  
 
font-weight:bold;  
−
background-color: #32ddb5;
+
background-color: #72c9b6;
 
cursor:pointer;   
 
cursor:pointer;   
 
-webkit-transition: all 0.4s ease;
 
-webkit-transition: all 0.4s ease;
Line 315: Line 317:
 
.button_click:hover {   
 
.button_click:hover {   
 
background-color:#000000;  
 
background-color:#000000;  
−
color: #32ddb5;  
+
color:#72c9b6;
 
}
 
}
  
Line 365: Line 367:
 
<div class="menu_wrapper" >
 
<div class="menu_wrapper" >
  
−
<div class="team_home" onClick=" parent.location= 'https://2016.igem.org/Team:Example'"> 
+
 
−
TEAM NAME
+
−
</div>
+
  
  
Line 373: Line 373:
  
 
<ul id="accordion" class="accordion">
 
<ul id="accordion" class="accordion">
 +
 +
<li class="menu_item"> <a href="https://2016.igem.org/Team:Example">HOME </a> </li>
 +
  
 
<li class="menu_item"> <div class="icon plus"></div> TEAM
 
<li class="menu_item"> <div class="icon plus"></div> TEAM
 
<ul class="submenu">
 
<ul class="submenu">
 
<li> <a href=" https://2016.igem.org/Team:Example/Team"> Team  </a> </li>
 
<li> <a href=" https://2016.igem.org/Team:Example/Team"> Team  </a> </li>
−
<li> <a href="https://2016.igem.org/Team:Example/Collaborations"> Collaborations </a> </li>
+
<li> <a href="https://2016.igem.org/Team:Example/Collaborations">★  Collaborations </a> </li>
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
Line 383: Line 386:
 
<li class="menu_item"> <div class="icon plus"></div> PROJECT   
 
<li class="menu_item"> <div class="icon plus"></div> PROJECT   
 
<ul class="submenu">
 
<ul class="submenu">
−
<li> <a href="https://2016.igem.org/Team:Example/Description"> Description </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/Description"> ★  Description </a></li>
−
<li> <a href="https://2016.igem.org/Team:Example/Design"> Design </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/Design"> ★ Design </a></li>
 
<li> <a href="https://2016.igem.org/Team:Example/Experiments"> Experiments </a></li>
 
<li> <a href="https://2016.igem.org/Team:Example/Experiments"> Experiments </a></li>
−
<li> <a href="https://2016.igem.org/Team:Example/Proof"> Proof of Concept </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/Proof"> ★ Proof of Concept </a></li>
−
<li> <a href="https://2016.igem.org/Team:Example/Demonstrate"> Demonstrate </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/Demonstrate"> ★ Demonstrate </a></li>
 
<li> <a href="https://2016.igem.org/Team:Example/Results"> Results </a></li>
 
<li> <a href="https://2016.igem.org/Team:Example/Results"> Results </a></li>
 
<li> <a href="https://2016.igem.org/Team:Example/Notebook"> Notebook </a></li>
 
<li> <a href="https://2016.igem.org/Team:Example/Notebook"> Notebook </a></li>
Line 396: Line 399:
 
<ul class="submenu">
 
<ul class="submenu">
 
<li> <a href="https://2016.igem.org/Team:Example/Parts">Parts </a></li>
 
<li> <a href="https://2016.igem.org/Team:Example/Parts">Parts </a></li>
−
<li> <a href="https://2016.igem.org/Team:Example/Basic_Part"> Basic Parts </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/Basic_Part"> ★ Basic Parts </a></li>
−
<li> <a href="https://2016.igem.org/Team:Example/Composite_Part"> Composite Parts </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/Composite_Part"> ★ Composite Parts </a></li>
−
<li> <a href="https://2016.igem.org/Team:Example/Part_Collection"> Part Collection </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/Part_Collection"> ★ Part Collection </a></li>
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
Line 406: Line 409:
  
  
−
<li class="menu_item"> <a href="https://2016.igem.org/Team:Example/Attributions"> ATTRIBUTIONS </a></li>
+
<li class="menu_item"> <a href="https://2016.igem.org/Team:Example/Attributions">★  ATTRIBUTIONS </a></li>
  
  
Line 412: Line 415:
 
<ul class="submenu">
 
<ul class="submenu">
 
<li> <a href="https://2016.igem.org/Team:Example/Human_Practices"> Human Practices </a></li>
 
<li> <a href="https://2016.igem.org/Team:Example/Human_Practices"> Human Practices </a></li>
−
<li> <a href="https://2016.igem.org/Team:Example/HP/Silver"> Silver </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/HP/Silver">★ Silver </a></li>
−
<li> <a href="https://2016.igem.org/Team:Example/HP/Gold">Gold </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/HP/Gold">★ Gold </a></li>
−
<li> <a href="https://2016.igem.org/Team:Example/Integrated_Practices"> Integrated Practices </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/Integrated_Practices"> ★ Integrated Practices </a></li>
−
<li> <a href="https://2016.igem.org/Team:Example/Engagement">Engagement </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/Engagement">★ Engagement </a></li>
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
Line 422: Line 425:
 
<li class="menu_item"> <div class="icon plus"></div> AWARDS  
 
<li class="menu_item"> <div class="icon plus"></div> AWARDS  
 
<ul class="submenu">
 
<ul class="submenu">
−
<li><a href="https://2016.igem.org/Team:Example/Entrepreneurship"> Entrepreneurship </a></li>
+
<li><a href="https://2016.igem.org/Team:Example/Entrepreneurship"> ★ Entrepreneurship </a></li>
−
<li> <a href="https://2016.igem.org/Team:Example/Hardware"> Hardware </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/Hardware"> ★ Hardware </a></li>
−
<li> <a href="https://2016.igem.org/Team:Example/Software"> Software </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/Software">★ Software </a></li>
−
<li> <a href="https://2016.igem.org/Team:Example/Measurement">  Measurement </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/Measurement">★ Measurement </a></li>
−
<li> <a href="https://2016.igem.org/Team:Example/Model"> Model </a></li>
+
<li> <a href="https://2016.igem.org/Team:Example/Model">★ Model </a></li>
  
 
                     </ul>
 
                     </ul>
Line 440: Line 443:
 
<div class="content_wrapper">
 
<div class="content_wrapper">
  
 +
 +
 +
<h1 id="team_name">  </h1>
 +
<h4 id="page_name">  </h4>
  
  
Line 456: Line 463:
  
 
$("#HQ_page").attr('id','');
 
$("#HQ_page").attr('id','');
 +
 +
 +
if ( wgPageName.substring( 0,  8) == "Template")  {  // if the page is a template it displays the full name in a single line
 +
$("#team_name").html( wgPageName );
 +
}
 +
 +
else if (  ( (wgPageName.match(/\//g) || []).length ) == 0 ) {  // if it is the home page , just print the team's name
 +
$("#team_name").html( wgPageName.substring( 5, wgPageName.length ) );
 +
}
 +
 +
else {
 +
// this adds the team's name as an h1
 +
$("#team_name").html( wgPageName.substring( 5 , wgPageName.indexOf("/")  ) );
 +
 +
// this adds the page's title as an h4
 +
$("#page_name").html (    ( wgPageName.substring( wgPageName.indexOf("/") + 1, wgPageName.length ) ).replace( /\/|_/g , " ")  );
 +
}
 +
 +
 +
if( ($(location).attr('href')).indexOf("submit") >= 0  ) {
 +
$(".menu_wrapper").css( { "position": "absolute", "height": "auto"});
 +
$("#wpTextbox1").css( 'margin-top', '440px');
 +
}
 +
 +
 +
  
 
$('#accordion').find('.menu_item').click(function(){
 
$('#accordion').find('.menu_item').click(function(){

Latest revision as of 16:05, 22 March 2017

MENU ▤