Difference between revisions of "Team:CAU China/Notebook"

Line 1: Line 1:
−
 
 
{{CAU_China/CSS/Top}}
 
{{CAU_China/CSS/Top}}
−
 
−
 
−
 
−
 
 
<html>
 
<html>
  
Line 19: Line 14:
  
 
</script>
 
</script>
−
 
 
<style>
 
<style>
−
.customelementM5B{
 
−
display:none;
 
−
}
 
  
−
table{
+
.pictureTitle{
−
float: none!important;
+
    background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.7)), url("");
−
}
+
    background-repeat: no-repeat;
 +
    background-size: cover;
 +
    background-position:center;
 +
}
  
  
−
.customHeader{
+
/* HTML5 display-role reset for older browsers */
−
border-bottom: none;
+
article, aside, details, figcaption, figure,
 +
footer, header, hgroup, menu, nav, section, main {
 +
display: block;
 
}
 
}
−
 
+
body {
−
#HQ_page table{
+
line-height: 1;
−
margin: 1%;
+
 
}
 
}
−
 
+
ol, ul {
−
h5{
+
list-style: none;
−
text-align: left;
+
 
}
 
}
−
 
+
blockquote, q {
−
/* Weekdays (Mon-Sun) */
+
quotes: none;
−
.weekdays {
+
−
    margin: 0;
+
−
    padding: 10px 8%;
+
−
    background-color:#ddd;
+
−
    text-align: center;  /* new */
+
−
    display: grid;
+
−
    grid-template-columns: auto auto auto auto auto auto auto;
+
−
   
+
 
}
 
}
−
 
+
blockquote:before, blockquote:after,
−
.weekdays .weekday {
+
q:before, q:after {
−
    width: 12%;
+
content: '';
−
    color: black;
+
content: none;
−
    text-align: center;
+
−
    margin: auto;
+
 
}
 
}
−
.monthContainer {
+
table {
−
    padding: 10px 8%;
+
border-collapse: collapse;
−
    background: #eee;
+
border-spacing: 0;
−
    margin: 0;
+
−
    width: 100%;
+
−
    box-sizing: border-box;
+
−
    display: grid;
+
−
    grid-template-columns: auto auto auto auto auto auto auto;
+
−
 
+
 
}
 
}
−
 
+
ul{
−
.monthContainer .day {
+
     line-height: 1em;
−
     width: 100%;
+
−
    text-align: center;
+
−
    margin-bottom: 5px;
+
−
    font-size:2em;
+
−
    color: #000;
+
−
    border: 1px solid black;
+
 
}
 
}
 +
/* style css */
 +
/* --------------------------------
  
−
.monthContainer .day:hover{
+
Primary style
−
    background-color: #90EE90;
+
−
}
+
  
−
.monthContainer .day.active{
+
-------------------------------- */
−
    background-color:#77a4ef;
+
*, *::after, *::before {
 +
  box-sizing: border-box;
 
}
 
}
  
−
.monthContainer .inactiveDay{
+
/* --------------------------------  
−
    background-color: lightgrey;
+
−
    width: 100%;
+
−
    text-align: center;
+
−
    margin-bottom: 5px;
+
−
    font-size:2em;
+
−
    color: #777;
+
−
    border: 1px solid black;
+
−
}
+
  
−
.customelementM4B, .customelementM4A, .customelementM5B, .customelementM5A, .customelementM3, .calenderContainer, .navigateArrows{margin:0; padding:30px;text-align:left;}
+
Main Components
  
 +
-------------------------------- */
 +
.cd-schedule {
 +
  position: relative;
 +
  margin: 2em 0;
 +
}
  
−
.calenderContainer {
+
.cd-schedule::before {
−
    padding: 5%;
+
  /* never visible - this is used in js to check the current MQ */
−
    margin: 0 5% 0 25vh;   
+
  content: 'mobile';
−
    box-sizing: border-box;
+
  display: none;
−
    color: #000;
+
}
−
    background-color: white;
+
−
    text-align: justify;
+
  
−
     overflow: auto;  
+
@media only screen and (min-width: 800px) {
−
     z-index: 5;
+
  .cd-schedule {
 +
     width: 90%;
 +
    max-width: 1400px;
 +
    margin: 2em auto;
 +
  }
 +
  .cd-schedule::after {
 +
     clear: both;
 +
    content: "";
 +
    display: block;
 +
  }
 +
  .cd-schedule::before {
 +
    content: 'desktop';
 +
  }
 
}
 
}
  
−
.monthHeader {
+
.cd-schedule .timeline {
−
    display: none
+
  display: none;
 
}
 
}
  
−
/* Month header */
+
@media only screen and (min-width: 800px) {
−
.month {
+
  .cd-schedule .timeline {
−
     padding: 70px 25px;
+
     display: block;
 +
    position: absolute;
 +
    top: 0;
 +
    left: 0;
 +
    height: 100%;
 
     width: 100%;
 
     width: 100%;
−
     background: #A4C2F4;
+
     padding-top: 50px;
−
     text-align: center;
+
  }
−
     box-sizing: border-box;
+
  .cd-schedule .timeline li {
 +
     width: 100%;
 +
    position: relative;
 +
    height: 50px;
 +
  }
 +
  .cd-schedule .timeline li::after {
 +
    /* this is used to create the table horizontal lines */
 +
    content: '';
 +
     position: absolute;
 +
    bottom: 0;
 +
    left: 0;
 +
    width: 100%;
 +
    height: 1px;
 +
    background: #EAEAEA;
 +
  }
 +
  .cd-schedule .timeline li:last-of-type::after {
 
     display: none;
 
     display: none;
−
     color: black;
+
  }
−
    font-size: 2em;
+
  .cd-schedule .timeline li span {
 +
     display: none;
 +
  }
 
}
 
}
  
 +
@media only screen and (min-width: 1000px) {
 +
  .cd-schedule .timeline li::after {
 +
    width: calc(100% - 30px);
 +
    left: 70px;
 +
  }
 +
  .cd-schedule .timeline li span {
 +
    display: inline-block;
 +
    -webkit-transform: translateY(-50%);
 +
        -ms-transform: translateY(-50%);
 +
            transform: translateY(-50%);
 +
  }
 +
  .cd-schedule .timeline li:nth-of-type(2n) span {
 +
    display: none;
 +
  }
 +
}
  
−
/* Previous button inside month header */
+
.cd-schedule .events {
−
.month .prev {
+
  position: relative;
−
    float: left;
+
  z-index: 1;
−
    padding-top: 10px;
+
 
}
 
}
  
−
/* Next button */
+
.cd-schedule .events .events-group {
−
.month .next {
+
  margin-bottom: 30px;
−
    float: right;
+
−
    padding-top: 10px;
+
 
}
 
}
−
/* Style the tab */
+
 
−
.anotherWrapper{
+
.cd-schedule .events .top-info {
−
    position:relative;
+
  width: 100%;
−
    width:100%;
+
  padding: 0 5%;
−
}
+
−
.tab {
+
−
        margin: 0 5% 0 25vh;
+
−
        width:100%;
+
−
        position:absolute;
+
−
        top:-2.5vw;
+
−
        z-index: 0;
+
−
        height: 2.5vw
+
 
}
 
}
  
−
/* Style the buttons that are used to open the tab content */
+
.cd-schedule .events .top-info > span {
−
.tab button {
+
  display: inline-block;
−
    background-color: #A4C2F4;
+
  line-height: 1.2;
−
    width: 15%;
+
  margin-bottom: 10px;
−
    height: 100%;
+
  font-weight: bold;
−
    margin: 0 2%;
+
−
    float: left;
+
−
    border: none;
+
−
    outline: none;
+
−
    cursor: pointer;
+
−
    padding: 0.5%;
+
−
    transition: 0.3s;
+
−
    font-size: 1vw;
+
−
    z-index: -1;
+
−
    border-radius: 20px 20px 0 0;
+
−
   
+
 
}
 
}
  
−
/* Change background color of buttons on hover */
+
.cd-schedule .events .events-group > ul {
−
.tab button:hover {
+
  position: relative;
−
    background-color: #90EE90;
+
  padding: 0 5%;
 +
  /* force its children to stay on one line */
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
  overflow-x: scroll;
 +
  -webkit-overflow-scrolling: touch;
 +
  margin: 0;
 
}
 
}
  
−
/* Create an active/current tablink class */
+
.cd-schedule .events .events-group > ul::after {
−
.tab button.active {
+
  /* never visible - used to add a right padding to .events-group > ul */
−
    background-color: #77a4ef;
+
  display: inline-block;
 +
  content: '-';
 +
  width: 1px;
 +
  height: 100%;
 +
  opacity: 0;
 +
  color: transparent;
 
}
 
}
  
 +
.cd-schedule .events .single-event {
 +
  /* force them to stay on one line */
 +
  -ms-flex-negative: 0;
 +
      flex-shrink: 0;
 +
  float: left;
 +
  height: 150px;
 +
  width: 70%;
 +
  max-width: 300px;
 +
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.2);
 +
  margin-right: 20px;
 +
  -webkit-transition: opacity .2s, background .2s;
 +
  transition: opacity .2s, background .2s;
 +
}
  
−
.customelementM5B {
+
.cd-schedule .events .single-event:last-of-type {
−
    padding: 50px;
+
  margin-right: 5%;
−
        margin: 0 5% 0 25vh;       
+
−
    box-sizing: border-box;
+
−
        color: #000;
+
−
        background-color: white;
+
−
        height: 100%;
+
−
        text-align: justify;
+
−
        border-right: 15px solid #A4C2F4;
+
−
        border-bottom: 15px solid #A4C2F4;
+
−
        overflow: auto; 
+
 
}
 
}
  
−
.navigateArrows{
+
.cd-schedule .events .single-event a {
−
        margin: 0 5% 0 25vh;   
+
  display: block;
−
    box-sizing: border-box;
+
  height: 100%;
−
        color: black;
+
  padding: 0.8em;
−
        background-color: #A4C2F4;
+
−
        position: relative;
+
−
        font-size: 1.5vw;
+
−
        line-height: 8vh;
+
−
        height: 8vh;
+
 
}
 
}
  
−
.navigateArrows .arrowLeft{
+
@media only screen and (min-width: 550px) {
−
        float: left;
+
  .cd-schedule .events .single-event {
−
        padding-left: 2%;
+
    width: 40%;
 +
  }
 
}
 
}
  
−
.navigateArrows .arrowRight{
+
@media only screen and (min-width: 800px) {
−
        float: right;
+
  .cd-schedule .events {
−
         padding-right: 2%;
+
    float: left;
 +
    width: 100%;
 +
  }
 +
  .cd-schedule .events .events-group {
 +
    width: 25%;
 +
    float: left;
 +
    border: 1px solid #EAEAEA;
 +
    /* reset style */
 +
    margin-bottom: 0;
 +
  }
 +
  .cd-schedule .events .events-group:not(:first-of-type) {
 +
    border-left-width: 0;
 +
  }
 +
  .cd-schedule .events .top-info {
 +
    /* vertically center its content */
 +
    display: table;
 +
    height: 50px;
 +
    border-bottom: 1px solid #EAEAEA;
 +
    /* reset style */
 +
    padding: 0;
 +
  }
 +
  .cd-schedule .events .top-info > span {
 +
    /* vertically center inside its parent */
 +
    display: table-cell;
 +
    vertical-align: middle;
 +
    padding: 0 .5em;
 +
    text-align: center;
 +
    /* reset style */
 +
    font-weight: normal;
 +
    margin-bottom: 0;
 +
  }
 +
  .cd-schedule .events .events-group > ul {
 +
    height: 650px;
 +
    /* reset style */
 +
    display: block;
 +
    overflow: visible;
 +
    padding: 0;
 +
  }
 +
  .cd-schedule .events .events-group > ul::after {
 +
    clear: both;
 +
    content: "";
 +
    display: block;
 +
  }
 +
  .cd-schedule .events .events-group > ul::after {
 +
    /* reset style */
 +
    display: none;
 +
  }
 +
  .cd-schedule .events .single-event {
 +
    position: absolute;
 +
    z-index: 3;
 +
    /* top position and height will be set using js */
 +
    width: calc(100% + 2px);
 +
    left: -1px;
 +
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), inset 0 -3px 0 rgba(0, 0, 0, 0.2);
 +
    /* reset style */
 +
    -ms-flex-negative: 1;
 +
         flex-shrink: 1;
 +
    height: auto;
 +
    max-width: none;
 +
    margin-right: 0;
 +
  }
 +
  .cd-schedule .events .single-event a {
 +
    padding: 0.2em;
 +
  }
 +
  .cd-schedule .events .single-event:last-of-type {
 +
    /* reset style */
 +
    margin-right: 0;
 +
  }
 +
  .cd-schedule .events .single-event.selected-event {
 +
    /* the .selected-event class is added when an user select the event */
 +
    visibility: hidden;
 +
  }
 
}
 
}
  
−
.navigateArrows a{
+
@media only screen and (min-width: 1000px) {
−
        text-decoration: none;
+
  .cd-schedule .events {
−
        color: black;
+
    /* 60px is the .timeline element width */
 +
    width: calc(100% - 60px);
 +
    margin-left: 100px;
 +
  }
 
}
 
}
  
−
.navigateArrows b{
+
.cd-schedule.loading .events .single-event {
−
        font-weight: 900!important;
+
  /* the class .loading is added by default to the .cd-schedule element
 +
  it is removed as soon as the single events are placed in the schedule plan (using javascript) */
 +
  opacity: 0;
 
}
 
}
  
−
.InterlabTable{
+
.cd-schedule .event-name,
−
   font-size: 0.7vw;
+
.cd-schedule .event-date {
−
   margin: 2%;
+
   display: block;
−
   float: right;
+
   color: white;
−
   box-shadow: 10px 10px 5px grey;
+
   font-weight: bold;
 +
   -webkit-font-smoothing: antialiased;
 +
  -moz-osx-font-smoothing: grayscale;
 
}
 
}
  
−
.InterlabTable th, td {
+
.cd-schedule .event-name {
−
    text-align: center;
+
  font-size: 1rem;
−
    padding: 2px 5px!important;
+
}
 +
 
 +
.display-4{
 +
  font-size: 2rem;
 
}
 
}
  
−
th{
+
@media only screen and (min-width: 800px) {
−
     background-color: #77a4ef !important;
+
  .cd-schedule .event-name {
 +
     font-size: 1rem;
 +
  }
 +
.display-4{
 +
  font-size: 3.5rem;
 
}
 
}
−
.InterlabTable tr:nth-child(even) {background-color: #f2f2f2;}
 
−
.InterlabTable{
 
−
  font-size: 0.8vw;
 
−
  margin: 1%;
 
 
}
 
}
  
−
.url_icon {
+
.cd-schedule .event-date {
 +
  /* they are not included in the the HTML but added using JavScript */
 +
  font-size: 1rem;
 +
  opacity: .7;
 +
  line-height: 1.2;
 +
  margin-bottom: .2em;
 +
  display: none;
 +
}
  
−
    background: url() center right no-repeat !important;
+
.cd-schedule .single-event[data-event="event-1"],
−
    height: 13px !important;
+
.cd-schedule [data-event="event-1"] .header-bg {
−
    padding-right: 15px !important;
+
  /* this is used to set a background color for the event and the modal window */
 +
  background: rgba(0,203,177,1);
 +
}
  
 +
.cd-schedule .single-event[data-event="event-1"]:hover {
 +
  background: rgba(1,101,224,1);
 
}
 
}
  
 +
.cd-schedule .single-event[data-event="event-2"],
 +
.cd-schedule [data-event="event-2"] .header-bg {
 +
  background: rgba(213,59,72,1);
 +
}
  
−
.customHeader2{
+
.cd-schedule .single-event[data-event="event-2"]:hover {
−
        border-top: 15px solid #A4C2F4;
+
  background: rgba(247,148,77,1);
−
        border-right: 15px solid #A4C2F4;
+
−
        border-bottom: 15px solid #A4C2F4;
+
−
        margin: 0 5% 0 25vh;   
+
−
        padding: 0;
+
 
}
 
}
  
−
.customHeader2 img{
+
.cd-schedule .single-event[data-event="event-3"],
−
      width: 100%;
+
.cd-schedule [data-event="event-3"] .header-bg {
 +
  background: rgba(153, 0, 204,1);
 
}
 
}
−
html{
+
 
−
        background-color: #eaf4edff;
+
.cd-schedule .single-event[data-event="event-3"]:hover {
−
        font-family: "PT Sans";
+
  background: rgba(153, 51, 102,1);
−
        font-weight: normal;
+
−
        font-style: normal;
+
 
}
 
}
  
−
body{
+
.cd-schedule .single-event[data-event="event-4"],
−
    font-family: "PT Sans";
+
.cd-schedule [data-event="event-4"] .header-bg {
−
        font-weight: normal;
+
  background: #f6b067;
−
        font-style: normal;
+
}
−
    font-size: 1em;
+
−
    margin: 14.1vh 0px 0px 0px;
+
−
        background-color: transparent;
+
−
    @charset 'UTF-8'   
+
−
    }
+
  
−
/*  测试位置*/
+
.cd-schedule .single-event[data-event="event-4"]:hover {
 +
  background: #f7bd7f;
 +
}
  
 +
.cd-schedule .event-modal {
 +
  position: fixed;
 +
  z-index: 500;
 +
  top: 0;
 +
  right: 0;
 +
  height: 100%;
 +
  width: 100%;
 +
  visibility: hidden;
 +
  /* Force Hardware acceleration */
 +
  -webkit-transform: translateZ(0);
 +
          transform: translateZ(0);
 +
  -webkit-transform: translateX(100%);
 +
      -ms-transform: translateX(100%);
 +
          transform: translateX(100%);
 +
  -webkit-transition: visibility .4s, -webkit-transform .4s;
 +
  transition: visibility .4s, -webkit-transform .4s;
 +
  transition: transform .4s, visibility .4s;
 +
  transition: transform .4s, visibility .4s, -webkit-transform .4s;
 +
  -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
 +
          transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
 +
}
  
 +
.cd-schedule .event-modal .header {
 +
  position: relative;
 +
  height: 70px;
 +
  /* vertically center its content */
 +
  display: table;
 +
  width: 100%;
 +
}
  
 +
.cd-schedule .event-modal .header .content {
 +
  position: relative;
 +
  z-index: 3;
 +
  /* vertically center inside its parent */
 +
  display: table-cell;
 +
  vertical-align: middle;
 +
  padding: .6em 5%;
 +
}
  
 +
.cd-schedule .event-modal .body {
 +
  position: relative;
 +
  width: 100%;
 +
  /* 70px is the .header height */
 +
  height: calc(100% - 70px);
 +
}
  
 +
.cd-schedule .event-modal .event-info {
 +
  position: relative;
 +
padding: 1em;
 +
  z-index: 2;
 +
  line-height: 1.4;
 +
  height: 100%;
 +
overflow-x:hidden;
 +
overflow-y:auto;
 +
}
  
 +
.cd-schedule .event-modal .event-info > div {
 +
  overflow: auto;
 +
  height: 100%;
 +
  padding: 1.4em 5%;
 +
}
  
 +
.cd-schedule .event-modal .header-bg, .cd-schedule .event-modal .body-bg {
 +
  /* these are the morphing backgrounds - visible on desktop only */
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  height: 100%;
 +
  width: 100%;
 +
}
  
 +
.cd-schedule .event-modal .body-bg {
 +
  z-index: 1;
 +
  background: white;
 +
  -webkit-transform-origin: top left;
 +
      -ms-transform-origin: top left;
 +
          transform-origin: top left;
 +
}
  
 +
.cd-schedule .event-modal .header-bg {
 +
  z-index: 2;
 +
  -webkit-transform-origin: top center;
 +
      -ms-transform-origin: top center;
 +
          transform-origin: top center;
 +
}
  
 +
.cd-schedule .event-modal .close {
 +
  /* this is the 'X' icon */
 +
  position: absolute;
 +
  top: 0;
 +
  right: 0;
 +
  z-index: 3;
 +
  background: rgba(0, 0, 0, 0.1);
 +
  /* replace text with icon */
 +
  color: transparent;
 +
  white-space: nowrap;
 +
  text-indent: 100%;
 +
  height: 70px;
 +
  width: 70px;
 +
}
  
−
</style>
+
.cd-schedule .event-modal .close::before, .cd-schedule .event-modal .close::after {
 +
  /* these are the two lines of the 'X' icon */
 +
  content: '';
 +
  position: absolute;
 +
  top: 50%;
 +
  left: 50%;
 +
  width: 2px;
 +
  height: 22px;
 +
  background: white;
 +
  -webkit-backface-visibility: hidden;
 +
  backface-visibility: hidden;
 +
}
  
−
<body>
+
.cd-schedule .event-modal .close::before {
−
<script src="https://2019.igem.org/Template:CAU_China/JS/CAUjquery?action=raw&ctype=text/javascript"></script>
+
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
 +
      -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
 +
          transform: translateX(-50%) translateY(-50%) rotate(45deg);
 +
}
  
−
<script>
+
.cd-schedule .event-modal .close::after {
−
var inactiveJuly, inactiveAugust, inactiveSeptember, inactiveOctober, activeContent, firstMonth, firstInactive, firstEmpty;
+
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
−
function calenderlink(sss){
+
      -ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
−
  $("#day"+sss).click();
+
          transform: translateX(-50%) translateY(-50%) rotate(-45deg);
−
};
+
−
function tablink(ssss){
+
−
    $("#tab"+ssss).click();
+
 
}
 
}
−
function changeContent(selector) {
 
  
−
    $(".monthHeader").hide();
+
.cd-schedule .event-modal .event-date {
−
    $("button").removeClass("active");
+
  display: none;
−
   
+
−
    if(selector == 1){
+
−
        activeContent = 'I';
+
−
        firstMonth = 'A';
+
−
        inactiveJuly = [];
+
−
        inactiveAugust = [1,2,3,4,5,6,7,];
+
−
        inactiveSeptember = [15, 16, 19];
+
−
        firstInactive = inactiveAugust;
+
−
        firstEmpty = 2;
+
−
    }
+
−
    else if(selector == 2){
+
−
        monthNum_initial = 31;
+
−
        activeContent = 'R';
+
−
        firstMonth = 'M';
+
−
        inactiveMay = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,23,24,25,26,27,30,31];
+
−
        inactiveJune = [1,2,7,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,28,31];
+
−
        inactiveJuly = [1,4,6,7,8,9,10,11,12,14,15,19,22,23,24,25,26,27,28,29,30,31];
+
−
        inactiveAugust = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31];
+
−
        inactiveSeptember = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31];
+
−
        inactiveOctober = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31];
+
−
        firstInactive = inactiveMay;
+
−
        firstEmpty = 3;
+
−
    }
+
−
    else if(selector == 3){
+
−
        monthNum_initial = 30;
+
−
        activeContent = 'B';
+
−
        firstMonth = 'J1';
+
−
        inactiveJune = [1,2,3,4,5,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31]
+
−
        inactiveJuly = [3,4,5,6,7,12,13,14,15,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31];
+
−
        inactiveAugust = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31];
+
−
        inactiveSeptember = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31];
+
−
        inactiveOctober = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31];
+
−
        firstInactive = inactiveJune;
+
−
        firstEmpty = 6;
+
−
    }
+
−
 
+
−
    // Show the current tab, and add an "active" class to the button that opened the tab
+
−
    $("#monthHeader"+ activeContent).show();
+
−
    $("#tab"+activeContent).addClass("active");
+
−
    createMonth(monthNum_initial, firstEmpty, firstInactive, firstMonth);
+
 
}
 
}
  
−
function createMonth(lengthMonth, emptyDays, inactiveDays, m){
+
.cd-schedule .event-modal.no-transition {
−
var j = 1;
+
  -webkit-transition: none;
−
var cont = $(".monthContainer");
+
  transition: none;
−
cont.empty();
+
−
for(i = 1; i < lengthMonth+1;i++){
+
−
for(var i = 0; i < emptyDays; i++){
+
−
    cont.append('<div class = "emptyDay"></div>');
+
−
    j++;
+
 
}
 
}
  
−
for(i = 1; i < lengthMonth+1;i++){
+
.cd-schedule .event-modal.no-transition .header-bg, .cd-schedule .event-modal.no-transition .body-bg {
−
            if(inactiveDays.indexOf(i) == -1){
+
  -webkit-transition: none;
−
                cont.append('<div class = "day" id = "day'+ activeContent + m + i + '">'+ i + '</div>');
+
  transition: none;
−
            }
+
−
            else{
+
−
                cont.append('<div class = "inactiveDay" id = "day'+ activeContent + m + i + '">'+ i + ' </div>');
+
−
            }
+
−
 
+
−
    }
+
 
}
 
}
−
$('.month').hide();
+
.cd-schedule .event-modal .event-name {
−
$('#month'+ activeContent + m).show();
+
font-size: 1rem;
−
resetCalender();
+
 
}
 
}
  
−
function resetCalender(){
+
@media only screen and (min-width: 800px) {
−
$(".day").click(function() {
+
  .cd-schedule .event-modal {
−
     // Declare all variables
+
    /* reset style */
−
     var i, entryday;
+
    right: auto;
−
      
+
    width: auto;
−
     entryday = $(this).attr('id');
+
    height: auto;
 +
    -webkit-transform: translateX(0);
 +
        -ms-transform: translateX(0);
 +
            transform: translateX(0);
 +
    will-change: transform, width, height;
 +
    -webkit-transition: height .4s, width .4s, visibility .4s, -webkit-transform .4s;
 +
    transition: height .4s, width .4s, visibility .4s, -webkit-transform .4s;
 +
    transition: height .4s, width .4s, transform .4s, visibility .4s;
 +
    transition: height .4s, width .4s, transform .4s, visibility .4s, -webkit-transform .4s;
 +
    -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
 +
            transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
 +
  }
 +
  .cd-schedule .event-modal .header {
 +
    position: absolute;
 +
    display: block;
 +
    top: 0;
 +
    left: 0;
 +
    height: 100%;
 +
  }
 +
  .cd-schedule .event-modal .header .content {
 +
     /* reset style */
 +
     display: block;
 +
     padding: .8em;
 +
  }
 +
  .cd-schedule .event-modal .event-info > div {
 +
    padding: 2em 3em 2em 2em;
 +
  }
 +
  .cd-schedule .event-modal .body {
 +
    height: 100%;
 +
    width: auto;
 +
  }
 +
  .cd-schedule .event-modal .header-bg, .cd-schedule .event-modal .body-bg {
 +
    /* Force Hardware acceleration */
 +
     -webkit-transform: translateZ(0);
 +
            transform: translateZ(0);
 +
    will-change: transform;
 +
    -webkit-backface-visibility: hidden;
 +
            backface-visibility: hidden;
 +
  }
 +
  .cd-schedule .event-modal .header-bg {
 +
    -webkit-transition: -webkit-transform .4s;
 +
    transition: -webkit-transform .4s;
 +
    transition: transform .4s;
 +
    transition: transform .4s, -webkit-transform .4s;
 +
    -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
 +
            transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
 +
  }
 +
  .cd-schedule .event-modal .body-bg {
 +
    opacity: 0;
 +
    -webkit-transform: none;
 +
        -ms-transform: none;
 +
            transform: none;
 +
  }
 +
  .cd-schedule .event-modal .event-date {
 +
    display: none;
 +
  }
 +
  .cd-schedule .event-modal .close, .cd-schedule .event-modal .event-info {
 +
    opacity: 0;
 +
  }
 +
  .cd-schedule .event-modal .close {
 +
    width: 40px;
 +
    height: 40px;
 +
    background: transparent;
 +
  }
 +
  .cd-schedule .event-modal .close::after, .cd-schedule .event-modal .close::before {
 +
    background: #222222;
 +
    height: 16px;
 +
  }
 +
}
  
−
    // Get all elements with class="tablinks" and remove the class "active"
+
@media only screen and (min-width: 1000px) {
−
    $(".day").removeClass("active");
+
  .cd-schedule .event-modal .header .content {
−
     $(".customelementM5B").hide();
+
     padding: 1.2em;
 +
  }
 +
}
  
−
    // Show the current tab, and add an "active" class to the button that opened the tab
+
.cd-schedule.modal-is-open .event-modal {
−
    $(this).addClass("active");
+
  /* .modal-is-open class is added as soon as an event is selected */
−
    $("#entry"+entryday).show();
+
  -webkit-transform: translateX(0);
 +
      -ms-transform: translateX(0);
 +
          transform: translateX(0);
 +
  visibility: visible;
 +
}
  
−
});
+
.cd-schedule.modal-is-open .event-modal .event-info > div {
 +
  /* smooth scroll on iOS touch devices */
 +
  -webkit-overflow-scrolling: touch;
 
}
 
}
  
−
$(document).ready(function(){
+
@media only screen and (min-width: 800px) {
−
changeContent(2);
+
  .cd-schedule.animation-completed .event-modal .close,
−
resetCalender();
+
  .cd-schedule.content-loaded.animation-completed .event-modal .event-info {
−
});
+
    /* the .animation-completed class is added when the modal animation is completed
 +
the .content-loaded class is added when the modal content has been loaded (using ajax) */
 +
    opacity: 1;
 +
    -webkit-transition: opacity .2s;
 +
    transition: opacity .2s;
 +
  }
 +
  .cd-schedule.modal-is-open .body-bg {
 +
    opacity: 1;
 +
    -webkit-transition: -webkit-transform .4s;
 +
    transition: -webkit-transform .4s;
 +
    transition: transform .4s;
 +
    transition: transform .4s, -webkit-transform .4s;
 +
    -webkit-transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
 +
            transition-timing-function: cubic-bezier(0.5, 0, 0.1, 1);
 +
  }
 +
}
  
 +
.cd-schedule .cover-layer {
 +
  /* layer between the content and the modal window */
 +
  position: fixed;
 +
  z-index: 2;
 +
  top: 0;
 +
  left: 0;
 +
  height: 100%;
 +
  width: 100%;
 +
  background: rgba(0, 0, 0, 0.8);
 +
  opacity: 0;
 +
  visibility: hidden;
 +
  -webkit-transition: opacity .4s, visibility .4s;
 +
  transition: opacity .4s, visibility .4s;
 +
}
  
−
</script>
+
.cd-schedule.modal-is-open .cover-layer {
 +
  opacity: 1;
 +
  visibility: visible;
 +
}
  
  
−
<div class="anotherWrapper">
+
#toc{
−
<!-- Tab links -->
+
display:none;
−
<div class="tab">
+
}
−
  <button id = "tabR" onclick='changeContent(2)'>Astaxanthin</button>
+
−
  <button id = "tabB" onclick='changeContent(3)'>Cellulose</button>
+
  
−
</div>
 
  
−
</div>
 
  
 +
@media only screen and (max-width: 575.98px) {}
  
−
<div class="calenderContainer">
+
@media only screen and (max-width: 767.98px) {}
  
 +
@media only screen and (max-width: 991.98px) {}
  
−
<!-- 虾青素的分组显示--------------------------------------------------------------
+
@media only screen and (max-width: 1199.98px) {}
−
--------------------------------------------------------------------------------------------->
+
−
<div id="monthHeaderR" class="monthHeader">
+
−
<h1> Astaxanthin </h1>
+
  
−
<div class="month" id = "monthRM">
 
−
    <div onclick="createMonth(30, 6, inactiveJune, 'J1');" class="next">&#10095;</div>
 
−
    <div>May</div>
 
−
</div>
 
−
<div class="month" id = "monthRJ1">
 
−
    <div onclick="createMonth(31, 3, inactiveMay, 'M');" class="prev">&#10094;</div>
 
−
    <div onclick="createMonth(31, 1, inactiveJuly, 'J2');" class="next">&#10095;</div>
 
−
    <div>June</div>
 
−
</div>
 
−
<div class="month" id = "monthRJ2">
 
−
    <div onclick="createMonth(30, 6, inactiveJune, 'J1');" class="prev">&#10094;</div>
 
−
    <div onclick="createMonth(31, 4, inactiveAugust, 'A');" class="next">&#10095;</div>
 
−
    <div>July</div>
 
−
</div>
 
−
 
−
<div class="month" id = "monthRA">
 
−
    <div onclick="createMonth(31, 1, inactiveJuly, 'J2');" class="prev">&#10094;</div>
 
−
    <div onclick="createMonth(30, 0, inactiveSeptember, 'S');" class="next">&#10095;</div>
 
−
    <div>August</div>
 
−
</div>
 
  
−
<div class="month" id = "monthRS">
+
/*  下面是表格方面的布局 有冲突再调整 */
−
    <div onclick="createMonth(31, 4, inactiveAugust,'A');" class="prev">&#10094;</div>
+
−
    <div onclick="createMonth(31, 2, inactiveOctober, 'O');" class="next">&#10095;</div>
+
−
    <div>September</div>
+
−
</div>
+
  
 +
   
 +
</style>
  
−
<div class="month" id = "monthRO">
 
−
    <div onclick="createMonth(30, 0, inactiveSeptember,'S');" class="prev">&#10094;</div>
 
−
    <div>October</div>
 
−
</div>
 
  
  
−
</div>
 
  
−
<!-- 纤维素的月份格式---------------------------------------------------------------------
 
−
--------------------------------------------------------------------------------------------->
 
  
−
<div id="monthHeaderB" class="monthHeader">
 
−
<h1> Cellulose</h1>
 
−
<div class="month" id = "monthBJ1">
 
−
    <div onclick="createMonth(31, 1, inactiveJuly, 'J2');" class="next">&#10095;</div>
 
−
    <div>June</div>
 
−
</div>
 
−
<div class="month" id = "monthBJ2">
 
−
    <div onclick="createMonth(30, 6, inactiveJune, 'J1');" class="prev">&#10094;</div>
 
−
    <div onclick="createMonth(31, 4, inactiveAugust, 'A');" class="next">&#10095;</div>
 
−
    <div>July</div>
 
−
</div>
 
−
 
−
<div class="month" id = "monthBA">
 
−
    <div onclick="createMonth(31, 1, inactiveJuly, 'J2');" class="prev">&#10094;</div>
 
−
    <div onclick="createMonth(30, 0, inactiveSeptember, 'S');" class="next">&#10095;</div>
 
−
    <div>August</div>
 
−
</div>
 
  
−
<div class="month" id = "monthBS">
+
      
−
     <div onclick="createMonth(31, 4, inactiveAugust, 'A');" class="prev">&#10094;</div>
+
−
    <div onclick="createMonth(31, 2, inactiveOctober, 'O');" class="next">&#10095;</div>
+
−
    <div>September</div>
+
−
</div>
+
−
 
+
−
<div class="month" id = "monthBO">
+
−
    <div onclick="createMonth(30, 0, inactiveSeptember,'S');" class="prev">&#10094;</div>
+
−
    <div>October</div>
+
−
</div>
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
<!-- Calender Methylation Assay --------------------------------------------------------------
+
−
--------------------------------------------------------------------------------------------->
+
−
 
+
−
 
+
−
<div class="weekdays">
+
−
  <div class="weekday">Mo</div>
+
−
  <div class="weekday">Tu</div>
+
−
  <div class="weekday">We</div>
+
−
  <div class="weekday">Th</div>
+
−
  <div class="weekday">Fr</div>
+
−
  <div class="weekday">Sa</div>
+
−
  <div class="weekday">Su</div>
+
−
</div>
+
−
 
+
−
<div class="monthContainer"></div>
+
−
</div>
+
−
 
+
−
</div>
+
−
 
+
−
<!-- Notebook Interlab -----------------------------------------------------------------------
+
−
--------------------------------------------------------------------------------------------->
+
−
 
+
−
<div class = "notebookContainer">
+
−
 
+
−
 
+
−
</div>
+
−
 
+
−
<!-- Notebook Astaxanthin --------------------------------------------------------------
+
−
--------------------------------------------------------------------------------------------->
+
−
<div class="customelementM5B" id = "entrydayRM22">
+
−
  <h2>22/05/19</h2>
+
−
  <b>Name</b>
+
−
</div>
+
−
 
+
−
<div class="customelementM5B" id = "entrydayRM28">
+
−
  <h2>28/05/19</h2>
+
−
  <b>Name</b>
+
−
 
+
−
</div>
+
−
 
+
−
<div class="customelementM5B" id = "entrydayRM29">
+
−
<h2>29/05/19</h2>
+
−
  <b>Name</b>
+
−
 
+
−
</div>
+
−
 
+
−
<div class="customelementM5B" id = "entrydayRM29">
+
−
<h2>29/05/19</h2>
+
−
  <b>Name</b>
+
−
 
+
−
</div>
+
−
 
+
−
<div class="customelementM5B" id = "entrydayRJ103">
+
−
<h2>03/06/19</h2>
+
−
  <b>Name</b>
+
−
 
+
−
</div>
+
−
 
+
−
<div class="customelementM5B" id = "entrydayRJ104">
+
−
<h2>04/06/19</h2>
+
−
  <b>Name</b>
+
−
 
+
−
</div>
+
−
 
+
−
<div class="customelementM5B" id = "entrydayRJ105">
+
−
<h2>05/06/19</h2>
+
−
  <b>Name</b>
+
−
 
+
−
</div>
+
−
<div class="customelementM5B" id = "entrydayRJ106">
+
−
<h2>06/06/19</h2>
+
−
  <b>Name</b>
+
−
 
+
−
</div>
+
−
 
+
−
<div class="customelementM5B" id = "entrydayRJ108">
+
−
<h2>08/06/19</h2>
+
−
  <b>Name</b>
+
−
 
+
−
</div>
+
−
 
+
−
<div class="customelementM5B" id = "entrydayRJ127">
+
−
<h2>27/06/19</h2>
+
−
  <b>Name</b>
+
−
 
+
−
</div>
+
−
 
+
−
<div class="customelementM5B" id = "entrydayRJ129">
+
−
<h2>29/06/19</h2>
+
−
  <b>Name</b>
+
−
 
+
−
</div>
+
−
 
+
−
<div class="customelementM5B" id = "entrydayRJ130">
+
−
<h2>30/06/19</h2>
+
−
  <b>Name</b>
+
−
 
+
−
</div>
+
−
 
+
−
<!--- 目前还没有加入进表格的记录 --->
+
−
<div class="customelementM5B" id = "entrydayRJ2">
+
−
<h2>/07/19</h2>
+
−
  <b>Name</b>
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
<div class="customelementM5B" id = "entrydayRA">
+
−
<h2>/08/19</h2>
+
−
  <b>Name</b>
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
<div class="customelementM5B" id = "entrydayRS">
+
−
<h2>/09/19</h2>
+
−
  <b>Name</b>
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
<div class="customelementM5B" id = "entrydayRO">
+
−
<h2>/10/19</h2>
+
−
  <b>Name</b>
+
−
 
+
−
</div>
+
−
 
+
−
 
+
−
 
+
−
 
+
−
<!-- Notebook Cellulose --------------------------------------------------------------
+
−
--------------------------------------------------------------------------------------------->
+
−
<div class="customelementM5B" id = "entrydayBJ16">
+
−
<h2>06/06/18</h2>
+
−
<b>Name</b>
+
−
 
+
−
</div>
+
−
<div class="customelementM5B" id = "entrydayBJ21">
+
−
<h2>01/07/18</h2>
+
−
<b>Name</b>
+
−
</div>
+
  
  
−
<div class="customelementM5B" id = "entrydayBJ22">
 
−
<h2>02/07/18</h2>
 
−
<b>Name</b>
 
−
</div>
 
  
  
−
<div class="customelementM5B" id = "entrydayBJ28">
 
−
<h2>08/07/18</h2>
 
−
<b>Name</b>
 
−
</div>
 
  
−
<div class="customelementM5B" id = "entrydayBJ29">
 
−
<h2>09/07/18</h2>
 
−
<b>Name</b>
 
−
</div>
 
  
−
<div class="customelementM5B" id = "entrydayBJ210">
 
−
<h2>10/07/18</h2>
 
−
<b>Name</b>
 
−
</div>
 
  
−
<div class="customelementM5B" id = "entrydayBJ211">
 
−
<h2>11/07/18</h2>
 
−
<b>Name</b>
 
−
</div>
 
  
−
<div class="customelementM5B" id = "entrydayBJ216">
 
−
<h2>16/07/18</h2>
 
−
<b>Name</b>
 
−
</div>
 
  
  
  
−
</body>
 
  
  

Revision as of 08:54, 8 August 2019










Phactory


&copy 2019 CAU_ESPA. All rights reserved
Website Design by Leland