Pro 6518 mobile preview

haroun commented 2 months ago

Summary

Add mobile preview feature to the admin UI

What are the specific steps to test this change?

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

or

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
  }
};

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
[x] New feature
[ ] Refactor
[ ] Documentation
[ ] Build-related changes
[ ] Other

Make sure the PR fulfills these requirements:

[x] 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
[x] 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[bot] commented 2 months ago

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

haroun commented 1 month ago

@stuartromanek still working on

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

the rest is there

stuartromanek commented 1 month ago

@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.

apostrophecms / apostrophe