Fix map widget not loading on 'display: none' + CSS fixes
This commit is contained in:
Ghislain Loaec
parent
3096a375bf
commit
b3bcd09aeb
|
|
@ -128,6 +128,13 @@ body {
|
|||
.momo-page-ontop {
|
||||
z-index: 999;
|
||||
}
|
||||
.navbar-brand {
|
||||
padding: 12px 15px;
|
||||
float: none;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* Landscape layout (with min-width) */
|
||||
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
|
||||
|
|
|
|||
|
|
@ -81,8 +81,10 @@
|
|||
</a>
|
||||
{% } %}
|
||||
</div>
|
||||
<div class="col-xs-8 navbar-brand text-center">
|
||||
{%= o.title %}
|
||||
<div class="col-xs-8 text-center">
|
||||
<div class="navbar-brand text-center">
|
||||
{%= o.title %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-2">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@
|
|||
*/
|
||||
|
||||
@import "bootstrap.min.css";
|
||||
/*@import "bootstrap-theme.min.css";*/
|
||||
@import "font-awesome.min.css";
|
||||
@import "animations.css";
|
||||
|
||||
|
|
@ -62,7 +61,9 @@ body {
|
|||
height: 60px;
|
||||
}
|
||||
.momo-subnavbar {
|
||||
margin-top: 1px;
|
||||
margin-bottom: 0px;
|
||||
border: 0px;
|
||||
}
|
||||
.momo-container {
|
||||
top: 60px;
|
||||
|
|
@ -86,7 +87,9 @@ body {
|
|||
.momo-page iframe {
|
||||
width: 100%;
|
||||
border: 0;
|
||||
min-height: 100%;
|
||||
min-height: 80%;
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
}
|
||||
.momo-page-pages {
|
||||
border-radius: 0px;
|
||||
|
|
@ -111,6 +114,7 @@ body {
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
visibility: hidden;
|
||||
display: none;
|
||||
overflow: auto;
|
||||
backface-visibility: hidden;
|
||||
transform: translate3d(0, 0, 0);
|
||||
|
|
@ -119,6 +123,7 @@ body {
|
|||
.momo-page-current,
|
||||
.no-js .pt-page {
|
||||
visibility: visible;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.no-js body {
|
||||
|
|
@ -128,6 +133,17 @@ body {
|
|||
.momo-page-ontop {
|
||||
z-index: 999;
|
||||
}
|
||||
.navbar .col-xs-8 {
|
||||
display: table;
|
||||
}
|
||||
.navbar .col-xs-8 .navbar-brand {
|
||||
padding: 10px 15px;
|
||||
float: none;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
/* Landscape layout (with min-width) */
|
||||
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) {
|
||||
|
|
|
|||
|
|
@ -81,8 +81,10 @@
|
|||
</a>
|
||||
{% } %}
|
||||
</div>
|
||||
<div class="col-xs-8 navbar-brand text-center">
|
||||
{%= o.title %}
|
||||
<div class="col-xs-8 text-center">
|
||||
<div class="navbar-brand text-center">
|
||||
{%= o.title %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-2">
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
},
|
||||
{"id": "plan-poi",
|
||||
"title": "Plan de la ville",
|
||||
"content": "<p>...</p>"
|
||||
"content": "<iframe width='425' height='350' frameborder='0' scrolling='no' marginheight='0' marginwidth='0' src='http://www.openstreetmap.org/export/embed.html?bbox=5.000066757202148%2C47.30333063750183%2C5.065813064575195%2C47.339288006029356&layer=mapnik' style='border: 1px solid black'></iframe><br/><small><a href='http://www.openstreetmap.org/#map=14/47.3213/5.0329'>View Larger Map</a></small>"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -138,40 +138,34 @@ var app = {
|
|||
document.getElementById('momo-main').innerHTML = $main;
|
||||
|
||||
// Render every page
|
||||
for(var page in app.pages)
|
||||
app.renderPage(app.pages[page]);
|
||||
for(var page in app.pages){
|
||||
//app.renderPage(app.pages[page]);
|
||||
var $page = document.createElement('div');
|
||||
$page.id = app.pages[page].id;
|
||||
$page.className = "momo-page";
|
||||
if($page.id == 'home'){
|
||||
$page.classList.add('momo-page-current');
|
||||
$page.innerHTML = app.renderPage(app.pages[page]);
|
||||
}
|
||||
document.getElementById('momo-pages').appendChild($page);
|
||||
}
|
||||
},
|
||||
|
||||
// Render Page
|
||||
renderPage: function(page){
|
||||
|
||||
if(page instanceof Object){
|
||||
|
||||
var $page = document.createElement('div');
|
||||
$page.id = page.id;
|
||||
$page.className = "momo-page";
|
||||
if(page.id == 'home'){
|
||||
$page.classList.add('momo-page-current');
|
||||
}
|
||||
$page.innerHTML = tmpl("momo-page-tmpl", page);
|
||||
document.getElementById('momo-pages').appendChild($page);
|
||||
|
||||
return tmpl("momo-page-tmpl", page);
|
||||
} else
|
||||
if(typeof page === 'string' || page instanceof String || page instanceof Number){
|
||||
//console.log('Render page '+page);
|
||||
//window.location.hash = page;
|
||||
//if(app.pages.hasOwnProperty(page)) {
|
||||
// app.renderPage(app.pages[page]);
|
||||
//} else {
|
||||
// alert('Page "'+page+'" doesn\'t exist');
|
||||
//}
|
||||
return app.renderPage(app.pages[page]);
|
||||
}
|
||||
},
|
||||
|
||||
navigate: function(page, back){
|
||||
|
||||
var page_obj = app.pages[page];
|
||||
|
||||
console.log('navigate');
|
||||
console.log(app.renderPage(app.pages[page]));
|
||||
if(page_obj.external){
|
||||
navigator.app.loadUrl(page_obj.url, { openExternal:true });
|
||||
return false;
|
||||
|
|
@ -220,6 +214,7 @@ var app = {
|
|||
$outpage.addEventListener('MSAnimationEnd', outCb, false);
|
||||
|
||||
$inpage.classList.add('momo-page-current');
|
||||
$inpage.innerHTML = app.renderPage(page_obj);
|
||||
|
||||
var in_classes = (back ? ANIMATION_BACK_IN_CLASS : ANIMATION_IN_CLASS).split(' ');
|
||||
for(var i = 0; i < in_classes.length; i++)
|
||||
|
|
|
|||
Reference in New Issue