From a94f12cc3d67b87a0b501655655734cb470600b9 Mon Sep 17 00:00:00 2001 From: Sergio Date: Wed, 8 Nov 2017 13:08:21 +0100 Subject: [PATCH] cambio version desktop y movil --- css/css/home.css | 2 +- css/css/home.css.map | 2 +- css/css/mobile.css | 2 +- css/css/mobile.css.map | 2 +- css/home.less | 341 +++++++++--------- css/mobile.less | 14 + index.html | 29 +- js/main-mvl.js | 32 +- js/main.js | 102 +++++- referencias/page1.html | 17 + referencias/page2.html | 14 + referencias/page3.html | 8 + referencias/page4.html | 20 + referencias/page5.html | 24 ++ referencias/page6.html | 13 + referencias/page7.html | 16 + templates/.DS_Store | Bin 6148 -> 8196 bytes templates/{ => old}/page1.html | 0 templates/{ => old}/page2.html | 0 templates/{ => old}/page3.html | 0 templates/{ => old}/page4.html | 0 templates/{ => old}/page5.html | 0 templates/{ => old}/page6.html | 0 templates/{ => old}/page7.html | 0 templates/page6_desk.tmpl.html | 117 ++++++ templates/page_desk.tmpl.html | 63 ++++ ...index_mob.tmpl.html => page_mob.tmpl.html} | 1 + .../{portada.html => portada_desk.tmpl.html} | 4 +- ...adamvl.tmpl.html => portada_mob.tmpl.html} | 2 +- 29 files changed, 625 insertions(+), 200 deletions(-) create mode 100644 referencias/page1.html create mode 100644 referencias/page2.html create mode 100644 referencias/page3.html create mode 100644 referencias/page4.html create mode 100644 referencias/page5.html create mode 100644 referencias/page6.html create mode 100644 referencias/page7.html rename templates/{ => old}/page1.html (100%) rename templates/{ => old}/page2.html (100%) rename templates/{ => old}/page3.html (100%) rename templates/{ => old}/page4.html (100%) rename templates/{ => old}/page5.html (100%) rename templates/{ => old}/page6.html (100%) rename templates/{ => old}/page7.html (100%) create mode 100644 templates/page6_desk.tmpl.html create mode 100644 templates/page_desk.tmpl.html rename templates/{index_mob.tmpl.html => page_mob.tmpl.html} (94%) rename templates/{portada.html => portada_desk.tmpl.html} (84%) rename templates/{portadamvl.tmpl.html => portada_mob.tmpl.html} (98%) diff --git a/css/css/home.css b/css/css/home.css index 4bf0baa..3c48e59 100644 --- a/css/css/home.css +++ b/css/css/home.css @@ -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:14px;line-height:1.3em}div.extra-btn-container{position:absolute;left:-50px;top:20px;width:100px;height:100px}div.extra-btn-container2{position:absolute;left:-50px;top:120px;width:100px;height:100px}div.extra-btn-container3{position:absolute;left:-50px;top:220px;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} \ No newline at end of file +@media (min-width:900px){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:-35px;top:20px;width:100px;height:100px}div.extra-btn-container a{font-family:'Londrina Solid',cursive;color:black;margin-bottom:20px;display:block}div.extra-btn-container2{position:absolute;left:-50px;top:120px;width:100px;height:100px}div.extra-btn-container3{position:absolute;left:-50px;top:220px;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}} \ No newline at end of file diff --git a/css/css/home.css.map b/css/css/home.css.map index 987a6b9..824d22d 100644 --- a/css/css/home.css.map +++ b/css/css/home.css.map @@ -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,GAAG,sBACC,iBAAA,CACA,UAAA,CACA,SAAA,CACA,WAAA,CACA,aAGJ,GAAG,sBACC,iBAAA,CACA,UAAA,CACA,SAAA,CACA,WAAA,CACA,aAGJ,cACI,UADJ,aAEI,IACI,gBAHR,aAKI,GACI,YAAa,yBANrB,aASI,EAAC,QACG,wBAAA,CACA,YAXR,aAaI,EAAC,OAAO,OAbZ,aAkEC,CArDkB,CAAC,OAAO,QAb3B,aAaoC,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"} \ No newline at end of file +{"version":3,"sources":["home.less"],"names":[],"mappings":"AA6LC,QA7LyB,iBACtB,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,aAEJ,GAAG,oBAAqB,GACpB,YAAc,wBAAd,CACA,WAAA,CACA,kBAAA,CACA,cAGJ,GAAG,sBACC,iBAAA,CACA,UAAA,CACA,SAAA,CACA,WAAA,CACA,aAGJ,GAAG,sBACC,iBAAA,CACA,UAAA,CACA,SAAA,CACA,WAAA,CACA,aAGJ,cACI,UADJ,aAEI,IACI,gBAHR,aAKI,GACI,YAAa,yBANrB,aASI,EAAC,QACG,wBAAA,CACA,YAXR,aAaI,EAAC,OAAO,OAbZ,aAqEH,CAxDsB,CAAC,OAAO,QAb3B,aAaoC,EAAC,OAAO,SACpC,wBAAA,CACA,YAIR,CAAC,YACG,mBAGJ,aACI,aAEJ,qBACI,SAAA,CACA,WAEJ,GAAG,cACC,wBAAA,CACA,iBAGJ,CAAC,YACG,aAAA,CACA,iBAGJ,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"} \ No newline at end of file diff --git a/css/css/mobile.css b/css/css/mobile.css index eaa5295..15e08ff 100644 --- a/css/css/mobile.css +++ b/css/css/mobile.css @@ -1 +1 @@ -body{background-color:#eeeded}#main-content{margin-bottom:80px}img.full-width-img{margin-left:-15px;margin-right:-15px;max-width:none;width:100vw}.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}.carousel-btn{padding:0}.carousel-btn li{list-style:none}.carousel-btn a{font-family:'Londrina Solid',cursive;font-size:11px;padding:4px 8px}.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} \ No newline at end of file +body{background-color:#eeeded}@media (max-width:899px){#main-content{margin-bottom:80px}img.full-width-img{margin-left:-15px;margin-right:-15px;max-width:none;width:100vw}a.referencias{text-decoration:none;border-bottom:dotted 1px;color:#da222b;display:inline-block;margin-bottom:3em}a.referencias:hover{color:#fa222b}.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}.carousel-btn{padding:0}.carousel-btn li{list-style:none}.carousel-btn a{font-family:'Londrina Solid',cursive;font-size:11px;padding:4px 8px}.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}} \ No newline at end of file diff --git a/css/css/mobile.css.map b/css/css/mobile.css.map index af1accd..777ca9d 100644 --- a/css/css/mobile.css.map +++ b/css/css/mobile.css.map @@ -1 +1 @@ -{"version":3,"sources":["mobile.less"],"names":[],"mappings":"AAEA,KACI,yBAEJ,cACI,mBAGJ,GAAG,gBACC,iBAAA,CACA,kBAAA,CACA,cAAA,CACA,YAEJ,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,gBAKF,cACI,UADJ,aAEI,IACI,gBAHR,aAKI,GACI,YAAa,wBAAb,CACA,cAAA,CACA,gBARR,aAUI,EAAC,QACG,wBAAA,CACA,YAZR,aAcI,EAAC,OAAO,OAdZ,aAmBC,CALkB,CAAC,OAAO,QAd3B,aAcoC,EAAC,OAAO,SACpC,wBAAA,CACA"} \ No newline at end of file +{"version":3,"sources":["mobile.less"],"names":[],"mappings":"AAEA,KACI,yBAiMH,QA9LyB,iBAC1B,cACI,mBAGJ,GAAG,gBACC,iBAAA,CACA,kBAAA,CACA,cAAA,CACA,YAEJ,CAAC,aACG,oBAAA,CACA,wBAAA,CACA,aAAA,CAIA,oBAAA,CACA,kBAJA,CAJH,YAII,OACG,cAKR,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,gBAKF,cACI,UADJ,aAEI,IACI,gBAHR,aAKI,GACI,YAAa,wBAAb,CACA,cAAA,CACA,gBARR,aAUI,EAAC,QACG,wBAAA,CACA,YAZR,aAcI,EAAC,OAAO,OAdZ,aAqBC,CAPkB,CAAC,OAAO,QAd3B,aAcoC,EAAC,OAAO,SACpC,wBAAA,CACA"} \ No newline at end of file diff --git a/css/home.less b/css/home.less index 263e839..6bbdf00 100644 --- a/css/home.less +++ b/css/home.less @@ -1,182 +1,191 @@ // out: css/home.css, sourcemap: true, compress: true - -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: 0.4s; - animation-timing-function: ease-in-out; -} - -.cd-horizontal-timeline .events-content li.selected { - /* visible event content */ - position: relative; - z-index: 2; - opacity: 1; - transform: translateX(0); -} - -div.section-container { - background: white; -} -.cd-timeline-navigation{ - padding:0px; - margin:0px; - 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; - li { - display: inline-block; - width: 13.9%; - margin: 0px; - padding: 0px; - text-align: left; - line-height: auto; +@media (min-width: 900px) { + p { + font-size: 12px; } - a { - background-color: transparent; - text-align: left; - line-height: auto; + #portada{ + width: 100%; + height:100%; + } - /*a.active{ - background-color:orange; - }*/ - img { - width:103%; - opacity: 0.2; - transition: all 1s; + .cd-horizontal-timeline .events-content { + position: relative; } - a.active img.img-menu { + .cd-horizontal-timeline .events-content li { + position: absolute; + z-index: 1; + width: 100%; + left: 0; + top: 0; + transform: translateX(-100%); + opacity: 0; + animation-duration: 0.4s; + animation-timing-function: ease-in-out; + } + + .cd-horizontal-timeline .events-content li.selected { + /* visible event content */ + position: relative; + z-index: 2; opacity: 1; + transform: translateX(0); } -} -div.menu-content { - height: 100vh; - background-color: white; - font-size: 14px; - line-height: 1.3em; - /*padding-left: 50px; - padding-right: 70px;*/ -} - -div.extra-btn-container { - position: absolute; - left: -50px; - top: 20px; - width: 100px; - height: 100px; -} - -div.extra-btn-container2 { - position: absolute; - left: -50px; - top: 120px; - width: 100px; - height: 100px; -} - -div.extra-btn-container3 { - position: absolute; - left: -50px; - top: 220px; - width: 100px; - height: 100px; -} - -.carousel-btn{ - padding: 0px; - li{ - list-style: none; + div.section-container { + background: white; } - a{ - font-family: 'Londrina Solid', cursive; + .cd-timeline-navigation{ + padding:0px; + margin:0px; + 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; + li { + display: inline-block; + width: 13.9%; + margin: 0px; + padding: 0px; + text-align: left; + line-height: auto; + } + + a { + background-color: transparent; + text-align: left; + line-height: auto; + } + /*a.active{ + background-color:orange; + }*/ + img { + width:103%; + opacity: 0.2; + transition: all 1s; + } + + a.active img.img-menu { + opacity: 1; + } + } + + div.menu-content { + height: 100vh; + background-color: white; + font-size: 14px; + line-height: 1.3em; + /*padding-left: 50px; + padding-right: 70px;*/ + } + + div.extra-btn-container { + position: absolute; + left: -35px; + top: 20px; + width: 100px; + height: 100px; + } + div.extra-btn-container a{ + font-family: 'Londrina Solid', cursive; + color:black; + margin-bottom: 20px; + display: block; + } + + div.extra-btn-container2 { + position: absolute; + left: -50px; + top: 120px; + width: 100px; + height: 100px; + } + + div.extra-btn-container3 { + position: absolute; + left: -50px; + top: 220px; + width: 100px; + 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.active{ - background-color:#da222b; - color:white; + a.btn-circle { + border-radius: 40px; } - a.active:hover,a.active:active, a.active:visited { - background-color:#da222b; - color:white; + + .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.story-content { + background-size: contain; + background-position: center 5px; + background-repeat: no-repeat; + } + 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; + &:hover{ + color:#fa222b + } + display: inline-block; + margin-bottom: 3em; + } + + .menu-story-inner, .menu-data-inner{ + padding-top:2em; + padding-bottom:2em; } } -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.story-content { - background-size: contain; - background-position: center 5px; - background-repeat: no-repeat; - } - 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; - &:hover{ - color:#fa222b - } - display: inline-block; - margin-bottom: 3em; -} - -.menu-story-inner, .menu-data-inner{ - padding-top:2em; - padding-bottom:2em; -} diff --git a/css/mobile.less b/css/mobile.less index 22950e5..e5e23b5 100644 --- a/css/mobile.less +++ b/css/mobile.less @@ -4,6 +4,8 @@ body{ background-color: #EEEDED; } + +@media (max-width: 899px) { #main-content{ margin-bottom: 80px; } @@ -14,6 +16,16 @@ img.full-width-img{ max-width: none; width: 100vw; } +a.referencias{ + text-decoration: none; + border-bottom: dotted 1px ; + color: #da222b; + &:hover{ + color:#fa222b + } + display: inline-block; + margin-bottom: 3em; +} .navbar-default{ background-color: #EEEDED; border: none; @@ -182,3 +194,5 @@ ul.share-buttons .sr-only{ } } + +} diff --git a/index.html b/index.html index f237eac..5ee1cf4 100644 --- a/index.html +++ b/index.html @@ -9,12 +9,14 @@ - + - + + + @@ -24,18 +26,35 @@ - + - + + + - diff --git a/js/main-mvl.js b/js/main-mvl.js index 97efdd7..7c2047a 100644 --- a/js/main-mvl.js +++ b/js/main-mvl.js @@ -2,7 +2,16 @@ viewStatus= "story" /* data story */ pagesLoaded= 0 totalPages=7; currentPage=0; +mode="desktop" +sufix="desk" +window.onresize = function(){ location.reload(); } window.onload = function() { + wwidth=$( window ).width(); + if(wwidth<900) { + mode="mobile" + sufix="mob" + } + loadData() /**** mobile ****/ } @@ -34,7 +43,7 @@ function reloadEvents(){ $('.carousel-btn a.active').removeClass("active") $(this).addClass("active") }); - + Waypoint.destroyAll() var waypoints = $('#story, #mapa, #datos').waypoint({ handler: function(direction) { @@ -52,6 +61,20 @@ function reloadEvents(){ }, offset: '-11%' }) + + var modal2= + new jBox('Modal', { + width: '90%', + height: '90%', + attach: '#referencias-page-btn-'+currentPage, + //content: $('#referencias-page-'+j), + ajax: { + url: 'referencias/page'+currentPage+".html", + reload: 'strict' + }, + closeButton: 'box' + }); + /* var waypoints = $('#mapa').waypoint({ handler: function(direction) { enableMenuElement(this.element.id) @@ -87,21 +110,20 @@ function renderPage(pageNumber ){ console.log(pageNumber) $("body").empty(); if(pageNumber==0){ - my.utils().renderExtTemplate({ name: 'portadamvl', selector: 'body', data: {} }) + my.utils().renderExtTemplate({ name: 'portada_'+sufix, selector: 'body', data: {} }) } else if(pageNumber==6){ var mdata=paginasData[pageNumber-1] mdata.showPrev=mdata.showNext=true - my.utils().renderExtTemplate({ name: 'page6_mob', selector: 'body', data: mdata }) + my.utils().renderExtTemplate({ name: 'page6_'+sufix, selector: 'body', data: mdata }) } 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 }) + my.utils().renderExtTemplate({ name: 'page_'+sufix, selector: 'body', data: mdata }) } - } var my = my || {}; diff --git a/js/main.js b/js/main.js index abd465f..fbbada0 100644 --- a/js/main.js +++ b/js/main.js @@ -1,11 +1,12 @@ viewStatus= "story" /* data story */ pagesLoaded= 0 -totalPages=7; +totalPages=8; +window.onresize = function(){ location.reload(); } window.onload = function() { width = 1000, height = 1000; - loadPageTemplates() + loadData(); $('#pagepiling').pagepiling({ menu: null, anchors: ["portada","page1","page2","page3","page4","page5","page6","page7"], @@ -29,27 +30,55 @@ window.onload = function() { $('.btn-navigation.active').removeClass('active') $('#nav-btn-page'+index + " a").addClass('active') } - }); - //turnEventsOn(); - - - - + }); //turnEventsOn(); } -function loadPageTemplates(){ - $('#portada').load("templates/portada.html",function(){ - loadModalEvent(0); +function loadData(){ + $.getJSON( "data/textos.json", function( data ) { + n_projects=Object.keys(data).length; + paginasData=data; + console.log("astas") + loadPageTemplates() + }).fail(function() { + console.log( "error" ); }) +} - for (var i=1; i<= totalPages; i++){ - (function (n) { +sufix="desk" +n_projects=7; +function renderPage(pageNumber ){ + //$("body").fadeOut(); + console.log(pageNumber) + //$("body").empty(); + if(pageNumber==0){ + my.utils().renderExtTemplate({ name: 'portada_'+sufix, selector: 'body', data: {} }) + } + else if(pageNumber==6){ + var mdata=paginasData[pageNumber-1] + my.utils().renderExtTemplate({ name: 'page6_'+sufix, selector: '#page-'+pageNumber, index : pageNumber, data: mdata }) + } + else{ + var mdata=paginasData[pageNumber-1] + my.utils().renderExtTemplate({ name: 'page_'+sufix, selector: '#page-'+pageNumber, index : pageNumber, data: mdata }) + } +} + + +function loadPageTemplates(){ + my.utils().renderExtTemplate({ name: 'portada_'+sufix, selector: '#portada', data: {}, index : 0 }) + /*$('#portada').load("templates/portada.html",function(){ + loadModalEvent(0); + })*/ + + for (var i=1; i<= totalPages-1; i++){ + /*(function (n) { $('#page-'+n).load("templates/page"+n+".html",function(){ counterLoading(); loadModalEvent(n); }) - })(i) + })(i)*/ + renderPage(i) } //turnEventsOn(); } @@ -61,13 +90,17 @@ function loadModalEvent(j){ content: $('#map-page-'+j), closeButton: 'box' }); - + console.log(j) var modal2= new jBox('Modal', { width: '60%', height: '80%', attach: '#referencias-page-btn-'+j, - content: $('#referencias-page-'+j), + //content: $('#referencias-page-'+j), + ajax: { + url: 'referencias/page'+j+".html", + reload: 'strict' + }, closeButton: 'box' }); @@ -75,13 +108,14 @@ function loadModalEvent(j){ function counterLoading(){ pagesLoaded++; + $('.verstory-btn').hide(); if(pagesLoaded >= totalPages){ var ssize=$( window ).height(); var bottomSize=$( "#timeline" ).height(); $('.story-content').css("height",ssize-bottomSize+'px') $('.data-content').css("height",ssize-bottomSize+'px') //Todas las plantillas cargadas - $('.menu-content').on("click",'.switchMode', function(e){ + $('.extra-btn-container').on("click",'.switchMode', function(e){ if(viewStatus=="story") { viewStatus="data" @@ -92,11 +126,15 @@ function counterLoading(){ if(viewStatus=="story"){ $('.story-content, .menu-story-content').show(); $('.data-content, .menu-data-content').hide(); + $('.verstory-btn').hide(); + $('.vergrafico-btn').show(); //$('.menu-content .switchMode').empty().html("ver datos") } else{ $('.story-content, .menu-story-content').hide(); $('.data-content, .menu-data-content').show(); + $('.vergrafico-btn').hide(); + $('.verstory-btn').show(); //$('.menu-content .switchMode').empty().html("ver historia") } }) @@ -116,3 +154,33 @@ function turnEventsOn(){ $(this).addClass('active') })*/ } + +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(item.index); + }); + }; + + return { + getPath: getPath, + renderExtTemplate: renderExtTemplate + }; +}); +function afterLoading(i){ + //$("body").fadeIn(); + //reloadEvents(); + if(i>0)loadModalEvent(i) + counterLoading(); +} diff --git a/referencias/page1.html b/referencias/page1.html new file mode 100644 index 0000000..af0f428 --- /dev/null +++ b/referencias/page1.html @@ -0,0 +1,17 @@ +
+

Fuentes relacionadas con los datos:

+ +

Bibliografía complementaria consultada:

+ +
diff --git a/referencias/page2.html b/referencias/page2.html new file mode 100644 index 0000000..520b17c --- /dev/null +++ b/referencias/page2.html @@ -0,0 +1,14 @@ +
+

Fuentes relacionadas con los datos:

+ + +

Bibliografía complementaria consultada:

+ +
diff --git a/referencias/page3.html b/referencias/page3.html new file mode 100644 index 0000000..e959f75 --- /dev/null +++ b/referencias/page3.html @@ -0,0 +1,8 @@ + +
+

Fuentes relacionadas con los datos:

+ +
diff --git a/referencias/page4.html b/referencias/page4.html new file mode 100644 index 0000000..95bd528 --- /dev/null +++ b/referencias/page4.html @@ -0,0 +1,20 @@ + +
+

Fuentes relacionadas con los datos:

+ +

Bibliografía complementaria consultada:

+ +
diff --git a/referencias/page5.html b/referencias/page5.html new file mode 100644 index 0000000..48d4020 --- /dev/null +++ b/referencias/page5.html @@ -0,0 +1,24 @@ + +
+

Fuentes relacionadas con los datos:

+ + +

Bibliografía complementaria consultada:

+ +
diff --git a/referencias/page6.html b/referencias/page6.html new file mode 100644 index 0000000..6373b8b --- /dev/null +++ b/referencias/page6.html @@ -0,0 +1,13 @@ + +
+

Fuentes relacionadas con los datos:

+ +

Bibliografía complementaria consultada:

+ +
diff --git a/referencias/page7.html b/referencias/page7.html new file mode 100644 index 0000000..a6917d9 --- /dev/null +++ b/referencias/page7.html @@ -0,0 +1,16 @@ +
+

Fuentes relacionadas con los datos:

+ +

Bibliografía complementaria consultada:

+ +
diff --git a/templates/.DS_Store b/templates/.DS_Store index 5008ddfcf53c02e82d7eee2e57c38e5672ef89f6..d2322c81181e431f014a622211b1ecf33cc873da 100644 GIT binary patch literal 8196 zcmeHMTWl0n82;a?W=y z|GE6%`SzTgSpdMkqMiVV0)Rx3Bdeq2CV{u}cteN;HMN9D{lU#=EhkH*PqXg-WRQ58Zr!P$1o}q@CH@nDkUs(Z zKzYV9gz*5A0nQ1e778f35{j-EJTXvor}}tcmke-Dpy&=5JU%d(8G{!J`m@vcao-#; zDKJb!20{jIWPtyCYQO;t^z7vI?{~{|z0S_BF;Y{zXz>zBlIo;->3HglGnw)w%J)(YHmyH8ag>~c6#RA?87ezk1#kDprOjc z7q7Wzxut&bc_Q+BHZR=!rsAHg)Tu)cDEl*Pd5KniFz=a;?H)D?E@6f>xa9Xx&asCJ z25%qDIaYDPb~CIor&+n8rFllLWu?q%!yWUCDUaulx=z9C_YE_Q6Y>u|XRJGc=GRjynYd%yoy|b)UlFDpZL;dPCsxq$AQVuve zA5CX(OS0e6x<*xx@s|FAL8%^eSl6y9X_v293k*9pDoXl6+DYchqHAJ{qK;Tv*07i^ zi+Q@b6?L>Em}L8c%AGxmI+k-LCdd`H5j%qFWUs28;4|;nT<>7suxV9S`1Iu6Ag$^M zZ|l`{z9y+P*)De5XFzUEb_Sa-K?`i68*49&g8_Ls4^P4ccnV&E*Wfa|1@FNpa0Nbt z&*3V32S38k@GJZdf54yc7fRTK%^1ZNT#K7J@>#Xj7J!*~c&n8xFnLjzCY zY0TpkPU8%o!$BXr$JR=u6efvcTWp;~a%K^~sH~5Xr6#c& z(YjelNF-0TNVMLobjc)ORx4V!D?269DO+4_X^yVkwOdgb@ZXs%tlMIALj7~?U4%>U zE__U?y9!^y5AYNG0>2^R5^VJKrsCbW8rNYvuE!0y5xcOPl(z$Wa1i(4UK}FzrEvsD zaSV@=`gC7?CKk}eB9=&nkKlQH3?IiQ0u?@oui!;|wMuhCRhqkeO>?DG!L}UxG}TlT zy3jZ*-ChjT2zR3V{Xcl?@Bg=#)1fyZ10e$o7{Jw5KPGg_gAhnpCgF}!R pBnTAa1`@77th%xAJM(0I8AV3M$)+;eJWLRCKt?lcj^~-f3;-`E4{!hg diff --git a/templates/page1.html b/templates/old/page1.html similarity index 100% rename from templates/page1.html rename to templates/old/page1.html diff --git a/templates/page2.html b/templates/old/page2.html similarity index 100% rename from templates/page2.html rename to templates/old/page2.html diff --git a/templates/page3.html b/templates/old/page3.html similarity index 100% rename from templates/page3.html rename to templates/old/page3.html diff --git a/templates/page4.html b/templates/old/page4.html similarity index 100% rename from templates/page4.html rename to templates/old/page4.html diff --git a/templates/page5.html b/templates/old/page5.html similarity index 100% rename from templates/page5.html rename to templates/old/page5.html diff --git a/templates/page6.html b/templates/old/page6.html similarity index 100% rename from templates/page6.html rename to templates/old/page6.html diff --git a/templates/page7.html b/templates/old/page7.html similarity index 100% rename from templates/page7.html rename to templates/old/page7.html diff --git a/templates/page6_desk.tmpl.html b/templates/page6_desk.tmpl.html new file mode 100644 index 0000000..2c3a1d3 --- /dev/null +++ b/templates/page6_desk.tmpl.html @@ -0,0 +1,117 @@ +
+
+
+
+
+ +
+ +
+
+
+
+ + +
+
+
+
+ {{:storytext}} +
+ +
+
+
+ + +
+
+ +
+
+
+ +
+ +
+ +
diff --git a/templates/page_desk.tmpl.html b/templates/page_desk.tmpl.html new file mode 100644 index 0000000..6e7ec6f --- /dev/null +++ b/templates/page_desk.tmpl.html @@ -0,0 +1,63 @@ +
+
+
+
+
+ +
+ +
+
+
+
+ +
+
+
+ +
+ {{:storytext}} +
+ +
+
+
+ +
+ +
+ + ver mapa + + + + ver historia + + + ver datos + +
+ + +
+
+ +
+ +
+ +
diff --git a/templates/index_mob.tmpl.html b/templates/page_mob.tmpl.html similarity index 94% rename from templates/index_mob.tmpl.html rename to templates/page_mob.tmpl.html index 393820d..da539c3 100644 --- a/templates/index_mob.tmpl.html +++ b/templates/page_mob.tmpl.html @@ -40,6 +40,7 @@
{{:maptext}}
+ Referencias bibliográficas diff --git a/templates/portada.html b/templates/portada_desk.tmpl.html similarity index 84% rename from templates/portada.html rename to templates/portada_desk.tmpl.html index 0214ca0..65e4dd2 100644 --- a/templates/portada.html +++ b/templates/portada_desk.tmpl.html @@ -1,4 +1,4 @@ -
+
@@ -24,6 +24,6 @@

Victor Valles

Agradecimientos:

A Elena Cabrera y Héctor Millano de PorCausa por aportar información de tremendo valor y ayudándonos 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.

+

A Sergio Galán haciendo que la web historiadezainab.org sea una realidad.

Y además, Hannah Williams, Alejandro Zappala, 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.

diff --git a/templates/portadamvl.tmpl.html b/templates/portada_mob.tmpl.html similarity index 98% rename from templates/portadamvl.tmpl.html rename to templates/portada_mob.tmpl.html index 2d223c5..d2f1b48 100644 --- a/templates/portadamvl.tmpl.html +++ b/templates/portada_mob.tmpl.html @@ -1,4 +1,4 @@ -
+