Pro 6518 mobile preview #4720

haroun · 2024-09-09T10:03:28Z

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)

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 · 2024-09-09T10:03:32Z

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

…mode

modules/@apostrophecms/ui/ui/apos/scss/global/_device_preview.scss

* main: PRO-6578: auto import of inline images (#4723) Inline array improvements (#4671) take credit for the fix as well as the "change" (#4725) PRO-6576 fix default values for object fields in widgets and generally unify newInstance implementations (#4722)

haroun · 2024-09-12T16:26:22Z

modules/@apostrophecms/asset/lib/webpack/apos/webpack.scss.js

-                sourceMap: true
-              }
-            }
+            mediaToContainerQueriesLoader,


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

* main: upgrate stylelint-config-apostrophe to 4.2.0 (#4735) PRO-6472: at startup, automatically supply a value for any new schema property that has a def or fallback def (#4721) fix sass warning (#4730) fix piecesFilters with dynamic choices (#4731)

* main: fix oversights in add missing schema fields (#4736)

ETLaurent · 2024-09-25T16:05:01Z

modules/@apostrophecms/asset/lib/webpack/media-to-container-queries-loader.js

+
+    const containerQuery = convertToContainerQuery(mediaFeature, content);
+
+    return `${containerQuery} ${match}`;


Suggested change

return `${containerQuery} ${match}`;

return `${containerQuery}\n\n${match}`;

(approximative code)

to place the media query on a new line

I've also put the container query after the media query

ETLaurent

Awesome work 😮
And no iframe needed in the end!

A few comments, but the approval is very close.

ETLaurent · 2024-09-26T08:37:10Z

modules/@apostrophecms/admin-bar/index.js

+            height: screen.height
+          }
+        },
+        shortcut: `P,${index}`


P,[n] is a bit slow if we want to quickly switch between modes.
But it's not that bad.

ETLaurent · 2024-09-26T08:38:06Z

modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextDevicePreviewMode.vue

+export default {
+  name: 'TheAposContextDevicePreview',
+  props: {
+    // { screenName: { label: string, width: string, height: string, icon: string } }


wanted comment?

yep, to explain the expected props

ETLaurent · 2024-09-26T08:38:55Z

modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextDevicePreviewMode.vue

Is there a good reason not to use Vue 3 here?

to do like the existing vue components in the project

ETLaurent · 2024-09-26T08:42:45Z

modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextDevicePreviewMode.vue

+    }) {
+      document.querySelector('body').setAttribute('data-device-preview-mode', mode);
+      document.querySelector('[data-apos-refreshable]').setAttribute('data-resizable', this.resizable);
+      document.querySelector('[data-apos-refreshable]').setAttribute('data-label', this.$t(label));


if we're not displaying it anymore then we can remove this line, as well as in toggleDevicePreviewMode and saveStatemethods.

ETLaurent · 2024-09-26T08:46:08Z

modules/@apostrophecms/admin-bar/ui/apos/components/TheAposContextDevicePreviewMode.vue

+      default: false
+    }
+  },
+  emits: [ 'switch-device-preview-mode', 'reset-device-preview-mode' ],


I can't find where these are being listened to?

it's not, but if you want to listen to it and do something you can

ETLaurent · 2024-09-26T08:55:19Z

modules/@apostrophecms/asset/index.js

+      // Transform method used on media feature
+      // Can be either:
+      // - (mediaFeature) => { return mediaFeature; }
+      // - null


This could be enriched with another example which would illustrate why some project would need to do this. WDYT?

my plan is to do it in the doc

ETLaurent · 2024-09-26T09:03:56Z

modules/@apostrophecms/asset/lib/webpack/media-to-container-queries-loader.js

+
+  const mediaQueryRegex = /@media\s*(all|print|screen(?: and | or )?)?([^{]+)[^{]*{([\s\S]*?})\s*(\\n)*}/g;
+
+  const convertToContainerQuery = (mediaFeature, content) => {


I used to be keenly against it (@ValJed would remember) but now, I think that I like having the functions definition placed after their call. I find it much more easier to read in the file (main function -> call to another function -> function definition).

I.e: you could move this function at the end, so we read the code execution in the execution order.
(this is very optional).

I really have a hard time with hoisting

and the entire file is 80+ lines of code

ETLaurent · 2024-09-26T09:04:47Z

modules/@apostrophecms/asset/lib/webpack/media-to-container-queries-loader.js

+    const root = postcss.parse(match.replaceAll(/\\[frntv]/g, ''));
+    root.walkRules(rule => {
+      const newRule = rule.clone();
+      newRule.selectors = newRule.selectors.map(selector => {
+        if (selector.startsWith('body')) {
+          return selector.replace('body', 'body:not([data-device-preview-mode])');
+        }
+
+        return `body:not([data-device-preview-mode]) ${selector}`;
+      });
+
+      rule.replaceWith(newRule);
+    });
+
+    return `${root.toString()}\\n\\n${containerQuery}`;


beautiful 🥲

ETLaurent · 2024-09-26T09:06:50Z

modules/@apostrophecms/asset/lib/webpack/media-to-container-queries-loader.js

+      const newRule = rule.clone();
+      newRule.selectors = newRule.selectors.map(selector => {
+        if (selector.startsWith('body')) {
+          return selector.replace('body', 'body:not([data-device-preview-mode])');
+        }
+
+        return `body:not([data-device-preview-mode]) ${selector}`;
+      });
+
+      rule.replaceWith(newRule);


we could add a comment to briefly explain why we have to disable rules in media queries when in device preview mode.

ETLaurent · 2024-09-26T09:08:16Z

modules/@apostrophecms/ui/ui/apos/scss/global/_device_preview.scss

+  [data-apos-refreshable]::before {
+    @include type-help;
+
+    & {
+      content: attr(data-label);
+      position: relative;
+      top: -1.25rem;
+      display: block;
+    }
+  }


are we still displaying it?

not visible but this is a bug

ETLaurent · 2024-09-30T12:43:34Z

modules/@apostrophecms/asset/lib/webpack/media-to-container-queries-loader.js

        }

-        return `body:not([data-device-preview-mode]) ${selector}`;
+        return `:not([data-device-preview-mode]) ${selector}`;


I tried this solution (just having :not without body) but it did not work. Does it work on Chrome on your end?

Indeed not a good idea to remove body, it's fixed

… container query

ETLaurent · 2024-10-01T11:54:13Z

modules/@apostrophecms/asset/lib/webpack/media-to-container-queries-loader.js

+        rule.replaceWith(newRule);
+      });
+
+      root.append(containerAtRule);


much better indeed

ETLaurent · 2024-10-01T11:54:33Z

modules/@apostrophecms/asset/lib/webpack/media-to-container-queries-loader.js

+      const containerAtRule = atRule.clone({
+        name: 'container',
+        params: convertToContainerQuery(atRule.params)
+          .replaceAll(/(only\s*)?(all|screen|print)(,)?(\s)*(and\s*)?/g, '')


Suggested change

.replaceAll(/(only\s*)?(all|screen|print)(,)?(\s)*(and\s*)?/g, '')

.replaceAll(/(only\s*)?(all|screen|print),?\s*(and\s*)?/g, '')

ETLaurent · 2024-10-01T11:56:07Z

modules/@apostrophecms/asset/lib/webpack/media-to-container-queries-loader.js

+  };
+  const options = this.getOptions(schema);
+
+  const mediaQueryRegex = /@media[^{]*{([\s\S]*?})\s*(\\n)*}/g;


Suggested change

const mediaQueryRegex = /@media[^{]*{([\s\S]*?})\s*(\\n)*}/g;

const mediaQueryRegex = /@media[^{]*{[\s\S]*}\s*(\\n)*}/g;

no need for parenthesis and question mark (* does the ?'s "job"), I think

tried and the parentheses are needed, otherwise it will select extra content

changes have been made already, we have 2 approvals

* upstream/main: Release 4.8.0 (apostrophecms#4742) Enable by default, other tweaks (apostrophecms#4741) PRO-6627: Fix array reorder and labels (apostrophecms#4740) Pro 6518 mobile preview (apostrophecms#4720)

haroun added 3 commits September 6, 2024 16:49

experiment with mobile preview

38e5020

fix lint issue

be578e8

add media to container query loader

60de087

haroun self-assigned this Sep 9, 2024

haroun added 9 commits September 10, 2024 16:21

clean up media to container queries loader

4c20516

use apostrophe options to toggle mobile preview

62fd03a

add breakpoints support

c9579c8

experiment with screen options

895fb42

refactor as device preview mode to avoid name conflicts with preview …

7db9493

…mode

set todos

8991290

rename devicePreview into devicePreviewMode and validate screens

6806ded

set active style

174c897

set active style and keyboard shortcuts

4573f98

haroun commented Sep 12, 2024

View reviewed changes

modules/@apostrophecms/ui/ui/apos/scss/global/_device_preview.scss Outdated Show resolved Hide resolved

haroun added 5 commits September 12, 2024 18:07

restore previous filename logic

e52a478

revert plugins

bf528e8

note about deep merge

ca2bb37

update changelog

e6e4cd1

haroun commented Sep 12, 2024

View reviewed changes

haroun added 4 commits September 12, 2024 18:58

remove test styles

52c8cb3

fix mixed declaration warnings

129cc3a

translate device

0ac0e49

translate additional keys in keyboard shortcut label

f7eaa02

haroun marked this pull request as ready for review September 12, 2024 17:02

haroun requested review from boutell and stuartromanek September 12, 2024 17:10

add transform function

070fc88

haroun requested a review from BoDonkey September 13, 2024 09:19

haroun added 6 commits September 24, 2024 16:26

save device preview mode state inside own component

d08b8fd

update background on body

f86f60a

keep state

7da9500

Merge branch 'main' into pro-6518-mobile-preview

e023214

* main: fix oversights in add missing schema fields (#4736)

replace background and not just color

881919b

ETLaurent reviewed Sep 25, 2024

View reviewed changes

haroun added 2 commits September 25, 2024 19:49

add selector prefix for mobile first responsive

6116ee9

add empty lines

adc5e6b

ETLaurent reviewed Sep 26, 2024

View reviewed changes

haroun requested a review from ETLaurent September 26, 2024 15:26

haroun added 5 commits September 26, 2024 17:46

exclude content with \n from being replaced

a363ade

match only single escaped backslash

ad3412a

update transform example

54b2574

improve css specificity for media queries

6d0ec03

do not increase specificity with where

3b30474

ETLaurent previously approved these changes Sep 30, 2024

View reviewed changes

simplify regex for container query and use postcss to parse media and…

89524be

… container query

haroun dismissed ETLaurent’s stale review via 89524be September 30, 2024 20:20

set body to media query

b04e3af

haroun requested a review from ETLaurent October 1, 2024 07:50

ETLaurent previously approved these changes Oct 1, 2024

View reviewed changes

add context label

89739a5

haroun dismissed ETLaurent’s stale review via 89739a5 October 1, 2024 16:31

ETLaurent approved these changes Oct 2, 2024

View reviewed changes

boutell approved these changes Oct 2, 2024

View reviewed changes

haroun merged commit 0f54720 into main Oct 2, 2024
8 checks passed

haroun deleted the pro-6518-mobile-preview branch October 2, 2024 13:36


		const containerQuery = convertToContainerQuery(mediaFeature, content);

		return `${containerQuery} ${match}`;

	return `${containerQuery} ${match}`;
	return `${containerQuery}\n\n${match}`;


		const mediaQueryRegex = /@media\s(all\|print\|screen(?: and \| or )?)?([^{]+)[^{]{([\s\S]?})\s(\\n)*}/g;

		const convertToContainerQuery = (mediaFeature, content) => {

	.replaceAll(/(only\s)?(all\|screen\|print)(,)?(\s)(and\s*)?/g, '')
	.replaceAll(/(only\s)?(all\|screen\|print),?\s(and\s*)?/g, '')

	const mediaQueryRegex = /@media[^{]{([\s\S]?})\s(\\n)}/g;
	const mediaQueryRegex = /@media[^{]{[\s\S]}\s(\\n)}/g;

Pro 6518 mobile preview #4720

Pro 6518 mobile preview #4720

Uh oh!

Conversation

haroun commented Sep 9, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

What are the specific steps to test this change?

What kind of change does this PR introduce?

Make sure the PR fulfills these requirements:

Uh oh!

linear bot commented Sep 9, 2024

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ETLaurent left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

haroun commented Sep 9, 2024 •

edited

Loading