nestiq-component-library 1.1.98 → 1.1.100
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/index.js
CHANGED
|
@@ -438,7 +438,7 @@ function PropertyCard$1(props) {
|
|
|
438
438
|
React.createElement("span", null, "Wohnfl\u00E4che")))));
|
|
439
439
|
}
|
|
440
440
|
|
|
441
|
-
var css_248z$3 = ".property-card {\r\n width: 100%;\r\n max-width: 1280px;\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.listing-
|
|
441
|
+
var css_248z$3 = ".property-card {\r\n width: 100%;\r\n max-width: 1280px;\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.listing-compact {\r\n max-width: 750px;\r\n flex-grow: 1;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: flex-start;\r\n align-items: flex-start;\r\n gap: 16px;\r\n border-radius: 0px 32px 32px 0px;\r\n /* box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25); */\r\n background-color: rgba(58, 58, 58, 0.068);\r\n height: 460px;\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: 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.kontactbutton {\r\n width: 180px;\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-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: #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.firstLabel {\r\n width: 100px;\r\n height: 25px;\r\n gap: 6px;\r\n border-radius: 16px;\r\n box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);\r\n border: solid 1px #031012 !important;\r\n background-color: var(--main-yellow);\r\n}\r\n\r\n.secondLabel {\r\n width: 85px;\r\n height: 25px;\r\n padding: 0 7px;\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.thirdLabels {\r\n width: 110px;\r\n padding: 0 7px;\r\n height: 25px;\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.fourthLabels {\r\n padding: 2px;\r\n\r\n width: 100px;\r\n height: 25px;\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}\r\n\r\n.layersVector {\r\n width: 15.1px;\r\n height: 16px;\r\n}\r\n\r\n.layersText {\r\n font-size: 14px;\r\n color: #1b1b1b;\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.locationTexts {\r\n font-size: 14px;\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: 14px;\r\n text-align: center;\r\n color: #344041;\r\n}\r\n.value {\r\n font-size: 20px;\r\n text-align: center;\r\n font-weight: 500;\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@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 }\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";
|
|
442
442
|
styleInject(css_248z$3);
|
|
443
443
|
|
|
444
444
|
var noImageIcon = "/static/media/default-property.9987f19670be82b6.jpg";
|
|
@@ -504,37 +504,45 @@ function PropertyCard(props) {
|
|
|
504
504
|
}
|
|
505
505
|
};
|
|
506
506
|
return (React.createElement("div", { className: "d-flex flex-row property-card" },
|
|
507
|
-
React.createElement("div", { className: "d-flex flex-column col-md-6", onClick: props.onClick },
|
|
507
|
+
React.createElement("div", { className: "d-flex flex-column col-md-6 col-lg-6", onClick: props.onClick },
|
|
508
508
|
React.createElement("div", { key: props.property.id, className: "card-bod position-relative cardStyles h-100 w-100", style: {
|
|
509
509
|
backgroundImage: "url(".concat(mainImage || pictureUrls[0], ")"),
|
|
510
510
|
backgroundSize: "cover",
|
|
511
511
|
backgroundPosition: "center",
|
|
512
|
+
maxWidth: "640",
|
|
512
513
|
} },
|
|
513
514
|
React.createElement("div", { className: "d-flex flex-row justify-content-between gap-5" },
|
|
514
|
-
React.createElement("div", { className: "d-flex ms-2", style: { position: "absolute",
|
|
515
|
+
React.createElement("div", { className: "d-flex ms-2", style: { position: "absolute", marginLeft: "16px" }, onClick: function () { return handleArrowClickInMainImage("left"); }, role: "button" },
|
|
515
516
|
React.createElement("img", { src: arrowLeft })),
|
|
516
517
|
React.createElement("div", null),
|
|
517
518
|
React.createElement("div", { className: "d-flex me-2", onClick: function () { return handleArrowClickInMainImage("right"); }, role: "button" },
|
|
518
|
-
React.createElement("img", { src: arrowRight, style: { position: "absolute", right: "
|
|
519
|
+
React.createElement("img", { src: arrowRight, style: { position: "absolute", right: "16px" } }))),
|
|
519
520
|
React.createElement("div", { className: "d-flex flex-row align-self-end justify-item-start justify-content-between align-item-start gap-1 mb-2 ms-4", style: { position: "absolute", left: "0" } },
|
|
520
521
|
React.createElement("div", { className: "cardTag" }, "".concat(currentImageIndex + 1, "/").concat(pictureUrls.length)),
|
|
521
522
|
React.createElement("div", { className: "Grundriss kontact-button-text ", role: "button", onClick: floorPlanOnClick },
|
|
522
523
|
React.createElement("img", { src: iconLayers, className: "", style: { width: "18px" } }),
|
|
523
524
|
" ",
|
|
524
525
|
"Grundriss")))),
|
|
525
|
-
React.createElement("div", { className: "d-flex flex-column listing-
|
|
526
|
-
React.createElement("div", { className: "d-flex
|
|
527
|
-
React.createElement("
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
526
|
+
React.createElement("div", { className: "d-flex flex-column listing-compact col-6" },
|
|
527
|
+
React.createElement("div", { className: "d-flex flex-row justify-content-between gap-2" },
|
|
528
|
+
React.createElement("span", { className: "propertyTitle align-items-start ", style: {
|
|
529
|
+
paddingLeft: "32px",
|
|
530
|
+
paddingTop: "32px",
|
|
531
|
+
} }, (_c = props.property.expose) === null || _c === void 0 ? void 0 : _c.title),
|
|
532
|
+
React.createElement("div", { className: "d-flex gap-2", style: {
|
|
533
|
+
paddingRight: "32px",
|
|
534
|
+
paddingTop: "21px",
|
|
535
|
+
paddingLeft: "76px",
|
|
536
|
+
} },
|
|
537
|
+
React.createElement("img", { src: shareIcon, alt: "Location Icon", className: " ", onClick: handleSharePopUp, style: { maxHeight: "24px", maxWidth: "24px" } }),
|
|
538
|
+
React.createElement("img", { src: moreIcon, alt: "Location Icon", className: "", style: { maxHeight: "24px", maxWidth: "24px" } }))),
|
|
539
|
+
React.createElement("div", { style: { paddingLeft: "32px", paddingRight: "32px" } },
|
|
532
540
|
" ",
|
|
533
541
|
React.createElement("div", { className: "d-flex " },
|
|
534
542
|
React.createElement("img", { src: locationIcon, alt: "Location Icon", className: "Vector" }),
|
|
535
543
|
React.createElement("span", { className: "locationTexts " }, props.property.city || "N/A"))),
|
|
536
|
-
React.createElement("div", { className: "d-flex flex-row gap-3 col-6 col-lg-8 justify-content-between " },
|
|
537
|
-
React.createElement("span", { className: "value col-lg-
|
|
544
|
+
React.createElement("div", { className: "d-flex flex-row gap-3 col-6 col-lg-8 justify-content-between ", style: { paddingLeft: "32px", paddingRight: "32px" } },
|
|
545
|
+
React.createElement("span", { className: "value col-lg-4 col-md-4 col-sm-6 " },
|
|
538
546
|
formatPrice((_f = (_e = (_d = props.property) === null || _d === void 0 ? void 0 : _d.evaluation) === null || _e === void 0 ? void 0 : _e.askingPrice) !== null && _f !== void 0 ? _f : 0),
|
|
539
547
|
" \u20AC",
|
|
540
548
|
React.createElement("br", null),
|
|
@@ -550,13 +558,13 @@ function PropertyCard(props) {
|
|
|
550
558
|
React.createElement("br", null),
|
|
551
559
|
React.createElement("span", { className: "details" },
|
|
552
560
|
React.createElement("span", null, "Bad"))),
|
|
553
|
-
React.createElement("span", { className: "text-dark value col-lg-
|
|
561
|
+
React.createElement("span", { className: "text-dark value col-lg-5 col-md-5 col-sm-7 " },
|
|
554
562
|
props.property.usableArea,
|
|
555
563
|
" m\u00B2",
|
|
556
564
|
React.createElement("br", null),
|
|
557
565
|
React.createElement("span", { className: "details" },
|
|
558
566
|
React.createElement("span", null, "Wohnfl\u00E4che")))),
|
|
559
|
-
React.createElement("div", { className: "labelTopClass d-flex top-0 start-0 col-sm-5 col-lg-8 " },
|
|
567
|
+
React.createElement("div", { className: "labelTopClass d-flex top-0 start-0 col-sm-5 col-lg-8 ", style: { paddingLeft: "32px", paddingRight: "32px" } },
|
|
560
568
|
React.createElement("div", { className: " align-items-center d-flex flex-row gap-3" },
|
|
561
569
|
props.property.historicalProtection && (React.createElement("label", { className: "thirdLabels justify-content-center align-items-center" },
|
|
562
570
|
React.createElement("span", { className: "layersText " }, "Denkmalschutz"))),
|
|
@@ -568,13 +576,18 @@ function PropertyCard(props) {
|
|
|
568
576
|
React.createElement("span", { className: "layersText" }, "Terrace"))),
|
|
569
577
|
props.property.guestBathroom && (React.createElement("label", { className: "col-1 thirdLabels justify-content-center align-items-center " },
|
|
570
578
|
React.createElement("span", { className: "layersText " }, "Gäste-WC"))))),
|
|
571
|
-
React.createElement("div", { className: "
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
579
|
+
React.createElement("div", { className: "", style: {
|
|
580
|
+
paddingLeft: "32px",
|
|
581
|
+
paddingRight: "32px",
|
|
582
|
+
paddingTop: "32px",
|
|
583
|
+
} },
|
|
584
|
+
React.createElement("div", { className: "Frame-136 d-flex flex-row" },
|
|
585
|
+
React.createElement("div", { className: "d-flex flex-column flex-lg-row col-4 justify-content-between " },
|
|
586
|
+
React.createElement("img", { src: immooly, alt: "Logo", className: "immooly" })),
|
|
587
|
+
React.createElement("div", { className: "d-flex flex-column flex-lg-row justify-content-between" },
|
|
588
|
+
React.createElement("span", { className: "d-flex col-5" }, "Herr Florian Gauss Immogart UGh"),
|
|
589
|
+
React.createElement("button", { className: "kontactbutton text-light ", onClick: handleMessagPopUp, role: "button" },
|
|
590
|
+
React.createElement("span", { className: "kontact-button-text" }, "Kontakt aufnehmen ")))))),
|
|
578
591
|
floorPlan && (React.createElement(FloorPlanPopup, { contentUrl: props.floorPlanUrl, onCloseClick: function () { return setFloorPlan(false); } })),
|
|
579
592
|
sharePopUp && React.createElement(SharePopup, { onClick: function () { return setSharePopUp(false); } })));
|
|
580
593
|
}
|