Fix iOS view

[tomtjes]

This should solve #2576.

Here are a couple of before (1.5.10) and after screenshots. The first set is from the PWA, the second set from a Safari browser tab.

Note: The recipe context menu (where you select "edit", among other things) disappeared on my dev instance. No idea why. But it must be unrelated to my changes, as I see the same behavior with the current develop branch.

[vabene1111]

thanks for the fix, interesting that your context menu is gone, for me it is still there on my devices 🤔

[tomtjes]

interesting that your context menu is gone

I later noticed that it doesn't happen when I access the site at localhost:8000, but when I use LAPTOP-IP:8000 - which is the only way from mobile, afaik. For that to work, I also had to use python3 manage.py runserver 0.0.0.0:8000 and it only works with yarn build, not yarn serve.

Probably related, today's post on Discord #support: https://discord.com/channels/890556779023466497/891608709313232916/1198979869351088178

Console output:

[Error] [Vue warn]: Error in render: "TypeError: window.Urls[url] is not a function. (In 'window.Urls[url](params)', 'window.Urls[url]' is undefined)"

found in

---> <RecipeContextMenu> at src/components/RecipeContextMenu.vue
       <RecipeCard> at src/components/RecipeCard.vue
         <RecipeSearchView> at src/apps/RecipeSearchView/RecipeSearchView.vue
           <Root>
	warn$2 (vue.esm.js:5140)
	logError (vue.esm.js:3804)
	globalHandleError (vue.esm.js:3800)
	handleError (vue.esm.js:3767)
	(anonymous function) (vue.esm.js:2584)
	updateComponent (vue.esm.js:3021)
	(anonymous function) (vue.esm.js:4205)
	Watcher (vue.esm.js:4195)
	mountComponent (vue.esm.js:3038)
	init (vue.esm.js:4942)
	createComponent (vue.esm.js:6613)
	createElm (vue.esm.js:6567)
	createChildren (vue.esm.js:6686)
	createElm (vue.esm.js:6590)
	createChildren (vue.esm.js:6686)
	createElm (vue.esm.js:6590)
	createChildren (vue.esm.js:6686)
	createElm (vue.esm.js:6590)
	createChildren (vue.esm.js:6686)
	createElm (vue.esm.js:6590)
	createChildren (vue.esm.js:6686)
	createElm (vue.esm.js:6590)
	patch (vue.esm.js:7117)
	(anonymous function) (vue.esm.js:2911)
	updateComponent (vue.esm.js:3021)
	(anonymous function) (vue.esm.js:4205)
	Watcher (vue.esm.js:4195)
	mountComponent (vue.esm.js:3038)
	init (vue.esm.js:4942)
	createComponent (vue.esm.js:6613)
	createElm (vue.esm.js:6567)
	updateChildren (vue.esm.js:6862)
	patchVnode (vue.esm.js:6955)
	updateChildren (vue.esm.js:6829)
	patchVnode (vue.esm.js:6955)
	updateChildren (vue.esm.js:6829)
	patchVnode (vue.esm.js:6955)
	updateChildren (vue.esm.js:6829)
	patchVnode (vue.esm.js:6955)
	updateChildren (vue.esm.js:6829)
	patchVnode (vue.esm.js:6955)
	updateChildren (vue.esm.js:6829)
	patchVnode (vue.esm.js:6955)
	updateChildren (vue.esm.js:6829)
	patchVnode (vue.esm.js:6955)
	patch (vue.esm.js:7123)
	(anonymous function) (vue.esm.js:2915)
	updateComponent (vue.esm.js:3021)
	(anonymous function) (vue.esm.js:4205)
	(anonymous function) (vue.esm.js:4281)
	flushSchedulerQueue (vue.esm.js:3267)
	(anonymous function) (vue.esm.js:3902)
	flushCallbacks (vue.esm.js:3824)
[Error] TypeError: window.Urls[url] is not a function. (In 'window.Urls[url](params)', 'window.Urls[url]' is undefined)
	logError (vue.esm.js:3808)
	globalHandleError (vue.esm.js:3800)
	handleError (vue.esm.js:3767)
	(anonymous function) (vue.esm.js:2584)
	updateComponent (vue.esm.js:3021)
	(anonymous function) (vue.esm.js:4205)
	Watcher (vue.esm.js:4195)
	mountComponent (vue.esm.js:3038)
	init (vue.esm.js:4942)
	createComponent (vue.esm.js:6613)
	createElm (vue.esm.js:6567)
	createChildren (vue.esm.js:6686)
	createElm (vue.esm.js:6590)
	createChildren (vue.esm.js:6686)
	createElm (vue.esm.js:6590)
	createChildren (vue.esm.js:6686)
	createElm (vue.esm.js:6590)
	createChildren (vue.esm.js:6686)
	createElm (vue.esm.js:6590)
	createChildren (vue.esm.js:6686)
	createElm (vue.esm.js:6590)
	patch (vue.esm.js:7117)
	(anonymous function) (vue.esm.js:2911)
	updateComponent (vue.esm.js:3021)
	(anonymous function) (vue.esm.js:4205)
	Watcher (vue.esm.js:4195)
	mountComponent (vue.esm.js:3038)
	init (vue.esm.js:4942)
	createComponent (vue.esm.js:6613)
	createElm (vue.esm.js:6567)
	updateChildren (vue.esm.js:6862)
	patchVnode (vue.esm.js:6955)
	updateChildren (vue.esm.js:6829)
	patchVnode (vue.esm.js:6955)
	updateChildren (vue.esm.js:6829)
	patchVnode (vue.esm.js:6955)
	updateChildren (vue.esm.js:6829)
	patchVnode (vue.esm.js:6955)
	updateChildren (vue.esm.js:6829)
	patchVnode (vue.esm.js:6955)
	updateChildren (vue.esm.js:6829)
	patchVnode (vue.esm.js:6955)
	updateChildren (vue.esm.js:6829)
	patchVnode (vue.esm.js:6955)
	patch (vue.esm.js:7123)
	(anonymous function) (vue.esm.js:2915)
	updateComponent (vue.esm.js:3021)
	(anonymous function) (vue.esm.js:4205)
	(anonymous function) (vue.esm.js:4281)
	flushSchedulerQueue (vue.esm.js:3267)
	(anonymous function) (vue.esm.js:3902)
	flushCallbacks (vue.esm.js:3824)

[vabene1111]

that error is related to the frontend named URL system, are you on a manual install?

this command might be what you need bin/python3 manage.py collectstatic_js_reverse

[tomtjes]

That solved the missing context menu, thanks!
I use a manual install for dev only. The discord post is not mine.