version movil
This commit is contained in:
Sergio
parent
4180b10c4c
commit
552007d8fa
8 changed files with 396 additions and 41 deletions
|
|
@ -1 +1 @@
|
|||
ul.menu li{display:inline-block}.section{padding-top:70px}.img-menu{height:60px;display:inline-block}
|
||||
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}
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"sources":["mobile.less"],"names":[],"mappings":"AAAA,EAAE,KACE,IACI,qBAGR,SACI,iBAGJ,UACI,WAAA,CACA"}
|
||||
{"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"}
|
||||
140
css/mobile.less
140
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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
|
||||
<!-- 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">
|
||||
|
|
@ -27,13 +26,6 @@
|
|||
<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>
|
||||
|
||||
|
|
@ -42,23 +34,29 @@
|
|||
<div class="container-fluid">
|
||||
<div class="col-xs-6">
|
||||
<a class="navbar-brand-custom" href="#">Historia de Zainab</a>
|
||||
<span class="chapter-name">Capítulo 1 </span>
|
||||
<span class="chapter-name">Capítulo 1 </span> <a class="next" href="#"><span class="circle glyphicon glyphicon-chevron-right"> </span></a>
|
||||
</div>
|
||||
<div class="col-xs-2">
|
||||
<a href="#story"><img src="images/c1_menu_story.png" class="img-menu"/></a>
|
||||
<div class="col-xs-2 nopadding ">
|
||||
<a class="link-menu" href="#story"><img src="images/c1_menu_story.png" class="img-menu"/>
|
||||
story
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-xs-2">
|
||||
<a href="#mapa"> <img src="images/c1_menu_mapa.png" class="img-menu"/></a>
|
||||
<div class="col-xs-2 nopadding">
|
||||
<a class="link-menu" href="#mapa"> <img src="images/c1_menu_mapa.png" class="img-menu"/>
|
||||
mapa
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-xs-2">
|
||||
<a href="#datos"> <img src="images/c1_menu_datos.png" class="img-menu"/> </a>
|
||||
<div class="col-xs-2 nopadding">
|
||||
<a class="link-menu" href="#datos"> <img src="images/c1_menu_datos.png" class="img-menu"/>
|
||||
datos
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div id="main-content">
|
||||
<div class="container-fluid">
|
||||
<div id="main-content">
|
||||
<div id="story" class="section">
|
||||
<img src="images/c1_IMG_story_mob.jpg" class="img-responsive"/>
|
||||
<div id="story-text">
|
||||
|
|
@ -77,12 +75,8 @@
|
|||
Aquí tratamos a los números como personas.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
37
index_mob2.html
Normal file
37
index_mob2.html
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<!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/">
|
||||
<script src="https://use.fontawesome.com/74c20394a9.js"></script>-->
|
||||
<link href="https://fonts.googleapis.com/css?family=Londrina+Solid" rel="stylesheet">
|
||||
|
||||
<!-- 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">
|
||||
<link rel="stylesheet" href="css/css/mobile.css">
|
||||
|
||||
|
||||
<!-- 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>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
89
js/main-mvl.js
Normal file
89
js/main-mvl.js
Normal file
|
|
@ -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();
|
||||
}
|
||||
45
templates/index_mob.tmpl.html
Normal file
45
templates/index_mob.tmpl.html
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<nav class="navbar navbar-default navbar-fixed-top" >
|
||||
<div class="container-fluid">
|
||||
<div class="col-xs-6">
|
||||
<a class="navbar-brand-custom" href="#">Historia de Zainab</a>
|
||||
{{if showPrev}} <a class="prev move-link" href="#"> <span class="circle glyphicon glyphicon-chevron-left"> </span></a> {{/if}}
|
||||
<span class="chapter-name"> Capitulo {{:n_page}} </span>
|
||||
{{if showNext}} <a class="next move-link" href="#"><span class="circle glyphicon glyphicon-chevron-right"> </span></a>{{/if}}
|
||||
</div>
|
||||
<div class="col-xs-2 nopadding ">
|
||||
<a class="link-menu" href="#story"><img src="images/c1_menu_story.png" class="img-menu"/>
|
||||
story
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-xs-2 nopadding">
|
||||
<a class="link-menu" href="#mapa"> <img src="images/c1_menu_mapa.png" class="img-menu"/>
|
||||
mapa
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-xs-2 nopadding">
|
||||
<a class="link-menu" href="#datos"> <img src="images/c1_menu_datos.png" class="img-menu"/>
|
||||
datos
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container-fluid">
|
||||
<div id="main-content">
|
||||
<div id="story" class="section">
|
||||
<img src="images/c{{:n_page}}_IMG_story_mob.jpg" class="img-responsive"/>
|
||||
<div id="story-text">
|
||||
{{:storytext}}
|
||||
</div>
|
||||
</div>
|
||||
<div id="mapa" class="section">
|
||||
<img src="images/c{{:n_page}}_mapa_mob.jpg" class="img-responsive"/>
|
||||
</div>
|
||||
<div id="datos" class="section">
|
||||
<img src="images/c{{:n_page}}_IMG_grafico_mob.jpg" class="img-responsive"/>
|
||||
<div id="map-text">
|
||||
{{:maptext}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
50
templates/portadamvl.tmpl.html
Normal file
50
templates/portadamvl.tmpl.html
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
<div class="container-fluid nopadding" id="cover-mvl">
|
||||
<div id="main-content">
|
||||
<div id="story">
|
||||
<img src="images/c0_portada_mob_cortada.jpg" class="img-responsive"/>
|
||||
</div>
|
||||
<div clas="row" id="cover-btn" >
|
||||
Empezar<br/>
|
||||
<a class="next move-link" style="float:none; font-size:2em;" href="#"><span class="circle glyphicon glyphicon-chevron-right"> </span></a>
|
||||
</div>
|
||||
<div clas="row" id="cover-creditos" >
|
||||
Equipo: <b> 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</b>
|
||||
<br/>
|
||||
Web: <b>Sergio Galán </b>
|
||||
Ilustraciones: <b>Victor Valles </b>
|
||||
</div>
|
||||
<div id="cover-social" >
|
||||
Compártelo:
|
||||
<ul class="share-buttons">
|
||||
<li><a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fhistoriadezainab.org%2F&t=La%20historia%20de%20Zainab" title="Share on Facebook" target="_blank"><img alt="Share on Facebook" src="images/c0_portada_facebook.png" /></a></li>
|
||||
<li><a href="https://twitter.com/intent/tweet?source=http%3A%2F%2Fhistoriadezainab.org%2F&text=La%20historia%20de%20Zainab:%20http%3A%2F%2Fhistoriadezainab.org%2F" target="_blank" title="Tweet"><img alt="Tweet" src="images/c0_portada_twitter.png" /></a></li>
|
||||
<li><a href="http://www.linkedin.com/shareArticle?mini=true&url=http%3A%2F%2Fhistoriadezainab.org%2F&title=La%20historia%20de%20Zainab&summary=Este%20c%C3%B3mic%20quiere%20visibilizar%20el%20%C3%A9xodo%20de%20Zainab%20y%20su%20familia%20que%2C%20como%20otros%2011%20millones%20de%20personas%2C%20se%20han%20visto%20obligadas%20a%20abandonar%20su%20hogar%20desde%20que%20en%202011%20comenz%C3%B3%20la%20guerra%20en%20Siria.&source=http%3A%2F%2Fhistoriadezainab.org%2F" target="_blank" title="Share on LinkedIn"><img alt="Share on LinkedIn" src="images/c0_portada_linkedit.png" /></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="cover-footer" >
|
||||
<div class="col-xs-4 " style="padding:5px">
|
||||
<img src="images/c0_portada_porcausa.png" class="img-responsive"/>
|
||||
</div>
|
||||
<div class="col-xs-4 " style="padding:5px">
|
||||
<img src="images/c0_portada_medialab.png" class="img-responsive"/>
|
||||
</div>
|
||||
<div class="col-xs-4 " style="padding:5px">
|
||||
<div style="font-size:8px; line-height:12px; vertical-align:center;">
|
||||
Creative commons. </br> Medialab-prado 2017</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div clas="row" >
|
||||
<div class="col-xs-12" id="cover-agradecimientos" >
|
||||
<h4>Agradecimientos:</h4>
|
||||
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.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in a new issue