Hi!
I’m developing a small app with framework7 latest version (v.6). I have a login page, an home page and few other pages, with master/detail layout.
All works fine from my desktop PC, but on smartphone detail routes not work!.. Here’s my code:
app.js
var $ = Dom7;
var theme = 'auto';
if (document.location.search.indexOf('theme=') >= 0) {
theme = document.location.search.split('theme=')[1].split('&')[0];
}
var app = new Framework7({
id: 'io.framework7.testapp',
el: '#app',
name: 'Desk',
theme: theme,
debugger: false,
cache: false,
dialog: {
buttonCancel: 'Annulla',
},
view: {
browserHistory: true,
},
store: store,
routes: routes,
navbar: {
mdCenterTitle: true,
},
});
$(document).on('page:init', function (e) {
app.panel.close();
});
app.on('orientationchange', function (e) {
app.off(e);
});
routes.js
var routes = [
{
name: 'home',
path: '/desk',
async({ app, router, to, from, resolve, reject }) {
if(userIsGuest != 1)
resolve({componentUrl: 'desk/default/home'});
else
resolve({componentUrl: 'desk/default/login'});
},
master(app, router) {
return app.device.desktop;
},
detailRoutes: [
{
path: '/desk/ticket/',
componentUrl: '/desk/ticket',
},
{
name: 'ticketDetail',
path: '/desk/ticket/:ticketId',
componentUrl: '/desk/ticket/view?id={{ticketId}}',
options: {
animate: false,
},
},
...
],
},
];
main.php (html layout)
<!DOCTYPE html>
<html lang="<?= Yii::$app->language; ?>" class="md device-pixel-ratio-1 device-desktop device-windows">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, viewport-fit=cover">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="theme-color" content="#2196f3">
<meta http-equiv="Content-Security-Policy" content="worker-src blob:; child-src blob: gap:; img-src * 'self' blob: data:; default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:">
<title><?=Yii::$app->name;?></title>
...
<script>
var userIsGuest = <?= Yii::$app->user->isGuest ? 1 : 0; ?>;
...
</script>
</head>
<body>
<div id="app">
<div class="view view-main view-init safe-areas" id="view-main" data-url="/desk" data-master-detail-breakpoint="768" data-master-detail-resizable="true"><!-- data-stack-pages="true" -->
</div>
</div>
</body>
</html>
home.php
<template>
<div class="page page-homepage light" data-name="homepage">
...
<div class="page-content content-area pt-60 ptr-content" @ptr:refresh=${refreshPage}>
...
</div>
</div>
</template>
<script>
export default (props, { $f7, $f7ready, $f7router, $on, $onMounted, $onUnmounted, $onUpdated, $update, $tick, $store }) => {
...
return $render;
}
</script>
What am I doing wrong?