flow/historia-de-zainab
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Wiki Activity

slide

Browse source
This commit is contained in:
Sergio 2017-09-29 13:52:12 +02:00
parent aaa291c616
commit 1cb56a0ab7
10 changed files with 92 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
.DS_Store vendored
View file

Binary file not shown.

BIN
c2_IMG_grafico.jpg
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 202 KiB

2
css/css/home.css
View file

@ -1 +1 @@
p{font-size:12px}#portada{width:100%;height:100%}.cd-horizontal-timeline .events-content{position:relative}.cd-horizontal-timeline .events-content li{position:absolute;z-index:1;width:100%;left:0;top:0;transform:translateX(-100%);opacity:0;animation-duration:.4s;animation-timing-function:ease-in-out}.cd-horizontal-timeline .events-content li.selected{position:relative;z-index:2;opacity:1;transform:translateX(0)}div.section-container{background:white}.cd-timeline-navigation{padding:0;margin:0;text-align:left;align:left}#timeline{z-index:10;position:absolute;bottom:0;left:0;height:100px;width:100%;text-align:left;background-color:white;display:none}#timeline li{display:inline-block;width:13.9%;margin:0;padding:0;text-align:left;line-height:auto}#timeline a{background-color:transparent;text-align:left;line-height:auto}#timeline img{width:103%;opacity:.2;transition:all 1s}#timeline a.active img.img-menu{opacity:1}div.menu-content{height:100vh;background-color:white}div.extra-btn-container{position:absolute;left:-50px;top:20px;width:100px;height:100px}a.btn-circle{border-radius:40px}.map-popover{display:none}div.section-left{background-color:#ededed}a.switchMode{display:block;max-height:150px}div.section-inner-content{text-align:right}
p{font-size:12px}#portada{width:100%;height:100%}.cd-horizontal-timeline .events-content{position:relative}.cd-horizontal-timeline .events-content li{position:absolute;z-index:1;width:100%;left:0;top:0;transform:translateX(-100%);opacity:0;animation-duration:.4s;animation-timing-function:ease-in-out}.cd-horizontal-timeline .events-content li.selected{position:relative;z-index:2;opacity:1;transform:translateX(0)}div.section-container{background:white}.cd-timeline-navigation{padding:0;margin:0;text-align:left;align:left}#timeline{z-index:10;position:absolute;bottom:0;left:0;height:100px;width:100%;text-align:left;background-color:white;display:none}#timeline li{display:inline-block;width:13.9%;margin:0;padding:0;text-align:left;line-height:auto}#timeline a{background-color:transparent;text-align:left;line-height:auto}#timeline img{width:103%;opacity:.2;transition:all 1s}#timeline a.active img.img-menu{opacity:1}div.menu-content{height:100vh;background-color:white}div.extra-btn-container{position:absolute;left:-50px;top:20px;width:100px;height:100px}.carousel-btn{padding:0}.carousel-btn li{list-style:none}.carousel-btn a{font-family:'Londrina Solid',cursive}.carousel-btn a.active{background-color:#da222b;color:white}.carousel-btn a.active:hover,.carousel-btn a.active:active,.carousel-btn a.active:visited{background-color:#da222b;color:white}a.btn-circle{border-radius:40px}.map-popover{display:none}div.section-left{background-color:#ededed}a.switchMode{display:block;max-height:150px}div.section-inner-content{text-align:right}

2
css/css/home.css.map
View file

@ -1 +1 @@
{"version":3,"sources":["home.less"],"names":[],"mappings":"AACA,EACI,eAGJ,SACI,UAAA,CACA,YAGJ,uBAAwB,iBACpB,kBAGJ,uBAAwB,gBAAgB,IACpC,iBAAA,CACA,SAAA,CACA,UAAA,CACA,MAAA,CACA,KAAA,CACA,UAAW,iBAAX,CACA,SAAA,CACA,sBAAA,CACA,sCAGJ,uBAAwB,gBAAgB,GAAE,UAEtC,iBAAA,CACA,SAAA,CACA,SAAA,CACA,UAAW,cAGf,GAAG,mBACC,iBAEJ,wBACI,SAAA,CACA,QAAA,CACA,eAAA,CACA,WAEJ,UACI,UAAA,CACA,iBAAA,CACA,QAAA,CACA,MAAA,CACA,YAAA,CACA,UAAA,CACA,eAAA,CACA,sBAAA,CACA,aATJ,SAUI,IACI,oBAAA,CACA,WAAA,CACA,QAAA,CACA,SAAA,CACA,eAAA,CACA,iBAhBR,SAmBI,GACI,4BAAA,CACA,eAAA,CACA,iBAtBR,SA2BI,KACI,UAAA,CACA,UAAA,CACA,kBA9BR,SAiCI,EAAC,OAAQ,IAAG,UACR,UAIR,GAAG,cACC,YAAA,CACA,uBAKJ,GAAG,qBACC,iBAAA,CACA,UAAA,CACA,QAAA,CACA,WAAA,CACA,aAGJ,CAAC,YACG,mBAGJ,aACI,aAEJ,GAAG,cACH,yBAGA,CAAC,YACG,aAAA,CACA,iBAEJ,GAAG,uBACC"}
{"version":3,"sources":["home.less"],"names":[],"mappings":"AACA,EACI,eAGJ,SACI,UAAA,CACA,YAGJ,uBAAwB,iBACpB,kBAGJ,uBAAwB,gBAAgB,IACpC,iBAAA,CACA,SAAA,CACA,UAAA,CACA,MAAA,CACA,KAAA,CACA,UAAW,iBAAX,CACA,SAAA,CACA,sBAAA,CACA,sCAGJ,uBAAwB,gBAAgB,GAAE,UAEtC,iBAAA,CACA,SAAA,CACA,SAAA,CACA,UAAW,cAGf,GAAG,mBACC,iBAEJ,wBACI,SAAA,CACA,QAAA,CACA,eAAA,CACA,WAEJ,UACI,UAAA,CACA,iBAAA,CACA,QAAA,CACA,MAAA,CACA,YAAA,CACA,UAAA,CACA,eAAA,CACA,sBAAA,CACA,aATJ,SAUI,IACI,oBAAA,CACA,WAAA,CACA,QAAA,CACA,SAAA,CACA,eAAA,CACA,iBAhBR,SAmBI,GACI,4BAAA,CACA,eAAA,CACA,iBAtBR,SA2BI,KACI,UAAA,CACA,UAAA,CACA,kBA9BR,SAiCI,EAAC,OAAQ,IAAG,UACR,UAIR,GAAG,cACC,YAAA,CACA,uBAKJ,GAAG,qBACC,iBAAA,CACA,UAAA,CACA,QAAA,CACA,WAAA,CACA,aAGJ,cACI,UADJ,aAEI,IACI,gBAHR,aAKI,GACI,YAAa,yBANrB,aAQI,EAAC,QACG,wBAAA,CACA,YAVR,aAYI,EAAC,OAAO,OAZZ,aAsCC,CA1BkB,CAAC,OAAO,QAZ3B,aAYoC,EAAC,OAAO,SACpC,wBAAA,CACA,YAIR,CAAC,YACG,mBAGJ,aACI,aAEJ,GAAG,cACH,yBAGA,CAAC,YACG,aAAA,CACA,iBAEJ,GAAG,uBACC"}

18
css/home.less
View file

@ -95,6 +95,24 @@ div.extra-btn-container {
height: 100px;
}
.carousel-btn{
padding: 0px;
li{
list-style: none;
}
a{
font-family: 'Londrina Solid', cursive;
}
a.active{
background-color:#da222b;
color:white;
}
a.active:hover,a.active:active, a.active:visited {
background-color:#da222b;
color:white;
}
}
a.btn-circle {
border-radius: 40px;
}

BIN
images/c2_IMG_grafico.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 202 KiB

0
c6_IMG_grafico_inferior.jpg → images/c6_IMG_grafico_inferior.jpg
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 135 KiB

After

Width:  |  Height:  |  Size: 135 KiB

2
index.html
View file

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- <base href="http://127.0.0.1/traficomadrid/">-->
<link href="https://fonts.googleapis.com/css?family=Londrina+Solid" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="css/css/home.css">

13
js/main.js
View file

@ -55,6 +55,7 @@ function loadModalEvent(j){
content: $('#map-page-'+j),
closeButton: 'box'
});
}
function counterLoading(){
@ -62,7 +63,10 @@ function counterLoading(){
if(pagesLoaded >= totalPages){
//Todas las plantillas cargadas
$('.menu-content').on("click",'.switchMode', function(e){
if(viewStatus=="story") viewStatus="data"
if(viewStatus=="story")
{
viewStatus="data"
}
else{
viewStatus="story"
}
@ -77,6 +81,13 @@ function counterLoading(){
//$('.menu-content .switchMode').empty().html("ver historia")
}
})
$('#page-6').on("click",'.carousel-btn a', function(e){
$('.carousel-btn a.active').removeClass("active")
$(this).addClass("active")
});
}
}

60
templates/page6.html
View file

@ -6,7 +6,65 @@
<img src="images/c6_IMG_story.jpg" class="img-responsive" /> <!-- imagen de historia-->
</div>
<div class="data-content" style="display:none">
<img src="images/c6_IMG_grafico.jpg" class="img-responsive" /> <!-- imagen de datos-->
<div class="row">
<div class="col-sm-1" style="margin-top:2em">
<ul class="carousel-btn">
<a href="#" class="carouselGotoBtn btn btn-default btn-block active" >
<li data-target="#myCarousel" data-slide-to="0" >
2011
</li> </a>
<a href="#" class="carouselGotoBtn btn btn-default btn-block">
<li data-target="#myCarousel" data-slide-to="1">
2012
</li></a>
<a href="#" class="carouselGotoBtn btn btn-default btn-block">
<li data-target="#myCarousel" data-slide-to="2">
2013
</li></a>
<a href="#" class="carouselGotoBtn btn btn-default btn-block">
<li data-target="#myCarousel" data-slide-to="3" >
2014
</li></a>
<a href="#" class="carouselGotoBtn btn btn-default btn-block">
<li data-target="#myCarousel" data-slide-to="4">
2015
</li></a>
<a href="#" class="carouselGotoBtn btn btn-default btn-block">
<li data-target="#myCarousel" data-slide-to="5">
2016
</li></a>
</ul>
</div>
<div class="col-sm-11">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<img src="images/c6_aerea2011.jpg" alt="2011">
</div>
<div class="item">
<img src="images/c6_aerea2012.jpg" alt="2012">
</div>
<div class="item">
<img src="images/c6_aerea2013.jpg" alt="2013">
</div>
<div class="item">
<img src="images/c6_aerea2013.jpg" alt="2014">
</div>
<div class="item">
<img src="images/c6_aerea2013.jpg" alt="2015">
</div>
<div class="item">
<img src="images/c6_aerea2013.jpg" alt="2016">
</div>
</div>
</div>
<div>
<img src="images/c6_IMG_grafico_inferior.jpg" class="img-responsive">
</div>
</div>
</div>
</div>
</div>
</div>