From 552007d8fab26e00348a829266d7bd0077b2c24f Mon Sep 17 00:00:00 2001 From: Sergio Date: Mon, 6 Nov 2017 12:53:02 +0100 Subject: [PATCH] version movil --- css/css/mobile.css | 2 +- css/css/mobile.css.map | 2 +- css/mobile.less | 140 +++++++++++++++++++++++++++++++++ index_mob.html | 72 ++++++++--------- index_mob2.html | 37 +++++++++ js/main-mvl.js | 89 +++++++++++++++++++++ templates/index_mob.tmpl.html | 45 +++++++++++ templates/portadamvl.tmpl.html | 50 ++++++++++++ 8 files changed, 396 insertions(+), 41 deletions(-) create mode 100644 index_mob2.html create mode 100644 js/main-mvl.js create mode 100644 templates/index_mob.tmpl.html create mode 100644 templates/portadamvl.tmpl.html diff --git a/css/css/mobile.css b/css/css/mobile.css index bba9540..8b472b8 100644 --- a/css/css/mobile.css +++ b/css/css/mobile.css @@ -1 +1 @@ -ul.menu li{display:inline-block}.section{padding-top:70px}.img-menu{height:60px;display:inline-block} \ No newline at end of file +body{background-color:#eeeded}#main-content{margin-bottom:80px}.navbar-default{background-color:#eeeded;border:none}.navbar-default a.navbar-brand-custom{font-family:'Londrina Solid',cursive;color:#000;font-size:18px;padding:0;padding-top:10px;display:inline-block;text-decoration:none}.navbar-default .chapter-name{font-family:'Londrina Solid',cursive;color:#da222b;font-size:17px}.link-menu{text-align:center;font-family:'Londrina Solid',cursive;text-decoration:none;color:black;display:inline-block}.link-menu:active,.link-menu.active{color:#da222b;text-decoration:none}.link-menu:hover{text-decoration:none}ul.menu li{display:inline-block}.section{padding-top:70px}.img-menu{height:60px;display:inline-block}#story-text,#map-text{margin-top:1em}.nopadding{padding:0 !important;margin:0 !important}#cover-btn{text-align:center;padding:0;background:#383e4e;color:white;padding-bottom:10px}#cover-creditos{background-color:#af9f7b;padding:15px}#cover-social{background-color:#fff;padding:15px;border-top:1px solid black;border-bottom:1px solid black}#cover-footer{padding:0;border-bottom:1px solid black;padding-top:15px;padding-bottom:15px;height:auto;background-color:#fff;min-height:70px}#cover-agradecimientos{background-color:#fff;padding-top:10px;padding-bottom:30px;font-size:12px}a.move-link{text-align:center;display:inline-block}a.move-link .circle{background:#da222b;border-radius:.8em;-moz-border-radius:.8em;-webkit-border-radius:.8em;color:#fff;display:inline-block;font-weight:normal;line-height:1.6em;margin-right:5px;text-align:center;width:1.6em}a.move-link.next{float:right}a.move-link.prev{float:next}ul.share-buttons{display:inline-block;list-style:none;padding:0;text-align:center}ul.share-buttons img{max-width:28px;margin-left:50px}ul.share-buttons li{display:inline}ul.share-buttons .sr-only{position:absolute;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);padding:0;border:0;height:1px;width:1px;overflow:hidden} \ No newline at end of file diff --git a/css/css/mobile.css.map b/css/css/mobile.css.map index 0fc8fc6..9c9f22e 100644 --- a/css/css/mobile.css.map +++ b/css/css/mobile.css.map @@ -1 +1 @@ -{"version":3,"sources":["mobile.less"],"names":[],"mappings":"AAAA,EAAE,KACE,IACI,qBAGR,SACI,iBAGJ,UACI,WAAA,CACA"} \ No newline at end of file +{"version":3,"sources":["mobile.less"],"names":[],"mappings":"AAEA,KACI,yBAEJ,cACI,mBAEJ,gBACK,wBAAA,CACA,YAFL,eAGK,EAAC,qBACG,YAAa,wBAAb,CACA,UAAA,CACA,cAAA,CACA,SAAA,CACA,gBAAA,CACA,oBAAA,CACA,qBAVT,eAcK,eACI,YAAa,wBAAb,CACA,aAAA,CACA,eAGT,WACI,iBAAA,CACA,YAAa,wBAAb,CACA,oBAAA,CACA,WAAA,CACI,qBACJ,UAAC,QAAS,UAAC,QACP,aAAA,CACA,qBAEJ,UAAC,OACG,qBAIR,EAAE,KACE,IACI,qBAGR,SACI,iBAGJ,UACI,WAAA,CACA,qBAGJ,YAAa,UACT,eAIJ,WACG,SAAA,YACA,QAAA,YAEH,WACI,iBAAA,CACA,SAAA,CACA,kBAAA,CACA,WAAA,CACA,oBAEJ,gBACI,wBAAA,CACA,aAGJ,cACI,qBAAA,CACA,YAAA,CACA,0BAAA,CACA,8BAEJ,cACI,SAAA,CACA,6BAAA,CACA,gBAAA,CACA,mBAAA,CACA,WAAA,CACA,qBAAA,CACA,gBAGJ,uBACI,qBAAA,CACA,gBAAA,CACA,mBAAA,CACA,eAMJ,CAAC,WACG,iBAAA,CACA,qBAFJ,CAAC,UAIG,SACE,kBAAA,CACA,kBAAA,CACA,uBAAA,CACA,0BAAA,CACA,UAAA,CACA,oBAAA,CACA,kBAAA,CACA,iBAAA,CACA,gBAAA,CACA,iBAAA,CACA,YAEF,CAjBH,UAiBI,MACL,YAEI,CApBH,UAoBI,MACG,WAIR,EAAE,eACE,oBAAA,CACF,eAAA,CACA,SAAA,CACA,kBAEF,EAAE,cAAe,KACb,cAAA,CACA,iBAEJ,EAAE,cAAe,IACf,eAGF,EAAE,cAAe,UACf,iBAAA,CACA,KAAM,qBAAN,CACA,KAAM,wBAAN,CACA,SAAA,CACA,QAAA,CACA,UAAA,CACA,SAAA,CACA"} \ No newline at end of file diff --git a/css/mobile.less b/css/mobile.less index a466188..c51ab86 100644 --- a/css/mobile.less +++ b/css/mobile.less @@ -1,4 +1,47 @@ // out: css/mobile.css, sourcemap: true, compress: true +@rojo: #da222b; + +body{ + background-color: #EEEDED; +} +#main-content{ + margin-bottom: 80px; +} +.navbar-default{ + background-color: #EEEDED; + border: none; + a.navbar-brand-custom{ + font-family: 'Londrina Solid', cursive; + color:#000; + font-size: 18px; + padding: 0px; + padding-top:10px; + display: inline-block; + text-decoration: none; + + + } + .chapter-name{ + font-family: 'Londrina Solid', cursive; + color:@rojo; + font-size: 17px; + } +} +.link-menu{ + text-align: center; + font-family: 'Londrina Solid', cursive; + text-decoration: none; + color:black; + display: inline-block; + &:active, &.active{ + color:@rojo; + text-decoration: none; + } + &:hover{ + text-decoration: none; + } +} + ul.menu{ li{ display: inline-block; @@ -12,3 +55,100 @@ ul.menu{ height: 60px; display: inline-block; } + +#story-text, #map-text{ + margin-top:1em; +} + + +.nopadding { + padding: 0 !important; + margin: 0 !important; +} +#cover-btn{ + text-align: center; + padding:0px; + background: #383E4E; + color:white; + padding-bottom: 10px; +} +#cover-creditos{ + background-color: #AF9F7B; + padding:15px; +} + +#cover-social{ + background-color: #fff; + padding:15px; + border-top: 1px solid black; + border-bottom: 1px solid black; +} +#cover-footer{ + padding: 0px; + border-bottom: 1px solid black; + padding-top:15px; + padding-bottom:15px; + height:auto; + background-color: #fff; + min-height: 70px; +} + +#cover-agradecimientos { + background-color: #fff; + padding-top:10px; + padding-bottom: 30px; + font-size: 12px; + h4{ + + } +} + +a.move-link{ + text-align: center; + display: inline-block; + + .circle { + background: @rojo; + border-radius: 0.8em; + -moz-border-radius: 0.8em; + -webkit-border-radius: 0.8em; + color: #ffffff; + display: inline-block; + font-weight: normal; + line-height: 1.6em; + margin-right: 5px; + text-align: center; + width: 1.6em; + } + &.next{ +float:right; + } + &.prev{ + float:next; + } +} +/******* SHARING BUTTONS ***/ +ul.share-buttons{ + display: inline-block; + list-style: none; + padding: 0; + text-align: center; +} +ul.share-buttons img{ + max-width: 28px; + margin-left:50px; +} +ul.share-buttons li{ + display: inline; +} + +ul.share-buttons .sr-only{ + position: absolute; + clip: rect(1px 1px 1px 1px); + clip: rect(1px, 1px, 1px, 1px); + padding: 0; + border: 0; + height: 1px; + width: 1px; + overflow: hidden; +} diff --git a/index_mob.html b/index_mob.html index d09aa78..9e1fd7d 100644 --- a/index_mob.html +++ b/index_mob.html @@ -10,7 +10,6 @@ - @@ -27,13 +26,6 @@ - - - - - - - @@ -42,47 +34,49 @@
Historia de Zainab - Capítulo 1 + Capítulo 1
-
- +
+ + story +
-
- +
+ + mapa +
-
- +
+ + datos +
-
-
-
- -
- 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. +
+
+
+ +
+ 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. +
+
+
+ +
+
+ +
+ 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. +
+
-
- -
-
- -
- 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. -
-
-
-
- - - - diff --git a/index_mob2.html b/index_mob2.html new file mode 100644 index 0000000..62c6752 --- /dev/null +++ b/index_mob2.html @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/js/main-mvl.js b/js/main-mvl.js new file mode 100644 index 0000000..57422ee --- /dev/null +++ b/js/main-mvl.js @@ -0,0 +1,89 @@ +viewStatus= "story" /* data story */ +pagesLoaded= 0 +totalPages=7; +currentPage=0; +window.onload = function() { + loadData() + /**** mobile ****/ +} + +function reloadEvents(){ + $('a[href^="#"].link-menu').on('click',function (e) { + e.preventDefault(); + + var target = this.hash; + var $target = $(target); + $('.link-menu.active').removeClass("active") + $(this).addClass("active") + $('html, body').stop().animate({ + 'scrollTop': $target.offset().top + }, 900, 'swing', function () { + window.location.hash = target; + }); + }); + + $('.next').on('click',function (e) { + renderPage(++currentPage) + }); + + $('.prev').on('click',function (e) { + renderPage(--currentPage) + }); +} + + +function loadData(){ + $.getJSON( "data/textos.json", function( data ) { + + n_projects=Object.keys(data).length; + paginasData=data; + + renderPage(currentPage) + + }); +} + +function renderPage(pageNumber ){ + //$("body").fadeOut(); + console.log(pageNumber) + $("body").empty(); + if(pageNumber==0){ + my.utils().renderExtTemplate({ name: 'portadamvl', selector: 'body', data: {} }) + } + else{ + var mdata=paginasData[pageNumber-1] + mdata.showPrev=mdata.showNext=true + if(pageNumber==1) mdata.showPrev=false; + if(pageNumber==7) mdata.showNext=false; + my.utils().renderExtTemplate({ name: 'index_mob', selector: 'body', data: mdata }) + } + +} + +var my = my || {}; +my.utils = (function() { + var getPath = function(name) { + return 'templates/' + name + '.tmpl.html'; + }, + renderExtTemplate = function(item) { + var file = getPath( item.name ); + $.when($.get(file)) + .done(function(tmplData) { + n_projects--; + var tmpl= $.templates( tmplData ); + var rendered=tmpl.render(item.data) + $(item.selector).append(rendered); + //setCardSizes(); + afterLoading(); + }); + }; + + return { + getPath: getPath, + renderExtTemplate: renderExtTemplate + }; +}); +function afterLoading(){ + $("body").fadeIn(); + reloadEvents(); +} diff --git a/templates/index_mob.tmpl.html b/templates/index_mob.tmpl.html new file mode 100644 index 0000000..aa9bb00 --- /dev/null +++ b/templates/index_mob.tmpl.html @@ -0,0 +1,45 @@ + + +
+
+
+ +
+ {{:storytext}} +
+
+
+ +
+
+ +
+ {{:maptext}} +
+
+
+
diff --git a/templates/portadamvl.tmpl.html b/templates/portadamvl.tmpl.html new file mode 100644 index 0000000..2d223c5 --- /dev/null +++ b/templates/portadamvl.tmpl.html @@ -0,0 +1,50 @@ +
+
+
+ +
+
+ Empezar
+ +
+
+ Equipo: Amanda Figueras I Aránzazu Cruz I Camino Prieto I Ferrán Morales +Ignasi Alcalde I Mª Carmen Peñaranda I María Luisa Ocaña +
+Web: Sergio Galán +Ilustraciones: Victor Valles +
+
+ Compártelo: + +
+ +
+
+

Agradecimientos:

+ A Elena Cabrera y Héctor Millano de PorCausa por aportar información de tremendo + valor y ayudarnos a creer que La Historia de Zainab valía la pena ser contada. + A Sergio Galán haciendo que la web historiadezainab.org sea una realidad. + Y además, Hannah Williams, Alejandro Zapala, Samuel Granados, Beatriz Martínez, + Pablo Martín, JesúsDa, y todo el equipo de Visualizar'17 que nos dieron una fuerza + imprescindible para emprender este viaje. +
+
+
+