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=" | + | <div class="block full" id="Week_29" style="display:flex;flex-flow: row wrap;justify-content:center;margin:auto;"> |
− | + | ||
− | + | ||
+ | <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