@micromag/screen-ranking 0.3.359 → 0.3.361

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 (4) hide show
  1. package/assets/css/styles.css +1 -1
  2. package/es/index.js +6 -6
  3. package/lib/index.js +6 -6
  4. package/package.json +13 -13
package/assets/css/styles.css CHANGED
@@ -1 +1 @@
1
- .micromag-screen-ranking-container .micromag-screen-ranking-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-ranking-container .micromag-screen-ranking-empty{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-ranking-container{position:relative}.micromag-screen-ranking-container .micromag-screen-ranking-background{z-index:0}.micromag-screen-ranking-container .micromag-screen-ranking-content{z-index:1}.micromag-screen-ranking-container .micromag-screen-ranking-empty{height:50px;margin-right:10px}.micromag-screen-ranking-container .micromag-screen-ranking-item{padding:10px 0;position:relative}.micromag-screen-ranking-container .micromag-screen-ranking-rankText{font-size:48px}.micromag-screen-ranking-container .micromag-screen-ranking-description,.micromag-screen-ranking-container .micromag-screen-ranking-title{padding:8px 0}.micromag-screen-ranking-container .micromag-screen-ranking-callToAction{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-ranking-container .micromag-screen-ranking-callToAction a{padding:0}.micromag-screen-ranking-container .micromag-screen-ranking-callToAction.micromag-screen-ranking-disabled{opacity:0;pointer-events:none}.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-layout{display:table;width:100%}.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-item{display:table-row;padding:0}.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-label,.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-rank{display:table-cell;padding:10px 0;vertical-align:top}.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-rank{padding-right:20px}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-rank{color:hsla(0,0%,100%,.6);font-size:16px;mix-blend-mode:difference;text-align:left}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-scroll{padding:5px}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-description,.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-title{-ms-flex-pack:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center;padding:0}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-item{padding:1px 0}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder.micromag-screen-ranking-sideLayout .micromag-screen-ranking-rank{padding-right:4px;padding-top:8px;width:24px}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder.micromag-screen-ranking-sideLayout .micromag-screen-ranking-label{padding:5px 0}
1
+ .micromag-screen-ranking-container .micromag-screen-ranking-background{height:100%;left:0;position:absolute;top:0;width:100%}.micromag-screen-ranking-container .micromag-screen-ranking-empty{border:2px dashed #343434;color:#343434;margin:5px auto}.micromag-screen-ranking-container{position:relative}.micromag-screen-ranking-container .micromag-screen-ranking-background{z-index:0}.micromag-screen-ranking-container .micromag-screen-ranking-content{z-index:1}.micromag-screen-ranking-container .micromag-screen-ranking-empty{height:50px;margin-right:10px}.micromag-screen-ranking-container .micromag-screen-ranking-item{padding:10px 0;position:relative}.micromag-screen-ranking-container .micromag-screen-ranking-item:first-child{padding-top:0}.micromag-screen-ranking-container .micromag-screen-ranking-rankText{font-size:48px}.micromag-screen-ranking-container .micromag-screen-ranking-description,.micromag-screen-ranking-container .micromag-screen-ranking-title{padding:8px 0}.micromag-screen-ranking-container .micromag-screen-ranking-callToAction{bottom:0;left:0;position:absolute;-webkit-transition:opacity .2s ease-out;-o-transition:opacity .2s ease-out;transition:opacity .2s ease-out;width:100%}.micromag-screen-ranking-container .micromag-screen-ranking-callToAction a{padding:0}.micromag-screen-ranking-container .micromag-screen-ranking-callToAction.micromag-screen-ranking-disabled{opacity:0;pointer-events:none}.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-layout{display:table;width:100%}.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-item{display:table-row;padding:0}.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-label,.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-rank{display:table-cell;padding:10px 0;vertical-align:top}.micromag-screen-ranking-container.micromag-screen-ranking-sideLayout .micromag-screen-ranking-rank{padding-right:20px}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-rank{color:hsla(0,0%,100%,.6);font-size:16px;mix-blend-mode:difference;text-align:left}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-scroll{padding:5px}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-description,.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-title{-ms-flex-pack:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;justify-content:center;padding:0}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder .micromag-screen-ranking-item{padding:1px 0}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder.micromag-screen-ranking-sideLayout .micromag-screen-ranking-rank{padding-right:4px;padding-top:8px;width:24px}.micromag-screen-ranking-container.micromag-screen-ranking-isPlaceholder.micromag-screen-ranking-sideLayout .micromag-screen-ranking-label{padding:5px 0}
package/es/index.js CHANGED
@@ -182,9 +182,9 @@ var RankingScreen = function RankingScreen(_ref) {
182
182
  scrolledBottom = _useState2[0],
183
183
  setScrolledBottom = _useState2[1];
184
184
  var _useDimensionObserver = useDimensionObserver(),
185
- callToActionRef = _useDimensionObserver.ref,
185
+ footerRef = _useDimensionObserver.ref,
186
186
  _useDimensionObserver2 = _useDimensionObserver.height,
187
- callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
187
+ foterHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
188
188
  var onScrolledBottom = useCallback(function (_ref3) {
189
189
  var initial = _ref3.initial;
190
190
  if (initial) {
@@ -210,7 +210,7 @@ var RankingScreen = function RankingScreen(_ref) {
210
210
  onScrolledNotBottom: onScrolledNotBottom
211
211
  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React.createElement("div", {
212
212
  style: {
213
- paddingTop: spacing,
213
+ paddingTop: spacing / 2 + viewerTopHeight,
214
214
  paddingLeft: spacing,
215
215
  paddingRight: spacing
216
216
  }
@@ -218,11 +218,11 @@ var RankingScreen = function RankingScreen(_ref) {
218
218
  className: styles.layout,
219
219
  style: !isPlaceholder ? {
220
220
  padding: spacing,
221
- paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
222
- paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
221
+ paddingTop: !isPlaceholder && hasHeader ? spacing : (!isPreview ? viewerTopHeight : 0) + spacing,
222
+ paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (foterHeight || spacing)
223
223
  } : null
224
224
  }, elements)), !isPlaceholder && hasFooter ? /*#__PURE__*/React.createElement("div", {
225
- ref: callToActionRef,
225
+ ref: footerRef,
226
226
  className: classNames([styles.callToAction, _defineProperty({}, styles.disabled, !scrolledBottom)]),
227
227
  style: {
228
228
  transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
package/lib/index.js CHANGED
@@ -204,9 +204,9 @@ var RankingScreen = function RankingScreen(_ref) {
204
204
  scrolledBottom = _useState2[0],
205
205
  setScrolledBottom = _useState2[1];
206
206
  var _useDimensionObserver = hooks.useDimensionObserver(),
207
- callToActionRef = _useDimensionObserver.ref,
207
+ footerRef = _useDimensionObserver.ref,
208
208
  _useDimensionObserver2 = _useDimensionObserver.height,
209
- callToActionHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
209
+ foterHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
210
210
  var onScrolledBottom = React.useCallback(function (_ref3) {
211
211
  var initial = _ref3.initial;
212
212
  if (initial) {
@@ -232,7 +232,7 @@ var RankingScreen = function RankingScreen(_ref) {
232
232
  onScrolledNotBottom: onScrolledNotBottom
233
233
  }, !isPlaceholder && hasHeader ? /*#__PURE__*/React__default["default"].createElement("div", {
234
234
  style: {
235
- paddingTop: spacing,
235
+ paddingTop: spacing / 2 + viewerTopHeight,
236
236
  paddingLeft: spacing,
237
237
  paddingRight: spacing
238
238
  }
@@ -240,11 +240,11 @@ var RankingScreen = function RankingScreen(_ref) {
240
240
  className: styles.layout,
241
241
  style: !isPlaceholder ? {
242
242
  padding: spacing,
243
- paddingTop: (!isPreview ? viewerTopHeight : 0) + spacing,
244
- paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (callToActionHeight || spacing)
243
+ paddingTop: !isPlaceholder && hasHeader ? spacing : (!isPreview ? viewerTopHeight : 0) + spacing,
244
+ paddingBottom: (current && !isPreview ? viewerBottomHeight : 0) + (foterHeight || spacing)
245
245
  } : null
246
246
  }, elements)), !isPlaceholder && hasFooter ? /*#__PURE__*/React__default["default"].createElement("div", {
247
- ref: callToActionRef,
247
+ ref: footerRef,
248
248
  className: classNames__default["default"]([styles.callToAction, _defineProperty__default["default"]({}, styles.disabled, !scrolledBottom)]),
249
249
  style: {
250
250
  transform: current && !isPreview ? "translate(0, -".concat(viewerBottomHeight, "px)") : null,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@micromag/screen-ranking",
3
- "version": "0.3.359",
3
+ "version": "0.3.361",
4
4
  "description": "",
5
5
  "keywords": [
6
6
  "javascript"
@@ -49,17 +49,17 @@
49
49
  },
50
50
  "dependencies": {
51
51
  "@babel/runtime": "^7.13.10",
52
- "@micromag/core": "^0.3.359",
53
- "@micromag/data": "^0.3.359",
54
- "@micromag/element-background": "^0.3.359",
55
- "@micromag/element-container": "^0.3.359",
56
- "@micromag/element-footer": "^0.3.359",
57
- "@micromag/element-header": "^0.3.359",
58
- "@micromag/element-heading": "^0.3.359",
59
- "@micromag/element-layout": "^0.3.359",
60
- "@micromag/element-scroll": "^0.3.359",
61
- "@micromag/element-text": "^0.3.359",
62
- "@micromag/transforms": "^0.3.359",
52
+ "@micromag/core": "^0.3.360",
53
+ "@micromag/data": "^0.3.360",
54
+ "@micromag/element-background": "^0.3.360",
55
+ "@micromag/element-container": "^0.3.360",
56
+ "@micromag/element-footer": "^0.3.360",
57
+ "@micromag/element-header": "^0.3.360",
58
+ "@micromag/element-heading": "^0.3.360",
59
+ "@micromag/element-layout": "^0.3.360",
60
+ "@micromag/element-scroll": "^0.3.360",
61
+ "@micromag/element-text": "^0.3.360",
62
+ "@micromag/transforms": "^0.3.360",
63
63
  "classnames": "^2.2.6",
64
64
  "lodash": "^4.17.21",
65
65
  "prop-types": "^15.7.2",
@@ -69,5 +69,5 @@
69
69
  "publishConfig": {
70
70
  "access": "public"
71
71
  },
72
- "gitHead": "22eba0d01f18f8971e0405bbb41081b5e2ae80ee"
72
+ "gitHead": "846c75443d002315fbf6ec9b6e6292f7f3dfbd06"
73
73
  }