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

mejora tamanios imagenes

Browse source
This commit is contained in:
Sergio 2017-09-29 22:11:44 +02:00
parent ce83928d30
commit 4fdd8127e7
12 changed files with 55 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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;font-size:13px;line-height:1.3em}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}.referencias-popover{width:90%;height:80%}div.section-left{background-color:#ededed}a.switchMode{display:block;max-height:150px}div.section-inner-content{text-align:right}a.referencias{text-decoration:none;border-bottom:dotted 1px;color:#da222b;display:inline-block;margin-bottom:3em}a.referencias:hover{color:#fa222b}.menu-story-inner,.menu-data-inner{padding-top:2em;padding-bottom:2em}
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;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;font-size:13px;line-height:1.3em}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}.referencias-popover{width:90%;height:80%}div.section-left{background-color:#ededed}a.switchMode{display:block;max-height:150px}div.section-inner-content{text-align:right}div.section-inner-content div.story-content{background-size:contain;background-position:center;background-repeat:no-repeat}a.referencias{text-decoration:none;border-bottom:dotted 1px;color:#da222b;display:inline-block;margin-bottom:3em}a.referencias:hover{color:#fa222b}.menu-story-inner,.menu-data-inner{padding-top:2em;padding-bottom:2em}

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,sBAAA,CACA,cAAA,CACA,kBAKJ,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,aA6DC,CAjDkB,CAAC,OAAO,QAZ3B,aAYoC,EAAC,OAAO,SACpC,wBAAA,CACA,YAIR,CAAC,YACG,mBAGJ,aACI,aAEJ,qBACI,SAAA,CACA,WAEJ,GAAG,cACC,yBAGJ,CAAC,YACG,aAAA,CACA,iBAEJ,GAAG,uBACC,iBASJ,CAAC,aACG,oBAAA,CACA,wBAAA,CACA,aAAA,CAIA,oBAAA,CACA,kBAJA,CAJH,YAII,OACG,cAMR,kBAAmB,iBACf,eAAA,CACA"}
{"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,CAEA,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,sBAAA,CACA,cAAA,CACA,kBAKJ,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,aAgEC,CApDkB,CAAC,OAAO,QAZ3B,aAYoC,EAAC,OAAO,SACpC,wBAAA,CACA,YAIR,CAAC,YACG,mBAGJ,aACI,aAEJ,qBACI,SAAA,CACA,WAEJ,GAAG,cACC,yBAGJ,CAAC,YACG,aAAA,CACA,iBAEJ,GAAG,uBACC,iBADJ,GAAG,sBAEC,IAAG,eACC,uBAAA,CACA,0BAAA,CACA,4BAQR,CAAC,aACG,oBAAA,CACA,wBAAA,CACA,aAAA,CAIA,oBAAA,CACA,kBAJA,CAJH,YAII,OACG,cAMR,kBAAmB,iBACf,eAAA,CACA"}

11
css/home.less
View file

@ -47,7 +47,7 @@ div.section-container {
position: absolute;
bottom: 0;
left: 0;
height: 100px;
/*height: 100px;*/
width: 100%;
text-align: left;
background-color: white;
@ -137,11 +137,14 @@ a.switchMode{
div.section-inner-content {
text-align:right;
div.story-content {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
div.data-content {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
}
a.referencias{

9
js/main.js
View file

@ -35,8 +35,10 @@ window.onload = function() {
}
function loadPageTemplates(){
$('#portada').load("templates/portada.html",function(){
loadModalEvent(0);
})
$('#portada').load("templates/portada.html")
for (var i=1; i<= totalPages; i++){
(function (n) {
$('#page-'+n).load("templates/page"+n+".html",function(){
@ -45,11 +47,11 @@ function loadPageTemplates(){
})
})(i)
}
//turnEventsOn();
}
function loadModalEvent(j){
//console.log(j)
var modal = new jBox('Modal', {
attach: '#map-btn-page-'+j,
content: $('#map-page-'+j),
@ -70,6 +72,9 @@ function loadModalEvent(j){
function counterLoading(){
pagesLoaded++;
if(pagesLoaded >= totalPages){
var ssize=$( window ).height();
var bottomSize=$( "#timeline" ).height();
$('.story-content').css("height",ssize-bottomSize+'px')
//Todas las plantillas cargadas
$('.menu-content').on("click",'.switchMode', function(e){
if(viewStatus=="story")

8
templates/page1.html
View file

@ -2,11 +2,11 @@
<div class="row">
<div class="col-md-9 section-left">
<div class="section-inner-content">
<div class="story-content">
<img src="images/c1_IMG_story.jpg" class="img-responsive" /> <!-- imagen de historia-->
<div class="story-content" style="background-image: url(images/c1_IMG_story.jpg)">
<!-- <img src="images/c1_IMG_story.jpg" class="img-responsive" /> imagen de historia-->
</div>
<div class="data-content" style="display:none">
<img src="images/c1_IMG_grafico.jpg" class="img-responsive" /> <!-- imagen de datos-->
<div class="data-content" style="display:none; background-image: url(images/c1_IMG_grafico.jpg)">
<!-- <img src="images/c1_IMG_grafico.jpg" class="img-responsive" /> imagen de datos-->
</div>
</div>
</div>

8
templates/page2.html
View file

@ -2,11 +2,11 @@
<div class="row">
<div class="col-md-9 section-left">
<div class="section-inner-content">
<div class="story-content">
<img src="images/c2_IMG_story.jpg" class="img-responsive" />
<div class="story-content" style="background-image: url(images/c2_IMG_story.jpg)">
<!--<img src="images/c2_IMG_story.jpg" class="img-responsive" /> -->
</div>
<div class="data-content" style="display:none">
<img src="images/c2_IMG_grafico.jpg" class="img-responsive" />
<div class="data-content" style="display:none; background-image: url(images/c2_IMG_grafico.jpg)">
<!-- <img src="images/c2_IMG_grafico.jpg" class="img-responsive" /> -->
</div>
</div>
</div>

8
templates/page3.html
View file

@ -2,11 +2,11 @@
<div class="row">
<div class="col-md-9 section-left">
<div class="section-inner-content">
<div class="story-content">
<img src="images/c3_IMG_story.jpg" class="img-responsive" />
<div class="story-content" style="background-image: url(images/c3_IMG_story.jpg)">
<!--<img src="images/c3_IMG_story.jpg" class="img-responsive" /> -->
</div>
<div class="data-content" style="display:none">
<img src="images/c3_IMG_grafico.jpg" class="img-responsive" />
<div class="data-content" style="display:none; background-image: url(images/c3_IMG_grafico.jpg)">
<!-- <img src="images/c3_IMG_grafico.jpg" class="img-responsive" /> -->
</div>
</div>
</div>

8
templates/page4.html
View file

@ -2,11 +2,11 @@
<div class="row">
<div class="col-md-9 section-left">
<div class="section-inner-content">
<div class="story-content">
<img src="images/c4_IMG_story.jpg" class="img-responsive" />
<div class="story-content" style="background-image: url(images/c4_IMG_story.jpg)">
<!-- <img src="images/c4_IMG_story.jpg" class="img-responsive" />-->
</div>
<div class="data-content" style="display:none">
<img src="images/c4_IMG_grafico.jpg" class="img-responsive" />
<div class="data-content" style="display:none; background-image: url(images/c4_IMG_grafico.jpg)">
<!-- <img src="images/c4_IMG_grafico.jpg" class="img-responsive" /> -->
</div>
</div>
</div>

10
templates/page5.html
View file

@ -2,11 +2,11 @@
<div class="row">
<div class="col-md-9 section-left">
<div class="section-inner-content">
<div class="story-content">
<img src="images/c5_IMG_story.jpg" class="img-responsive" /> <!-- imagen de historia-->
<div class="story-content" style="background-image: url(images/c5_IMG_story.jpg)">
<!-- <img src="images/c5_IMG_story.jpg" class="img-responsive" /> --> <!-- imagen de historia-->
</div>
<div class="data-content" style="display:none">
<img src="images/c5_IMG_grafico.jpg" class="img-responsive" /> <!-- imagen de datos-->
<div class="data-content" style="display:none; background-image: url(images/c5_IMG_grafico.jpg)">
<!-- <img src="images/c5_IMG_grafico.jpg" class="img-responsive" /> imagen de datos-->
</div>
</div>
</div>
@ -30,7 +30,7 @@
<div class="row">
<div class="col-md-9 col-md-offset-1 col-lg-8 col-lg-offset-2 col-sm-10 col-sm-offset-1 col-xl-7 col-xl-offset-1">
<div class="menu-data-inner">
Grecia vive una llegada exponencial de personas migrantes en 2015, aumentando en más de 800.000 personas respecto al año anterior.
Grecia vive una llegada exponencial de personas migrantes en 2015, con un aumento de más de 800.000 personas respecto al año anterior.
Las solicitudes de asilo suponen un escaso 2% sobre el millón de personas que han llegado a Grecia desde 2014.
En 2016, 8 de cada 10 solicitudes quedaron pendientes de gestionar.

10
templates/page6.html
View file

@ -2,8 +2,8 @@
<div class="row">
<div class="col-md-9 section-left">
<div class="section-inner-content">
<div class="story-content">
<img src="images/c6_IMG_story.jpg" class="img-responsive" /> <!-- imagen de historia-->
<div class="story-content" style="background-image: url(images/c6_IMG_story.jpg)">
<!-- img src="images/c6_IMG_story.jpg" class="img-responsive" /> --> <!-- imagen de historia-->
</div>
<div class="data-content" style="display:none">
<div class="row">
@ -78,16 +78,16 @@
<div class="col-md-3">
<div class="menu-content">
<!-- METER CONTENIDO DEL PANEL DERECHO AQUÍ -->
<!-- METER CONTENIDO DEL PANEL DERECHO AQUÍ -->
<div class="menu-story-content">
<div class="row">
<div class="col-md-9 col-md-offset-1 col-lg-8 col-lg-offset-2 col-sm-10 col-sm-offset-1 col-xl-7 col-xl-offset-1">
<div class="menu-story-inner">
Marzo 2016. Ante el hacinamiento de Moria, Zainab y su familia son trasladados al campo de Nea Kavala, en Polikastro.
Aquí continúan la espera de la resolución de asilo.
Zainab está contenta: las condiciones en este campo son mucho mejores que en el anterior.
Zainab está contenta, las condiciones en este campo son mucho mejores que en el anterior.
En él viven 425 personas, y Zainab tiene acceso a actividades educativas, compartidas con muchos otros menores.
La situación de su madre, así como la del resto de adultos, es por el contrario más desesperada: la espera se hace eterna, y carecen de posibilidades para continuar con una vida digna.
La situación de su madre, así como la del resto de adultos, es por el contrario más desesperada: la espera se hace eterna y carecen de posibilidades para continuar con una vida digna.
Nea Kavala se convierte en su hogar durante un largo año.
</div>
<a href="#" class="switchMode" class="btn btn-circle"> <img src="images/c6_ver_grafico.jpg" class="vergrafico img-responsive" /> </a>

8
templates/page7.html
View file

@ -2,10 +2,10 @@
<div class="row">
<div class="col-md-9 section-left">
<div class="section-inner-content">
<div class="story-content">
<img src="images/c7_IMG_story.jpg" class="img-responsive" /> <!-- imagen de historia-->
<div class="story-content" style="background-image: url(images/c7_IMG_story.jpg)">
<!-- <img src="images/c7_IMG_story.jpg" class="img-responsive" /> --> <!-- imagen de historia-->
</div>
<div class="data-content" style="display:none">
<div class="data-content" style="display:none; background-image: url(images/c7_IMG_grafico.jpg)">
<img src="images/c7_IMG_grafico.jpg" class="img-responsive" /> <!-- imagen de datos-->
</div>
</div>
@ -17,7 +17,7 @@
<div class="row">
<div class="col-md-9 col-md-offset-1 col-lg-8 col-lg-offset-2 col-sm-10 col-sm-offset-1 col-xl-7 col-xl-offset-1">
<div class="menu-story-inner">
Marzo 2017. Tras un año en el campo de Nea Kavala, Zainab y su familia tienen la posibilidad de ser reubicadas en un piso en Polikastro gestionado por ACNUR, en el noreste continental de Grecia. Salir del campo es una buena noticia, aunque no implica la concesión de asilo, que es lo que están esperando desde hace un año y medio. Con la noticia, los deseos de Zainab se desbocan: ¿se acerca el momento de volver a estar toda la familia junta? La vivienda sigue siendo un lugar que no es su destino, un lugar donde esperar indefinidamente a que se les conceda el asilo y la reagrupación familiar, un lugar que no es donde quieren estar. Un no lugar.
Marzo 2017. Tras un año en el campo de Nea Kavala, Zainab y su familia tienen la posibilidad de ser reubicadas en un piso en Polikastro gestionado por ACNUR, en el noreste continental de Grecia. Salir del campo es una buena noticia, aunque no implica la concesión de asilo, que es lo que están esperando desde hace un año y medio. Con la noticia, los deseos de Zainab se desbocan: ¿se acerca el momento de volver a estar toda la familia junta? La vivienda sigue siendo un lugar que no es su destino. Un lugar donde esperar indefinidamente a que se les conceda el asilo y la reagrupación familiar. Un lugar que no es donde quieren estar. Un no lugar.
</div>
<a href="#" class="switchMode" class="btn btn-circle"> <img src="images/c7_ver_grafico.jpg" class="vergrafico img-responsive" /> </a>
</div>

9
templates/portada.html
View file

@ -2,7 +2,16 @@
<div class="row">
<div id="portada" >
<!-- <img src="images/c0_portada.jpg" class="img-responsive" style="z-index:1000"/> -->
<div style="position:absolute; right:90px; bottom:10px;">
<a href="#" class="referencias" id="referencias-page-btn-0"> Créditos </a>
</div>
</div>
</div>
</div>
<div class="referencias-popover" id="referencias-page-0">
<h2> Equipo </h2>
TBD agradecimientos y equipo
</div>