Master detail routes not working on smartphone

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?

Is this a combination of Yii & framework7 ?

Yes :slight_smile: but for this project the use of Yii is minimal, just for rendering views, session, RBAC and json API

This seems you have specified master routes only on desktop

thank you!!! :slight_smile:
I thought that setting was only for displaying the 2 columns or no, allowing routes to work the same.
Now it works! Thank you!!!

1 Like