Difference between revisions of "Team:Pasteur Paris/TestCT"

Line 118: Line 118:
 
                     <div id="timeline-descriptions-wrapper">
 
                     <div id="timeline-descriptions-wrapper">
 
                         <div data-description="Week_29">
 
                         <div data-description="Week_29">
                             <div class="block full" id="micro_0" style="display:flex;flex-flow: row wrap;justify-content:center;margin:auto;">
+
                             <div class="block full" id="Week_29" style="display:flex;flex-flow: row wrap;justify-content:center;margin:auto;">
                                <p> fefs </p>
+
                            </div>
+
  
 +
                                    <div data-description="Week_29" class="vignette" id="vign_2900">
 +
                                        <div data-description="Week_29" class="vignette_for" id="for_2900">
 +
                                        </div>
  
 +
                                        <div data-description="Week_29" class="vignette_back" id="back_2900">
 +
                                        </div>
  
 +
                                        <div data-description="Week_29" class="vignette_text">
 +
                                            <p>Day 1</p>
 +
                                        </div>
 +
                                    </div>
 +
 +
 +
                                    <div data-description="Week_29" class="panel" id="pan_2900" style="text-align:left;">
 +
                                        <div data-description="Week_29" class="close_button">
 +
                                        </div>
 +
                                        <br>
 +
                                        <br>
 +
                                        <p> Something was done one that day </p>
 +
                                        <br>
 +
                                    </div>
 +
 +
 +
                                    <script>
 +
                                    var cont = document.getElementById("Week_29"); 
 +
                                    var vign_back_lis = cont.getElementsByClassName("vignette_back");
 +
                                    var i;
 +
 +
                                    for (i = 0; i < vign_back_lis.length; i++) {
 +
                                    vign_back_lis[i].addEventListener("click", function() {
 +
                                    var cont = document.getElementById("Week_29"); 
 +
                                    var vign_back_lis = cont.getElementsByClassName("vignette_back");
 +
                                    var cont_index = "29";
 +
                                    /*get clicked element index*/
 +
                                    var index = String(this.id).substring(7,9);
 +
 +
                                    /*locate elements to move*/
 +
                                    var panel = document.getElementById("pan_"+cont_index+index);
 +
                                    var vignFor = this.previousElementSibling;
 +
                                    var vignText = this.nextElementSibling;
 +
                                    /*move it*/
 +
                                    if (panel.style.maxHeight){
 +
 +
                                        /*close it*/
 +
                                        panel.style.maxHeight = null;
 +
                                        vignFor.style.opacity = 1;
 +
                                        vignText.style.opacity = 0.8;
 +
                                        vignText.style.top = "4em";
 +
                                        }
 +
                                        else {
 +
                           
 +
                                        /*find active element*/
 +
                                        var j;
 +
                                        var index_act = -1 ;
 +
                                        var el_foc;
 +
                                        for (j = 0; j < vign_back_lis.length; j++) {
 +
                                            if (j<10) {
 +
                                            el_foc=document.getElementById("pan_" + cont_index + "0" + j);
 +
                                            if (el_foc.style.maxHeight != 0) {
 +
                                                index_act="0"+j;
 +
                                                break;
 +
                                            }
 +
                                        } else {
 +
                                            el_foc=document.getElementById("pan_" + cont_index + j);
 +
                                            if (el_foc.style.maxHeight != 0) {
 +
                                                index_act=j;
 +
                                                break;
 +
                                        }
 +
                                    }
 +
                                }
 +
                                if (index_act != -1) {
 +
                                    /*close active element*/
 +
                                    var panel_act = document.getElementById("pan_"+cont_index+index_act);
 +
                                    var back_act = document.getElementById("back_"+cont_index+index_act);
 +
                                    var for_act=back_act.previousElementSibling;
 +
                                    var text_act=back_act.nextElementSibling;
 +
                                    panel_act.style.maxHeight = null;
 +
                                    for_act.style.opacity = 1;
 +
                                    text_act.style.opacity = 0.8;
 +
                                    text_act.style.top = "4em";
 +
                                } 
 +
 +
                                /*open clicked element*/
 +
                                panel.style.maxHeight = panel.scrollHeight + "px";
 +
                                vignFor.style.opacity = 0;
 +
                                vignText.style.opacity = 1;
 +
                                vignText.style.top = "15em";
 +
                                }
 +
                                });
 +
                                }
 +
 +
                                </script>
 +
 +
 +
                            </div>
 
                         </div>
 
                         </div>
  
Line 290: Line 381:
 
   margin-left: calc((-80vw - 25px) / 20);
 
   margin-left: calc((-80vw - 25px) / 20);
 
}
 
}
#timeline #timeline-descriptions-wrapper div {
+
#timeline #timeline-descriptions-wrapper div{
 
   margin-top: 0;
 
   margin-top: 0;
 
   display: none;
 
   display: none;
Line 461: Line 552:
  
 
</style>
 
</style>
 
 
  
  
Line 638: Line 727:
  
 
         </script>
 
         </script>
 +
 +
  
  

Revision as of 13:10, 14 October 2018

""

Week 29 16 - 22 July
Week 30 23 - 29 July
Week 31 30 July - 5 Aug
Week 32 6 - 12 Aug
Week 33 13 - 19 Aug
Week 34 20 - 26 Aug
Week 35 27 Aug - 2 Sept
Week 36 3 - 9 Sept
Week 37 10 - 16 Sept
Week 38 17 - 23 Sept
Week 39 24 - 30 Sept
Week 40 1 - 7 Oct
Week 41 8 - 14 Oct
Week 42 14 - 17 Oct

Day 1



Something was done one that day


Salut

Hola

Hallo