PRO-8493: inject admin UI styles for layout

modules/@apostrophecms/layout-widget/index.js

@@ -76,8 +76,10 @@ module.exports = {
       self.__meta.name === '@apostrophecms/layout-widget' &&
       self.options.injectStyles !== false
     ) {
-      self.stylesContent = await self.loadAndProcessStyles();
+      self.publicStylesContent = await self.loadAndProcessPublicStyles();
+      self.aposStylesContent = await self.loadAndProcessAposStyles();
       self.appendNodes('head', 'publicCssNodes');
+      self.appendNodes('head', 'aposCssNodes');
     }
   },
   handlers(self) {
@@ -123,7 +125,8 @@ module.exports = {
             attrs: { type: 'text/css' },
             body: [
               {
-                raw: self.stylesContent[req.scene] || self.stylesContent.public
+                raw: self.publicStylesContent[req.scene] ||
+                  self.publicStylesContent.public
               }
             ]
           },
@@ -132,6 +135,28 @@ module.exports = {
           }
         ];
       },
+      aposCssNodes(req) {
+        if (req.scene !== 'apos') {
+          return [];
+        }
+        return [
+          {
+            comment: ' Admin Layout styles '
+          },
+          {
+            name: 'style',
+            attrs: { type: 'text/css' },
+            body: [
+              {
+                raw: self.aposStylesContent.apos
+              }
+            ]
+          },
+          {
+            comment: ' End Admin Layout styles '
+          }
+        ];
+      },
       validateAndIdentifyTypes() {
         if (self.options.columns < 2) {
           throw new Error('The layout widget must have at least 2 columns.');
@@ -202,8 +227,18 @@ module.exports = {
           column: hasTypes[self.columnWidgetName]
         };
       },
-      async loadAndProcessStyles() {
-        const cssFilePath = path.join(__dirname, 'ui', 'src', 'layout.css');
+      async loadAndProcessPublicStyles() {
+        return self.loadAndProcessStylesFromScene({ build: 'src' });
+      },
+      async loadAndProcessAposStyles() {
+        return self.loadAndProcessStylesFromScene({
+          build: 'apos',
+          scene: 'apos'
+        });
+      },
+      async loadAndProcessStylesFromScene({ build, scene }) {
+        const pathSegments = [ 'ui', build, 'layout.css' ];
+        const cssFilePath = path.join(__dirname, ...pathSegments);
         let cssContent = fs.readFileSync(cssFilePath, 'utf8');
         const mobileBreakpoint = self.options.mobile?.breakpoint || 600;
         const mobileBreakpointPlus = mobileBreakpoint + 1;
@@ -215,9 +250,9 @@ module.exports = {
           .replace(/\{\$tablet\}/g, tabletBreakpoint)
           .replace(/\{\$tablet-plus\}/g, tabletBreakpointPlus);
 
-        return self.processCss(cssContent);
+        return self.processCss(cssContent, scene);
       },
-      async processCss(cssContent) {
+      async processCss(cssContent, scene = null) {
         try {
           const postcss = require('postcss');
           const cssnano = require('cssnano');
@@ -234,10 +269,14 @@ module.exports = {
           }
 
           if (options.enable !== true) {
-            return {
-              apos: resultPublic.css,
-              public: resultPublic.css
-            };
+            return scene
+              ? {
+                [scene]: resultPublic.css
+              }
+              : {
+                apos: resultPublic.css,
+                public: resultPublic.css
+              };
           }
 
           const mobilePreview = require('postcss-viewport-to-container-toggle');
@@ -260,10 +299,14 @@ module.exports = {
             )
           ]).process(cssContent, { from: undefined });
 
-          return {
-            apos: resultApos.css,
-            public: resultPublic.css
-          };
+          return scene
+            ? {
+              [scene]: scene === 'apos' ? resultApos.css : resultPublic.css
+            }
+            : {
+              apos: resultApos.css,
+              public: resultPublic.css
+            };
         } catch (error) {
           const errorTrace = error.stack
             ? error.stack

modules/@apostrophecms/layout-widget/ui/apos/components/AposGridLayout.vue

@@ -392,75 +392,4 @@ export default {
     opacity: 0.01;
   }
 }
-
-/* stylelint-disable-next-line media-feature-name-allowed-list */
-@media screen and (width >= 601px) and (width <= 1024px) {
-  .apos-layout__grid:not(.manage)[data-tablet-auto="true"] {
-    grid-template-columns: repeat(2, 1fr);
-
-    --grid-rows: auto;
-  }
-
-  .apos-layout__grid:not(.manage)[data-tablet-auto="true"] > .apos-layout__item {
-    grid-column: auto / span 1;
-    grid-row: auto / span 1;
-    order: var(--order, 0);
-  }
-
-  .apos-layout__grid:not(.manage)[data-tablet-auto="true"] > .apos-layout__item[data-tablet-full="true"] {
-    grid-column: 1 / span 2;
-  }
-
-  .apos-layout__grid:not(.manage)[data-tablet-auto="false"] {
-    --grid-rows: var(--tablet-rows, var(--grid-rows));
-  }
-
-  .apos-layout__grid:not(.manage)[data-tablet-auto="false"] > .apos-layout__item {
-    grid-column: var(--tablet-colstart, auto) / span var(--tablet-colspan, 1);
-    grid-row: var(--tablet-rowstart, auto) / span var(--tablet-rowspan, 1);
-    justify-self: var(--tablet-justify);
-    /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
-    align-self: var(--tablet-align);
-    order: var(--tablet-order, var(--order, 0));
-  }
-
-  /* Hide items not visible on tablet */
-  .apos-layout__grid:not(.manage) > .apos-layout__item[data-visible-tablet="false"] {
-    display: none;
-  }
-}
-
-/* stylelint-disable-next-line media-feature-name-allowed-list */
-@media screen and (width <= 600px) {
-  .apos-layout__grid:not(.manage) {
-    grid-template-columns: 1fr;
-
-    --grid-rows: auto;
-  }
-
-  .apos-layout__grid:not(.manage)[data-mobile-auto="true"] > .apos-layout__item {
-    grid-column: auto / span 1;
-    grid-row: auto / span 1;
-    order: var(--order, 0);
-  }
-
-  /* Manual mode: use configured columns and device vars */
-  .apos-layout__grid:not(.manage)[data-mobile-auto="false"] {
-    --grid-rows: var(--mobile-rows, var(--grid-rows));
-  }
-
-  .apos-layout__grid:not(.manage)[data-mobile-auto="false"] > .apos-layout__item {
-    grid-column: var(--mobile-colstart, auto) / span var(--mobile-colspan, 1);
-    grid-row: var(--mobile-rowstart, auto) / span var(--mobile-rowspan, 1);
-    justify-self: var(--mobile-justify);
-    /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
-    align-self: var(--mobile-align);
-    order: var(--mobile-order, var(--order, 0));
-  }
-
-  /* Hide items not visible on mobile */
-  .apos-layout__grid:not(.manage) > .apos-layout__item[data-visible-mobile="false"] {
-    display: none;
-  }
-}
 </style>

modules/@apostrophecms/layout-widget/ui/apos/layout.css

@@ -0,0 +1,72 @@
+/* Tablet rules for admin interface */
+/* stylelint-disable-next-line media-feature-name-allowed-list */
+@media screen and (min-width: {$mobile-plus}px) and (max-width: {$tablet}px) {
+  .apos-layout__grid:not(.manage)[data-tablet-auto="true"] {
+    grid-template-columns: repeat(2, 1fr);
+
+    --grid-rows: auto;
+  }
+
+  .apos-layout__grid:not(.manage)[data-tablet-auto="true"] > .apos-layout__item {
+    grid-column: auto / span 1;
+    grid-row: auto / span 1;
+    order: var(--order, 0);
+  }
+
+  .apos-layout__grid:not(.manage)[data-tablet-auto="true"] > .apos-layout__item[data-tablet-full="true"] {
+    grid-column: 1 / span 2;
+  }
+
+  .apos-layout__grid:not(.manage)[data-tablet-auto="false"] {
+    --grid-rows: var(--tablet-rows, var(--grid-rows));
+  }
+
+  .apos-layout__grid:not(.manage)[data-tablet-auto="false"] > .apos-layout__item {
+    grid-column: var(--tablet-colstart, auto) / span var(--tablet-colspan, 1);
+    grid-row: var(--tablet-rowstart, auto) / span var(--tablet-rowspan, 1);
+    justify-self: var(--tablet-justify);
+    /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+    align-self: var(--tablet-align);
+    order: var(--tablet-order, var(--order, 0));
+  }
+
+  /* Hide items not visible on tablet */
+  .apos-layout__grid:not(.manage) > .apos-layout__item[data-visible-tablet="false"] {
+    display: none;
+  }
+}
+
+/* Mobile rules for admin interface */
+/* stylelint-disable-next-line media-feature-name-allowed-list */
+@media screen and (max-width: {$mobile}px) {
+  .apos-layout__grid:not(.manage) {
+    grid-template-columns: 1fr;
+
+    --grid-rows: auto;
+  }
+
+  .apos-layout__grid:not(.manage)[data-mobile-auto="true"] > .apos-layout__item {
+    grid-column: auto / span 1;
+    grid-row: auto / span 1;
+    order: var(--order, 0);
+  }
+
+  /* Manual mode: use configured columns and device vars */
+  .apos-layout__grid:not(.manage)[data-mobile-auto="false"] {
+    --grid-rows: var(--mobile-rows, var(--grid-rows));
+  }
+
+  .apos-layout__grid:not(.manage)[data-mobile-auto="false"] > .apos-layout__item {
+    grid-column: var(--mobile-colstart, auto) / span var(--mobile-colspan, 1);
+    grid-row: var(--mobile-rowstart, auto) / span var(--mobile-rowspan, 1);
+    justify-self: var(--mobile-justify);
+    /* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
+    align-self: var(--mobile-align);
+    order: var(--mobile-order, var(--order, 0));
+  }
+
+  /* Hide items not visible on mobile */
+  .apos-layout__grid:not(.manage) > .apos-layout__item[data-visible-mobile="false"] {
+    display: none;
+  }
+}