not responsive (menu disappears) on CMS_PICO Nextcloud application

[Ludovicis]

First on nextcloud cms_pico application, we can't load js file. It's a restriction for security... https://github.com/nextcloud/cms_pico When i open the travelify theme on my mobile device all the top menu disappears
When I use other responsive designs, the menu is converted to a button which has all the buttons/texts inside. It's possible to implement the hamburger icon same as the skelepico theme ? https://github.com/paulcarl/skelepico-theme

On nextcloud the hamburger work with skelepico theme but i don't know how, i am not a web developper.

Can you help me please ?

[xupefei]

Are you sure about that? JavaScript is loaded at the client-side so there is nothing to do with the server. Even the default theme contains a JavaScript file: https://github.com/nextcloud/cms_pico/blob/master/Pico/themes/default/scripts/modernizr-2.6.1.min.js

[Ludovicis]

Yes i think i am sure because i am not only one with this problem, see the git reposotery and this issue please https://github.com/nextcloud/cms_pico/issues/34

Thanks for your help

[xupefei]

There should be a way to override the CSP policy given by NextCloud, but I am not sure. Let's see how they answer to nextcloud/cms_pico#34.

The solution now is to put JavaScript codes inside index.twig, instead of having them separately. Write something like this before Line 95 of index.twig, and do this for each of three .js files:

<script>
    copy content of .js file here
</script>

Note that the content of jquery-3.1.1.min.js should be before the other two. This method will add about 90KB network traffic for each navigation, but still better than nothing.

[Ludovicis]

Thanks, i have test your solution without success sorry.

nt Security Policy: The page’s settings blocked the loading of a resource at self (“script-src 'nonce-M2s5amZVYkZhVUs1WjRGbWorWWhLZ1g2MFBHaTVZbmozZWZXOXRSUDdRQT06bFNBU0t4YTlBQzdmS0xrUDk3UkVCVEdLa2NUaDA3dldzWUdTbDZVR3BYQT0=' https://domaine https://domaine 'unsafe-eval'”). Source: $('.featured-slider').u....

nt Security Policy: The page’s settings blocked the loading of a resource at self (“script-src 'nonce-M2s5amZVYkZhVUs1WjRGbWorWWhLZ1g2MFBHaTVZbmozZWZXOXRSUDdRQT06bFNBU0t4YTlBQzdmS0xrUDk3UkVCVEdLa2NUaDA3dldzWUdTbDZVR3BYQT0=' https://domaine https://domaine 'unsafe-eval'”). Source: $('.featured-slider').u....

Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src 'nonce-M2s5amZVYkZhVUs1WjRGbWorWWhLZ1g2MFBHaTVZbmozZWZXOXRSUDdRQT06bFNBU0t4YTlBQzdmS0xrUDk3UkVCVEdLa2NUaDA3dldzWUdTbDZVR3BYQT0=' https://domaine https://domaine 'unsafe-eval'”). Source: $(document.links).filter(function().... travelify:134

Maybe i must use this nextcloud application: https://github.com/nextcloud/jsloader ?

[xupefei]

Sorry that I am not able to help you in this case. This issue belongs to the NextCloud: https://github.com/nextcloud/server/issues?utf8=%E2%9C%93&q=CSP. There are many people with the same issue, and it seems that NextCloud allows you to change the CSP setting somehow. I am not familiar with NextCloud so I can not give you any advice.

Even the nextcloud/jsloader mentions about the CSP policy in the screenshot. You really should ask them for help.

[xupefei]

I think I have found something... Look this: https://github.com/nextcloud/server/issues/2791

[Ludovicis]

Yes i have change my apache config with this help: "Put the following into your apache virtualhost configuration:" After restart apache service that's work !!! Thanks for your help xupefei :) Now i must work on image dimension of image in slider directory for mobile resolution :) thanks again xupefei i will share your solution on git cms_pico nextcloud application

[xupefei]

Glad to hear that!

I do not think you still need to put all JavaScript into index.twig after using the new Apache configuration. You can try revert to using the standalone .js files. As I mentioned before, separate .js files save you ~90KB per request.