Difference between revisions of "DevTesting"

 
(74 intermediate revisions by the same user not shown)
Line 6: Line 6:
  
 
#sideMenu, #top_title {display:none;}
 
#sideMenu, #top_title {display:none;}
−
#content { padding:0px; width:1000px; margin-top:-7px; margin-left:0px;}
+
#content { padding:0px; width:100%; 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; }
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
Line 13: Line 13:
 
/* Wrapper for the menu */
 
/* Wrapper for the menu */
 
.menu_wrapper {  
 
.menu_wrapper {  
−
width:150px;  
+
width: 14%;  
 
height:100vh;  
 
height:100vh;  
 
position:fixed;  
 
position:fixed;  
Line 20: Line 20:
 
background-color:#f2f2f2;  
 
background-color:#f2f2f2;  
 
text-align:left;
 
text-align:left;
 +
left:86%;
 
}
 
}
 +
 +
.menu_wrapper img {
 +
width: 100%;
 +
margin: auto;
 +
}
 +
 +
  
 
/* styling for the menu items */
 
/* styling for the menu items */
Line 37: Line 45:
 
color:#000000;  
 
color:#000000;  
 
background-color: #72c9b6;
 
background-color: #72c9b6;
 +
}
 +
 +
 +
/* remove bullets from the main menu - accordion class */
 +
.accordion {
 +
list-style: none;
 
}
 
}
  
Line 167: Line 181:
 
.content_wrapper {
 
.content_wrapper {
 
width: 85%;
 
width: 85%;
−
margin-left:150px;
 
 
padding:10px 0px;  
 
padding:10px 0px;  
 
float:left;  
 
float:left;  
Line 192: Line 205:
 
width: 50%;  
 
width: 50%;  
 
}
 
}
 +
 
.half_size img {  
 
.half_size img {  
 
padding: 10px 15px;
 
padding: 10px 15px;
Line 203: Line 217:
 
.third_size img {  
 
.third_size img {  
 
padding: 10px 15px;
 
padding: 10px 15px;
−
width: 90%;  
+
width: 92%;  
 
}
 
}
  
Line 212: Line 226:
  
 
.highlight {  
 
.highlight {  
−
width: 90%;
+
width: 90%;
−
margin: auto;  
+
 
padding: 15px 5px;
 
padding: 15px 5px;
 +
margin: auto;
 +
}
 +
 +
.gray {
 
background-color: #f2f2f2;  
 
background-color: #f2f2f2;  
 
}
 
}
  
−
.judges-will-not-evaluate {
+
.blue {
−
border: 4px solid #72c9b6;
+
background-color: #c0d5f7;  
−
display: block;
+
}
−
margin: 5px 15px;
+
 
−
width: 95%;
+
 
−
font-weight:bold;
+
/* image slider styling */
 +
ul.image_slider {
 +
list-style: none;
 +
margin: 0px -19px;
 
}
 
}
  
Line 233: Line 253:
 
padding:5px 15px;  
 
padding:5px 15px;  
 
border-bottom:0px;  
 
border-bottom:0px;  
−
color:#72c9b6;
+
color: #72c9b6;
  
 
}
 
}
Line 337: Line 357:
 
#content {width:100%; }
 
#content {width:100%; }
 
.menu_wrapper {width:15%;}
 
.menu_wrapper {width:15%;}
−
.content_wrapper {margin-left: 15%;}
 
 
.menu_item {display:block;}
 
.menu_item {display:block;}
 
.icon {display:none;}
 
.icon {display:none;}
Line 344: Line 363:
  
  
−
/* IF THE SCREEN IS LESS THAN 680PX */
+
/* IF THE SCREEN IS LESS THAN 800PX */
  
−
@media only screen and (max-width: 680px) {
+
@media only screen and (max-width: 800px) {
 
.collapsable_menu_control { display:block;}
 
.collapsable_menu_control { display:block;}
 
.menu_item {display:none;}
 
.menu_item {display:none;}
−
.menu_wrapper { width:100%; height: 15%; position:relative;}
+
.menu_wrapper { width:100%; height: 15%; position:relative; left:0%;}
 
.content_wrapper {width:100%; margin-left:0px;}
 
.content_wrapper {width:100%; margin-left:0px;}
 
.column.half_size {width:100%; }
 
.column.half_size {width:100%; }
 +
.column.third_size {width:100%; }
 
.column img { width: 100%; padding: 5px 0px;}
 
.column img { width: 100%; padding: 5px 0px;}
 
.icon {display:block;}
 
.icon {display:block;}
 
.highlight {padding:15px 5px;}
 
.highlight {padding:15px 5px;}
 +
.menu_wrapper img { width: 30%;  margin-left: 35%;}
 
}
 
}
  
Line 379: Line 400:
  
  
−
 
+
<a href=""> <img src="http://placehold.it/200x100/d3d3d3/f2f2f2"></a>
  
 
<div class="collapsable_menu_control"> MENU 三 </div>
 
<div class="collapsable_menu_control"> MENU 三 </div>
 +
 +
 +
  
 
<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> COMMUNITY
 +
<ul class="submenu">
 +
<li> <a href=" https://2016.igem.org/Team:Example/Team"> Team List </a> </li>
 +
                    </ul>
 +
                </li>
  
−
<li class="menu_item"> <div class="icon plus"></div> TEAM
+
<li class="menu_item"> <div class="icon plus"></div> COMPETITION
 
<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 List </a> </li>
−
<li> <a href="https://2016.igem.org/Team:Example/Collaborations"> Collaborations </a> </li>
+
 
                     </ul>
 
                     </ul>
 
                 </li>
 
                 </li>
 +
 +
 +
<li class="menu_item"> <a href="https://2016.igem.org/Team:Example"> CALENDAR </a> </li>
 +
 +
 +
<li class="menu_item"> <a href="https://2016.igem.org/Team:Example"> GIANT JAMBOREE</a> </li>
 +
 +
<li class="menu_item"> <a href="https://2016.igem.org/Team:Example"> SAFETY </a> </li>
 +
 +
<li class="menu_item"> <a href="https://2016.igem.org/Team:Example"> JUDGING </a> </li>
 +
 +
 +
<li class="menu_item"> <div class="icon plus"></div> RESOURCES
 +
<ul class="submenu">
 +
<li> <a href=" https://2016.igem.org/Team:Example/Team"> Team List </a> </li>
 +
                    </ul>
 +
                </li>
 +
 +
<li class="menu_item"> <div class="icon plus"></div> ABOUT
 +
<ul class="submenu">
 +
<li> <a href=" https://2016.igem.org/Team:Example/Team"> Team List </a> </li>
 +
                    </ul>
 +
                </li>
 +
 +
 +
 +
<li class="menu_item"> <a href="https://2016.igem.org/Team:Example"> SITEMAP </a> </li>
  
  
Line 399: Line 453:
  
 
</div>
 
</div>
−
 
  
  
Line 408: Line 461:
  
 
<div class="column full_size" >
 
<div class="column full_size" >
−
<img src="http://placehold.it/800x300/d3d3d3/f2f2f2">
+
 
 +
<ul class="image_slider">
 +
 
 +
<li><img src="http://placehold.it/1200x400/d3d3d3/f2f2f2"></li>
 +
 
 +
</ul>
 
</div>
 
</div>
  
Line 414: Line 472:
  
  
−
<div class="column third_size" >
 
  
−
<img src="http://placehold.it/800x500/d3d3d3/f2f2f2">
+
 
 +
<div class="column third_size ">
 +
<div class="highlight gray">
  
  
 +
<img src="http://placehold.it/800x200/d3d3d3/f2f2f2">
 
<h2>TESTING </h2>
 
<h2>TESTING </h2>
 
<p>Lorem ipsum dolor sit amet, augue graeci ea per, ex nam dicat noster eligendi. Ne duo nonumy ponderum patrioque. Omnesque deseruisse usu at, an everti delenit lobortis eam. Nec solum sapientem salutandi ea, elitr indoctum dissentiunt pri no.
 
<p>Lorem ipsum dolor sit amet, augue graeci ea per, ex nam dicat noster eligendi. Ne duo nonumy ponderum patrioque. Omnesque deseruisse usu at, an everti delenit lobortis eam. Nec solum sapientem salutandi ea, elitr indoctum dissentiunt pri no.
 
</p>
 
</p>
 +
</div>
 +
</div>
 +
 +
 +
<div class="column third_size" >
 +
 +
 +
<img src="http://placehold.it/800x200/d3d3d3/f2f2f2">
 +
 +
 +
<h2>TESTING </h2>
 +
<p>Lorem ipsum dolo</p>
 +
  
 
</div>  
 
</div>  
 +
  
  
  
 
<div class="column third_size" >
 
<div class="column third_size" >
 +
<div class="highlight gray">
  
−
<img src="http://placehold.it/800x500/d3d3d3/f2f2f2">
+
<img src="http://placehold.it/800x200/d3d3d3/f2f2f2">
  
  
Line 436: Line 511:
 
</p>
 
</p>
  
 +
</div>
 
</div>  
 
</div>  
  
  
 +
<div class="clear"></div>
  
  
−
<div class="column third_size" >
 
  
 +
 +
<div class="column half_size ">
 +
 
<img src="http://placehold.it/800x500/d3d3d3/f2f2f2">
 
<img src="http://placehold.it/800x500/d3d3d3/f2f2f2">
  
 +
<p>Lorem ipsum dolor sit amet, augue graeci ea per, ex nam dicat noster eligendi. Ne duo nonumy ponderum patrioque. Omnesque deseruisse usu at, an everti delenit lobortis eam. Nec solum sapientem salutandi ea, elitr indoctum dissentiunt pri no.
 +
</p>
 +
 +
</div>
 +
 +
 +
 +
<div class="column half_size" >
 +
 +
<img src="http://placehold.it/800x500/d3d3d3/f2f2f2">
  
−
<h2>TESTING </h2>
 
 
<p>Lorem ipsum dolor sit amet, augue graeci ea per, ex nam dicat noster eligendi. Ne duo nonumy ponderum patrioque. Omnesque deseruisse usu at, an everti delenit lobortis eam. Nec solum sapientem salutandi ea, elitr indoctum dissentiunt pri no.
 
<p>Lorem ipsum dolor sit amet, augue graeci ea per, ex nam dicat noster eligendi. Ne duo nonumy ponderum patrioque. Omnesque deseruisse usu at, an everti delenit lobortis eam. Nec solum sapientem salutandi ea, elitr indoctum dissentiunt pri no.
 
</p>
 
</p>
  
−
</div>  
+
</div>
  
  
  
 
</div>
 
</div>
 +
 +
  
  
Line 471: Line 561:
 
$("#HQ_page").attr('id','');
 
$("#HQ_page").attr('id','');
 
 
 +
 +
 +
 +
 +
 +
 +
//name setup
  
 
if ( wgPageName.substring( 0,  8) == "Template")  {  // if the page is a template it displays the full name in a single line
 
if ( wgPageName.substring( 0,  8) == "Template")  {  // if the page is a template it displays the full name in a single line
Line 490: Line 587:
  
  
 +
//menu functionality
  
 
$('#accordion').find('.menu_item').click(function(){
 
$('#accordion').find('.menu_item').click(function(){
  
−
//Expand or collapse this panel
+
//Expand or collapse the panel that was clicked
 
submenu = $(this).find('.submenu');
 
submenu = $(this).find('.submenu');
 
submenu.toggle();
 
submenu.toggle();
  
 +
//Place the appropriate icon state on the panel that was clicked
 
icon = $(this).find('.icon');
 
icon = $(this).find('.icon');
  
Line 506: Line 605:
 
}
 
}
  
−
//Hide the other panels
+
//Hide the other panels and switch all other icons to closed state
 
$(".submenu").not(submenu).hide();
 
$(".submenu").not(submenu).hide();
 
$(".icon").not(icon).removeClass("less").addClass("plus");
 
$(".icon").not(icon).removeClass("less").addClass("plus");
Line 519: Line 618:
 
$(".menu_item").show();
 
$(".menu_item").show();
 
});
 
});
 +
 +
 +
 +
 +
//image slider
 +
 +
$(function () {
 +
 +
var change_img_time  = 3000;
 +
var transition_speed    = 450;
 +
 +
var simple_slideshow  = $(".image_slider"),
 +
listItems  = simple_slideshow.children('li'),
 +
listLen = listItems.length,
 +
i = 0,
 +
 +
change_images = function () {
 +
 +
listItems.eq(i).fadeOut(transition_speed, function () {
 +
 +
i += 1;
 +
if (i === listLen) {
 +
i = 0;
 +
}
 +
 +
listItems.eq(i).fadeIn(transition_speed);
 +
});
 +
};
 +
 +
listItems.not(':first').hide();
 +
setInterval( change_images, change_img_time);
 +
 +
});
 +
 +
 +
 +
// load info from another page
 +
 +
// to use this function send the "source page" and then send the div's id to where you want to send it
 +
load_these_items ( "https://2016.igem.org/Archive #load_these_newsItems", "load_newsItems_here");
  
  
 
});
 
});
 +
 +
 +
 +
 +
 +
  
  

Latest revision as of 20:12, 9 November 2016

MENU 三

TESTING

Lorem ipsum dolor sit amet, augue graeci ea per, ex nam dicat noster eligendi. Ne duo nonumy ponderum patrioque. Omnesque deseruisse usu at, an everti delenit lobortis eam. Nec solum sapientem salutandi ea, elitr indoctum dissentiunt pri no.

TESTING

Lorem ipsum dolo

TESTING

Lorem ipsum dolor sit amet, augue graeci ea per, ex nam dicat noster eligendi. Ne duo nonumy ponderum patrioque. Omnesque deseruisse usu at, an everti delenit lobortis eam. Nec solum sapientem salutandi ea, elitr indoctum dissentiunt pri no.

Lorem ipsum dolor sit amet, augue graeci ea per, ex nam dicat noster eligendi. Ne duo nonumy ponderum patrioque. Omnesque deseruisse usu at, an everti delenit lobortis eam. Nec solum sapientem salutandi ea, elitr indoctum dissentiunt pri no.

Lorem ipsum dolor sit amet, augue graeci ea per, ex nam dicat noster eligendi. Ne duo nonumy ponderum patrioque. Omnesque deseruisse usu at, an everti delenit lobortis eam. Nec solum sapientem salutandi ea, elitr indoctum dissentiunt pri no.