Media Query / NEOS Backend Display

Using Neos & Flow Frontend & Integration
1

Hi

How to handle this issue best with NEOS:
Media queries do ask the viewport/device how big it is, not a container, and in the NEOS backend context, the container of the front-end is actually smaller as the viewport, because of all the backend stuff around it. So my frontend renders not how it should to fit the container.

Is there a ready-to use solution or a best pratice to handle this in neos?

Or do I best go with “Element Queries”?

Best regards
Thĩs

2

Hi Thĩs,

that exact issue is one of the reasons why the backend is currently being rewritten in React. The new backend will use an iframe and thus have correct media queries. It’s not really usable to create content yet, but some basic functionality is there, and you can check it out here: https://github.com/neos/neos-ui.
In the meantime, if you really need the breakpoints to render correctly in the backend, you can query for the classes “neos-backend neos-inspector-panel-open neos-navigate-panel-open” on the body. They will be set depending on which Neos controls are visible, and you could adapt your breakpoints accordingly.

3

Hi Bastian

Thanks for the useful info.

I also checked out Element Queries, this also works, I can define them the same way as media queries, in a less-context. It let’s me query for the size of the container (wrap inside the body for my content). But for this I have to track container resizing.

I think using class selectors “neos-backend neos-inspector-panel-open neos-navigate-panel-open” is the best solution for now.

Regards
Thĩs

4

Same issue: Fixed positioned elements.
Needs workaround in the current backend implementation

5

As an inspiration for everyone facing this problem.

This is how I solved it (in a less environment). The backend-breakpoints extend the frontend-breakpoints. This is the content of the “neos-backend.less” file:

/* --- applies rules for backend in non-fullscreen-mode --- */

body.neos-backend:not(.neos-full-screen){
  /* ------- switch positioning of elements ------- */
  #logo-keys, #logotitle-menu-container, #sidebar{
    position:absolute;
  }
}

/* ------- big screen backend ------- */
@media screen and (min-width: 1800px) and (max-width:2100px){
  body.neos-navigate-panel-open.neos-inspector-panel-open:not(.neos-full-screen){
    @import (multiple) "vars-default";
    @import (multiple) "variants/apply-responsive-vars";
  }
}

/* ------- normal screen backend ------- */
@media screen and (max-width:1800px) and (min-width:1301px){
  body.neos-navigate-panel-open.neos-inspector-panel-open:not(.neos-full-screen){
    @import (multiple) "variants/apply-smallscreen-landscape";
  }
}

@media screen and (max-width:1300px){
    body.neos-navigate-panel-open:not(.neos-full-screen),
    body.neos-inspector-panel-open:not(.neos-full-screen){
      @import (multiple) "variants/apply-smallscreen-landscape";
    }
    body.neos-navigate-panel-open.neos-inspector-panel-open:not(.neos-full-screen){
      @import (multiple) "variants/apply-mobile-portrait";
    }
}

@media screen and (max-width:1000px){
    body.neos-navigate-panel-open:not(.neos-full-screen),
    body.neos-inspector-panel-open:not(.neos-full-screen){
      @import (multiple) "variants/apply-mobile-portrait";
    }
}

All the apply-* files have to be applyable in the body-tag. The same snippets can be used in the media-queries for the frontend. :slight_smile:

6

I installed the current NEOS 3.1.x-dev with the rewritten neos/neos-ui.

But I see no iFrame / media-query support without workaround. Did I miss something? Is there something I have to do to activate it?

7

Ah… just realized what I missed: the “!” in the route to the rewritten backend:

/neos!