Difference between revisions of "Team:Humboldt Berlin/Notebook"

(Added the dot corresponding to Dec 2018 and dummy text)
Line 98: Line 98:
 
         <div class="full-height fixed-header-content notebook">
 
         <div class="full-height fixed-header-content notebook">
 
             <section class="width-limit">
 
             <section class="width-limit">
 +
                <div class="category-container">
 +
                    <h3>Select category</h3>
 +
                    <div class="category" data-category="synthesis">
 +
                        <img src="https://static.igem.org/mediawiki/2019/6/6f/T--Humboldt_Berlin--label_notebook_synthesis.png" alt="Synthesis: Parts and Vectors" />
 +
                    </div>
 +
                    <div class="category" data-category="human-practice">
 +
                        <img src="https://static.igem.org/mediawiki/2019/e/e6/T--Humboldt_Berlin--label_notebook_human_practise.png" alt="human practice" />
 +
                    </div>
 +
                    <div class="category" data-category="chlamy">
 +
                        <img src="https://static.igem.org/mediawiki/2019/a/ac/T--Humboldt_Berlin--label_notebook_chlamy.png" alt="c. reinhardtii cultivation and transformations"/>
 +
                    </div>
 +
                    <div class="category" data-category="bioreaktor">
 +
                        <img src="https://static.igem.org/mediawiki/2019/6/66/T--Humboldt_Berlin--label_notebook_bioreaktor.png" alt="bioreaktor" />
 +
                    </div>
 +
                </div>
 
                 <div class="timeline">
 
                 <div class="timeline">
 
                     <div class="timeline-month tl-first-element"
 
                     <div class="timeline-month tl-first-element"
Line 104: Line 119:
 
                         - Planning construction design for Golden Gate cloning using 10 different fusion sites according to Patron <br>
 
                         - Planning construction design for Golden Gate cloning using 10 different fusion sites according to Patron <br>
 
                         - Designing Primers for C. reinhardtii specified promotor PsaD containing BpiI recognition site with MoClo fusion sites and fusion sites compatible for L0 backbone. Primers containing mutation to delete BpiI site (Primer 5,6,11-13)."
 
                         - Designing Primers for C. reinhardtii specified promotor PsaD containing BpiI recognition site with MoClo fusion sites and fusion sites compatible for L0 backbone. Primers containing mutation to delete BpiI site (Primer 5,6,11-13)."
−
                         data-date="10/08 - 10/14">
+
                         data-date="10/08 - 10/14"
 +
                        data-category="synthesis">
 
                         October <br> 2018
 
                         October <br> 2018
 
                     </div>
 
                     </div>
Line 111: Line 127:
 
                         <h2>YFP</h2>
 
                         <h2>YFP</h2>
 
                         - Designing Primers for YFP with B5-B5 fusion sites taken from AG Hegemann plasmid p135 (Primer 7+8)"
 
                         - Designing Primers for YFP with B5-B5 fusion sites taken from AG Hegemann plasmid p135 (Primer 7+8)"
−
                         data-date="10/15 - 10/21">
+
                         data-date="10/15 - 10/21"
 +
                        data-category="synthesis">
 
                     </div>
 
                     </div>
 
                     <div class="timeline-dot"
 
                     <div class="timeline-dot"
Line 118: Line 135:
 
                         - production of chemical competent E. coli DH10B cells <br>
 
                         - production of chemical competent E. coli DH10B cells <br>
 
                         - PCR for YFP B5-B5 with primer 7+8"
 
                         - PCR for YFP B5-B5 with primer 7+8"
 +
                        data-category="synthesis"
 
                         data-date="10/22 - 10/28">
 
                         data-date="10/22 - 10/28">
 
                     </div>
 
                     </div>
Line 128: Line 146:
 
                         - Design of Gametolysin (GLE) secretion signal as a B2-B2 part"
 
                         - Design of Gametolysin (GLE) secretion signal as a B2-B2 part"
 
                         data-date="10/29 - 11/04"
 
                         data-date="10/29 - 11/04"
 +
                        data-category="synthesis"
 
                         data-image="https://static.igem.org/mediawiki/2019/1/17/T--Humboldt_Berlin--Notebook-10-29.png">
 
                         data-image="https://static.igem.org/mediawiki/2019/1/17/T--Humboldt_Berlin--Notebook-10-29.png">
−
                         November </br> 2018
+
                         November
 
                     </div>
 
                     </div>
−
                     <div class="timeline-month tl-first-element"
+
 
−
                         data-text="Lorem ipsum <br>
+
                     <div class="timeline-dot"
−
                         - Blabla <br>
+
                         data-text="- YOYOOY <br>
−
                        - We're great <br>
+
                         <h2>YFP</h2>
−
                         - Give us the gold medal"
+
                         - Designing Primers for YFP with B5-B5 fusion sites taken from AG Hegemann plasmid p135 (Primer 7+8)"
−
                         data-date="10/08 - 10/14">
+
                         data-date="10/15 - 10/21"
−
                         December <br> 2018
+
                         data-category="human-practice">
 
                     </div>
 
                     </div>
 
                     <div class="timeline-dot"
 
                     <div class="timeline-dot"
−
                         data-text="- Best team ever <br>
+
                         data-text="- Searching for gene templates <br>
−
                         <h2>I love you guys</h2>
+
                         <h2>chemical competent DH10B</h2>
−
                         - Oh yeah"
+
                         - production of chemical competent E. coli DH10B cells <br>
−
                         data-date="12/01 - 12/08">
+
                        - PCR for YFP B5-B5 with primer 7+8"
 +
                        data-category="human-practice"
 +
                         data-date="10/22 - 10/28">
 +
                    </div>
 +
                    <div class="timeline-month"
 +
                        data-text="<h2>chemical competent DH10B</h2>
 +
                        - checking the chemical competent DH10B cells → Transformation of plasmid containing RFP (Plasmid: pP51) (result/picture: red colonies grew → cells are competent! no cells on negative control)
 +
                        <h2>ARS</h2>
 +
                        - Design of Arylsulfatase 1 (ARS) secretion signal as a B2-B2 part
 +
                        <h2>GLE</h2>
 +
                        - Design of Gametolysin (GLE) secretion signal as a B2-B2 part"
 +
                        data-date="10/29 - 11/04"
 +
                        data-category="human-practice"
 +
                        data-image="https://static.igem.org/mediawiki/2019/1/17/T--Humboldt_Berlin--Notebook-10-29.png">
 +
                        November
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 
                 <div class="infobox">
 
                 <div class="infobox">
−
                     <h3 class="infobox-date"></h3>
+
                     <div>
−
                    <img src="" alt="" class="infobox-image no-image"/>
+
                        <h3 class="infobox-date"></h3>
 +
                        <img src="" alt="" class="infobox-image no-image"/>
 +
                    </div>
 
                     <p class="infobox-text"></p>
 
                     <p class="infobox-text"></p>
 
                 </div>
 
                 </div>
Line 202: Line 237:
 
     </div>
 
     </div>
  
−
    <script>
+
<script>
−
         var elementOffset = 100;
+
         var elementOffset = 160;
 +
        var container = document.querySelector('.notebook');
 
         var infobox = document.querySelector('.infobox');
 
         var infobox = document.querySelector('.infobox');
 
         var infoboxText = document.querySelector('.infobox-text');
 
         var infoboxText = document.querySelector('.infobox-text');
Line 209: Line 245:
 
         var infoboxImage = document.querySelector('.infobox-image');
 
         var infoboxImage = document.querySelector('.infobox-image');
 
         var firstElement = document.querySelectorAll('.timeline > div')[0]
 
         var firstElement = document.querySelectorAll('.timeline > div')[0]
 +
        var categoryFilter = document.querySelectorAll('.category');
  
 
         infoboxText.innerHTML = firstElement.getAttribute('data-text');
 
         infoboxText.innerHTML = firstElement.getAttribute('data-text');
 
         infoboxDate.innerHTML = firstElement.getAttribute('data-date');
 
         infoboxDate.innerHTML = firstElement.getAttribute('data-date');
 +
 +
        setFilter('synthesis');
 +
 +
        [].forEach.call(categoryFilter, function(el) {
 +
            el.addEventListener('click', function() {
 +
                setFilter(el.getAttribute('data-category'));
 +
            });
 +
        })
  
 
         window.addEventListener("scroll", function () {
 
         window.addEventListener("scroll", function () {
Line 219: Line 264:
  
 
         function setFixedElements() {
 
         function setFixedElements() {
−
             if (window.pageYOffset >= window.innerHeight) {
+
             if (window.pageYOffset >= (window.innerHeight + 100)) {
 
                 infobox.classList.add('fixed')
 
                 infobox.classList.add('fixed')
 
             } else {
 
             } else {
 
                 infobox.classList.remove('fixed')
 
                 infobox.classList.remove('fixed')
 
             }
 
             }
 +
        }
 +
 +
        function setFilter(filter) {
 +
            const elements = document.querySelectorAll('.timeline > div');
 +
            container.classList.remove('bioreaktor-color');
 +
            container.classList.remove('chlamy-color');
 +
            container.classList.remove('human-practice-color');
 +
            container.classList.remove('synthesis-color');
 +
            container.classList.add(filter + '-color');
 +
 +
            [].forEach.call(elements, function(el) {
 +
                if (el.getAttribute('data-category') === filter) {
 +
                    el.classList.add('visible')
 +
                } else {
 +
                    el.classList.remove('visible')
 +
                }
 +
            })
 +
            updateTimeline()
 
         }
 
         }
  
Line 231: Line 294:
 
             [].forEach.call(elements, function(el) {
 
             [].forEach.call(elements, function(el) {
 
                 if (isElementActive(el)) {
 
                 if (isElementActive(el)) {
−
                     el.classList.add('active-timeline-el')
+
                     if (el.classList.contains('visible')) {
 +
                        el.classList.add('active-timeline-el')
 +
                    } else {
 +
                        el.classList.remove('active-timeline-el')
 +
                    }
 
                 } else {
 
                 } else {
 
                     el.classList.remove('active-timeline-el')
 
                     el.classList.remove('active-timeline-el')
Line 247: Line 314:
 
                 if (imageUrl !== null) {
 
                 if (imageUrl !== null) {
 
                     infoboxImage.classList.remove('no-image')
 
                     infoboxImage.classList.remove('no-image')
 +
                    infobox.classList.add('has-image');
 
                     infoboxImage.src = imageUrl;
 
                     infoboxImage.src = imageUrl;
 
                 } else {
 
                 } else {
 
                     infoboxImage.classList.add('no-image')
 
                     infoboxImage.classList.add('no-image')
 +
                    infobox.classList.remove('has-image');
 
                     infoboxImage.src = "";
 
                     infoboxImage.src = "";
 
                 }
 
                 }

Revision as of 10:59, 6 October 2019

notebook

Notebook

Select category

Synthesis: Parts and Vectors
human practice
c. reinhardtii cultivation and transformations
bioreaktor
October
2018
November
November