@twreporter/react-article-components - npm Package Compare versions

Comparing version 1.0.24-beta.1 to 1.0.24-beta.2

CHANGELOG.md

@@ -8,2 +8,3 @@ # CHANGELOG
 - body:embed: style fine tune
+- slideshow: adjust slide width calculation
 
@@ -10,0 +11,0 @@ ## RELEASE

lib/components/body/slideshow/index.js

@@ -52,2 +52,32 @@ "use strict";
 
+function _templateObject36() {
+  var data = _taggedTemplateLiteral(["\n    width: ", "px;\n  "]);
+
+  _templateObject36 = function _templateObject36() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject35() {
+  var data = _taggedTemplateLiteral(["\n    width: ", "px;\n  "]);
+
+  _templateObject35 = function _templateObject35() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject34() {
+  var data = _taggedTemplateLiteral(["\n    width: 100%;\n  "]);
+
+  _templateObject34 = function _templateObject34() {
+    return data;
+  };
+
+  return data;
+}
+
 function _templateObject33() {
@@ -74,3 +104,3 @@ var data = _taggedTemplateLiteral(["\n    width: ", "px;\n  "]);
 function _templateObject31() {
-  var data = _taggedTemplateLiteral(["\n    width: 100%;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    width: ", "%;\n  "]);
 
@@ -85,3 +115,3 @@ _templateObject31 = function _templateObject31() {
 function _templateObject30() {
-  var data = _taggedTemplateLiteral(["\n    width: ", "px;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    width: ", "%;\n  "]);
 
@@ -106,3 +136,3 @@ _templateObject30 = function _templateObject30() {
 function _templateObject28() {
-  var data = _taggedTemplateLiteral(["\n    width: ", "%;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    width: ", "px;\n  "]);
 
@@ -127,3 +157,3 @@ _templateObject28 = function _templateObject28() {
 function _templateObject26() {
-  var data = _taggedTemplateLiteral(["\n    width: ", "px;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    width: ", "%;\n  "]);
 
@@ -138,3 +168,3 @@ _templateObject26 = function _templateObject26() {
 function _templateObject25() {
-  var data = _taggedTemplateLiteral(["\n    width: ", "px;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    flex-basis: ", "px;\n    padding-right: ", "px;\n  "]);
 
@@ -149,3 +179,3 @@ _templateObject25 = function _templateObject25() {
 function _templateObject24() {
-  var data = _taggedTemplateLiteral(["\n    width: ", "%;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    flex-basis: ", "px;\n    padding-right: ", "px;\n  "]);
 
@@ -160,3 +190,3 @@ _templateObject24 = function _templateObject24() {
 function _templateObject23() {
-  var data = _taggedTemplateLiteral(["\n    width: ", "%;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    flex-basis: calc(", "/", "*100%);\n    padding-right: calc(", "/", "*100%);\n  "]);
 
@@ -171,3 +201,3 @@ _templateObject23 = function _templateObject23() {
 function _templateObject22() {
-  var data = _taggedTemplateLiteral(["\n    flex-basis: ", "px;\n    padding-right: ", "px;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    flex-basis: calc(", "/", "*100%);\n    padding-right: calc(", "/", "*100%);\n  "]);
 
@@ -182,3 +212,3 @@ _templateObject22 = function _templateObject22() {
 function _templateObject21() {
-  var data = _taggedTemplateLiteral(["\n    flex-basis: ", "px;\n    padding-right: ", "px;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    transform: translateX(", "px);\n  "]);
 
@@ -193,3 +223,3 @@ _templateObject21 = function _templateObject21() {
 function _templateObject20() {
-  var data = _taggedTemplateLiteral(["\n    flex-basis: ", "%;\n    padding-right: ", "%;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    transform: translateX(", "px);\n  "]);
 
@@ -204,3 +234,3 @@ _templateObject20 = function _templateObject20() {
 function _templateObject19() {
-  var data = _taggedTemplateLiteral(["\n    flex-basis: ", "%;\n    padding-right: ", "%;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    transform: translateX(", "%);\n  "]);
 
@@ -215,3 +245,3 @@ _templateObject19 = function _templateObject19() {
 function _templateObject18() {
-  var data = _taggedTemplateLiteral(["\n    transform: translateX(", "px);\n  "]);
+  var data = _taggedTemplateLiteral(["\n    transform: translateX(", "%);\n  "]);
 
@@ -226,3 +256,3 @@ _templateObject18 = function _templateObject18() {
 function _templateObject17() {
-  var data = _taggedTemplateLiteral(["\n    transform: translateX(", "px);\n  "]);
+  var data = _taggedTemplateLiteral(["\n    padding-top: 30px;\n\n    /* overwrite Multimedia.Caption styles */\n    float: none;\n  "]);
 
@@ -237,3 +267,3 @@ _templateObject17 = function _templateObject17() {
 function _templateObject16() {
-  var data = _taggedTemplateLiteral(["\n    transform: translateX(", "%);\n  "]);
+  var data = _taggedTemplateLiteral(["\n    width: calc(180/355*100%);\n  "]);
 
@@ -248,3 +278,3 @@ _templateObject16 = function _templateObject16() {
 function _templateObject15() {
-  var data = _taggedTemplateLiteral(["\n    transform: translateX(", "%);\n  "]);
+  var data = _taggedTemplateLiteral(["\n    order: 4;\n    padding-top: 15px;\n  "]);
 
@@ -259,3 +289,3 @@ _templateObject15 = function _templateObject15() {
 function _templateObject14() {
-  var data = _taggedTemplateLiteral(["\n    padding-top: 30px;\n\n    /* overwrite Multimedia.Caption styles */\n    float: none;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    top: 71px;\n    left: 50px;\n  "]);
 
@@ -270,3 +300,3 @@ _templateObject14 = function _templateObject14() {
 function _templateObject13() {
-  var data = _taggedTemplateLiteral(["\n    width: calc(180/355*100%);\n  "]);
+  var data = _taggedTemplateLiteral(["\n    top: 35px;\n    left: 10px;\n  "]);
 
@@ -281,3 +311,3 @@ _templateObject13 = function _templateObject13() {
 function _templateObject12() {
-  var data = _taggedTemplateLiteral(["\n    order: 4;\n    padding-top: 15px;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    margin-right: -18px;\n    width: 110px;\n    height: 110px;\n\n    &::after {\n      width: 89px;\n      top: 93px;\n      left: 10px;\n    }\n  "]);
 
@@ -292,3 +322,3 @@ _templateObject12 = function _templateObject12() {
 function _templateObject11() {
-  var data = _taggedTemplateLiteral(["\n    top: 71px;\n    left: 50px;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    margin-top: 6px;\n\n    /* align right */\n    margin-left: auto;\n  "]);
 
@@ -303,3 +333,3 @@ _templateObject11 = function _templateObject11() {
 function _templateObject10() {
-  var data = _taggedTemplateLiteral(["\n    top: 35px;\n    left: 10px;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    order: 1;\n\n    /* align right */\n    margin-left: auto;\n    /* 10px is the border-right width of body */\n    margin-right: 10px;\n  "]);
 
@@ -314,3 +344,3 @@ _templateObject10 = function _templateObject10() {
 function _templateObject9() {
-  var data = _taggedTemplateLiteral(["\n    margin-right: -18px;\n    width: 110px;\n    height: 110px;\n\n    &::after {\n      width: 89px;\n      top: 93px;\n      left: 10px;\n    }\n  "]);
+  var data = _taggedTemplateLiteral(["\n    width: 83px;\n    height: 83px;\n\n    > svg {\n      width: 31px;\n    }\n  "]);
 
@@ -325,3 +355,3 @@ _templateObject9 = function _templateObject9() {
 function _templateObject8() {
-  var data = _taggedTemplateLiteral(["\n    margin-top: 6px;\n\n    /* align right */\n    margin-left: auto;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    margin-left: 47px;\n  "]);
 
@@ -336,3 +366,3 @@ _templateObject8 = function _templateObject8() {
 function _templateObject7() {
-  var data = _taggedTemplateLiteral(["\n    order: 1;\n\n    /* align right */\n    margin-left: auto;\n    /* 10px is the border-right width of body */\n    margin-right: 10px;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    margin-left: 25px;\n  "]);
 
@@ -347,3 +377,3 @@ _templateObject7 = function _templateObject7() {
 function _templateObject6() {
-  var data = _taggedTemplateLiteral(["\n    width: 83px;\n    height: 83px;\n\n    > svg {\n      width: 31px;\n    }\n  "]);
+  var data = _taggedTemplateLiteral(["\n    order: 3;\n  "]);
 
@@ -358,3 +388,3 @@ _templateObject6 = function _templateObject6() {
 function _templateObject5() {
-  var data = _taggedTemplateLiteral(["\n    margin-left: 47px;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    padding-bottom: calc(", "/", "*100%);\n  "]);
 
@@ -369,3 +399,3 @@ _templateObject5 = function _templateObject5() {
 function _templateObject4() {
-  var data = _taggedTemplateLiteral(["\n    margin-left: 25px;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    padding-bottom: calc(", "/", "*100%);\n  "]);
 
@@ -380,3 +410,3 @@ _templateObject4 = function _templateObject4() {
 function _templateObject3() {
-  var data = _taggedTemplateLiteral(["\n    order: 3;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    padding-bottom: calc(", "/", "*100%);\n  "]);
 
@@ -391,3 +421,3 @@ _templateObject3 = function _templateObject3() {
 function _templateObject2() {
-  var data = _taggedTemplateLiteral(["\n    padding-bottom: ", "%;\n  "]);
+  var data = _taggedTemplateLiteral(["\n    padding-bottom: calc(", "/", "*100%);\n  "]);
 
@@ -540,3 +570,3 @@ _templateObject2 = function _templateObject2() {
   componentId: "sc-1skir21-0"
-})(["flex-shrink:0;flex-basis:100%;overflow:hidden;position:relative;padding-bottom:", "%;", " ", ""], mockup.desktop.slide.height / mockup.desktop.container.width * 100, _mediaQuery["default"].tabletAndBelow(_templateObject()), _mediaQuery["default"].hdOnly(_templateObject2(), mockup.hd.slide.height / mockup.hd.container.width * 100));
+})(["flex-shrink:0;flex-basis:100%;overflow:hidden;position:relative;", " ", " ", " ", " ", ""], _mediaQuery["default"].tabletAndBelow(_templateObject()), _mediaQuery["default"].mobileOnly(_templateObject2(), mockup.mobile.slide.height, mockup.mobile.container.width), _mediaQuery["default"].tabletOnly(_templateObject3(), mockup.tablet.slide.height, mockup.tablet.container.width), _mediaQuery["default"].desktopOnly(_templateObject4(), mockup.desktop.slide.height, mockup.desktop.container.width), _mediaQuery["default"].hdOnly(_templateObject5(), mockup.hd.slide.height, mockup.hd.container.width));
 
@@ -548,3 +578,3 @@ var PrevNextSection =
   componentId: "sc-1skir21-1"
-})(["margin-top:20px;", " ", " ", ""], _mediaQuery["default"].tabletAndBelow(_templateObject3()), _mediaQuery["default"].mobileOnly(_templateObject4()), _mediaQuery["default"].tabletOnly(_templateObject5()));
+})(["margin-top:20px;", " ", " ", ""], _mediaQuery["default"].tabletAndBelow(_templateObject6()), _mediaQuery["default"].mobileOnly(_templateObject7()), _mediaQuery["default"].tabletOnly(_templateObject8()));
 
@@ -556,3 +586,3 @@ var PrevButton =
   componentId: "sc-1skir21-2"
-})(["cursor:pointer;width:59px;height:59px;display:inline-flex;border:solid 1px;> svg{margin:auto;width:21px;}", " &:hover{> svg{transform:translateX(-5px);transition:transform 0.3s ease;}}"], _mediaQuery["default"].hdOnly(_templateObject6()));
+})(["cursor:pointer;width:59px;height:59px;display:inline-flex;border:solid 1px;> svg{margin:auto;width:21px;}", " &:hover{> svg{transform:translateX(-5px);transition:transform 0.3s ease;}}"], _mediaQuery["default"].hdOnly(_templateObject9()));
 
@@ -571,3 +601,3 @@ var NextButton =
   componentId: "sc-1skir21-4"
-})(["display:inline-block;width:80px;height:80px;border-radius:50%;vertical-align:top;position:relative;&::after{content:'';position:absolute;width:62px;border-top:solid 1px;transform:rotate(-45deg);transform-origin:bottom left;top:67px;left:7px;}", " ", " ", ""], _mediaQuery["default"].tabletAndBelow(_templateObject7()), _mediaQuery["default"].desktopAndAbove(_templateObject8()), _mediaQuery["default"].hdOnly(_templateObject9()));
+})(["display:inline-block;width:80px;height:80px;border-radius:50%;vertical-align:top;position:relative;&::after{content:'';position:absolute;width:62px;border-top:solid 1px;transform:rotate(-45deg);transform-origin:bottom left;top:67px;left:7px;}", " ", " ", ""], _mediaQuery["default"].tabletAndBelow(_templateObject10()), _mediaQuery["default"].desktopAndAbove(_templateObject11()), _mediaQuery["default"].hdOnly(_templateObject12()));
 
@@ -579,3 +609,3 @@ var ImageNumber =
   componentId: "sc-1skir21-5"
-})(["position:absolute;top:25px;left:9px;font-size:24px;font-family:BioRhyme;font-weight:bold;line-height:0.79;", ""], _mediaQuery["default"].hdOnly(_templateObject10()));
+})(["position:absolute;top:25px;left:9px;font-size:24px;font-family:BioRhyme;font-weight:bold;line-height:0.79;", ""], _mediaQuery["default"].hdOnly(_templateObject13()));
 
@@ -587,3 +617,3 @@ var ImageTotal =
   componentId: "sc-1skir21-6"
-})(["top:46px;left:36px;", ""], _mediaQuery["default"].hdOnly(_templateObject11()));
+})(["top:46px;left:36px;", ""], _mediaQuery["default"].hdOnly(_templateObject14()));
 var Desc =
@@ -594,3 +624,3 @@ /*#__PURE__*/
   componentId: "sc-1skir21-7"
-})(["align-self:flex-start;display:inline-block;margin-bottom:0;", " ", " ", ""], _mediaQuery["default"].tabletAndBelow(_templateObject12()), _mediaQuery["default"].mobileOnly(_templateObject13()), _mediaQuery["default"].desktopAndAbove(_templateObject14()));
+})(["align-self:flex-start;display:inline-block;margin-bottom:0;", " ", " ", ""], _mediaQuery["default"].tabletAndBelow(_templateObject15()), _mediaQuery["default"].mobileOnly(_templateObject16()), _mediaQuery["default"].desktopAndAbove(_templateObject17()));
 var EmptyDesc =
@@ -612,9 +642,9 @@ /*#__PURE__*/
   }
-}, _mediaQuery["default"].mobileOnly(_templateObject15(), function (props) {
+}, _mediaQuery["default"].mobileOnly(_templateObject18(), function (props) {
   return getTranslateX(mockup.mobile, props.translateXUint) / getContainerWidth(mockup.mobile) * 100;
-}), _mediaQuery["default"].tabletOnly(_templateObject16(), function (props) {
+}), _mediaQuery["default"].tabletOnly(_templateObject19(), function (props) {
   return getTranslateX(mockup.tablet, props.translateXUint) / getContainerWidth(mockup.tablet) * 100;
-}), _mediaQuery["default"].desktopOnly(_templateObject17(), function (props) {
+}), _mediaQuery["default"].desktopOnly(_templateObject20(), function (props) {
   return getTranslateX(mockup.desktop, props.translateXUint);
-}), _mediaQuery["default"].hdOnly(_templateObject18(), function (props) {
+}), _mediaQuery["default"].hdOnly(_templateObject21(), function (props) {
   return getTranslateX(mockup.hd, props.translateXUint);
@@ -628,3 +658,3 @@ }));
   componentId: "sc-1skir21-10"
-})(["height:100%;flex-shrink:0;", " ", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject19(), getSlideWidth(mockup.mobile) / getContainerWidth(mockup.mobile) * 100, mockup.mobile.slide.paddingRight / getContainerWidth(mockup.mobile) * 100), _mediaQuery["default"].tabletOnly(_templateObject20(), getSlideWidth(mockup.tablet) / getContainerWidth(mockup.tablet) * 100, mockup.tablet.slide.paddingRight / getContainerWidth(mockup.tablet) * 100), _mediaQuery["default"].desktopOnly(_templateObject21(), getSlideWidth(mockup.desktop), mockup.desktop.slide.paddingRight), _mediaQuery["default"].hdOnly(_templateObject22(), getSlideWidth(mockup.hd), mockup.hd.slide.paddingRight));
+})(["height:100%;flex-shrink:0;", " ", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject22(), getSlideWidth(mockup.mobile), getContainerWidth(mockup.mobile), mockup.mobile.slide.paddingRight, getContainerWidth(mockup.mobile)), _mediaQuery["default"].tabletOnly(_templateObject23(), getSlideWidth(mockup.tablet), getContainerWidth(mockup.tablet), mockup.tablet.slide.paddingRight, getContainerWidth(mockup.tablet)), _mediaQuery["default"].desktopOnly(_templateObject24(), getSlideWidth(mockup.desktop), mockup.desktop.slide.paddingRight), _mediaQuery["default"].hdOnly(_templateObject25(), getSlideWidth(mockup.hd), mockup.hd.slide.paddingRight));
 
@@ -643,3 +673,3 @@ var SlideMask =
   componentId: "sc-1skir21-12"
-})(["left:0;", " ", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject23(), getLeftMaskWidth(mockup.mobile) / getContainerWidth(mockup.mobile) * 100), _mediaQuery["default"].tabletOnly(_templateObject24(), getLeftMaskWidth(mockup.tablet) / getContainerWidth(mockup.tablet) * 100), _mediaQuery["default"].desktopOnly(_templateObject25(), getLeftMaskWidth(mockup.desktop)), _mediaQuery["default"].hdOnly(_templateObject26(), getLeftMaskWidth(mockup.hd)));
+})(["left:0;", " ", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject26(), getLeftMaskWidth(mockup.mobile) / getContainerWidth(mockup.mobile) * 100), _mediaQuery["default"].tabletOnly(_templateObject27(), getLeftMaskWidth(mockup.tablet) / getContainerWidth(mockup.tablet) * 100), _mediaQuery["default"].desktopOnly(_templateObject28(), getLeftMaskWidth(mockup.desktop)), _mediaQuery["default"].hdOnly(_templateObject29(), getLeftMaskWidth(mockup.hd)));
 var RightSlideMask =
@@ -650,3 +680,3 @@ /*#__PURE__*/
   componentId: "sc-1skir21-13"
-})(["right:0;", " ", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject27(), getRightMaskWidth(mockup.mobile) / getContainerWidth(mockup.mobile) * 100), _mediaQuery["default"].tabletOnly(_templateObject28(), getRightMaskWidth(mockup.tablet) / getContainerWidth(mockup.tablet) * 100), _mediaQuery["default"].desktopOnly(_templateObject29(), getRightMaskWidth(mockup.desktop)), _mediaQuery["default"].hdOnly(_templateObject30(), getRightMaskWidth(mockup.hd)));
+})(["right:0;", " ", " ", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject30(), getRightMaskWidth(mockup.mobile) / getContainerWidth(mockup.mobile) * 100), _mediaQuery["default"].tabletOnly(_templateObject31(), getRightMaskWidth(mockup.tablet) / getContainerWidth(mockup.tablet) * 100), _mediaQuery["default"].desktopOnly(_templateObject32(), getRightMaskWidth(mockup.desktop)), _mediaQuery["default"].hdOnly(_templateObject33(), getRightMaskWidth(mockup.hd)));
 
@@ -660,3 +690,3 @@ var SlideshowFlexBox =
   return getSlideshowFlexBoxStyles(props.theme.name);
-}, _mediaQuery["default"].tabletAndBelow(_templateObject31()), _mediaQuery["default"].desktopOnly(_templateObject32(), mockup.desktop.container.width), _mediaQuery["default"].hdOnly(_templateObject33(), mockup.hd.container.width));
+}, _mediaQuery["default"].tabletAndBelow(_templateObject34()), _mediaQuery["default"].desktopOnly(_templateObject35(), mockup.desktop.container.width), _mediaQuery["default"].hdOnly(_templateObject36(), mockup.hd.container.width));
 
@@ -708,3 +738,3 @@ function getSlideshowFlexBoxStyles(themeName) {
 function getTranslateX(deviceMockup, unit) {
-  var slideWidth = deviceMockup.slide.width; // total slides width including padding
+  var slideWidth = getSlideWidth(deviceMockup); // total slides width including padding
 
@@ -732,3 +762,3 @@ var translateX = unit * slideWidth; // add left mask width and padding
 function getSlideWidth(deviceMockup) {
-  return deviceMockup.slide.width;
+  return deviceMockup.slide.width + deviceMockup.slide.paddingRight;
 }
@@ -751,3 +781,3 @@ /**
 function getRightMaskWidth(deviceMockup) {
-  return deviceMockup.container.width - deviceMockup.offset.left - deviceMockup.slide.width; // px
+  return deviceMockup.container.width - deviceMockup.offset.left - getSlideWidth(deviceMockup); // px
 }
@@ -754,0 +784,0 @@

package.json

 {
   "name": "@twreporter/react-article-components",
-  "version": "1.0.24-beta.1",
+  "version": "1.0.24-beta.2",
   "description": "The Reporter react article components, which are used in article page",
@@ -5,0 +5,0 @@ "main": "lib/components/article-page.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

427912

increased by0.25%

Lines of code

8668

increased by0.25%

No dependency changes