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

prueba movil

Browse source
This commit is contained in:
Sergio 2017-10-13 14:11:31 +02:00
parent 33073eae04
commit 3c714bda63
9 changed files with 113 additions and 12 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;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}div.section-inner-content div.data-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}
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:14px;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;min-height:100vh}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 5px;background-repeat:no-repeat}div.section-inner-content div.data-content{background-size:contain;background-position:center 5px;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,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,4BALR,GAAG,sBAOC,IAAG,cACC,uBAAA,CACA,0BAAA,CACA,4BAGR,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,aAiEC,CArDkB,CAAC,OAAO,QAZ3B,aAYoC,EAAC,OAAO,SACpC,wBAAA,CACA,YAIR,CAAC,YACG,mBAGJ,aACI,aAEJ,qBACI,SAAA,CACA,WAEJ,GAAG,cACC,wBAAA,CACA,iBAGJ,CAAC,YACG,aAAA,CACA,iBAEJ,GAAG,uBACC,iBADJ,GAAG,sBAEC,IAAG,eACC,uBAAA,CACA,8BAAA,CACA,4BALR,GAAG,sBAOC,IAAG,cACC,uBAAA,CACA,8BAAA,CACA,4BAGR,CAAC,aACG,oBAAA,CACA,wBAAA,CACA,aAAA,CAIA,oBAAA,CACA,kBAJA,CAJH,YAII,OACG,cAMR,kBAAmB,iBACf,eAAA,CACA"}

1
css/css/mobile.css Normal file
View file

@ -0,0 +1 @@
ul.menu li{display:inline-block}#main-content{margin-top:60px}.img-menu{height:60px;display:inline-block}

1
css/css/mobile.css.map Normal file
View file

@ -0,0 +1 @@
{"version":3,"sources":["mobile.less"],"names":[],"mappings":"AAAA,EAAE,KACE,IACI,qBAGR,cACI,gBAGJ,UACI,WAAA,CACA"}

7
css/home.less
View file

@ -83,7 +83,7 @@ div.section-container {
div.menu-content {
height: 100vh;
background-color: white;
font-size: 13px;
font-size: 14px;
line-height: 1.3em;
/*padding-left: 50px;
padding-right: 70px;*/
@ -128,6 +128,7 @@ a.btn-circle {
}
div.section-left{
background-color: #ededed;
min-height: 100vh;
}
a.switchMode{
@ -138,12 +139,12 @@ div.section-inner-content {
text-align:right;
div.story-content {
background-size: contain;
background-position: center;
background-position: center 5px;
background-repeat: no-repeat;
}
div.data-content {
background-size: contain;
background-position: center;
background-position: center 5px;
background-repeat: no-repeat;
}
}

14
css/mobile.less Normal file
View file

@ -0,0 +1,14 @@
// out: css/mobile.css, sourcemap: true, compress: true
ul.menu{
li{
display: inline-block;
}
}
#main-content{
margin-top:60px;
}
.img-menu{
height: 60px;
display: inline-block;
}

9
index.html
View file

@ -4,7 +4,7 @@
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<!-- <base href="http://127.0.0.1/traficomadrid/">-->
<link href="https://fonts.googleapis.com/css?family=Londrina+Solid" rel="stylesheet">
@ -35,9 +35,6 @@
<!-- fullpage -->
<script type="text/javascript" src="js/main.js"></script>
</head>
@ -45,12 +42,12 @@
<div id="pagepiling">
<div class="section">
<div class="section-container" id="portada">
</div>
</div>
<div class="section">
<div class="section-container" id="page-1">
</div>
</div>
<div class="section">

87
index_mob.html Normal file
View file

@ -0,0 +1,87 @@
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<!-- <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/mobile.css">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/BootstrapXL.css">
<link href="bower_components/jbox/Source/jBox.css" rel="stylesheet">
<!-- JAVASCRIPT -->
<script type="text/javascript" src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- jbox -->
<script src="bower_components/jbox/Source/jBox.min.js"></script>
<script type="text/javascript" src="bower_components/d3/d3.min.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bower_components/jsrender/jsrender.min.js"></script>
<script type="text/javascript" src="js/main-mvl.js"></script>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" >
<div class="container-fluid">
<div class="col-xs-6">
<a class="navbar-brand" href="#">Capitulo</a>
</div>
<div class="col-xs-2">
<a href="#story"><img src="images/c1_menu_story.png" class="img-menu"/></a>
</div>
<div class="col-xs-2">
<a href="#mapa"> <img src="images/c1_menu_mapa.png" class="img-menu"/></a>
</div>
<div class="col-xs-2">
<a href="#datos"> <img src="images/c1_menu_datos.png" class="img-menu"/> </a>
</div>
</div>
</div>
</nav>
<div class="container-fluid">
<div id="main-content">
<div id="story">
<img src="images/c1_IMG_story_mob.jpg" class="img-responsive"/>
<div id="#story-text">
Este cómic quiere visibilizar el éxodo de Zainab y su familia que, como otros 11 millones de personas, se han visto obligadas a abandonar su hogar desde que en 2011 comenzó la guerra en Siria.
</div>
</div>
<div id="map">
<img src="images/c1_mapa_ACT.jpg" class="img-responsive"/>
</div>
<div id="datos">
<img src="images/c1_IMG_grafico_mob.jpg" class="img-responsive"/>
<div id="#map-text">
Este proyecto se ha realizado durante Visualizar'17, un proceso de investigación participativo sobre visualización de información y migraciones.
Los datos entran en acción para contar una historia. Y si a menudo es difícil obtener datos fiables, en un contexto de guerra todas las cifras se convierten en estimaciones.
No por ello dejan de representar una realidad que están viviendo millones de personas tratadas como números.
Aquí tratamos a los números como personas.
</div>
</div>
</div>
</div>
</body>
</html>

2
templates/page7.html
View file

@ -6,7 +6,7 @@
<!-- <img src="images/c7_IMG_story.jpg" class="img-responsive" /> --> <!-- imagen de historia-->
</div>
<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-->
<!--<img src="images/c7_IMG_grafico.jpg" class="img-responsive" /> --><!-- imagen de datos-->
</div>
</div>
</div>