nestiq-component-library 1.1.165 → 1.1.167

package/src/components/NewPropertyCard/NewPropertyCard.css

@@ -1,14 +1,14 @@
 .property-card {
   width: 100%;
-  max-width: 1280px;
+  /* max-width: 1280px; */
   height: auto;
   box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
   border-radius: 32px;
 
-  @media (min-width: 1500px) {
+  /* @media (min-width: 1500px) {
     max-width: 1280px;
     margin: 0 auto;
-  }
+  } */
 }
 
 .priceValue,
@@ -21,13 +21,38 @@
   white-space: nowrap;
 }
 
-.listing-compact {
-  max-width: 750px;
-  gap: 32px;
+.listing-compact_c {
+  /* max-width: 750px; */
+  gap: 8px;
+  padding: 24px;
   border-radius: 0 32px 32px 0;
   background-color: rgba(58, 58, 58, 0.068);
 }
 
+.wrapperCompanySec {
+  height: 119px;
+  align-self: stretch;
+  flex-grow: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 16px;
+  padding: 10px 16px;
+  border-radius: 16px;
+  border: solid 1px rgba(0, 0, 0, 0.1);
+  background-color: #fff;
+}
+
+.kontactbutton_cc {
+  width: 180px;
+  height: 43px;
+  gap: 10px;
+  border-radius: 16px;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  background: linear-gradient(to top, #000, #666);
+}
+
 .cc-height {
   height: 460px;
 }

package/src/components/NewPropertyCard/NewPropertyCard.tsx

@@ -193,102 +193,64 @@ export default function PropertyCard(props: PopupProps) {
         </div>
       </div>
       <div
-        className={`listing-compact d-flex align-self-end flex-column col-6 ${
+        className={`listing-compact_c justify-content-between d-flex flex-column col-6 ${
           props.Impliment ? "cc-height" : "listing-height"
         }`}
       >
-        <div
-          className="d-flex flex-column gap-3 mb-4 justify-content-between"
-          style={{ height: "104px" }}
-        >
-          <div className="d-flex flex-row justify-content-between gap-2">
-            <span
-              className="propertyTitle align-items-start "
-              style={{
-                paddingLeft: "32px",
-                paddingTop: "32px",
-              }}
-              onClick={props.onClick}
-              role="button"
-            >
-              {props.property.expose?.title}
-              {/*Einziehen ohne einen Pinselstrich - Kernsanierte Eigentumswohnung*/}
-              {/*in top Lage*/}
-            </span>
-            <div
-              className="d-flex  gap-2"
-              style={{
-                paddingRight: "32px",
-                paddingTop: "21px",
-                paddingLeft: "10px",
-              }}
-            >
-              <img
-                src={shareIcon}
-                alt="Share Icon"
-                className=" "
-                onClick={handleSharePopUp}
-                style={{ maxHeight: "24px", maxWidth: "24px" }}
-                role="button"
-              />
-              <img
-                src={moreIcon}
-                alt="More Icon"
-                className=""
-                style={{ maxHeight: "24px", maxWidth: "24px" }}
-                role="button"
-              />
-            </div>
-          </div>
-
-          <div
-            style={{
-              paddingLeft: "32px",
-              paddingRight: "32px",
-            }}
-          >
-            {" "}
-            <div className="location-wrapper">
-              <img
-                src={locationIcon}
-                alt="Location Icon"
-                className="location-icon"
-              />
-              <span className="locationTexts ">
-                {props.property.city || "N/A"}
-              </span>
-            </div>
-          </div>
+        <div className="col-12 d-flex justify-content-end gap-2">
+          <img
+            src={shareIcon}
+            alt="Share Icon"
+            className=" "
+            onClick={handleSharePopUp}
+            style={{ maxHeight: "24px", maxWidth: "24px" }}
+            role="button"
+          />
+          <img
+            src={moreIcon}
+            alt="More Icon"
+            className=""
+            style={{ maxHeight: "24px", maxWidth: "24px" }}
+            role="button"
+          />
         </div>
-        <div
-          className="d-flex flex-row justify-content-between mt-3"
-          style={{
-            paddingLeft: "32px",
-            paddingRight: "32px",
-          }}
-        >
+        <div className="col-11">
           <span
-            className="priceValue col-lg-5 col-md-5 col-sm-6"
-            style={{ whiteSpace: "nowrap" }}
+            className="propertyTitle align-items-start "
+            onClick={props.onClick}
+            role="button"
           >
+            {props.property.expose?.title}
+            {/*Einziehen ohne einen Pinselstrich - Kernsanierte Eigentumswohnung*/}
+            {/*in top Lage*/}
+          </span>
+        </div>
+        <div className="col-12">
+          <div className="location-wrapper">
+            <img
+              src={locationIcon}
+              alt="Location Icon"
+              className="location-icon"
+            />
+            <span className="locationTexts ">
+              {props.property.city || "N/A"}
+            </span>
+          </div>
+        </div>
+        <div className="d-flex flex-row justify-content-between">
+          <span className="priceValue justify-content-center align-items-center">
             {formatPrice(props.property?.evaluation?.askingPrice ?? 0)} €
             <div className="price_label" style={{ whiteSpace: "nowrap" }}>
               {t.kaufpreis}
             </div>
           </span>
-          <span
-            className="text-dark value col-lg-5 col-md-5 col-sm-7"
-            style={{ whiteSpace: "nowrap" }}
-          >
+          <span className="text-dark value d-flex justify-content-center align-items-center">
             {props.property.constructedArea} m²
             <div className="details" style={{ whiteSpace: "nowrap" }}>
               {t.wohnflache}
             </div>
           </span>
-          <span
-            className="text-dark value text-center col-lg-2 col-md-2 col-sm-5 text-truncate"
-            style={{ whiteSpace: "nowrap" }}
-          >
+          <span className="text-dark value d-flex justify-content-center align-items-center">
             {+props.property?.rooms}
 
             <div
@@ -304,7 +266,7 @@ export default function PropertyCard(props: PopupProps) {
           </span> */}
         </div>
 
-        <div
+        {/* <div
           className="labelTopClass d-flex start-0 col-sm-5 col-lg-8 "
           style={{ padding: "0 28px" }}
         >
@@ -336,25 +298,21 @@ export default function PropertyCard(props: PopupProps) {
               </label>
             )}
           </div>
-        </div>
+        </div> */}
         {props.Impliment && (
-          <div
-            className=""
-            style={{
-              paddingLeft: "32px",
-              paddingRight: "32px",
-            }}
-          >
-            <div className="Frame-136 d-flex flex-row">
-              <div className="d-flex flex-column flex-lg-row col-4 justify-content-between ">
+          <div className="d-lex flex-column ">
+            <div className="wrapperCompanySec d-flex justify-content-around flex-row">
+              <div className="d-flex flex-column col-4 justify-content-between ">
                 <img src={immooly} alt="Logo" className="immooly" />
               </div>
-              <div className="ms-2 d-flex flex-column col-8 justify-content-center align-self-center text-center">
-                <span className="fw-bold">Herr Florian Gauss</span>
-                <span>Immogart UGh</span>
+              <div className="d-flex flex-column align-items-center justify-content-center">
+                <div className="d-flex flex-column text-center">
+                  <span className="">Firstname Firstname</span>
+                  <span>Your company</span>
+                </div>
                 {/* <button
-                  className="kontactbutton text-light align-self-center"
-                  onClick={handleMessagPopUp}
+                  className="kontactbutton_cc text-light "
+                  // onClick={handleMessagPopUp}
                   role="button"
                 >
                   <span className="kontact-button-text">

package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.css

@@ -1,9 +1,9 @@
-.compact {
+.compact_cc {
+  padding: 32px;
   height: 194px;
   border-radius: 32px;
   box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
   background-color: #f2f2f2;
-  position: relative !important;
 }
 
 .header_Text {
@@ -12,7 +12,7 @@
   line-height: normal;
   color: #1b1b1b;
 }
-.location{
+.location {
   left: 0;
 }
 .vector svg {
@@ -24,8 +24,11 @@
   cursor: pointer;
 }
 
+.textWrapper {
+  height: 20px;
+}
+
 .propText {
-  height: 30px;
   font-size: 16px;
   letter-spacing: normal;
   text-align: center;
@@ -51,44 +54,41 @@
     height: 700px;
   }
   .compact {
-  border-radius: 32px;
-  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
-  background-color: #f2f2f2;
-}
-.compact2{
-  position: relative !important;
-  display: flex !important;
-  align-self: flex-start !important;
-  margin-left: 25px;
-  justify-content: start !important;
-  align-items: flex-start !important;
-
-}
-.compact3{
-  position: relative !important;
-  display: flex !important;
-  margin-left: 30px;
-  margin-top: 10px !important;
-}
-.header_Text {
-  margin-top: 0px;
-  
-}
-.fetch_section {
-  margin-top: 0px;
-  height: 60px;
-}
-.propText {
-  justify-content: start !important;
-  align-self: flex-start !important;
-  text-align: start !important;
-
-}
-.propText2 {
-  justify-content: start !important;
-  align-self: flex-start !important;
-  text-align: start !important;
-  font-weight: 1000;
-  font-size: 24px;
-}
+    border-radius: 32px;
+    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+    background-color: #f2f2f2;
+  }
+  .compact2 {
+    position: relative !important;
+    display: flex !important;
+    align-self: flex-start !important;
+    margin-left: 25px;
+    justify-content: start !important;
+    align-items: flex-start !important;
+  }
+  .compact3 {
+    position: relative !important;
+    display: flex !important;
+    margin-left: 30px;
+    margin-top: 10px !important;
+  }
+  .header_Text {
+    margin-top: 0px;
+  }
+  .fetch_section {
+    margin-top: 0px;
+    height: 60px;
+  }
+  .propText {
+    justify-content: start !important;
+    align-self: flex-start !important;
+    text-align: start !important;
+  }
+  .propText2 {
+    justify-content: start !important;
+    align-self: flex-start !important;
+    text-align: start !important;
+    font-weight: 1000;
+    font-size: 24px;
+  }
 }

package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx

@@ -8,6 +8,7 @@ import { formatPrice, formatPropertyArea } from "../../functions/util";
 
 export interface PopupProps {
   property: {
+    fullAddress: string;
     city: string;
     constructedArea: string;
     rooms: string;
@@ -15,73 +16,91 @@ export interface PopupProps {
     askingPrice: number;
   };
   title: string;
+  translations?: {
+    kaufpreis?: string;
+    wohnflache?: string;
+    zimmer?: string;
+    grundriss?: string;
+  };
 }
 
 export default function PropertyDetailsHeader(props: PopupProps) {
   const [showPopUp, setShowPopUp] = useState(false);
   const area = props.property?.propertyArea;
-  
-    const handleOpenPopup = () => setShowPopUp(true);
 
-    const handleClosePopup = () => setShowPopUp(false);
+  const handleOpenPopup = () => setShowPopUp(true);
+
+  const handleClosePopup = () => setShowPopUp(false);
+
+  const t = {
+    kaufpreis: props.translations?.kaufpreis || "Kaufpreis",
+    wohnflache: props.translations?.wohnflache || "Wohnfläche",
+    zimmer: props.translations?.zimmer || "Zimmer",
+    grundriss: props.translations?.grundriss || "Grundriss",
+  };
+
+  return (
+    <div className="compact_cc d-flex flex-column col-12 col-lg-12 mt-3 justify-content-between">
+      <div className="col-12 d-flex flex-row">
+        <div className="header_Text d-flex col-lg-11 col-md-11 mt-0">
+          <strong>{props.title ?? "-"}</strong>
+        </div>
+        <div className="d-flex col-lg-1 col-md-1 justify-content-end position-relative">
+          {/* <img src={Hearticon} alt="Location Icon" className="v_share me-3" /> */}
+          <img
+            src={ShareIcon}
+            alt="share icon"
+            className="v_share me-3 position-absolute"
+            onClick={handleOpenPopup}
+          />
+        </div>
+      </div>
 
-   return (
-     <div className="Pheader compact d-flex flex-column flex-md-row d-flex col-12 col-lg-12 mt-5 ">
-       <div className="header_Text d-flex col-5 col-lg-7 col-md-9 mt-4 ms-4 ">
-         <strong>{props.title ?? "-"}</strong>
-       </div>
-       <div className="compact3 position-absolute header_Text text-truncate col-5 col-lg-5 col-md-5 d-flex flex-row ms-4">
-         <img src={locationIcon} className="vector me-2" alt="location Icon" />
-         <div className="propText text-truncate col-lg-6 col-md-6 d-flex align-items-center">
-           {props.property.city}
-         </div>
-       </div>
-       <div className="compact2 d-flex col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0 me-2 mt-4">
-         {/* <img src={Hearticon} alt="Location Icon" className="v_share me-3" /> */}
-         <img
-           src={ShareIcon}
-           alt="share icon"
-           className="v_share me-3"
-           onClick={handleOpenPopup}
-         />
-       </div>
-       <div className="compact2 gap-3 gap-md-0 fetch_section d-flex align-items-center flex-column flex-md-row col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0">
-         {props && (
-           <div className="propText col-lg-3 col-md-3 h-100 d-flex flex-column align-items-md-center justify-content-center mt-4 mt-md-0">
-             <span className="propText2">
-               {formatPrice(props.property?.askingPrice ?? 0)}€
-             </span>
-             <span>Kaufpreis</span>
-           </div>
-         )}
+      <div className="d-flex flex-row justify-content-between">
+        <div className="col-6 d-flex flex-row align-items-end jsutify-content-start gap-1">
+          <div className="d-flex gap-1 justify-content-center">
+            <div className="d-flex gap-2 align-items-center">
+              <img src={locationIcon} className="" alt="location Icon" />
+            </div>
+            <div className="textWrapper">{props.property?.fullAddress}</div>
+          </div>
+        </div>
+        <div className="d-flex align-items-end gap-3 justify-content-end flex-row col-lg-6 col-md-6 col-sm-5">
+          {props && (
+            <div className="propText h-100 d-flex flex-column align-items-center justify-content-center">
+              <span className="">
+                {formatPrice(props.property?.askingPrice ?? 0)}€ <br />
+              </span>
+              <span className="textWrapper">{t.kaufpreis}</span>
+            </div>
+          )}
 
-         {props && (
-           <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-md-center justify-content-center flex-column">
-             <span className="propText2">
-               {formatPropertyArea(props.property.constructedArea) ?? 0}
-             </span>
-             <span>Wohnfläche</span>
-             {/* <FormattedMessage id="LIVING_SPACE" /> */}
-           </div>
-         )}
-         {props && (
-           <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center flex-column">
-             <span className="propText2">{props.property.rooms}</span>
-             <span>Zimmer</span>
-             {/* <FormattedMessage id="ROOMS" /> */}
-           </div>
-         )}
-         {props && (
-           <div className="propText  col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center flex-column">
-             <span className="propText2">
-               {formatPropertyArea(area ?? 0)} m²
-             </span>
-             Grundstück
-             {/* <FormattedMessage id="Grundstück" /> */}
-           </div>
-         )}
-       </div>
-       {showPopUp && <SharePopup onClick={() => handleClosePopup()} />  }
-     </div>
-   );
+          {props && (
+            <div className="propText h-100 d-flex flex-column align-items-center justify-content-center">
+              <span className="">
+                {formatPropertyArea(props.property.constructedArea) ?? 0}
+              </span>
+              <span className="textWrapper">{t.wohnflache}</span>
+            </div>
+          )}
+          {props && (
+            <div className="propText h-100 d-flex flex-column align-items-center justify-content-center">
+              <span className="">{props.property.rooms}</span>
+              <span className="textWrapper">{t.zimmer}</span>
+            </div>
+          )}
+          {/* {props && (
+          <div className="propText  col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center flex-column">
+            <span className="">
+              {formatPropertyArea(area ?? 0)} m²
+            </span>
+            Grundstück
+            <FormattedMessage id="Grundstück" />
+          </div>
+        )} */}
+        </div>
+      </div>
+      {showPopUp && <SharePopup onClick={() => handleClosePopup()} />}
+    </div>
+  );
 }