@gravity-ui/page-constructor 1.16.0 → 1.16.1-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/build/cjs/components/FullscreenMedia/FullScreenMedia.css +2 -2
  3. package/build/cjs/components/OverflowScroller/OverflowScroller.css +14 -5
  4. package/build/cjs/components/OverflowScroller/OverflowScroller.d.ts +1 -1
  5. package/build/cjs/components/OverflowScroller/OverflowScroller.js +13 -5
  6. package/build/cjs/navigation/components/Header/Header.css +1 -2
  7. package/build/esm/components/FullscreenMedia/FullScreenMedia.css +2 -2
  8. package/build/esm/components/OverflowScroller/OverflowScroller.css +14 -5
  9. package/build/esm/components/OverflowScroller/OverflowScroller.d.ts +1 -1
  10. package/build/esm/components/OverflowScroller/OverflowScroller.js +13 -5
  11. package/build/esm/navigation/components/Header/Header.css +1 -2
  12. package/package.json +4 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # Changelog
2
2
 
3
+ ## [1.16.1](https://github.com/gravity-ui/page-constructor/compare/v1.16.0...v1.16.1) (2023-02-14)
4
+
5
+
6
+ ### Bug Fixes
7
+
8
+ * youtube dimensions ratio for large screens ([#151](https://github.com/gravity-ui/page-constructor/issues/151)) ([5ee3c9c](https://github.com/gravity-ui/page-constructor/commit/5ee3c9cabe641bd437a02d137528424df7fd2c5a))
9
+
3
10
  ## [1.16.0](https://github.com/gravity-ui/page-constructor/compare/v1.15.4...v1.16.0) (2023-02-14)
4
11
 
5
12
 
package/build/cjs/components/FullscreenMedia/FullScreenMedia.css CHANGED
@@ -25,8 +25,8 @@ unpredictable css rules order in build */
25
25
  border-radius: var(--pc-border-radius);
26
26
  }
27
27
  .pc-full-screen-media__modal-media_type_youtube {
28
- width: 70vw;
29
- height: calc(70vw * 9 / 16);
28
+ width: min(65vw, 1232px);
29
+ height: calc(min(65vw, 1232px) * 9 / 16);
30
30
  }
31
31
  .pc-full-screen-media__modal .yc-modal__content, .pc-full-screen-media__modal-image {
32
32
  border-radius: var(--pc-border-radius);
package/build/cjs/components/OverflowScroller/OverflowScroller.css CHANGED
@@ -2,11 +2,21 @@
2
2
  position: relative;
3
3
  overflow-x: hidden;
4
4
  }
5
+ .pc-overflow-scroller__container {
6
+ width: 100%;
7
+ position: relative;
8
+ }
9
+ .pc-overflow-scroller__container_padding-left {
10
+ padding-left: 24px;
11
+ }
12
+ .pc-overflow-scroller__container_padding-right {
13
+ padding-right: 24px;
14
+ }
5
15
  .pc-overflow-scroller__wrapper {
6
16
  position: relative;
7
- transition: left 0.3s;
17
+ transition: left 0.6s;
8
18
  }
9
- .pc-overflow-scroller__scroller {
19
+ .pc-overflow-scroller__arrow {
10
20
  position: absolute;
11
21
  z-index: 10;
12
22
  top: 0;
@@ -17,12 +27,11 @@
17
27
  height: calc(100% - 1px);
18
28
  cursor: pointer;
19
29
  color: var(--yc-color-text-secondary);
20
- background: linear-gradient(to left, var(--yc-color-base-background) 70%, var(--pc-transparent) 100%) no-repeat;
21
30
  }
22
- .pc-overflow-scroller__scroller_type_left {
31
+ .pc-overflow-scroller__arrow_type_left {
23
32
  left: 0;
24
33
  transform: rotate(180deg);
25
34
  }
26
- .pc-overflow-scroller__scroller_type_right {
35
+ .pc-overflow-scroller__arrow_type_right {
27
36
  right: 0;
28
37
  }
package/build/cjs/components/OverflowScroller/OverflowScroller.d.ts CHANGED
@@ -11,7 +11,7 @@ export interface OverflowScrollerState {
11
11
  }
12
12
  export default class OverflowScroller extends React.Component<PropsWithChildren<OverflowScrollerProps>, OverflowScrollerState> {
13
13
  state: {
14
- arrows: never[];
14
+ arrows: Arrow[];
15
15
  scrollValue: number;
16
16
  };
17
17
  containerRef: React.RefObject<HTMLDivElement>;
package/build/cjs/components/OverflowScroller/OverflowScroller.js CHANGED
@@ -7,6 +7,7 @@ const utils_1 = require("../../utils");
7
7
  const __1 = require("..");
8
8
  const b = (0, utils_1.block)('overflow-scroller');
9
9
  const TRANSITION_TIME = 300;
10
+ const PADDING_SIZE = 24;
10
11
  class OverflowScroller extends react_1.default.Component {
11
12
  constructor() {
12
13
  super(...arguments);
@@ -30,7 +31,7 @@ class OverflowScroller extends react_1.default.Component {
30
31
  }
31
32
  }, 100);
32
33
  this.handleScrollClick = (e, arrow) => {
33
- const { scrollValue } = this.state;
34
+ const { scrollValue, arrows } = this.state;
34
35
  const { onScrollStart } = this.props;
35
36
  if (this.containerRef &&
36
37
  this.containerRef.current &&
@@ -39,8 +40,9 @@ class OverflowScroller extends react_1.default.Component {
39
40
  const containerWidth = this.containerRef.current.offsetWidth;
40
41
  const wrapperWidth = this.wrapperRef.current.offsetWidth;
41
42
  const hiddenWidth = arrow === 'right' ? wrapperWidth - (containerWidth + scrollValue) : scrollValue;
43
+ const padding = arrows.length > 1 && hiddenWidth + PADDING_SIZE > containerWidth ? PADDING_SIZE : 0;
42
44
  const delta = containerWidth > hiddenWidth ? hiddenWidth : containerWidth;
43
- const newScrollValue = arrow === 'right' ? scrollValue + delta : scrollValue - delta;
45
+ const newScrollValue = arrow === 'right' ? scrollValue + delta + padding : scrollValue - delta - padding;
44
46
  let newArrows = ['left', 'right'];
45
47
  if (newScrollValue + containerWidth >= wrapperWidth) {
46
48
  newArrows = ['left'];
@@ -73,9 +75,15 @@ class OverflowScroller extends react_1.default.Component {
73
75
  const { className, children } = this.props;
74
76
  const { arrows, scrollValue } = this.state;
75
77
  const wrapperStyle = arrows.length ? { left: -scrollValue } : { left: 0 };
76
- return (react_1.default.createElement("div", { className: b(null, className), ref: this.containerRef },
77
- react_1.default.createElement("div", { className: b('wrapper'), style: wrapperStyle, ref: this.wrapperRef }, children),
78
- arrows.map((direction) => (react_1.default.createElement("div", { key: direction, className: b('scroller', { type: direction }), onClick: (e) => this.handleScrollClick(e, direction) },
78
+ const paddingLeft = arrows.includes('left');
79
+ const paddingRight = arrows.includes('right');
80
+ return (react_1.default.createElement("div", { className: b('container', {
81
+ 'padding-left': paddingLeft,
82
+ 'padding-right': paddingRight,
83
+ }) },
84
+ react_1.default.createElement("div", { className: b(null, className), ref: this.containerRef },
85
+ react_1.default.createElement("div", { className: b('wrapper'), style: wrapperStyle, ref: this.wrapperRef }, children)),
86
+ arrows.map((direction) => (react_1.default.createElement("div", { key: direction, className: b('arrow', { type: direction }), onClick: (e) => this.handleScrollClick(e, direction) },
79
87
  react_1.default.createElement(__1.ToggleArrow, { size: 18, type: 'horizontal', iconType: "navigation" }))))));
80
88
  }
81
89
  }
package/build/cjs/navigation/components/Header/Header.css CHANGED
@@ -29,7 +29,6 @@ unpredictable css rules order in build */
29
29
  }
30
30
  .pc-header__navigation.pc-header__navigation {
31
31
  position: relative;
32
- margin-right: 20px;
33
32
  flex: 1 0 0;
34
33
  justify-content: flex-start;
35
34
  }
@@ -49,7 +48,7 @@ unpredictable css rules order in build */
49
48
  flex: 1 0 0;
50
49
  justify-content: space-between;
51
50
  align-items: center;
52
- margin-right: 20px;
51
+ margin-right: 32px;
53
52
  }
54
53
  .pc-header__buttons {
55
54
  display: flex;
package/build/esm/components/FullscreenMedia/FullScreenMedia.css CHANGED
@@ -25,8 +25,8 @@ unpredictable css rules order in build */
25
25
  border-radius: var(--pc-border-radius);
26
26
  }
27
27
  .pc-full-screen-media__modal-media_type_youtube {
28
- width: 70vw;
29
- height: calc(70vw * 9 / 16);
28
+ width: min(65vw, 1232px);
29
+ height: calc(min(65vw, 1232px) * 9 / 16);
30
30
  }
31
31
  .pc-full-screen-media__modal .yc-modal__content, .pc-full-screen-media__modal-image {
32
32
  border-radius: var(--pc-border-radius);
package/build/esm/components/OverflowScroller/OverflowScroller.css CHANGED
@@ -2,11 +2,21 @@
2
2
  position: relative;
3
3
  overflow-x: hidden;
4
4
  }
5
+ .pc-overflow-scroller__container {
6
+ width: 100%;
7
+ position: relative;
8
+ }
9
+ .pc-overflow-scroller__container_padding-left {
10
+ padding-left: 24px;
11
+ }
12
+ .pc-overflow-scroller__container_padding-right {
13
+ padding-right: 24px;
14
+ }
5
15
  .pc-overflow-scroller__wrapper {
6
16
  position: relative;
7
- transition: left 0.3s;
17
+ transition: left 0.6s;
8
18
  }
9
- .pc-overflow-scroller__scroller {
19
+ .pc-overflow-scroller__arrow {
10
20
  position: absolute;
11
21
  z-index: 10;
12
22
  top: 0;
@@ -17,12 +27,11 @@
17
27
  height: calc(100% - 1px);
18
28
  cursor: pointer;
19
29
  color: var(--yc-color-text-secondary);
20
- background: linear-gradient(to left, var(--yc-color-base-background) 70%, var(--pc-transparent) 100%) no-repeat;
21
30
  }
22
- .pc-overflow-scroller__scroller_type_left {
31
+ .pc-overflow-scroller__arrow_type_left {
23
32
  left: 0;
24
33
  transform: rotate(180deg);
25
34
  }
26
- .pc-overflow-scroller__scroller_type_right {
35
+ .pc-overflow-scroller__arrow_type_right {
27
36
  right: 0;
28
37
  }
package/build/esm/components/OverflowScroller/OverflowScroller.d.ts CHANGED
@@ -12,7 +12,7 @@ export interface OverflowScrollerState {
12
12
  }
13
13
  export default class OverflowScroller extends React.Component<PropsWithChildren<OverflowScrollerProps>, OverflowScrollerState> {
14
14
  state: {
15
- arrows: never[];
15
+ arrows: Arrow[];
16
16
  scrollValue: number;
17
17
  };
18
18
  containerRef: React.RefObject<HTMLDivElement>;
package/build/esm/components/OverflowScroller/OverflowScroller.js CHANGED
@@ -5,6 +5,7 @@ import { ToggleArrow } from '..';
5
5
  import './OverflowScroller.css';
6
6
  const b = block('overflow-scroller');
7
7
  const TRANSITION_TIME = 300;
8
+ const PADDING_SIZE = 24;
8
9
  export default class OverflowScroller extends React.Component {
9
10
  constructor() {
10
11
  super(...arguments);
@@ -28,7 +29,7 @@ export default class OverflowScroller extends React.Component {
28
29
  }
29
30
  }, 100);
30
31
  this.handleScrollClick = (e, arrow) => {
31
- const { scrollValue } = this.state;
32
+ const { scrollValue, arrows } = this.state;
32
33
  const { onScrollStart } = this.props;
33
34
  if (this.containerRef &&
34
35
  this.containerRef.current &&
@@ -37,8 +38,9 @@ export default class OverflowScroller extends React.Component {
37
38
  const containerWidth = this.containerRef.current.offsetWidth;
38
39
  const wrapperWidth = this.wrapperRef.current.offsetWidth;
39
40
  const hiddenWidth = arrow === 'right' ? wrapperWidth - (containerWidth + scrollValue) : scrollValue;
41
+ const padding = arrows.length > 1 && hiddenWidth + PADDING_SIZE > containerWidth ? PADDING_SIZE : 0;
40
42
  const delta = containerWidth > hiddenWidth ? hiddenWidth : containerWidth;
41
- const newScrollValue = arrow === 'right' ? scrollValue + delta : scrollValue - delta;
43
+ const newScrollValue = arrow === 'right' ? scrollValue + delta + padding : scrollValue - delta - padding;
42
44
  let newArrows = ['left', 'right'];
43
45
  if (newScrollValue + containerWidth >= wrapperWidth) {
44
46
  newArrows = ['left'];
@@ -71,9 +73,15 @@ export default class OverflowScroller extends React.Component {
71
73
  const { className, children } = this.props;
72
74
  const { arrows, scrollValue } = this.state;
73
75
  const wrapperStyle = arrows.length ? { left: -scrollValue } : { left: 0 };
74
- return (React.createElement("div", { className: b(null, className), ref: this.containerRef },
75
- React.createElement("div", { className: b('wrapper'), style: wrapperStyle, ref: this.wrapperRef }, children),
76
- arrows.map((direction) => (React.createElement("div", { key: direction, className: b('scroller', { type: direction }), onClick: (e) => this.handleScrollClick(e, direction) },
76
+ const paddingLeft = arrows.includes('left');
77
+ const paddingRight = arrows.includes('right');
78
+ return (React.createElement("div", { className: b('container', {
79
+ 'padding-left': paddingLeft,
80
+ 'padding-right': paddingRight,
81
+ }) },
82
+ React.createElement("div", { className: b(null, className), ref: this.containerRef },
83
+ React.createElement("div", { className: b('wrapper'), style: wrapperStyle, ref: this.wrapperRef }, children)),
84
+ arrows.map((direction) => (React.createElement("div", { key: direction, className: b('arrow', { type: direction }), onClick: (e) => this.handleScrollClick(e, direction) },
77
85
  React.createElement(ToggleArrow, { size: 18, type: 'horizontal', iconType: "navigation" }))))));
78
86
  }
79
87
  }
package/build/esm/navigation/components/Header/Header.css CHANGED
@@ -29,7 +29,6 @@ unpredictable css rules order in build */
29
29
  }
30
30
  .pc-header__navigation.pc-header__navigation {
31
31
  position: relative;
32
- margin-right: 20px;
33
32
  flex: 1 0 0;
34
33
  justify-content: flex-start;
35
34
  }
@@ -49,7 +48,7 @@ unpredictable css rules order in build */
49
48
  flex: 1 0 0;
50
49
  justify-content: space-between;
51
50
  align-items: center;
52
- margin-right: 20px;
51
+ margin-right: 32px;
53
52
  }
54
53
  .pc-header__buttons {
55
54
  display: flex;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/page-constructor",
3
- "version": "1.16.0",
3
+ "version": "1.16.1-alpha.0",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -135,5 +135,8 @@
135
135
  "*.{json,yaml,yml,md}": [
136
136
  "prettier --write"
137
137
  ]
138
+ },
139
+ "publishConfig": {
140
+ "tag": "alpha"
138
141
  }
139
142
  }