nestiq-component-library 1.1.168 → 1.1.170
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/components/PropertyImageList/PropertyImageList.d.ts +10 -0
- package/dist/index.es.js +73 -66
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +73 -66
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/PropertyImageList/PropertyImageList.tsx +32 -11
- package/src/components/SharePopup/SharePopup.css +28 -28
- package/src/components/SharePopup/SharePopup.tsx +2 -2
|
@@ -7,6 +7,16 @@ interface PopupProps {
|
|
|
7
7
|
url: string;
|
|
8
8
|
}[];
|
|
9
9
|
floorPlanUrl: string;
|
|
10
|
+
property: {
|
|
11
|
+
selectedFloorPlan?: string;
|
|
12
|
+
pictures: {
|
|
13
|
+
contentUrl: string;
|
|
14
|
+
pictureType: {
|
|
15
|
+
id: number;
|
|
16
|
+
};
|
|
17
|
+
}[];
|
|
18
|
+
};
|
|
19
|
+
baseUrl: string;
|
|
10
20
|
}
|
|
11
21
|
export default function PropertyImageList(prop: PopupProps): React.JSX.Element;
|
|
12
22
|
export {};
|
package/dist/index.es.js
CHANGED
|
@@ -68,7 +68,7 @@ var Xtwitter = "/static/media/twitter-x.48a4ac3f560f0a62.svg";
|
|
|
68
68
|
|
|
69
69
|
var whatsapp = "/static/media/whatsapp.28e6b0b24adc9289.svg";
|
|
70
70
|
|
|
71
|
-
var css_248z$7 = ".shareSection {\r\n height: 340px;\r\n padding: 40px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n border: solid 1px #d7d9e3;\r\n background-color: #fff;\r\n max-width: 1280px;\r\n}\r\n.popUpHeader {\r\n height: 48px;\r\n font-size: 32px;\r\n font-weight: 600;\r\n color: #1b1b1b;\r\n}\r\n\r\n.
|
|
71
|
+
var css_248z$7 = ".shareSection {\r\n height: 340px;\r\n padding: 40px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n border: solid 1px #d7d9e3;\r\n background-color: #fff;\r\n max-width: 1280px;\r\n}\r\n.popUpHeader {\r\n height: 48px;\r\n font-size: 32px;\r\n font-weight: 600;\r\n color: #1b1b1b;\r\n}\r\n\r\n.closeIcon_c {\r\n width: 16px;\r\n height: 16px;\r\n cursor: pointer;\r\n}\r\n\r\n.socialMediaIconsSection {\r\n gap: 60px !important;\r\n}\r\n\r\n.socialMediaIcons {\r\n width: 28px !important;\r\n height: 28px !important;\r\n cursor: pointer;\r\n}\r\n\r\n.socialMediaIconText {\r\n height: 36px;\r\n font-size: 13px;\r\n font-weight: 500;\r\n line-height: 3;\r\n color: #344041;\r\n cursor: pointer;\r\n}\r\n\r\n.popup_search-input {\r\n height: 60px;\r\n padding-inline-end: 190px;\r\n font-size: 20px;\r\n box-shadow: inset 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n background-color: rgba(0, 0, 0, 0.05);\r\n}\r\n\r\n.popup_search-input::placeholder {\r\n font-size: 20px;\r\n color: rgba(140, 140, 140, 0.5);\r\n}\r\n\r\n.popup_search-input:focus {\r\n outline: none;\r\n}\r\n\r\n.popupcustom-button {\r\n height: 35px;\r\n color: #000;\r\n cursor: pointer;\r\n border-color: var(--main-yellow);\r\n right: 0;\r\n z-index: 1;\r\n background-image: var(--gradient);\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n.button-text {\r\n width: 115px;\r\n height: 19px;\r\n flex-grow: 0;\r\n font-family: Inter;\r\n font-size: 16px;\r\n font-weight: 500;\r\n font-stretch: normal;\r\n font-style: normal;\r\n line-height: normal;\r\n letter-spacing: normal;\r\n text-align: center;\r\n}\r\n.button_success-right {\r\n width: 184px;\r\n height: 43px;\r\n flex-grow: 0;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 12px 24px;\r\n border-radius: 16px;\r\n border-color: #000;\r\n background-color: transparent;\r\n}\r\n.button_success-left {\r\n width: 200px;\r\n height: 43px;\r\n flex-grow: 0;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 12px 24px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n background-color: var(--main-yellow);\r\n}\r\n.shareSection-Success {\r\n height: 510px;\r\n padding: 40px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n border: solid 1px #d7d9e3;\r\n background-color: #fff;\r\n}\r\n.shareSection-Error {\r\n height: 400px;\r\n padding: 10px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n border: solid 1px #d7d9e3;\r\n background-color: #fff;\r\n}\r\n.MessageShareSection {\r\n height: 513px;\r\n padding: 14px 14px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n border: solid 1px #d7d9e3;\r\n background-color: #fff;\r\n}\r\n\r\n.popup-tags {\r\n font-size: large;\r\n font-weight: bold;\r\n}\r\n.button_icon-left {\r\n width: 184px;\r\n height: 43px;\r\n flex-grow: 0;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 12px 24px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n background-color: var(--main-yellow);\r\n}\r\n.button-text {\r\n width: 85px;\r\n height: 19px;\r\n flex-grow: 0;\r\n font-family: Inter;\r\n font-size: 16px;\r\n font-weight: 500;\r\n font-stretch: normal;\r\n font-style: normal;\r\n line-height: normal;\r\n letter-spacing: normal;\r\n text-align: center;\r\n}\r\n.button_icon-right {\r\n width: 184px;\r\n height: 43px;\r\n flex-grow: 0;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 12px 24px;\r\n border-radius: 16px;\r\n border-color: #000;\r\n background-color: transparent;\r\n}\r\n.circle {\r\n height: 55px;\r\n width: 55px;\r\n background-color: transparent;\r\n border-radius: 50%;\r\n border-style: solid;\r\n border-color: #000;\r\n border-width: 2px;\r\n}\r\n.Line-9,\r\n.Line-10 {\r\n height: 1px;\r\n flex-grow: 1;\r\n background-color: rgba(140, 140, 140, 0.5);\r\n max-width: 23rem;\r\n align-self: center;\r\n align-content: center;\r\n}\r\n\r\n.middle-container {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.middle-text {\r\n margin: 25px 25px;\r\n}\r\n.google-button {\r\n width: 260px;\r\n height: 45px;\r\n flex-grow: 0;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 12px 24px;\r\n border-radius: 4px;\r\n background-color: #000000;\r\n background: linear-gradient(to top, #000, #666);\r\n}\r\n.Account-popup {\r\n height: 713px;\r\n padding: 10px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n border: solid 1px #d7d9e3;\r\n background-color: #fff;\r\n max-width: 1000px;\r\n}\r\n.lightertxt {\r\n color: #797979;\r\n}\r\n\r\n.filter {\r\n height: 343px;\r\n align-self: stretch;\r\n flex-grow: 0;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2px;\r\n padding: 32px;\r\n border-radius: 32px;\r\n box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);\r\n background-color: #f2f2f2;\r\n}\r\n.loginFilter {\r\n height: 280px;\r\n align-self: stretch;\r\n flex-grow: 0;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 2px;\r\n padding: 32px;\r\n border-radius: 32px;\r\n box-shadow: inset 0 4px 10px 0 rgba(0, 0, 0, 0.15);\r\n background-color: #f2f2f2;\r\n}\r\n.radioLabel {\r\n width: 176px;\r\n height: 19px;\r\n flex-grow: 0;\r\n font-family: Inter;\r\n font-size: 16px;\r\n font-weight: normal;\r\n font-stretch: normal;\r\n font-style: normal;\r\n line-height: normal;\r\n letter-spacing: normal;\r\n text-align: left;\r\n color: #1b1b1b;\r\n}\r\n.goButton-text {\r\n width: 78px;\r\n height: 19px;\r\n flex-grow: 0;\r\n font-family: Inter;\r\n font-size: 16px;\r\n font-weight: 500;\r\n font-stretch: normal;\r\n font-style: normal;\r\n line-height: normal;\r\n letter-spacing: normal;\r\n text-align: center;\r\n color: #1b1b1b;\r\n}\r\n.placeholders {\r\n width: 232px;\r\n height: 45px;\r\n flex-grow: 0;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-start;\r\n align-items: center;\r\n gap: 8px;\r\n padding: 12px 24px;\r\n border-radius: 4px;\r\n background-image: linear-gradient(to top, #000 100%, #666 0%);\r\n}\r\n.TagW.active {\r\n height: 40px;\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 6px;\r\n padding: 0 24px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n background-image: linear-gradient(to top, #000, #666);\r\n color: white;\r\n}\r\n.Tag {\r\n height: 40px;\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 6px;\r\n padding: 0 24px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n background-image: linear-gradient(\r\n to top,\r\n rgba(255, 0, 0, 0),\r\n rgba(255, 0, 0, 1)\r\n );\r\n}\r\n.TagW {\r\n height: 40px;\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 6px;\r\n padding: 0 24px;\r\n border-radius: 16px;\r\n border: solid 1px #000;\r\n background-color: #fff;\r\n color: #000;\r\n}\r\n/* */\r\n.response {\r\n max-width: 1280px;\r\n}\r\n";
|
|
72
72
|
styleInject(css_248z$7);
|
|
73
73
|
|
|
74
74
|
function SharePopup(props) {
|
|
@@ -85,7 +85,7 @@ function SharePopup(props) {
|
|
|
85
85
|
return (React.createElement("div", null, showPopUp && (React.createElement("div", { className: " popup-overlay" },
|
|
86
86
|
React.createElement("div", { className: "shareSection col-12 d-flex position-relative flex-column mx-auto justify-content-center col-5 col-lg-6 d-flex gap-4" },
|
|
87
87
|
React.createElement("div", { className: "end-0 top-0 position-absolute " },
|
|
88
|
-
React.createElement("img", { src: x$1, alt: "close", className: "
|
|
88
|
+
React.createElement("img", { src: x$1, alt: "close", className: "closeIcon_c me-2", onClick: handleClose })),
|
|
89
89
|
React.createElement("div", { className: "popUpHeader col-lg-12 d-flex justify-content-center mb-2" }, "Jetzt teilen und weitersagen!"),
|
|
90
90
|
React.createElement("div", { className: "h-25 col-lg-12 socialMediaIconsSection d-flex flex-row align-items-center justify-content-center mx-auto" },
|
|
91
91
|
React.createElement("a", { href: "https://twitter.com/intent/tweet?url=https://www.nestiq.de&text=Nestiq", className: "text-decoration-none", target: "blank" },
|
|
@@ -261,58 +261,11 @@ function ImageListPopup(props) {
|
|
|
261
261
|
} }))); }))))))))));
|
|
262
262
|
}
|
|
263
263
|
|
|
264
|
-
var FloorPlanPopup = function (_a) {
|
|
265
|
-
var contentUrl = _a.contentUrl, onCloseClick = _a.onCloseClick;
|
|
266
|
-
var _b = useState(false), isContentImage = _b[0], setIsContentImage = _b[1];
|
|
267
|
-
useEffect(function () {
|
|
268
|
-
var _a;
|
|
269
|
-
if (contentUrl) {
|
|
270
|
-
var fileFormat = (_a = contentUrl.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
|
|
271
|
-
if (fileFormat === "png" ||
|
|
272
|
-
fileFormat === "jpg" ||
|
|
273
|
-
fileFormat === "jpeg" ||
|
|
274
|
-
fileFormat === "svg") {
|
|
275
|
-
setIsContentImage(true);
|
|
276
|
-
}
|
|
277
|
-
}
|
|
278
|
-
}, [contentUrl]);
|
|
279
|
-
var downloadButtonClickHandler = function () {
|
|
280
|
-
// Create a temporary anchor element
|
|
281
|
-
var link = document.createElement("a");
|
|
282
|
-
link.href = contentUrl;
|
|
283
|
-
link.setAttribute("download", ""); // This attribute hints the browser to download the file
|
|
284
|
-
// Append the anchor to the body and click it to trigger the download
|
|
285
|
-
document.body.appendChild(link);
|
|
286
|
-
link.click();
|
|
287
|
-
// Clean up: remove the anchor element
|
|
288
|
-
document.body.removeChild(link);
|
|
289
|
-
};
|
|
290
|
-
return (React.createElement("div", { className: "popup-overlay" },
|
|
291
|
-
React.createElement("div", { className: " d-flex w-50 flex-column col-6 " },
|
|
292
|
-
React.createElement("div", { className: "d-flex align-self-end me-5 mt-5" },
|
|
293
|
-
React.createElement("img", { src: iconClose, alt: "close", className: "closeIcon mt-5", onClick: onCloseClick })),
|
|
294
|
-
React.createElement("div", { className: "d-flex justify-content-center" },
|
|
295
|
-
React.createElement("div", { className: "p-2 bd-highlight" },
|
|
296
|
-
isContentImage && (React.createElement("div", { className: "rounded-5 mainImage", style: {
|
|
297
|
-
backgroundImage: "url(".concat(contentUrl, ")"),
|
|
298
|
-
height: "350px",
|
|
299
|
-
width: "600px",
|
|
300
|
-
backgroundSize: "cover",
|
|
301
|
-
backgroundPosition: "center",
|
|
302
|
-
} })),
|
|
303
|
-
!isContentImage && (React.createElement("div", { className: "text-white text-center" },
|
|
304
|
-
"No Preview Available",
|
|
305
|
-
React.createElement("button", { className: "btn btn-info", onClick: downloadButtonClickHandler },
|
|
306
|
-
" ",
|
|
307
|
-
"Download",
|
|
308
|
-
" "))))))));
|
|
309
|
-
};
|
|
310
|
-
|
|
311
264
|
function PropertyImageList(prop) {
|
|
312
|
-
var _a;
|
|
313
|
-
var
|
|
314
|
-
var
|
|
315
|
-
var
|
|
265
|
+
var _a, _b;
|
|
266
|
+
var _c = useState(0), currentImageIndex = _c[0], setCurrentImageIndex = _c[1];
|
|
267
|
+
var _d = useState(false), isImagePopupOpen = _d[0], setIsImagePopupOpen = _d[1];
|
|
268
|
+
var _e = useState(false), isFloorPlanPopupOpen = _e[0], setIsFloorPlanPopupOpen = _e[1];
|
|
316
269
|
var imageListRef = useRef(null);
|
|
317
270
|
var handleArrowClickInMainImage = function (direction) {
|
|
318
271
|
if (!prop.pictureUrls.length)
|
|
@@ -323,30 +276,37 @@ function PropertyImageList(prop) {
|
|
|
323
276
|
newIndex =
|
|
324
277
|
(prevIndex - 1 + prop.pictureUrls.length) % prop.pictureUrls.length;
|
|
325
278
|
}
|
|
326
|
-
else
|
|
279
|
+
else {
|
|
327
280
|
newIndex = (prevIndex + 1) % prop.pictureUrls.length;
|
|
328
281
|
}
|
|
282
|
+
if (imageListRef.current) {
|
|
283
|
+
imageListRef.current.scrollTo({
|
|
284
|
+
left: newIndex * 150,
|
|
285
|
+
behavior: "smooth",
|
|
286
|
+
});
|
|
287
|
+
}
|
|
329
288
|
return newIndex || 0;
|
|
330
289
|
});
|
|
331
|
-
imageListRef.current.scrollTo({
|
|
332
|
-
left: currentImageIndex * (direction === "left" ? -150 : 150),
|
|
333
|
-
behavior: "smooth",
|
|
334
|
-
});
|
|
335
290
|
};
|
|
291
|
+
var floorPlanImages = ((_a = prop.property.pictures) === null || _a === void 0 ? void 0 : _a.filter(function (p) { var _a; return ((_a = p.pictureType) === null || _a === void 0 ? void 0 : _a.id) === 1; }).map(function (p, index) { return ({
|
|
292
|
+
url: prop.baseUrl + p.contentUrl,
|
|
293
|
+
title: "Floor Plan ".concat(index + 1),
|
|
294
|
+
}); })) || [];
|
|
295
|
+
if (prop.property.selectedFloorPlan) {
|
|
296
|
+
floorPlanImages.push({
|
|
297
|
+
url: prop.property.selectedFloorPlan,
|
|
298
|
+
title: "Selected Floor Plan",
|
|
299
|
+
});
|
|
300
|
+
}
|
|
336
301
|
var toggleAllPhotos = function () {
|
|
337
302
|
setIsImagePopupOpen(!isImagePopupOpen);
|
|
338
303
|
};
|
|
339
304
|
var floorPlanClickHandler = function () {
|
|
340
|
-
|
|
341
|
-
setIsFloorPlanPopupOpen(true);
|
|
342
|
-
}
|
|
343
|
-
};
|
|
344
|
-
var floorPlanPopupCloseHandler = function () {
|
|
345
|
-
setIsFloorPlanPopupOpen(false);
|
|
305
|
+
setIsFloorPlanPopupOpen(true);
|
|
346
306
|
};
|
|
347
307
|
return (React.createElement("div", { className: "col-8 Pimagelist " },
|
|
348
308
|
React.createElement("div", { className: "col-12 rounded-5 mainImage d-flex position-relative align-items-center", style: {
|
|
349
|
-
backgroundImage: "url(".concat((
|
|
309
|
+
backgroundImage: "url(".concat((_b = prop.pictureUrls[currentImageIndex]) === null || _b === void 0 ? void 0 : _b.url, ")"),
|
|
350
310
|
backgroundSize: "cover",
|
|
351
311
|
backgroundPosition: "center",
|
|
352
312
|
} },
|
|
@@ -396,7 +356,7 @@ function PropertyImageList(prop) {
|
|
|
396
356
|
React.createElement("img", { src: iconMap, alt: "Map Icon" }),
|
|
397
357
|
React.createElement("span", { className: "listImgText" }, "Karte")))))),
|
|
398
358
|
isImagePopupOpen && (React.createElement(ImageListPopup, { pictureUrls: prop.pictureUrls, onClose: function () { return setIsImagePopupOpen(false); } })),
|
|
399
|
-
isFloorPlanPopupOpen && (React.createElement(
|
|
359
|
+
isFloorPlanPopupOpen && (React.createElement(ImageListPopup, { pictureUrls: floorPlanImages, onClose: function () { return setIsFloorPlanPopupOpen(false); } }))));
|
|
400
360
|
}
|
|
401
361
|
|
|
402
362
|
var layerIcon = "/static/media/LayersIcon.34c085c352a2c9c8.svg";
|
|
@@ -459,6 +419,53 @@ function PropertyCard$1(props) {
|
|
|
459
419
|
React.createElement("span", null, "Wohnfl\u00E4che")))));
|
|
460
420
|
}
|
|
461
421
|
|
|
422
|
+
var FloorPlanPopup = function (_a) {
|
|
423
|
+
var contentUrl = _a.contentUrl, onCloseClick = _a.onCloseClick;
|
|
424
|
+
var _b = useState(false), isContentImage = _b[0], setIsContentImage = _b[1];
|
|
425
|
+
useEffect(function () {
|
|
426
|
+
var _a;
|
|
427
|
+
if (contentUrl) {
|
|
428
|
+
var fileFormat = (_a = contentUrl.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
|
|
429
|
+
if (fileFormat === "png" ||
|
|
430
|
+
fileFormat === "jpg" ||
|
|
431
|
+
fileFormat === "jpeg" ||
|
|
432
|
+
fileFormat === "svg") {
|
|
433
|
+
setIsContentImage(true);
|
|
434
|
+
}
|
|
435
|
+
}
|
|
436
|
+
}, [contentUrl]);
|
|
437
|
+
var downloadButtonClickHandler = function () {
|
|
438
|
+
// Create a temporary anchor element
|
|
439
|
+
var link = document.createElement("a");
|
|
440
|
+
link.href = contentUrl;
|
|
441
|
+
link.setAttribute("download", ""); // This attribute hints the browser to download the file
|
|
442
|
+
// Append the anchor to the body and click it to trigger the download
|
|
443
|
+
document.body.appendChild(link);
|
|
444
|
+
link.click();
|
|
445
|
+
// Clean up: remove the anchor element
|
|
446
|
+
document.body.removeChild(link);
|
|
447
|
+
};
|
|
448
|
+
return (React.createElement("div", { className: "popup-overlay" },
|
|
449
|
+
React.createElement("div", { className: " d-flex w-50 flex-column col-6 " },
|
|
450
|
+
React.createElement("div", { className: "d-flex align-self-end me-5 mt-5" },
|
|
451
|
+
React.createElement("img", { src: iconClose, alt: "close", className: "closeIcon mt-5", onClick: onCloseClick })),
|
|
452
|
+
React.createElement("div", { className: "d-flex justify-content-center" },
|
|
453
|
+
React.createElement("div", { className: "p-2 bd-highlight" },
|
|
454
|
+
isContentImage && (React.createElement("div", { className: "rounded-5 mainImage", style: {
|
|
455
|
+
backgroundImage: "url(".concat(contentUrl, ")"),
|
|
456
|
+
height: "350px",
|
|
457
|
+
width: "600px",
|
|
458
|
+
backgroundSize: "cover",
|
|
459
|
+
backgroundPosition: "center",
|
|
460
|
+
} })),
|
|
461
|
+
!isContentImage && (React.createElement("div", { className: "text-white text-center" },
|
|
462
|
+
"No Preview Available",
|
|
463
|
+
React.createElement("button", { className: "btn btn-info", onClick: downloadButtonClickHandler },
|
|
464
|
+
" ",
|
|
465
|
+
"Download",
|
|
466
|
+
" "))))))));
|
|
467
|
+
};
|
|
468
|
+
|
|
462
469
|
var css_248z$3 = ".property-card {\r\n width: 100%;\r\n /* max-width: 1280px; */\r\n height: auto;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n border-radius: 32px;\r\n\r\n /* @media (min-width: 1500px) {\r\n max-width: 1280px;\r\n margin: 0 auto;\r\n } */\r\n}\r\n\r\n.priceValue,\r\n.value {\r\n white-space: nowrap;\r\n}\r\n\r\n.price_label,\r\n.details {\r\n white-space: nowrap;\r\n}\r\n\r\n.listing-compact_c {\r\n /* max-width: 750px; */\r\n gap: 8px;\r\n padding: 24px;\r\n border-radius: 0 32px 32px 0;\r\n background-color: rgba(58, 58, 58, 0.068);\r\n}\r\n\r\n.wrapperCompanySec {\r\n height: 119px;\r\n align-self: stretch;\r\n flex-grow: 0;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-start;\r\n align-items: center;\r\n gap: 16px;\r\n padding: 10px 16px;\r\n border-radius: 16px;\r\n border: solid 1px rgba(0, 0, 0, 0.1);\r\n background-color: #fff;\r\n}\r\n\r\n.kontactbutton_cc {\r\n width: 180px;\r\n height: 43px;\r\n gap: 10px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n background: linear-gradient(to top, #000, #666);\r\n}\r\n\r\n.cc-height {\r\n height: 460px;\r\n}\r\n\r\n.listing-height {\r\n height: 422px;\r\n}\r\n\r\n.cardStyles {\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 460px;\r\n border-radius: 32px 0px 0px 32px !important;\r\n}\r\n.cardTag {\r\n width: 75px;\r\n height: 30px;\r\n flex-grow: 0;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-start;\r\n align-items: center;\r\n gap: 6px;\r\n padding: 0 24px;\r\n border-radius: 16px;\r\n border: solid 1px #313131;\r\n background-color: #fff;\r\n}\r\n.Grundriss {\r\n width: 120px;\r\n height: 30px;\r\n flex-grow: 0;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: 14px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n background: linear-gradient(to top, #000, #666);\r\n}\r\n.Frame-136 {\r\n height: 85px;\r\n align-self: stretch;\r\n flex-grow: 0;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: flex-start;\r\n align-items: center;\r\n gap: 16px;\r\n padding: 10px 16px;\r\n border-radius: 16px;\r\n border: solid 1px rgba(0, 0, 0, 0.1);\r\n background-color: #fff;\r\n}\r\n.kontactbutton {\r\n width: 198px;\r\n height: 43px;\r\n flex-grow: 0;\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 10px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n background: linear-gradient(to top, #000, #666);\r\n}\r\n.kontact-button-text {\r\n flex-grow: 0;\r\n font-size: 16px;\r\n font-weight: 500;\r\n font-stretch: normal;\r\n font-style: normal;\r\n line-height: normal;\r\n letter-spacing: normal;\r\n text-align: center;\r\n color: #fff;\r\n}\r\n.propertyTitle {\r\n display: flex;\r\n flex-grow: 0;\r\n font-size: 24px;\r\n font-weight: 580;\r\n font-stretch: normal;\r\n font-style: normal;\r\n line-height: normal;\r\n letter-spacing: normal;\r\n text-align: start;\r\n color: #313131;\r\n}\r\n\r\n.chipLabel {\r\n height: 30px;\r\n padding: 0 10px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n border: solid 1px #000;\r\n background-color: #fff;\r\n display: flex;\r\n}\r\n\r\n.layersVector {\r\n width: 15.1px;\r\n height: 16px;\r\n}\r\n\r\n.layersText {\r\n padding: 0 8px;\r\n font-size: 14px;\r\n color: #1b1b1b;\r\n line-height: 2.14;\r\n text-wrap: nowrap;\r\n}\r\n\r\n.style-img {\r\n object-fit: cover;\r\n border-radius: 30px !important;\r\n}\r\n\r\n.Vector {\r\n width: 12px;\r\n height: 16.1px;\r\n flex-grow: 0;\r\n margin: 0.4px 6px 0.4px 0;\r\n}\r\n\r\n.customButton {\r\n width: 262px;\r\n height: 43px;\r\n color: #000;\r\n cursor: pointer;\r\n border-color: #161410;\r\n background-color: #181716;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n}\r\n.button_text {\r\n font-size: 16px;\r\n font-weight: 500;\r\n color: #1b1b1b;\r\n}\r\n\r\n.heartVector {\r\n width: 23px;\r\n height: 26.7px;\r\n cursor: pointer;\r\n}\r\n\r\n.heartVector.liked {\r\n fill: rgb(255, 255, 255) !important;\r\n}\r\n\r\n.location-wrapper {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n}\r\n\r\n.location-icon {\r\n width: 16px;\r\n height: 21px;\r\n flex-grow: 0;\r\n object-fit: contain;\r\n}\r\n\r\n.locationTexts {\r\n font-size: 16px;\r\n color: #344041;\r\n text-align: center;\r\n}\r\n\r\n.arrowVector {\r\n width: 23px;\r\n height: 23px;\r\n flex-grow: 0;\r\n object-fit: contain;\r\n}\r\n\r\n.Price {\r\n font-size: 26px;\r\n font-weight: 500;\r\n font-stretch: normal;\r\n font-style: normal;\r\n line-height: normal;\r\n letter-spacing: normal;\r\n text-align: center;\r\n color: #ffffff;\r\n}\r\n\r\n.details {\r\n font-size: 16px;\r\n color: #344041;\r\n}\r\n\r\n.price_label {\r\n font-size: 16px;\r\n text-align: left;\r\n color: #344041;\r\n}\r\n\r\n.value {\r\n font-size: 20px;\r\n font-weight: 500;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 5px;\r\n line-height: 1;\r\n}\r\n.priceValue {\r\n font-size: 20px;\r\n font-weight: 500;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 5px;\r\n line-height: 1;\r\n}\r\n\r\n.class {\r\n background-color: #1b1b1b;\r\n}\r\n\r\n.header {\r\n height: 64px;\r\n justify-content: center;\r\n}\r\n\r\n.rightConer {\r\n width: 200px;\r\n}\r\n.labelTopClass {\r\n height: 32px;\r\n}\r\n@media all and (min-width: 2560px) {\r\n .header {\r\n font-size: 38px;\r\n\r\n display: flex;\r\n }\r\n .cardStyle {\r\n gap: 0px;\r\n width: 350px;\r\n height: 300px;\r\n /* margin-left: 250px; */\r\n }\r\n}\r\n@media (max-width: 1399px) {\r\n .header {\r\n font-size: 38px;\r\n align-self: center;\r\n margin-left: 150px;\r\n }\r\n .cardStyle {\r\n gap: 0px;\r\n width: 350px;\r\n height: 300px;\r\n }\r\n}\r\n\r\n@media (max-width: 1199px) {\r\n .header {\r\n font-size: 38px;\r\n }\r\n .cardStyle {\r\n width: 300px;\r\n height: 250px;\r\n }\r\n}\r\n\r\n@media (max-width: 575px) {\r\n .detail {\r\n font-size: 11px;\r\n padding: 2px;\r\n }\r\n .Price {\r\n font-size: 19px;\r\n }\r\n .header {\r\n font-size: 28px;\r\n }\r\n .locationText {\r\n font-size: 12px;\r\n }\r\n .customButton {\r\n width: 200px !important;\r\n }\r\n .button_text {\r\n font-size: 13px;\r\n }\r\n}\r\n\r\n@media (max-width: 375px) {\r\n .labelTopClass {\r\n width: 105px !important;\r\n }\r\n .layersText {\r\n font-size: 9px;\r\n padding: 0 2rem;\r\n }\r\n .firstLabel {\r\n gap: 2px;\r\n }\r\n .layersVector {\r\n width: 9px;\r\n height: 10px;\r\n gap: 0px;\r\n }\r\n .cardStyle {\r\n width: 320px !important;\r\n height: 220px !important;\r\n }\r\n .header {\r\n font-size: 24px;\r\n }\r\n .detail {\r\n font-size: 10px;\r\n padding: 2px;\r\n }\r\n .Price {\r\n font-size: 18px;\r\n }\r\n .locationText {\r\n font-size: 10px;\r\n }\r\n .Vector {\r\n width: 8px;\r\n height: 16px;\r\n margin: 0px 2px 0.4px;\r\n }\r\n}\r\n\r\n@media (max-width: 280px) {\r\n .cardStyle {\r\n width: 260px !important;\r\n height: 160px !important;\r\n }\r\n .detail {\r\n margin-bottom: 5px;\r\n font-size: 0.6ch;\r\n }\r\n .Price {\r\n font-size: 9px;\r\n }\r\n .locationText {\r\n font-size: 6px;\r\n }\r\n .Vector {\r\n width: 7px;\r\n height: 10px;\r\n margin: 0px 2px 4px;\r\n }\r\n .heartVector {\r\n width: 15px;\r\n height: 20px;\r\n }\r\n}\r\n";
|
|
463
470
|
styleInject(css_248z$3);
|
|
464
471
|
|