Pro 6518 mobile preview

[haroun]

Summary

Add mobile preview feature to the admin UI

What are the specific steps to test this change?

https://preview.a3.apos.dev/

or

1. Enable mobile preview using asset module devicePreviewMode option in your project

    // module/@apostrophecms/asset/index.js
    module.exports = {
      options: {
        devicePreviewMode: {
          enable: true,
          debug: true,
          resizable: false,
          screens: {
            desktop: {
              label: 'apostrophe:devicePreviewDesktop',
              width: '1500px',
              height: '900px',
              icon: 'monitor-icon'
            },
            tablet: {
              label: 'apostrophe:devicePreviewTablet',
              width: '1024px',
              height: '768px',
              icon: 'tablet-icon'
            },
            mobile: {
              label: 'apostrophe:devicePreviewMobile',
              width: '480px',
              height: '1000px',
              icon: 'cellphone-icon'
            }
          }
        },
        // Transform method used on media feature
        // Can be either:
        // - (mediaFeature) => { return mediaFeature; }
        // - null
        transform: null
      }
    };

2. Check the display (you can add some media queries to your asset to test the rendering)

   // to put in an scss file or a vue component
   @media (max-width: 1400px) {
     [data-apos-refreshable] main h1 {
       background-color: gold;
     }
   }
   
   @media (max-width: 1200px) {
     [data-apos-refreshable] main h1 {
       background-color: green;
     }
   }
   
   @media (max-width: 800px) {
     [data-apos-refreshable] main h1 {
       background-color: blue;
     }
   }
   
   @media (max-width: 600px) {
     [data-apos-refreshable] main h1 {
       background-color: magenta;
     }
   }
   
   @media (max-width: 400px) {
     [data-apos-refreshable] main h1 {
       background-color: red;
     }
   }

What kind of change does this PR introduce?

(Check at least one)

• Bug fix
• New feature
• Refactor
• Documentation
• Build-related changes
• Other

Make sure the PR fulfills these requirements:

• It includes a) the existing issue ID being resolved, b) a convincing reason for adding this feature, or c) a clear description of the bug it resolves
• The changelog is updated
• Related documentation has been updated
• Related tests have been updated

If adding a new feature without an already open issue, it's best to open a feature request issue first and wait for approval before working on it.

Other information:

[linear]

PRO-6518 POC demonstrating alternative approach to iFrames for Mobile Preview

[haroun]

because https://github.com/vuejs/vue-style-loader/blob/master/CHANGELOG.md#400-2018-01-31

[stuartromanek]

Other stuff:

• On first activation the canvas has no height. I think we’re supposed to simulate actual device heights, but in lieu of not having a height we should set the height to something like 100vh - (admin bar height + canvas margin)
• A small setting label should be above the upper left corner of the canvas

• For now, disable resize
• There needs to be style differentiation between the resized site and the layer the canvas ‘sits on’. The layer behind the canvas should be a light gray while the canvas should be styles as they define. What if they style the ? Currently the refreshable container doesn’t have any style applied and if you style the body you get this. This seems like a big hole. If you style the body things currently look like this

See https://www.sketch.com/s/fbfcda4a-08a4-4c8d-ab88-fdad7532217e/a/ZVqLgA7

• Moving from page to page should preserve your preview setting. Currently it does not.
• withdrawn style comment

[stuartromanek]

round to 20px (base * 2)

[stuartromanek]

Round to 5px (base / 2) ..
Also, this UI seems like flex + gap would be good

[stuartromanek]

move this up a level?

[stuartromanek]

breakpoints = screens?

[stuartromanek]

These need to be able to support heights?

[stuartromanek]

The road to hell is paved with good intentions

[boutell]

Stu covered the territory well.

Device heights are part of the tech design and should be implemented, the view should be scaled so that you can see the entire device showing its first page in terms of height, and its scrollbar should be based on its native height. People will want to know what is "above the fold" (might seem a tired concept, but valid for stuff like logos that had better fit on the first screen for instance)

[haroun]

@stuartromanek still working on

Moving from page to page should preserve your preview setting. Currently it does not.

the rest is there

[stuartromanek]

@haroun looked at this again, really shaping up.

I committed a few style adjustments rather than go back and forth here. Be sure to pull!

I see the page-to-page stuff is still being worked out, no worries there

Two main issues I see

The content here runs out of the preview container but currently there is no ability to scroll. Fix here is fairly obvious, the container should scroll. If possible, disable scroll on the X axis. Naively

overflow-x: clip;
overflow-y: scroll;

The second issue being that the body styling issue is still not solved. Left has the site's real body style, right its being overridden to provide the canvas background.

[ETLaurent]

Suggested change

	shortcut: `P,${index}`
	shortcut: `P ${index}`

seems more UX-friendly to me