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
package/dist/index.js
CHANGED
|
@@ -70,7 +70,7 @@ var Xtwitter = "/static/media/twitter-x.48a4ac3f560f0a62.svg";
|
|
|
70
70
|
|
|
71
71
|
var whatsapp = "/static/media/whatsapp.28e6b0b24adc9289.svg";
|
|
72
72
|
|
|
73
|
-
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.
|
|
73
|
+
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";
|
|
74
74
|
styleInject(css_248z$7);
|
|
75
75
|
|
|
76
76
|
function SharePopup(props) {
|
|
@@ -87,7 +87,7 @@ function SharePopup(props) {
|
|
|
87
87
|
return (React.createElement("div", null, showPopUp && (React.createElement("div", { className: " popup-overlay" },
|
|
88
88
|
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" },
|
|
89
89
|
React.createElement("div", { className: "end-0 top-0 position-absolute " },
|
|
90
|
-
React.createElement("img", { src: x$1, alt: "close", className: "
|
|
90
|
+
React.createElement("img", { src: x$1, alt: "close", className: "closeIcon_c me-2", onClick: handleClose })),
|
|
91
91
|
React.createElement("div", { className: "popUpHeader col-lg-12 d-flex justify-content-center mb-2" }, "Jetzt teilen und weitersagen!"),
|
|
92
92
|
React.createElement("div", { className: "h-25 col-lg-12 socialMediaIconsSection d-flex flex-row align-items-center justify-content-center mx-auto" },
|
|
93
93
|
React.createElement("a", { href: "https://twitter.com/intent/tweet?url=https://www.nestiq.de&text=Nestiq", className: "text-decoration-none", target: "blank" },
|
|
@@ -263,58 +263,11 @@ function ImageListPopup(props) {
|
|
|
263
263
|
} }))); }))))))))));
|
|
264
264
|
}
|
|
265
265
|
|
|
266
|
-
var FloorPlanPopup = function (_a) {
|
|
267
|
-
var contentUrl = _a.contentUrl, onCloseClick = _a.onCloseClick;
|
|
268
|
-
var _b = React.useState(false), isContentImage = _b[0], setIsContentImage = _b[1];
|
|
269
|
-
React.useEffect(function () {
|
|
270
|
-
var _a;
|
|
271
|
-
if (contentUrl) {
|
|
272
|
-
var fileFormat = (_a = contentUrl.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
|
|
273
|
-
if (fileFormat === "png" ||
|
|
274
|
-
fileFormat === "jpg" ||
|
|
275
|
-
fileFormat === "jpeg" ||
|
|
276
|
-
fileFormat === "svg") {
|
|
277
|
-
setIsContentImage(true);
|
|
278
|
-
}
|
|
279
|
-
}
|
|
280
|
-
}, [contentUrl]);
|
|
281
|
-
var downloadButtonClickHandler = function () {
|
|
282
|
-
// Create a temporary anchor element
|
|
283
|
-
var link = document.createElement("a");
|
|
284
|
-
link.href = contentUrl;
|
|
285
|
-
link.setAttribute("download", ""); // This attribute hints the browser to download the file
|
|
286
|
-
// Append the anchor to the body and click it to trigger the download
|
|
287
|
-
document.body.appendChild(link);
|
|
288
|
-
link.click();
|
|
289
|
-
// Clean up: remove the anchor element
|
|
290
|
-
document.body.removeChild(link);
|
|
291
|
-
};
|
|
292
|
-
return (React.createElement("div", { className: "popup-overlay" },
|
|
293
|
-
React.createElement("div", { className: " d-flex w-50 flex-column col-6 " },
|
|
294
|
-
React.createElement("div", { className: "d-flex align-self-end me-5 mt-5" },
|
|
295
|
-
React.createElement("img", { src: iconClose, alt: "close", className: "closeIcon mt-5", onClick: onCloseClick })),
|
|
296
|
-
React.createElement("div", { className: "d-flex justify-content-center" },
|
|
297
|
-
React.createElement("div", { className: "p-2 bd-highlight" },
|
|
298
|
-
isContentImage && (React.createElement("div", { className: "rounded-5 mainImage", style: {
|
|
299
|
-
backgroundImage: "url(".concat(contentUrl, ")"),
|
|
300
|
-
height: "350px",
|
|
301
|
-
width: "600px",
|
|
302
|
-
backgroundSize: "cover",
|
|
303
|
-
backgroundPosition: "center",
|
|
304
|
-
} })),
|
|
305
|
-
!isContentImage && (React.createElement("div", { className: "text-white text-center" },
|
|
306
|
-
"No Preview Available",
|
|
307
|
-
React.createElement("button", { className: "btn btn-info", onClick: downloadButtonClickHandler },
|
|
308
|
-
" ",
|
|
309
|
-
"Download",
|
|
310
|
-
" "))))))));
|
|
311
|
-
};
|
|
312
|
-
|
|
313
266
|
function PropertyImageList(prop) {
|
|
314
|
-
var _a;
|
|
315
|
-
var
|
|
316
|
-
var
|
|
317
|
-
var
|
|
267
|
+
var _a, _b;
|
|
268
|
+
var _c = React.useState(0), currentImageIndex = _c[0], setCurrentImageIndex = _c[1];
|
|
269
|
+
var _d = React.useState(false), isImagePopupOpen = _d[0], setIsImagePopupOpen = _d[1];
|
|
270
|
+
var _e = React.useState(false), isFloorPlanPopupOpen = _e[0], setIsFloorPlanPopupOpen = _e[1];
|
|
318
271
|
var imageListRef = React.useRef(null);
|
|
319
272
|
var handleArrowClickInMainImage = function (direction) {
|
|
320
273
|
if (!prop.pictureUrls.length)
|
|
@@ -325,30 +278,37 @@ function PropertyImageList(prop) {
|
|
|
325
278
|
newIndex =
|
|
326
279
|
(prevIndex - 1 + prop.pictureUrls.length) % prop.pictureUrls.length;
|
|
327
280
|
}
|
|
328
|
-
else
|
|
281
|
+
else {
|
|
329
282
|
newIndex = (prevIndex + 1) % prop.pictureUrls.length;
|
|
330
283
|
}
|
|
284
|
+
if (imageListRef.current) {
|
|
285
|
+
imageListRef.current.scrollTo({
|
|
286
|
+
left: newIndex * 150,
|
|
287
|
+
behavior: "smooth",
|
|
288
|
+
});
|
|
289
|
+
}
|
|
331
290
|
return newIndex || 0;
|
|
332
291
|
});
|
|
333
|
-
imageListRef.current.scrollTo({
|
|
334
|
-
left: currentImageIndex * (direction === "left" ? -150 : 150),
|
|
335
|
-
behavior: "smooth",
|
|
336
|
-
});
|
|
337
292
|
};
|
|
293
|
+
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 ({
|
|
294
|
+
url: prop.baseUrl + p.contentUrl,
|
|
295
|
+
title: "Floor Plan ".concat(index + 1),
|
|
296
|
+
}); })) || [];
|
|
297
|
+
if (prop.property.selectedFloorPlan) {
|
|
298
|
+
floorPlanImages.push({
|
|
299
|
+
url: prop.property.selectedFloorPlan,
|
|
300
|
+
title: "Selected Floor Plan",
|
|
301
|
+
});
|
|
302
|
+
}
|
|
338
303
|
var toggleAllPhotos = function () {
|
|
339
304
|
setIsImagePopupOpen(!isImagePopupOpen);
|
|
340
305
|
};
|
|
341
306
|
var floorPlanClickHandler = function () {
|
|
342
|
-
|
|
343
|
-
setIsFloorPlanPopupOpen(true);
|
|
344
|
-
}
|
|
345
|
-
};
|
|
346
|
-
var floorPlanPopupCloseHandler = function () {
|
|
347
|
-
setIsFloorPlanPopupOpen(false);
|
|
307
|
+
setIsFloorPlanPopupOpen(true);
|
|
348
308
|
};
|
|
349
309
|
return (React.createElement("div", { className: "col-8 Pimagelist " },
|
|
350
310
|
React.createElement("div", { className: "col-12 rounded-5 mainImage d-flex position-relative align-items-center", style: {
|
|
351
|
-
backgroundImage: "url(".concat((
|
|
311
|
+
backgroundImage: "url(".concat((_b = prop.pictureUrls[currentImageIndex]) === null || _b === void 0 ? void 0 : _b.url, ")"),
|
|
352
312
|
backgroundSize: "cover",
|
|
353
313
|
backgroundPosition: "center",
|
|
354
314
|
} },
|
|
@@ -398,7 +358,7 @@ function PropertyImageList(prop) {
|
|
|
398
358
|
React.createElement("img", { src: iconMap, alt: "Map Icon" }),
|
|
399
359
|
React.createElement("span", { className: "listImgText" }, "Karte")))))),
|
|
400
360
|
isImagePopupOpen && (React.createElement(ImageListPopup, { pictureUrls: prop.pictureUrls, onClose: function () { return setIsImagePopupOpen(false); } })),
|
|
401
|
-
isFloorPlanPopupOpen && (React.createElement(
|
|
361
|
+
isFloorPlanPopupOpen && (React.createElement(ImageListPopup, { pictureUrls: floorPlanImages, onClose: function () { return setIsFloorPlanPopupOpen(false); } }))));
|
|
402
362
|
}
|
|
403
363
|
|
|
404
364
|
var layerIcon = "/static/media/LayersIcon.34c085c352a2c9c8.svg";
|
|
@@ -461,6 +421,53 @@ function PropertyCard$1(props) {
|
|
|
461
421
|
React.createElement("span", null, "Wohnfl\u00E4che")))));
|
|
462
422
|
}
|
|
463
423
|
|
|
424
|
+
var FloorPlanPopup = function (_a) {
|
|
425
|
+
var contentUrl = _a.contentUrl, onCloseClick = _a.onCloseClick;
|
|
426
|
+
var _b = React.useState(false), isContentImage = _b[0], setIsContentImage = _b[1];
|
|
427
|
+
React.useEffect(function () {
|
|
428
|
+
var _a;
|
|
429
|
+
if (contentUrl) {
|
|
430
|
+
var fileFormat = (_a = contentUrl.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
|
|
431
|
+
if (fileFormat === "png" ||
|
|
432
|
+
fileFormat === "jpg" ||
|
|
433
|
+
fileFormat === "jpeg" ||
|
|
434
|
+
fileFormat === "svg") {
|
|
435
|
+
setIsContentImage(true);
|
|
436
|
+
}
|
|
437
|
+
}
|
|
438
|
+
}, [contentUrl]);
|
|
439
|
+
var downloadButtonClickHandler = function () {
|
|
440
|
+
// Create a temporary anchor element
|
|
441
|
+
var link = document.createElement("a");
|
|
442
|
+
link.href = contentUrl;
|
|
443
|
+
link.setAttribute("download", ""); // This attribute hints the browser to download the file
|
|
444
|
+
// Append the anchor to the body and click it to trigger the download
|
|
445
|
+
document.body.appendChild(link);
|
|
446
|
+
link.click();
|
|
447
|
+
// Clean up: remove the anchor element
|
|
448
|
+
document.body.removeChild(link);
|
|
449
|
+
};
|
|
450
|
+
return (React.createElement("div", { className: "popup-overlay" },
|
|
451
|
+
React.createElement("div", { className: " d-flex w-50 flex-column col-6 " },
|
|
452
|
+
React.createElement("div", { className: "d-flex align-self-end me-5 mt-5" },
|
|
453
|
+
React.createElement("img", { src: iconClose, alt: "close", className: "closeIcon mt-5", onClick: onCloseClick })),
|
|
454
|
+
React.createElement("div", { className: "d-flex justify-content-center" },
|
|
455
|
+
React.createElement("div", { className: "p-2 bd-highlight" },
|
|
456
|
+
isContentImage && (React.createElement("div", { className: "rounded-5 mainImage", style: {
|
|
457
|
+
backgroundImage: "url(".concat(contentUrl, ")"),
|
|
458
|
+
height: "350px",
|
|
459
|
+
width: "600px",
|
|
460
|
+
backgroundSize: "cover",
|
|
461
|
+
backgroundPosition: "center",
|
|
462
|
+
} })),
|
|
463
|
+
!isContentImage && (React.createElement("div", { className: "text-white text-center" },
|
|
464
|
+
"No Preview Available",
|
|
465
|
+
React.createElement("button", { className: "btn btn-info", onClick: downloadButtonClickHandler },
|
|
466
|
+
" ",
|
|
467
|
+
"Download",
|
|
468
|
+
" "))))))));
|
|
469
|
+
};
|
|
470
|
+
|
|
464
471
|
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";
|
|
465
472
|
styleInject(css_248z$3);
|
|
466
473
|
|