@gravity-ui/page-constructor 1.2.3-alpha.3 → 1.2.3-alpha.5

package/build/cjs/blocks/Header/Header.css

@@ -124,6 +124,16 @@ unpredictable css rules order in build */
   top: 16px;
   z-index: 11;
 }
+.pc-header-block__background-media {
+  height: 100%;
+}
+.pc-header-block__background-media > div {
+  height: 100%;
+  width: 100%;
+}
+.pc-header-block__background-media > div:not(.pc-header-block__video) {
+  position: absolute;
+}
 .pc-header-block__background, .pc-header-block__background.pc-header-block__background_media {
   position: absolute;
   top: 0;
@@ -142,9 +152,6 @@ unpredictable css rules order in build */
 .pc-header-block__background.pc-header-block__background_full-width-media > div, .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_full-width-media > div {
   max-width: none;
 }
-.pc-header-block__background.pc-header-block__background_full-width-media .pc-header-block__background-media, .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_full-width-media .pc-header-block__background-media {
-  height: 100%;
-}
 .pc-header-block__background.pc-header-block__background_full-width-media video, .pc-header-block__background.pc-header-block__background_media.pc-header-block__background_full-width-media video {
   height: 100%;
   width: 100%;

package/build/cjs/blocks/Header/Header.js

@@ -7,34 +7,37 @@ const utils_1 = require("../../utils");
 const components_1 = require("../../components");
 const grid_1 = require("../../grid");
 const utils_2 = require("./utils");
+const mobileContext_1 = require("../../context/mobileContext");
 const YFMWrapper_1 = (0, tslib_1.__importDefault)(require("../../components/YFMWrapper/YFMWrapper"));
 const HeaderBreadcrumbs_1 = (0, tslib_1.__importDefault)(require("../../components/HeaderBreadcrumbs/HeaderBreadcrumbs"));
 const ThemeValueContext_1 = require("../../context/theme/ThemeValueContext");
 const utils_3 = require("../../components/Media/Image/utils");
 const b = (0, utils_1.block)('header-block');
-const Background = ({ background }) => {
-    const { url, image, fullWidthMedia } = background;
+const Background = ({ background, isMobile }) => {
+    const { url, image, fullWidthMedia, video, color } = background;
     const imageObject = url ? (0, utils_3.getMediaImage)(url) : image;
-    return (react_1.default.createElement(components_1.BackgroundMedia, Object.assign({}, background, { image: imageObject, animated: false, parallax: false, mediaClassName: b('background-media'), className: b('background', { media: true, 'full-width-media': fullWidthMedia }) })));
+    const renderMedia = !isMobile || (typeof image === 'object' && 'mobile' in image);
+    return (react_1.default.createElement("div", { className: b('background', { media: true, 'full-width-media': fullWidthMedia }), style: { backgroundColor: color } }, renderMedia && (react_1.default.createElement(components_1.Media, Object.assign({}, background, { className: b('background-media'), imageClassName: b('image'), videoClassName: b('video'), isBackground: true, parallax: false, video: isMobile ? undefined : video, image: imageObject })))));
 };
 const FullWidthBackground = ({ background }) => (react_1.default.createElement("div", { className: b('background', { ['full-width']: true }), style: { backgroundColor: background === null || background === void 0 ? void 0 : background.color } }));
 const HeaderBlock = (props) => {
     const { title, overtitle, description, buttons, image, video, width = 'm', imageSize, offset = 'default', background, theme: textTheme = 'light', verticalOffset = 'm', className, breadcrumbs, status, children, } = props;
+    const isMobile = (0, react_1.useContext)(mobileContext_1.MobileContext);
     const { themeValue: theme } = (0, react_1.useContext)(ThemeValueContext_1.ThemeValueContext);
-    const hasMedia = Boolean(image || video);
+    const hasRightSideImage = Boolean(image || video);
     const curImageSize = imageSize || (0, utils_2.getImageSize)(width);
-    const titleSizes = hasMedia ? (0, utils_2.titleWithImageSizes)(curImageSize) : (0, utils_2.getTitleSizes)(width);
+    const titleSizes = hasRightSideImage ? (0, utils_2.titleWithImageSizes)(curImageSize) : (0, utils_2.getTitleSizes)(width);
     let curVerticalOffset = verticalOffset;
-    if (hasMedia && !verticalOffset) {
+    if (hasRightSideImage && !verticalOffset) {
         curVerticalOffset = 'm';
     }
     const backgroundThemed = background && (0, utils_1.getThemedValue)(background, theme);
     const imageThemed = image && (0, utils_1.getThemedValue)(image, theme);
     const videoThemed = video && (0, utils_1.getThemedValue)(video, theme);
-    const fullWidth = backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidth;
-    return (react_1.default.createElement("header", { className: b({ ['has-media']: hasMedia, ['full-width']: fullWidth }, className) },
+    const fullWidth = (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidth) || (backgroundThemed === null || backgroundThemed === void 0 ? void 0 : backgroundThemed.fullWidthMedia);
+    return (react_1.default.createElement("header", { className: b({ ['has-media']: hasRightSideImage, ['full-width']: fullWidth }, className) },
         backgroundThemed && fullWidth && react_1.default.createElement(FullWidthBackground, { background: backgroundThemed }),
-        backgroundThemed && react_1.default.createElement(Background, { background: backgroundThemed }),
+        backgroundThemed && react_1.default.createElement(Background, { background: backgroundThemed, isMobile: isMobile }),
         react_1.default.createElement(grid_1.Grid, { containerClass: b('container-fluid') },
             breadcrumbs && (react_1.default.createElement(grid_1.Row, { className: b('breadcrumbs') },
                 react_1.default.createElement(grid_1.Col, null,
@@ -59,7 +62,7 @@ const HeaderBlock = (props) => {
                                     buttons.map((button, index) => (react_1.default.createElement(components_1.RouterLink, { href: button.url, key: index },
                                         react_1.default.createElement(components_1.Button, Object.assign({ key: index, className: b('button'), size: "xl" }, button))))))),
                                 children))),
-                    hasMedia && (react_1.default.createElement(components_1.Media, { className: b('media', { [curImageSize]: true }), videoClassName: b('video'), imageClassName: b('image'), video: videoThemed, image: imageThemed })))))));
+                    hasRightSideImage && (react_1.default.createElement(components_1.Media, { className: b('media', { [curImageSize]: true }), videoClassName: b('video'), imageClassName: b('image'), video: videoThemed, image: imageThemed })))))));
 };
 exports.HeaderBlock = HeaderBlock;
 exports.default = exports.HeaderBlock;