@bosonprotocol/react-kit 0.34.0-alpha.16 → 0.34.0-alpha.18
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.
- package/dist/cjs/components/productCard/ProductCard.styles.d.ts.map +1 -1
- package/dist/cjs/components/productCard/ProductCard.styles.js +2 -1
- package/dist/cjs/components/productCard/ProductCard.styles.js.map +1 -1
- package/dist/cjs/components/skeleton/CollectionsCardSkeleton.d.ts.map +1 -1
- package/dist/cjs/components/skeleton/CollectionsCardSkeleton.js +32 -12
- package/dist/cjs/components/skeleton/CollectionsCardSkeleton.js.map +1 -1
- package/dist/cjs/components/skeleton/ProductCardSkeleton.d.ts.map +1 -1
- package/dist/cjs/components/skeleton/ProductCardSkeleton.js +11 -18
- package/dist/cjs/components/skeleton/ProductCardSkeleton.js.map +1 -1
- package/dist/esm/components/productCard/ProductCard.styles.d.ts.map +1 -1
- package/dist/esm/components/productCard/ProductCard.styles.js +2 -1
- package/dist/esm/components/productCard/ProductCard.styles.js.map +1 -1
- package/dist/esm/components/skeleton/CollectionsCardSkeleton.d.ts.map +1 -1
- package/dist/esm/components/skeleton/CollectionsCardSkeleton.js +32 -12
- package/dist/esm/components/skeleton/CollectionsCardSkeleton.js.map +1 -1
- package/dist/esm/components/skeleton/ProductCardSkeleton.d.ts.map +1 -1
- package/dist/esm/components/skeleton/ProductCardSkeleton.js +12 -19
- package/dist/esm/components/skeleton/ProductCardSkeleton.js.map +1 -1
- package/package.json +5 -5
- package/src/components/productCard/ProductCard.styles.ts +2 -1
- package/src/components/skeleton/CollectionsCardSkeleton.tsx +50 -33
- package/src/components/skeleton/ProductCardSkeleton.tsx +13 -34
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProductCard.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/productCard/ProductCard.styles.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,uBAAuB,gNAQnC,CAAC;AAEF,eAAO,MAAM,aAAa,gNAqCzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,gNAI9B,CAAC;AAEF,eAAO,MAAM,wBAAwB,gNAWpC,CAAC;AAEF,eAAO,MAAM,sBAAsB,gNAelC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"ProductCard.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/productCard/ProductCard.styles.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,uBAAuB,gNAQnC,CAAC;AAEF,eAAO,MAAM,aAAa,gNAqCzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,gNAI9B,CAAC;AAEF,eAAO,MAAM,wBAAwB,gNAWpC,CAAC;AAEF,eAAO,MAAM,sBAAsB,gNAelC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kGAa5B,CAAC;AAEF,eAAO,MAAM,uBAAuB,gNASnC,CAAC;AAEF,eAAO,MAAM,gBAAgB,gNAM5B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;mBAQ7B,CAAC;AACF,eAAO,MAAM,wBAAwB,gNAQpC,CAAC;AAEF,eAAO,MAAM,uBAAuB,gNAGnC,CAAC;AAEF,eAAO,MAAM,kBAAkB;sBACX,OAAO;;GAqD1B,CAAC;AAEF,eAAO,MAAM,cAAc;uBAAmC,OAAO;GAOpE,CAAC;AAEF,eAAO,MAAM,UAAU,4NAOtB,CAAC;AAEF,eAAO,MAAM,uBAAuB,gNASnC,CAAC;AAEF,eAAO,MAAM,+BAA+B,gNAE3C,CAAC;AAEF,eAAO,MAAM,mBAAmB;gBAA4B,OAAO;GAKlE,CAAC"}
|
|
@@ -115,12 +115,13 @@ exports.ProductCardTitle = (0, styled_components_1.default)(Typography_1.Typogra
|
|
|
115
115
|
color: ${({ theme }) => { var _a; return (_a = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _a === void 0 ? void 0 : _a.light.black; }};
|
|
116
116
|
word-break: break-word;
|
|
117
117
|
overflow: hidden;
|
|
118
|
-
text-overflow: ellipsis;
|
|
119
118
|
display: -webkit-box;
|
|
120
119
|
-webkit-box-orient: vertical;
|
|
121
120
|
-webkit-line-clamp: 2;
|
|
122
121
|
line-height: 1.5em;
|
|
123
122
|
max-height: calc(1.5em * 2);
|
|
123
|
+
white-space: nowrap;
|
|
124
|
+
text-overflow: ellipsis;
|
|
124
125
|
`;
|
|
125
126
|
exports.ProductCardPriceWrapper = styled_components_1.default.div `
|
|
126
127
|
display: flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProductCard.styles.js","sourceRoot":"","sources":["../../../../src/components/productCard/ProductCard.styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,uEAAgD;AAChD,uCAAoC;AACpC,iDAAmD;AACnD,iDAA8C;AAC9C,yCAAsC;AAEzB,QAAA,uBAAuB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;WAMtC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,WAAC,OAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,KAAK,CAAC,QAAQ,CAAA,EAAA;;CAEtD,CAAC;AAEW,QAAA,aAAa,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;aAe1B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,WAAC,OAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,KAAK,CAAC,KAAK,CAAA,EAAA;;kBAEpC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,WAAC,OAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,KAAK,CAAC,SAAS,CAAA,EAAA;;;;;;;;;;;;;;;;;;;;CAoB9D,CAAC;AAEW,QAAA,kBAAkB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;CAI3C,CAAC;AAEW,QAAA,wBAAwB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;;;;;;;CAWjD,CAAC;AAEW,QAAA,sBAAsB,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;WAIrC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,WAAC,OAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,KAAK,CAAC,QAAQ,CAAA,EAAA;;;;;;;;;aAS1C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,WAAC,OAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,KAAK,CAAC,QAAQ,CAAA,EAAA;;CAExD,CAAC;AAEW,QAAA,gBAAgB,GAAG,IAAA,2BAAM,EAAC,uBAAU,CAAC,CAAC,KAAK,CAAC;IACvD,SAAS,EAAE,OAAO;CACnB,CAAC,CAAA;WACS,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,WAAC,OAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,0CAAE,KAAK,CAAC,KAAK,CAAA,EAAA
|
|
1
|
+
{"version":3,"file":"ProductCard.styles.js","sourceRoot":"","sources":["../../../../src/components/productCard/ProductCard.styles.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CollectionsCardSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/CollectionsCardSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CollectionsCardSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/CollectionsCardSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AA2CpD,KAAK,iBAAiB,GAAG,oBAAoB,CAAC,cAAc,CAAC,GAAG;IAC9D,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AACF,eAAO,MAAM,uBAAuB,UAAW,iBAAiB,gBAoC/D,CAAC"}
|
|
@@ -9,30 +9,50 @@ const styled_components_1 = __importDefault(require("styled-components"));
|
|
|
9
9
|
const theme_1 = require("../../theme");
|
|
10
10
|
const commonStyles_1 = require("../productCard/commonStyles");
|
|
11
11
|
const common_1 = require("./common");
|
|
12
|
+
const colors = theme_1.theme.colors.light;
|
|
12
13
|
const Container = styled_components_1.default.div `
|
|
13
|
-
display:
|
|
14
|
-
|
|
15
|
-
grid-template-rows: repeat(2, min-content);
|
|
14
|
+
display: flex;
|
|
15
|
+
flex-direction: column;
|
|
16
16
|
${commonStyles_1.cardWrapperStyles}
|
|
17
|
+
/* REMs gives bad height here on smaller views */
|
|
18
|
+
height: 279px;
|
|
19
|
+
min-width: 265px;
|
|
17
20
|
`;
|
|
18
21
|
const ImagesContainer = styled_components_1.default.div `
|
|
19
22
|
width: 100%;
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
grid-row-gap: 1px;
|
|
23
|
+
position: relative;
|
|
24
|
+
/* REMs gives bad height here on smaller views */
|
|
25
|
+
height: 208px;
|
|
26
|
+
background-color: ${colors.lightGrey};
|
|
25
27
|
`;
|
|
26
28
|
const BottomCard = styled_components_1.default.div `
|
|
27
29
|
padding: 1rem 1.5rem 1rem 1.5rem;
|
|
28
30
|
`;
|
|
31
|
+
const ImageOne = styled_components_1.default.div `
|
|
32
|
+
position: absolute;
|
|
33
|
+
top: 50%;
|
|
34
|
+
left: 10%;
|
|
35
|
+
transform: translateY(-50%);
|
|
36
|
+
`;
|
|
37
|
+
const ImageTwo = styled_components_1.default.div `
|
|
38
|
+
position: absolute;
|
|
39
|
+
right: 10%;
|
|
40
|
+
top: 5%;
|
|
41
|
+
`;
|
|
42
|
+
const ImageThree = styled_components_1.default.div `
|
|
43
|
+
position: absolute;
|
|
44
|
+
right: 10%;
|
|
45
|
+
bottom: 5%;
|
|
46
|
+
`;
|
|
29
47
|
const CollectionsCardSkeleton = (props) => {
|
|
30
48
|
return (react_1.default.createElement(Container, null,
|
|
31
49
|
react_1.default.createElement(ImagesContainer, null,
|
|
32
|
-
react_1.default.createElement(
|
|
33
|
-
|
|
34
|
-
react_1.default.createElement(
|
|
35
|
-
|
|
50
|
+
react_1.default.createElement(ImageOne, null,
|
|
51
|
+
react_1.default.createElement(common_1.LoadingBubble, { "$width": "140px", "$height": "102px", "$borderRadius": "0px", "$backgroundColor": theme_1.theme.colors.light.darkGrey })),
|
|
52
|
+
react_1.default.createElement(ImageTwo, null,
|
|
53
|
+
react_1.default.createElement(common_1.LoadingBubble, { "$width": "60px", "$height": "50px", "$borderRadius": "0px", "$backgroundColor": theme_1.theme.colors.light.darkGrey })),
|
|
54
|
+
react_1.default.createElement(ImageThree, null,
|
|
55
|
+
react_1.default.createElement(common_1.LoadingBubble, { "$width": "60px", "$height": "50px", "$borderRadius": "0px", "$backgroundColor": theme_1.theme.colors.light.darkGrey }))),
|
|
36
56
|
react_1.default.createElement(BottomCard, null,
|
|
37
57
|
react_1.default.createElement(common_1.LoadingBubble, { "$width": "50%", "$height": "26px", "$margin": "0 0 8.75px 0" }),
|
|
38
58
|
react_1.default.createElement(common_1.LoadingBubble, { "$width": "52px", "$height": "18px", "$margin": "0 0 4.375px 0" }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CollectionsCardSkeleton.js","sourceRoot":"","sources":["../../../../src/components/skeleton/CollectionsCardSkeleton.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAoD;AACpD,0EAAuC;AACvC,uCAAoC;AACpC,8DAAgE;AAChE,qCAAyC;
|
|
1
|
+
{"version":3,"file":"CollectionsCardSkeleton.js","sourceRoot":"","sources":["../../../../src/components/skeleton/CollectionsCardSkeleton.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAoD;AACpD,0EAAuC;AACvC,uCAAoC;AACpC,8DAAgE;AAChE,qCAAyC;AACzC,MAAM,MAAM,GAAG,aAAK,CAAC,MAAM,CAAC,KAAK,CAAC;AAClC,MAAM,SAAS,GAAG,2BAAM,CAAC,GAAG,CAAA;;;IAGxB,gCAAiB;;;;CAIpB,CAAC;AAEF,MAAM,eAAe,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;sBAKZ,MAAM,CAAC,SAAS;CACrC,CAAC;AAEF,MAAM,UAAU,GAAG,2BAAM,CAAC,GAAG,CAAA;;CAE5B,CAAC;AAEF,MAAM,QAAQ,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;;CAK1B,CAAC;AACF,MAAM,QAAQ,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;CAI1B,CAAC;AACF,MAAM,UAAU,GAAG,2BAAM,CAAC,GAAG,CAAA;;;;CAI5B,CAAC;AAIK,MAAM,uBAAuB,GAAG,CAAC,KAAwB,EAAE,EAAE;IAClE,OAAO,CACL,8BAAC,SAAS;QACR,8BAAC,eAAe;YACd,8BAAC,QAAQ;gBACP,8BAAC,sBAAa,cACL,OAAO,aACN,OAAO,mBACD,KAAK,sBACD,aAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAC7C,CACO;YACX,8BAAC,QAAQ;gBACP,8BAAC,sBAAa,cACL,MAAM,aACL,MAAM,mBACA,KAAK,sBACD,aAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAC7C,CACO;YACX,8BAAC,UAAU;gBACT,8BAAC,sBAAa,cACL,MAAM,aACL,MAAM,mBACA,KAAK,sBACD,aAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAC7C,CACS,CACG;QAClB,8BAAC,UAAU;YACT,8BAAC,sBAAa,cAAQ,KAAK,aAAS,MAAM,aAAS,cAAc,GAAG;YACpE,8BAAC,sBAAa,cAAQ,MAAM,aAAS,MAAM,aAAS,eAAe,GAAG;YACtE,8BAAC,sBAAa,cAAQ,MAAM,aAAS,MAAM,GAAG,CACnC,CACH,CACb,CAAC;AACJ,CAAC,CAAC;AApCW,QAAA,uBAAuB,2BAoClC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProductCardSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/ProductCardSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ProductCardSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/ProductCardSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAapD,KAAK,iBAAiB,GAAG,oBAAoB,CAAC,cAAc,CAAC,GAAG;IAC9D,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AASF,eAAO,MAAM,mBAAmB,UAAW,iBAAiB,gBA6B3D,CAAC"}
|
|
@@ -6,35 +6,28 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
exports.ProductCardSkeleton = void 0;
|
|
7
7
|
const react_1 = __importDefault(require("react"));
|
|
8
8
|
const ProductCard_styles_1 = require("../productCard/ProductCard.styles");
|
|
9
|
-
const Grid_1 = require("../ui/Grid");
|
|
10
9
|
const theme_1 = require("../../theme");
|
|
11
10
|
const common_1 = require("./common");
|
|
11
|
+
const styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
+
const ProductCardImageWrapperStyled = (0, styled_components_1.default)(ProductCard_styles_1.ProductCardImageWrapper) `
|
|
13
|
+
overflow: hidden;
|
|
14
|
+
width: 100%;
|
|
15
|
+
/* REMs gives bad height here on smaller views */
|
|
16
|
+
max-height: 210px;
|
|
17
|
+
min-height: 11.25rem;
|
|
18
|
+
`;
|
|
12
19
|
const ProductCardSkeleton = (props) => {
|
|
13
20
|
const { withBottomText } = props;
|
|
14
21
|
return (react_1.default.createElement(ProductCard_styles_1.ProductCardWrapper, Object.assign({}, props, { "$isHoverDisabled": true }),
|
|
15
|
-
react_1.default.createElement(
|
|
22
|
+
react_1.default.createElement(ProductCardImageWrapperStyled, null,
|
|
16
23
|
react_1.default.createElement(common_1.LoadingBubble, { "$width": "100%", "$height": "340px", "$borderRadius": "0px", "$backgroundColor": theme_1.theme.colors.light.darkGrey })),
|
|
17
24
|
react_1.default.createElement(ProductCard_styles_1.ProductCardBottom, null,
|
|
18
25
|
react_1.default.createElement("div", null,
|
|
19
|
-
react_1.default.createElement(ProductCard_styles_1.ProductCardBottomContent, null,
|
|
20
|
-
react_1.default.createElement(Grid_1.Grid, { flexDirection: "column" },
|
|
21
|
-
react_1.default.createElement(ProductCard_styles_1.ProductCardCreator, null,
|
|
22
|
-
react_1.default.createElement(ProductCard_styles_1.ProductCardCreatorAvatar, null,
|
|
23
|
-
react_1.default.createElement(common_1.LoadingBubble, { "$width": "16px", "$height": "16px" })),
|
|
24
|
-
react_1.default.createElement(ProductCard_styles_1.ProductCardCreatorName, { "data-avatarname": "product-card" },
|
|
25
|
-
react_1.default.createElement(common_1.LoadingBubble, { "$width": "50px", "$height": "12.5px" })))),
|
|
26
|
-
react_1.default.createElement(ProductCard_styles_1.ProductCardPriceWrapper, null,
|
|
27
|
-
react_1.default.createElement(ProductCard_styles_1.ProductCardPrice, null,
|
|
28
|
-
react_1.default.createElement(Grid_1.Grid, { justifyContent: "flex-end" },
|
|
29
|
-
react_1.default.createElement(common_1.LoadingBubble, { "$width": "30px", "$height": "10px" }))),
|
|
30
|
-
react_1.default.createElement(Grid_1.Grid, { justifyContent: "flex-end", gap: "8px" },
|
|
31
|
-
react_1.default.createElement(common_1.LoadingBubble, { "$width": "24px", "$height": "24px" }),
|
|
32
|
-
react_1.default.createElement(common_1.LoadingBubble, { "$width": "calc(100% - 24px - 8px)" })))),
|
|
33
26
|
react_1.default.createElement(ProductCard_styles_1.ProductCardTitleWrapper, null,
|
|
34
27
|
react_1.default.createElement(ProductCard_styles_1.ProductCardTitle, null,
|
|
35
|
-
react_1.default.createElement(common_1.LoadingBubble, { "$width": "
|
|
28
|
+
react_1.default.createElement(common_1.LoadingBubble, { "$width": "70%", "$height": "30px" })))),
|
|
36
29
|
withBottomText && (react_1.default.createElement(ProductCard_styles_1.BottomText, null,
|
|
37
|
-
react_1.default.createElement(common_1.LoadingBubble, { "$width": "
|
|
30
|
+
react_1.default.createElement(common_1.LoadingBubble, { "$width": "30%", "$height": "15.5px" }))))));
|
|
38
31
|
};
|
|
39
32
|
exports.ProductCardSkeleton = ProductCardSkeleton;
|
|
40
33
|
//# sourceMappingURL=ProductCardSkeleton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProductCardSkeleton.js","sourceRoot":"","sources":["../../../../src/components/skeleton/ProductCardSkeleton.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAoD;AACpD,
|
|
1
|
+
{"version":3,"file":"ProductCardSkeleton.js","sourceRoot":"","sources":["../../../../src/components/skeleton/ProductCardSkeleton.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAoD;AACpD,0EAO2C;AAC3C,uCAAoC;AACpC,qCAAyC;AACzC,0EAAuC;AAMvC,MAAM,6BAA6B,GAAG,IAAA,2BAAM,EAAC,4CAAuB,CAAC,CAAA;;;;;;CAMpE,CAAC;AACK,MAAM,mBAAmB,GAAG,CAAC,KAAwB,EAAE,EAAE;IAC9D,MAAM,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEjC,OAAO,CACL,8BAAC,uCAAkB,oBAAK,KAAK,wBAAoB,IAAI;QACnD,8BAAC,6BAA6B;YAC5B,8BAAC,sBAAa,cACL,MAAM,aACL,OAAO,mBACD,KAAK,sBACD,aAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAC7C,CAC4B;QAChC,8BAAC,sCAAiB;YAChB;gBACE,8BAAC,4CAAuB;oBACtB,8BAAC,qCAAgB;wBACf,8BAAC,sBAAa,cAAQ,KAAK,aAAS,MAAM,GAAG,CAC5B,CACK,CACtB;YACL,cAAc,IAAI,CACjB,8BAAC,+BAAU;gBACT,8BAAC,sBAAa,cAAQ,KAAK,aAAS,QAAQ,GAAG,CACpC,CACd,CACiB,CACD,CACtB,CAAC;AACJ,CAAC,CAAC;AA7BW,QAAA,mBAAmB,uBA6B9B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProductCard.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/productCard/ProductCard.styles.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,uBAAuB,gNAQnC,CAAC;AAEF,eAAO,MAAM,aAAa,gNAqCzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,gNAI9B,CAAC;AAEF,eAAO,MAAM,wBAAwB,gNAWpC,CAAC;AAEF,eAAO,MAAM,sBAAsB,gNAelC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"ProductCard.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/productCard/ProductCard.styles.ts"],"names":[],"mappings":";AAMA,eAAO,MAAM,uBAAuB,gNAQnC,CAAC;AAEF,eAAO,MAAM,aAAa,gNAqCzB,CAAC;AAEF,eAAO,MAAM,kBAAkB,gNAI9B,CAAC;AAEF,eAAO,MAAM,wBAAwB,gNAWpC,CAAC;AAEF,eAAO,MAAM,sBAAsB,gNAelC,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kGAa5B,CAAC;AAEF,eAAO,MAAM,uBAAuB,gNASnC,CAAC;AAEF,eAAO,MAAM,gBAAgB,gNAM5B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;mBAQ7B,CAAC;AACF,eAAO,MAAM,wBAAwB,gNAQpC,CAAC;AAEF,eAAO,MAAM,uBAAuB,gNAGnC,CAAC;AAEF,eAAO,MAAM,kBAAkB;sBACX,OAAO;;GAqD1B,CAAC;AAEF,eAAO,MAAM,cAAc;uBAAmC,OAAO;GAOpE,CAAC;AAEF,eAAO,MAAM,UAAU,4NAOtB,CAAC;AAEF,eAAO,MAAM,uBAAuB,gNASnC,CAAC;AAEF,eAAO,MAAM,+BAA+B,gNAE3C,CAAC;AAEF,eAAO,MAAM,mBAAmB;gBAA4B,OAAO;GAKlE,CAAC"}
|
|
@@ -89,12 +89,13 @@ export const ProductCardTitle = styled(Typography).attrs({
|
|
|
89
89
|
color: ${({ theme }) => theme?.colors?.light.black};
|
|
90
90
|
word-break: break-word;
|
|
91
91
|
overflow: hidden;
|
|
92
|
-
text-overflow: ellipsis;
|
|
93
92
|
display: -webkit-box;
|
|
94
93
|
-webkit-box-orient: vertical;
|
|
95
94
|
-webkit-line-clamp: 2;
|
|
96
95
|
line-height: 1.5em;
|
|
97
96
|
max-height: calc(1.5em * 2);
|
|
97
|
+
white-space: nowrap;
|
|
98
|
+
text-overflow: ellipsis;
|
|
98
99
|
`;
|
|
99
100
|
export const ProductCardPriceWrapper = styled.div `
|
|
100
101
|
display: flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProductCard.styles.js","sourceRoot":"","sources":["../../../../src/components/productCard/ProductCard.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAEtC,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;WAMtC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,QAAQ;;CAEtD,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;aAe1B,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,KAAK;;kBAEpC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;CAoB9D,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI3C,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;CAWjD,CAAC;AAEF,MAAM,CAAC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;WAIrC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,QAAQ;;;;;;;;;aAS1C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,QAAQ;;CAExD,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC;IACvD,SAAS,EAAE,OAAO;CACnB,CAAC,CAAA;WACS,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,KAAK
|
|
1
|
+
{"version":3,"file":"ProductCard.styles.js","sourceRoot":"","sources":["../../../../src/components/productCard/ProductCard.styles.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CollectionsCardSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/CollectionsCardSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CollectionsCardSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/CollectionsCardSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AA2CpD,KAAK,iBAAiB,GAAG,oBAAoB,CAAC,cAAc,CAAC,GAAG;IAC9D,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AACF,eAAO,MAAM,uBAAuB,UAAW,iBAAiB,gBAoC/D,CAAC"}
|
|
@@ -3,30 +3,50 @@ import styled from "styled-components";
|
|
|
3
3
|
import { theme } from "../../theme";
|
|
4
4
|
import { cardWrapperStyles } from "../productCard/commonStyles";
|
|
5
5
|
import { LoadingBubble } from "./common";
|
|
6
|
+
const colors = theme.colors.light;
|
|
6
7
|
const Container = styled.div `
|
|
7
|
-
display:
|
|
8
|
-
|
|
9
|
-
grid-template-rows: repeat(2, min-content);
|
|
8
|
+
display: flex;
|
|
9
|
+
flex-direction: column;
|
|
10
10
|
${cardWrapperStyles}
|
|
11
|
+
/* REMs gives bad height here on smaller views */
|
|
12
|
+
height: 279px;
|
|
13
|
+
min-width: 265px;
|
|
11
14
|
`;
|
|
12
15
|
const ImagesContainer = styled.div `
|
|
13
16
|
width: 100%;
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
grid-row-gap: 1px;
|
|
17
|
+
position: relative;
|
|
18
|
+
/* REMs gives bad height here on smaller views */
|
|
19
|
+
height: 208px;
|
|
20
|
+
background-color: ${colors.lightGrey};
|
|
19
21
|
`;
|
|
20
22
|
const BottomCard = styled.div `
|
|
21
23
|
padding: 1rem 1.5rem 1rem 1.5rem;
|
|
22
24
|
`;
|
|
25
|
+
const ImageOne = styled.div `
|
|
26
|
+
position: absolute;
|
|
27
|
+
top: 50%;
|
|
28
|
+
left: 10%;
|
|
29
|
+
transform: translateY(-50%);
|
|
30
|
+
`;
|
|
31
|
+
const ImageTwo = styled.div `
|
|
32
|
+
position: absolute;
|
|
33
|
+
right: 10%;
|
|
34
|
+
top: 5%;
|
|
35
|
+
`;
|
|
36
|
+
const ImageThree = styled.div `
|
|
37
|
+
position: absolute;
|
|
38
|
+
right: 10%;
|
|
39
|
+
bottom: 5%;
|
|
40
|
+
`;
|
|
23
41
|
export const CollectionsCardSkeleton = (props) => {
|
|
24
42
|
return (React.createElement(Container, null,
|
|
25
43
|
React.createElement(ImagesContainer, null,
|
|
26
|
-
React.createElement(
|
|
27
|
-
|
|
28
|
-
React.createElement(
|
|
29
|
-
|
|
44
|
+
React.createElement(ImageOne, null,
|
|
45
|
+
React.createElement(LoadingBubble, { "$width": "140px", "$height": "102px", "$borderRadius": "0px", "$backgroundColor": theme.colors.light.darkGrey })),
|
|
46
|
+
React.createElement(ImageTwo, null,
|
|
47
|
+
React.createElement(LoadingBubble, { "$width": "60px", "$height": "50px", "$borderRadius": "0px", "$backgroundColor": theme.colors.light.darkGrey })),
|
|
48
|
+
React.createElement(ImageThree, null,
|
|
49
|
+
React.createElement(LoadingBubble, { "$width": "60px", "$height": "50px", "$borderRadius": "0px", "$backgroundColor": theme.colors.light.darkGrey }))),
|
|
30
50
|
React.createElement(BottomCard, null,
|
|
31
51
|
React.createElement(LoadingBubble, { "$width": "50%", "$height": "26px", "$margin": "0 0 8.75px 0" }),
|
|
32
52
|
React.createElement(LoadingBubble, { "$width": "52px", "$height": "18px", "$margin": "0 0 4.375px 0" }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CollectionsCardSkeleton.js","sourceRoot":"","sources":["../../../../src/components/skeleton/CollectionsCardSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"CollectionsCardSkeleton.js","sourceRoot":"","sources":["../../../../src/components/skeleton/CollectionsCardSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;AAClC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;;IAGxB,iBAAiB;;;;CAIpB,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;sBAKZ,MAAM,CAAC,SAAS;CACrC,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE5B,CAAC;AAEF,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;CAK1B,CAAC;AACF,MAAM,QAAQ,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI1B,CAAC;AACF,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAI5B,CAAC;AAIF,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,KAAwB,EAAE,EAAE;IAClE,OAAO,CACL,oBAAC,SAAS;QACR,oBAAC,eAAe;YACd,oBAAC,QAAQ;gBACP,oBAAC,aAAa,cACL,OAAO,aACN,OAAO,mBACD,KAAK,sBACD,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAC7C,CACO;YACX,oBAAC,QAAQ;gBACP,oBAAC,aAAa,cACL,MAAM,aACL,MAAM,mBACA,KAAK,sBACD,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAC7C,CACO;YACX,oBAAC,UAAU;gBACT,oBAAC,aAAa,cACL,MAAM,aACL,MAAM,mBACA,KAAK,sBACD,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAC7C,CACS,CACG;QAClB,oBAAC,UAAU;YACT,oBAAC,aAAa,cAAQ,KAAK,aAAS,MAAM,aAAS,cAAc,GAAG;YACpE,oBAAC,aAAa,cAAQ,MAAM,aAAS,MAAM,aAAS,eAAe,GAAG;YACtE,oBAAC,aAAa,cAAQ,MAAM,aAAS,MAAM,GAAG,CACnC,CACH,CACb,CAAC;AACJ,CAAC,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProductCardSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/ProductCardSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ProductCardSkeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/skeleton/ProductCardSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAapD,KAAK,iBAAiB,GAAG,oBAAoB,CAAC,cAAc,CAAC,GAAG;IAC9D,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AASF,eAAO,MAAM,mBAAmB,UAAW,iBAAiB,gBA6B3D,CAAC"}
|
|
@@ -1,33 +1,26 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { BottomText, ProductCardBottom,
|
|
3
|
-
import { Grid } from "../ui/Grid";
|
|
2
|
+
import { BottomText, ProductCardBottom, ProductCardImageWrapper, ProductCardTitle, ProductCardTitleWrapper, ProductCardWrapper } from "../productCard/ProductCard.styles";
|
|
4
3
|
import { theme } from "../../theme";
|
|
5
4
|
import { LoadingBubble } from "./common";
|
|
5
|
+
import styled from "styled-components";
|
|
6
|
+
const ProductCardImageWrapperStyled = styled(ProductCardImageWrapper) `
|
|
7
|
+
overflow: hidden;
|
|
8
|
+
width: 100%;
|
|
9
|
+
/* REMs gives bad height here on smaller views */
|
|
10
|
+
max-height: 210px;
|
|
11
|
+
min-height: 11.25rem;
|
|
12
|
+
`;
|
|
6
13
|
export const ProductCardSkeleton = (props) => {
|
|
7
14
|
const { withBottomText } = props;
|
|
8
15
|
return (React.createElement(ProductCardWrapper, { ...props, "$isHoverDisabled": true },
|
|
9
|
-
React.createElement(
|
|
16
|
+
React.createElement(ProductCardImageWrapperStyled, null,
|
|
10
17
|
React.createElement(LoadingBubble, { "$width": "100%", "$height": "340px", "$borderRadius": "0px", "$backgroundColor": theme.colors.light.darkGrey })),
|
|
11
18
|
React.createElement(ProductCardBottom, null,
|
|
12
19
|
React.createElement("div", null,
|
|
13
|
-
React.createElement(ProductCardBottomContent, null,
|
|
14
|
-
React.createElement(Grid, { flexDirection: "column" },
|
|
15
|
-
React.createElement(ProductCardCreator, null,
|
|
16
|
-
React.createElement(ProductCardCreatorAvatar, null,
|
|
17
|
-
React.createElement(LoadingBubble, { "$width": "16px", "$height": "16px" })),
|
|
18
|
-
React.createElement(ProductCardCreatorName, { "data-avatarname": "product-card" },
|
|
19
|
-
React.createElement(LoadingBubble, { "$width": "50px", "$height": "12.5px" })))),
|
|
20
|
-
React.createElement(ProductCardPriceWrapper, null,
|
|
21
|
-
React.createElement(ProductCardPrice, null,
|
|
22
|
-
React.createElement(Grid, { justifyContent: "flex-end" },
|
|
23
|
-
React.createElement(LoadingBubble, { "$width": "30px", "$height": "10px" }))),
|
|
24
|
-
React.createElement(Grid, { justifyContent: "flex-end", gap: "8px" },
|
|
25
|
-
React.createElement(LoadingBubble, { "$width": "24px", "$height": "24px" }),
|
|
26
|
-
React.createElement(LoadingBubble, { "$width": "calc(100% - 24px - 8px)" })))),
|
|
27
20
|
React.createElement(ProductCardTitleWrapper, null,
|
|
28
21
|
React.createElement(ProductCardTitle, null,
|
|
29
|
-
React.createElement(LoadingBubble, { "$width": "
|
|
22
|
+
React.createElement(LoadingBubble, { "$width": "70%", "$height": "30px" })))),
|
|
30
23
|
withBottomText && (React.createElement(BottomText, null,
|
|
31
|
-
React.createElement(LoadingBubble, { "$width": "
|
|
24
|
+
React.createElement(LoadingBubble, { "$width": "30%", "$height": "15.5px" }))))));
|
|
32
25
|
};
|
|
33
26
|
//# sourceMappingURL=ProductCardSkeleton.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProductCardSkeleton.js","sourceRoot":"","sources":["../../../../src/components/skeleton/ProductCardSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,
|
|
1
|
+
{"version":3,"file":"ProductCardSkeleton.js","sourceRoot":"","sources":["../../../../src/components/skeleton/ProductCardSkeleton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,uBAAuB,EACvB,gBAAgB,EAChB,uBAAuB,EACvB,kBAAkB,EACnB,MAAM,mCAAmC,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAMvC,MAAM,6BAA6B,GAAG,MAAM,CAAC,uBAAuB,CAAC,CAAA;;;;;;CAMpE,CAAC;AACF,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAAwB,EAAE,EAAE;IAC9D,MAAM,EAAE,cAAc,EAAE,GAAG,KAAK,CAAC;IAEjC,OAAO,CACL,oBAAC,kBAAkB,OAAK,KAAK,sBAAoB,IAAI;QACnD,oBAAC,6BAA6B;YAC5B,oBAAC,aAAa,cACL,MAAM,aACL,OAAO,mBACD,KAAK,sBACD,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,QAAQ,GAC7C,CAC4B;QAChC,oBAAC,iBAAiB;YAChB;gBACE,oBAAC,uBAAuB;oBACtB,oBAAC,gBAAgB;wBACf,oBAAC,aAAa,cAAQ,KAAK,aAAS,MAAM,GAAG,CAC5B,CACK,CACtB;YACL,cAAc,IAAI,CACjB,oBAAC,UAAU;gBACT,oBAAC,aAAa,cAAQ,KAAK,aAAS,QAAQ,GAAG,CACpC,CACd,CACiB,CACD,CACtB,CAAC;AACJ,CAAC,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bosonprotocol/react-kit",
|
|
3
3
|
"description": "React toolkit with smart components and hooks for building on top of the Boson Protocol.",
|
|
4
|
-
"version": "0.34.0-alpha.
|
|
4
|
+
"version": "0.34.0-alpha.18",
|
|
5
5
|
"main": "./dist/cjs/index.js",
|
|
6
6
|
"module": "./dist/esm/index.js",
|
|
7
7
|
"types": "./dist/cjs/index.d.ts",
|
|
@@ -15,9 +15,9 @@
|
|
|
15
15
|
"license": "Apache-2.0",
|
|
16
16
|
"dependencies": {
|
|
17
17
|
"@bosonprotocol/chat-sdk": "^1.3.1-alpha.9",
|
|
18
|
-
"@bosonprotocol/core-sdk": "^1.41.0-alpha.
|
|
19
|
-
"@bosonprotocol/ethers-sdk": "^1.15.0-alpha.
|
|
20
|
-
"@bosonprotocol/ipfs-storage": "^1.12.0-alpha.
|
|
18
|
+
"@bosonprotocol/core-sdk": "^1.41.0-alpha.20",
|
|
19
|
+
"@bosonprotocol/ethers-sdk": "^1.15.0-alpha.6",
|
|
20
|
+
"@bosonprotocol/ipfs-storage": "^1.12.0-alpha.18",
|
|
21
21
|
"@davatar/react": "1.11.1",
|
|
22
22
|
"@ethersproject/units": "5.6.0",
|
|
23
23
|
"@glidejs/glide": "3.6.0",
|
|
@@ -188,5 +188,5 @@
|
|
|
188
188
|
"overrides": {
|
|
189
189
|
"typescript": "^5.1.6"
|
|
190
190
|
},
|
|
191
|
-
"gitHead": "
|
|
191
|
+
"gitHead": "fb12be2d60504865402c5daf708593a0a4136344"
|
|
192
192
|
}
|
|
@@ -95,12 +95,13 @@ export const ProductCardTitle = styled(Typography).attrs({
|
|
|
95
95
|
color: ${({ theme }) => theme?.colors?.light.black};
|
|
96
96
|
word-break: break-word;
|
|
97
97
|
overflow: hidden;
|
|
98
|
-
text-overflow: ellipsis;
|
|
99
98
|
display: -webkit-box;
|
|
100
99
|
-webkit-box-orient: vertical;
|
|
101
100
|
-webkit-line-clamp: 2;
|
|
102
101
|
line-height: 1.5em;
|
|
103
102
|
max-height: calc(1.5em * 2);
|
|
103
|
+
white-space: nowrap;
|
|
104
|
+
text-overflow: ellipsis;
|
|
104
105
|
`;
|
|
105
106
|
|
|
106
107
|
export const ProductCardPriceWrapper = styled.div`
|
|
@@ -3,27 +3,44 @@ import styled from "styled-components";
|
|
|
3
3
|
import { theme } from "../../theme";
|
|
4
4
|
import { cardWrapperStyles } from "../productCard/commonStyles";
|
|
5
5
|
import { LoadingBubble } from "./common";
|
|
6
|
-
|
|
6
|
+
const colors = theme.colors.light;
|
|
7
7
|
const Container = styled.div`
|
|
8
|
-
display:
|
|
9
|
-
|
|
10
|
-
grid-template-rows: repeat(2, min-content);
|
|
8
|
+
display: flex;
|
|
9
|
+
flex-direction: column;
|
|
11
10
|
${cardWrapperStyles}
|
|
11
|
+
/* REMs gives bad height here on smaller views */
|
|
12
|
+
height: 279px;
|
|
13
|
+
min-width: 265px;
|
|
12
14
|
`;
|
|
13
15
|
|
|
14
16
|
const ImagesContainer = styled.div`
|
|
15
17
|
width: 100%;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
grid-row-gap: 1px;
|
|
18
|
+
position: relative;
|
|
19
|
+
/* REMs gives bad height here on smaller views */
|
|
20
|
+
height: 208px;
|
|
21
|
+
background-color: ${colors.lightGrey};
|
|
21
22
|
`;
|
|
22
23
|
|
|
23
24
|
const BottomCard = styled.div`
|
|
24
25
|
padding: 1rem 1.5rem 1rem 1.5rem;
|
|
25
26
|
`;
|
|
26
27
|
|
|
28
|
+
const ImageOne = styled.div`
|
|
29
|
+
position: absolute;
|
|
30
|
+
top: 50%;
|
|
31
|
+
left: 10%;
|
|
32
|
+
transform: translateY(-50%);
|
|
33
|
+
`;
|
|
34
|
+
const ImageTwo = styled.div`
|
|
35
|
+
position: absolute;
|
|
36
|
+
right: 10%;
|
|
37
|
+
top: 5%;
|
|
38
|
+
`;
|
|
39
|
+
const ImageThree = styled.div`
|
|
40
|
+
position: absolute;
|
|
41
|
+
right: 10%;
|
|
42
|
+
bottom: 5%;
|
|
43
|
+
`;
|
|
27
44
|
type SkeletonCardProps = ButtonHTMLAttributes<HTMLDivElement> & {
|
|
28
45
|
withBottomText?: boolean;
|
|
29
46
|
};
|
|
@@ -31,30 +48,30 @@ export const CollectionsCardSkeleton = (props: SkeletonCardProps) => {
|
|
|
31
48
|
return (
|
|
32
49
|
<Container>
|
|
33
50
|
<ImagesContainer>
|
|
34
|
-
<
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
51
|
+
<ImageOne>
|
|
52
|
+
<LoadingBubble
|
|
53
|
+
$width="140px"
|
|
54
|
+
$height="102px"
|
|
55
|
+
$borderRadius="0px"
|
|
56
|
+
$backgroundColor={theme.colors.light.darkGrey}
|
|
57
|
+
/>
|
|
58
|
+
</ImageOne>
|
|
59
|
+
<ImageTwo>
|
|
60
|
+
<LoadingBubble
|
|
61
|
+
$width="60px"
|
|
62
|
+
$height="50px"
|
|
63
|
+
$borderRadius="0px"
|
|
64
|
+
$backgroundColor={theme.colors.light.darkGrey}
|
|
65
|
+
/>
|
|
66
|
+
</ImageTwo>
|
|
67
|
+
<ImageThree>
|
|
68
|
+
<LoadingBubble
|
|
69
|
+
$width="60px"
|
|
70
|
+
$height="50px"
|
|
71
|
+
$borderRadius="0px"
|
|
72
|
+
$backgroundColor={theme.colors.light.darkGrey}
|
|
73
|
+
/>
|
|
74
|
+
</ImageThree>
|
|
58
75
|
</ImagesContainer>
|
|
59
76
|
<BottomCard>
|
|
60
77
|
<LoadingBubble $width="50%" $height="26px" $margin="0 0 8.75px 0" />
|
|
@@ -2,71 +2,50 @@ import React, { ButtonHTMLAttributes } from "react";
|
|
|
2
2
|
import {
|
|
3
3
|
BottomText,
|
|
4
4
|
ProductCardBottom,
|
|
5
|
-
ProductCardBottomContent,
|
|
6
|
-
ProductCardCreator,
|
|
7
|
-
ProductCardCreatorAvatar,
|
|
8
|
-
ProductCardCreatorName,
|
|
9
5
|
ProductCardImageWrapper,
|
|
10
|
-
ProductCardPrice,
|
|
11
|
-
ProductCardPriceWrapper,
|
|
12
6
|
ProductCardTitle,
|
|
13
7
|
ProductCardTitleWrapper,
|
|
14
8
|
ProductCardWrapper
|
|
15
9
|
} from "../productCard/ProductCard.styles";
|
|
16
|
-
import { Grid } from "../ui/Grid";
|
|
17
10
|
import { theme } from "../../theme";
|
|
18
11
|
import { LoadingBubble } from "./common";
|
|
12
|
+
import styled from "styled-components";
|
|
19
13
|
|
|
20
14
|
type SkeletonCardProps = ButtonHTMLAttributes<HTMLDivElement> & {
|
|
21
15
|
withBottomText?: boolean;
|
|
22
16
|
};
|
|
17
|
+
|
|
18
|
+
const ProductCardImageWrapperStyled = styled(ProductCardImageWrapper)`
|
|
19
|
+
overflow: hidden;
|
|
20
|
+
width: 100%;
|
|
21
|
+
/* REMs gives bad height here on smaller views */
|
|
22
|
+
max-height: 210px;
|
|
23
|
+
min-height: 11.25rem;
|
|
24
|
+
`;
|
|
23
25
|
export const ProductCardSkeleton = (props: SkeletonCardProps) => {
|
|
24
26
|
const { withBottomText } = props;
|
|
25
27
|
|
|
26
28
|
return (
|
|
27
29
|
<ProductCardWrapper {...props} $isHoverDisabled={true}>
|
|
28
|
-
<
|
|
30
|
+
<ProductCardImageWrapperStyled>
|
|
29
31
|
<LoadingBubble
|
|
30
32
|
$width="100%"
|
|
31
33
|
$height="340px"
|
|
32
34
|
$borderRadius="0px"
|
|
33
35
|
$backgroundColor={theme.colors.light.darkGrey}
|
|
34
36
|
/>
|
|
35
|
-
</
|
|
37
|
+
</ProductCardImageWrapperStyled>
|
|
36
38
|
<ProductCardBottom>
|
|
37
39
|
<div>
|
|
38
|
-
<ProductCardBottomContent>
|
|
39
|
-
<Grid flexDirection="column">
|
|
40
|
-
<ProductCardCreator>
|
|
41
|
-
<ProductCardCreatorAvatar>
|
|
42
|
-
<LoadingBubble $width="16px" $height="16px" />
|
|
43
|
-
</ProductCardCreatorAvatar>
|
|
44
|
-
<ProductCardCreatorName data-avatarname="product-card">
|
|
45
|
-
<LoadingBubble $width="50px" $height="12.5px" />
|
|
46
|
-
</ProductCardCreatorName>
|
|
47
|
-
</ProductCardCreator>
|
|
48
|
-
</Grid>
|
|
49
|
-
<ProductCardPriceWrapper>
|
|
50
|
-
<ProductCardPrice>
|
|
51
|
-
<Grid justifyContent="flex-end">
|
|
52
|
-
<LoadingBubble $width="30px" $height="10px" />
|
|
53
|
-
</Grid>
|
|
54
|
-
</ProductCardPrice>
|
|
55
|
-
<Grid justifyContent="flex-end" gap="8px">
|
|
56
|
-
<LoadingBubble $width="24px" $height="24px" />
|
|
57
|
-
<LoadingBubble $width="calc(100% - 24px - 8px)" />
|
|
58
|
-
</Grid>
|
|
59
|
-
</ProductCardPriceWrapper>
|
|
60
|
-
</ProductCardBottomContent>
|
|
61
40
|
<ProductCardTitleWrapper>
|
|
62
41
|
<ProductCardTitle>
|
|
63
|
-
<LoadingBubble $width="
|
|
42
|
+
<LoadingBubble $width="70%" $height="30px" />
|
|
64
43
|
</ProductCardTitle>
|
|
65
44
|
</ProductCardTitleWrapper>
|
|
66
45
|
</div>
|
|
67
46
|
{withBottomText && (
|
|
68
47
|
<BottomText>
|
|
69
|
-
<LoadingBubble $width="
|
|
48
|
+
<LoadingBubble $width="30%" $height="15.5px" />
|
|
70
49
|
</BottomText>
|
|
71
50
|
)}
|
|
72
51
|
</ProductCardBottom>
|