Team:NCTU Formosa/source/header-notebook

From 2014.igem.org

(Difference between revisions)
 
(92 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<style>
<style>
-
.effect {
+
 
-
  left: 93.75%;
+
 
 +
.download li {
 +
display: inline-block;
 +
border-radius: 3px;
 +
text-align: center;
 +
font-weight: 700;
 +
width: 45%;
 +
padding:0;
 +
margin:0;
 +
background: #000;
 +
border:0;
 +
margin-bottom: 5px;
}
}
-
#cover{
+
.download2 li {
-
background:url(https://static.igem.org/mediawiki/2013/d/db/Nctu-cover-notes.jpg) center no-repeat;
+
display: inline-block;
 +
border-radius: 3px;
 +
text-align: center;
 +
font-weight: 700;
 +
width: 90%;
 +
padding:0;
 +
margin:0;
 +
background: #000;
 +
border:0;
 +
margin-bottom: 5px;
 +
}
 +
.cal li {
 +
display: inline-block;
 +
border-radius: 3px;
 +
text-align: center;
 +
font-weight: 700;
 +
width: 13%;
 +
padding:0;
 +
margin:0;
 +
background: #000;
 +
border:0;
 +
margin-bottom: 5px;
 +
cursor: pointer;
}
}
 +
.cal li:hover {color:red;}
h3 {
h3 {
padding-top: 0px;
padding-top: 0px;
Line 13: Line 47:
clear:both;
clear:both;
}
}
-
.cont .li {
+
.cal-wrapper {
-
padding-left:20px;
+
display: block;
-
}
+
background: #133453;
-
.cont .li .card {
+
border-radius: 5px;
-
margin-left:20px;
+
padding: 5px;
-
margin-right:20px;
+
margin-bottom: 10px;
-
}
+
-
.calendar p, .calendar ul{
+
-
text-indent:0!important;
+
-
margin-left:0!important;
+
}
}
-
.calendar{
+
.calendar {
-
background:#fefefe;
+
background-color: black;
-
margin:0 auto;
+
border-radius: 5px;
-
padding-top: 5px;
+
width: 40%;
-
width: 100%;
+
float: left;
-
height:100%;
+
padding-top:5px;
 +
padding-bottom: 5px;
 +
}
 +
.calendar-week, .calendar-day {
 +
padding: 0;
 +
margin: 0!important;
 +
margin-left: 5px!important;
 +
}
 +
.calendar-week li {
 +
display: inline-block;
 +
border-radius: 3px;
text-align: center;
text-align: center;
-
  position: relative;
+
font-weight: 700;
-
color:#555;
+
width: 12.5%;
-
font-size:11px;
+
padding:0;
-
font-family:Lucida Grande;
+
margin:0;
-
margin-bottom:15px;
+
background: #efefef;
-
font-weight:400;
+
border:0;
 +
margin-bottom: 5px;
 +
color:black;
}
}
-
.calcontainer{
+
.calendar-day li {
-
margin-bottom:10px;
+
display: inline-block;
-
margin-left:25px;
+
border-radius: 3px;
-
margin: 0 auto;
+
text-align: center;
 +
width: 12.5%;
 +
padding:0;
 +
margin:0;
 +
background: #fdfdfd;
 +
border:0;
 +
list-style: none;
 +
height: 30px;
 +
line-height: 30px;
 +
margin-bottom: 5px;
 +
cursor: pointer;
}
}
-
.daysmonth{
+
.calendar-day:hover li {
-
clear:both;
+
background: black;
 +
color: #F00;
}
}
-
.dayweek{background:#fefefe;width:14%;height:30px;float:left;border-right:1px solid #e5e5e5;}
+
.clear {
-
.dayweek p{display:block;text-align:center;font-size:10px;line-height:31px;text-shadow:0 1px 0 #ffffff;}
+
clear: both;
-
.week{overflow:hidden;border-top:1px solid #c2c2c2;}
+
-
.week:hover{background:#fefefe;cursor:pointer;}
+
-
.weeku{overflow:hidden;border-top:1px solid #c2c2c2;border-bottom:1px solid #e5e5e5;}
+
-
.today{background:#fffcdf;border-right:1px solid #e5e5e5;}
+
-
.today .daybar{background:#fffac1;}
+
-
.day{width:14%;float:left;border-right:1px solid #e5e5e5;}
+
-
.brn{border-right:none;}
+
-
.bun{border-bottom:none;}
+
-
.daybar{width:100%;float:left;background:#f3f3f3;}
+
-
.daybar p{margin-left:5px;margin-top:3px;margin-bottom:3px;font-size:10px;font-weight:400;color:#969696;text-shadow:0 1px 0 #ffffff;}
+
-
.dots{width:100%;height:35px;clear:both;}
+
-
.dots ul{text-align:center;white-space:nowrap;overflow:hidden;}
+
-
.dots ul li{margin-top:10px;display:inline-block;-webkit-border-radius:14px;width:12px;height:12px;}
+
-
.big{width:14%;float:left;}
+
-
.big:hover{background:#e9f0f8;cursor:pointer;}
+
-
.big .dots{height:65px;}
+
-
.big .dots li{margin-top:25px;}
+
-
 
+
-
/**************************** Events when slide is open ****************************/
+
-
.open{height:200px;width:100%;border-top:1px solid #e5e5e5;float:left;clear:both;overflow:hidden;}
+
-
.bigwk .open{height:600px;}
+
-
.mweek .open{height:400px;}
+
-
.open li{-webkit-border-radius:10px;margin-left:1px;margin-right:1px;border-bottom:#eeeeee solid 1px;padding:0;overflow:hidden;}
+
-
.open li p{margin:1px;margin-top:3px;line-height:12px;font-size:12px;color:#ffffff;overflow:hidden;word-wrap:break-word;}
+
-
.open li:hover{cursor:pointer;}
+
-
 
+
-
/**************************** Colors ****************************/
+
-
.none{background:#d6d6d6;}
+
-
.none:hover{background:#dfdfdf;}
+
-
.blue{background:#5496dd;}
+
-
.blue:hover{background:#5c9ef9;}
+
-
.red{background:#ff454b;}
+
-
.red:hover{background:#ff6164;}
+
-
.yellow{
+
-
background:rgba(255, 172, 77, 0.8) none repeat scroll 0 0 !important;
+
}
}
-
.yellow:hover{
+
.calendar-note {
-
background:rgba(255, 189 106, 0.8) none repeat scroll 0 0 !important;
+
background-color: black;
 +
border-radius: 5px;
 +
width: 59%;
 +
float: right;
 +
height: 216px;
 +
overflow:scroll;
 +
}
 +
.note {
 +
height: 100%;
 +
margin: 5px;
 +
}
 +
.calendar-day:nth-child(2) li {
 +
background:  #C2C2C2 ;
 +
}
 +
.note:nth-child(1) {
 +
border-left: yellow 3px solid;
 +
}
 +
.calendar-day:nth-child(3) li {
 +
background: #909090;
 +
}
 +
.note:nth-child(2) {
 +
border-left: red 3px solid;
 +
}
 +
.calendar-day:nth-child(4) li {
 +
background: #777;
 +
}
 +
.note:nth-child(3) {
 +
border-left: green 3px solid;
 +
}
 +
.calendar-day:nth-child(5) li {
 +
background: #545454;
 +
}
 +
.note:nth-child(4) {
 +
border-left: blue 3px solid;
 +
}
 +
.calendar-day:nth-child(6) li {
 +
background:#424242;
 +
}
 +
.note:nth-child(5) {
 +
border-left: blue 3px solid;
 +
}
 +
.calendar-day:nth-child(7) li {
 +
background:rgba(39, 39, 39, 1)
 +
}
 +
.note:nth-child(6) {
 +
border-left: blue 3px solid;
}
}
-
.green{background:#7ec754;}
 
-
.green:hover{background:#7ec754;}
 
-
 
-
/**************************** Duration of an event ****************************/
 
-
.open li{height:200px;overflow:hidden;}
 
-
.open li.e2{height:100px;overflow:hidden;}
 
-
.open li.e3{height:67px;overflow:hidden;}
 
-
.open li.e4{height:50px;overflow:hidden;}
 
-
.open li.e5{height:40px;overflow:hidden;}
 
-
.open li.e6{height:33.33px;overflow:hidden;}
 
-
.open li.e7{height:28.57px;overflow:hidden;}
 
-
.open li.e8{height:25px;overflow:hidden;}
 
-
.bigwk .open li{height:600px;overflow:hidden;}
 
-
.bigwk .open li.e2{height:300px;overflow:hidden;}
 
-
.bigwk .open li.e3{height:200px;overflow:hidden;}
 
-
.bigwk .open li.e4{height:150px;overflow:hidden;}
 
-
.bigwk .open li.e5{height:120px;overflow:hidden;}
 
-
.bigwk .open li.e6{height:100px;overflow:hidden;}
 
-
.bigwk .open li.e7{height:85.71px;overflow:hidden;}
 
-
.bigwk .open li.e8{height:75px;overflow:hidden;}
 
-
.mweek .open li{height:400px;overflow:hidden;}
 
-
.mweek .open li.e2{height:200px;overflow:hidden;}
 
-
.mweek .open li.e3{height:134px;overflow:hidden;}
 
-
.mweek .open li.e4{height:100px;overflow:hidden;}
 
-
.mweek .open li.e5{height:80px;overflow:hidden;}
 
-
.mweek .open li.e6{height:67px;overflow:hidden;}
 
-
.mweek .open li.e7{height:57.14px;overflow:hidden;}
 
-
.mweek .open li.e8{height:50px;overflow:hidden;}
 
-
 
-
/**************************** Legend ****************************/
 
-
.caldot{width:12px;height:12px;border-radius:6px;margin-left:3px;margin-top:4px;margin-right:3px;}
 
</style>
</style>
<script>
<script>
function initMenu() {
function initMenu() {
-
var block = $(".day");
+
var block = $(".calendar-day");
-
block.addClass("clickable");
+
var index;
-
block.hover(function(){window.status = $(this)}, function(){window.status = ""});
+
block.hover(function(){window.status = $(this)}, function(){window.status = ""});
-
+
$('.note').hide();
-
$('.open').hide();
+
 
block.click(
block.click(
function() {
function() {
-
$(this).parents('div:eq(0)').find('.open').slideToggle('fast');
+
index = $(this).closest('.calendar').find('.calendar-day').index(this)+1;
 +
$(this).closest('.cal-wrapper').find('.note:nth-child('+index+')').slideToggle('fast');
 +
$(this).closest('.cal-wrapper').find('.note:nth-child('+index+')').siblings().hide();
}
}
);}
);}
$(document).ready(function() {initMenu();});
$(document).ready(function() {initMenu();});
</script>
</script>
 +
<script>
 +
$(document).ready(function(){
 +
$(".doo2").hide(500) ;
 +
$(".doo3").hide(500) ;
 +
$(".doo4").hide(500) ;
 +
$(".doo5").hide(500) ;
 +
$(".doo6").hide(500) ;
 +
$(".doo7").hide(500) ;
 +
$(".doo8").hide(500) ;
 +
$(".doo9").hide(500) ;
 +
  $("#move1").click(function(){
 +
$(".doo1").slideToggle(500);
 +
$(".doo2").hide(500) ;
 +
$(".doo3").hide(500) ;
 +
$(".doo4").hide(500) ;
 +
$(".doo5").hide(500) ;
 +
$(".doo6").hide(500) ;
 +
$(".doo7").hide(500) ;
 +
$(".doo8").hide(500) ;
 +
$(".doo9").hide(500) ;
 +
  });
 +
  $("#move2").click(function(){
 +
  $(".doo2").slideToggle(500);
 +
$(".doo1").hide(500) ;
 +
 +
$(".doo3").hide(500) ;
 +
$(".doo4").hide(500) ;
 +
$(".doo5").hide(500) ;
 +
$(".doo6").hide(500) ;
 +
$(".doo7").hide(500) ;
 +
$(".doo8").hide(500) ;
 +
$(".doo9").hide(500) ;
 +
  });
 +
  $("#move3").click(function(){
 +
  $(".doo3").slideToggle(500);
 +
$(".doo1").hide(500) ;
 +
$(".doo2").hide(500) ;
 +
 +
$(".doo4").hide(500) ;
 +
$(".doo5").hide(500) ;
 +
$(".doo6").hide(500) ;
 +
$(".doo7").hide(500) ;
 +
$(".doo8").hide(500) ;
 +
$(".doo9").hide(500) ;
 +
  });
 +
  $("#move4").click(function(){
 +
  $(".doo4").toggle(500);
 +
$(".doo1").hide(500) ;
 +
$(".doo2").hide(500) ;
 +
$(".doo3").hide(500) ;
 +
 +
$(".doo5").hide(500) ;
 +
$(".doo6").hide(500) ;
 +
$(".doo7").hide(500) ;
 +
$(".doo8").hide(500) ;
 +
$(".doo9").hide(500) ;
 +
  });
 +
  $("#move5").click(function(){
 +
  $(".doo5").toggle(500);
 +
$(".doo1").hide(500) ;
 +
$(".doo2").hide(500) ;
 +
$(".doo3").hide(500) ;
 +
$(".doo4").hide(500) ;
 +
 +
$(".doo6").hide(500) ;
 +
$(".doo7").hide(500) ;
 +
$(".doo8").hide(500) ;
 +
$(".doo9").hide(500) ;
 +
  });
 +
  $("#move6").click(function(){
 +
  $(".doo6").toggle(500);
 +
$(".doo1").hide(500) ;
 +
$(".doo2").hide(500) ;
 +
$(".doo3").hide(500) ;
 +
$(".doo4").hide(500) ;
 +
$(".doo5").hide(500) ;
 +
 +
$(".doo7").hide(500) ;
 +
$(".doo8").hide(500) ;
 +
$(".doo9").hide(500) ;
 +
  });
 +
  $("#move7").click(function(){
 +
  $(".doo7").toggle(500);
 +
$(".doo1").hide(500) ;
 +
$(".doo2").hide(500) ;
 +
$(".doo3").hide(500) ;
 +
$(".doo4").hide(500) ;
 +
$(".doo5").hide(500) ;
 +
$(".doo6").hide(500) ;
 +
 +
$(".doo8").hide(500) ;
 +
$(".doo9").hide(500) ;
 +
  });
 +
  $("#move8").click(function(){
 +
  $(".doo8").toggle(500);
 +
$(".doo1").hide(500) ;
 +
$(".doo2").hide(500) ;
 +
$(".doo3").hide(500) ;
 +
$(".doo4").hide(500) ;
 +
$(".doo5").hide(500) ;
 +
$(".doo6").hide(500) ;
 +
$(".doo7").hide(500) ;
 +
 +
$(".doo9").hide(500) ;
 +
  });
 +
  $("#move9").click(function(){
 +
  $(".doo9").toggle(500);
 +
$(".doo1").hide(500) ;
 +
$(".doo2").hide(500) ;
 +
$(".doo3").hide(500) ;
 +
$(".doo4").hide(500) ;
 +
$(".doo5").hide(500) ;
 +
$(".doo6").hide(500) ;
 +
$(".doo7").hide(500) ;
 +
$(".doo8").hide(500) ;
 +
 +
  });
 +
});
 +
</script>
 +
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
 +
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
 +
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
 +
<link rel="stylesheet" href="/resources/demos/style.css">

Latest revision as of 06:07, 28 August 2015

Retrieved from "http://2014.igem.org/Team:NCTU_Formosa/source/header-notebook"