nestiq-component-library 1.1.15 → 1.1.17

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.
Files changed (8) hide show
  1. package/dist/index.es.js +56 -58
  2. package/dist/index.es.js.map +1 -1
  3. package/dist/index.js +56 -58
  4. package/dist/index.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx +62 -53
  7. package/src/components/PropertyImageList/PropertyImageList.css +31 -28
  8. package/src/components/PropertyImageList/PropertyImageList.tsx +86 -81
package/src/components/PropertyDetailsHeader/PropertyDetailsHeader.tsx CHANGED
@@ -25,58 +25,67 @@ export default function PropertyDetailsHeader(props: PopupProps) {
25
25
  setShowPopUp(!showPopUp);
26
26
  };
27
27
 
28
- return (
29
- <div className="Pheader compact d-flex col-12 col-lg-12 position-relative mt-5 ">
30
- <div className="header_Text d-flex col-lg-7 col-md-9 mt-4 ms-4 ">
31
- <strong>{props.title ?? "-"}</strong>
32
- </div>
33
- <div className="header_Text text-truncate col-lg-6 col-md-7 d-flex flex-row position-absolute ms-4">
34
- <img src={locationIcon} className="vector me-2" alt="location Icon" />
28
+ return (
29
+ <div className="Pheader compact d-flex flex-column flex-md-row d-flex col-12 col-lg-12 mt-5 ">
30
+ <div className="header_Text d-flex col-5 col-lg-7 col-md-9 mt-4 ms-4 ">
31
+ <strong>
32
+ {props.title ?? "-"}
33
+ </strong>
34
+ </div>
35
+ <div className="compact3 position-absolute header_Text text-truncate col-5 col-lg-5 col-md-5 d-flex flex-row ms-4">
36
+ <img src={locationIcon} className="vector me-2" alt="location Icon" />
37
+ <div className="propText text-truncate col-lg-6 col-md-6 d-flex align-items-center">
38
+ {props.property.city}
39
+ </div>
40
+ </div>
41
+ <div className="compact2 d-flex col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0 mt-4">
42
+ {/* <img src={Hearticon} alt="Location Icon" className="v_share me-3" /> */}
43
+ <img
44
+ src={ShareIcon}
45
+ alt="share icon"
46
+ className="v_share me-3"
47
+ onClick={handlePopUp}
48
+ />
49
+ </div>
50
+ <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">
51
+ {props && (
52
+ <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">
53
+ <span className="propText2">
54
+ {formatPrice(props.property?.askingPrice ?? 0)}€
55
+ </span>
56
+ <span>Kaufpreis</span>
57
+ </div>
58
+ )}
35
59
 
36
- <div className="propText text-truncate col-lg-6 col-md-6 d-flex align-items-center">
37
- {props.property.city}
38
- </div>
39
- </div>
40
- <div className="d-flex col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0 mt-4">
41
- {/* <img src={Hearticon} alt="Location Icon" className="v_share me-3" /> */}
42
- <img
43
- src={ShareIcon}
44
- alt="share icon"
45
- className="v_share me-3"
46
- onClick={handlePopUp}
47
- />
48
- </div>
49
- <div className="fetch_section d-flex align-items-center flex-row col-lg-5 col-md-6 col-sm-5 justify-content-end position-absolute end-0">
50
- {props && (
51
- <div className=" propText col-lg-3 col-md-3 h-100 d-flex align-items-center justify-content-center ">
52
- {formatPrice(props.property?.askingPrice ?? 0)} €
53
- <br />
54
- Kaufpreis
55
- </div>
56
- )}
57
- {props && (
58
- <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
59
- {formatPropertyArea(props.property.constructedArea) ?? 0} m² <br />
60
- Wohnfläche
61
- {/* <FormattedMessage id="LIVING_SPACE" /> */}
62
- </div>
63
- )}
64
- {props && (
65
- <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
66
- {props.property.rooms} <br />
67
- Zimmer
68
- {/* <FormattedMessage id="ROOMS" /> */}
69
- </div>
70
- )}
71
- {props && (
72
- <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center">
73
- {formatPropertyArea(area ?? 0)} m² <br />
74
- Grundstück
75
- {/* <FormattedMessage id="Grundstück" /> */}
76
- </div>
77
- )}
78
- </div>
79
- {showPopUp && <SharePopup />}
80
- </div>
81
- );
60
+ {props && (
61
+ <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-md-center justify-content-center flex-column">
62
+ <span className="propText2">
63
+ {formatPropertyArea(props.property.constructedArea) ?? 0}
64
+ </span>
65
+ <span>Wohnfläche</span>
66
+ {/* <FormattedMessage id="LIVING_SPACE" /> */}
67
+ </div>
68
+ )}
69
+ {props && (
70
+ <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center flex-column">
71
+ <span className="propText2">
72
+ {props.property.rooms}
73
+ </span>
74
+ <span>Zimmer</span>
75
+ {/* <FormattedMessage id="ROOMS" /> */}
76
+ </div>
77
+ )}
78
+ {props && (
79
+ <div className="propText col-lg-3 col-md-3 d-flex h-100 align-items-center justify-content-center flex-column">
80
+ <span className="propText2">
81
+ {formatPropertyArea(area ?? 0)} m²
82
+ </span>
83
+ Grundstück
84
+ {/* <FormattedMessage id="Grundstück" /> */}
85
+ </div>
86
+ )}
87
+ </div>
88
+ {showPopUp && <SharePopup />}
89
+ </div>
90
+ );
82
91
  }
package/src/components/PropertyImageList/PropertyImageList.css CHANGED
@@ -1,55 +1,58 @@
1
1
  .mainImage {
2
- height: 80%;
3
-
2
+ height: 80%;
4
3
  }
5
4
 
6
5
  .secondList {
7
- height: 20%;
8
-
9
-
6
+ height: 20%;
10
7
  }
11
8
 
12
9
  .listImageButton {
13
- background-color: black;
14
- align-items: center !important;
15
- justify-content: center !important;
10
+ background-color: black;
11
+ align-items: center !important;
12
+ justify-content: center !important;
16
13
  }
17
14
 
18
15
  .listImgText {
19
- height: 30px;
20
- font-size: 14px;
21
- line-height: 2.14;
22
- color: #fff;
16
+ height: 30px;
17
+ font-size: 14px;
18
+ line-height: 2.14;
19
+ color: #fff;
23
20
  }
24
21
 
25
22
  .arroIconColour {
26
- height: 30px;
27
- fill: #fff !important;
23
+ height: 30px;
24
+ fill: #fff !important;
28
25
  }
29
26
 
30
27
  .onImageArrow {
31
- width: 50px;
32
- height: 50px;
33
- padding: 23px 8px;
34
- background-color: rgba(255, 255, 255, 0.8);
28
+ width: 50px;
29
+ height: 50px;
30
+ padding: 23px 8px;
31
+ background-color: rgba(255, 255, 255, 0.8);
35
32
  }
36
33
 
37
34
  .blackArrow {
38
- width: 20px;
39
- height: 20px;
35
+ width: 20px;
36
+ height: 20px;
40
37
  }
41
38
 
42
39
  .imagesArray {
43
- background-size: 'cover' !important;
40
+ background-size: "cover" !important;
44
41
  }
45
- @media (min-width: 800px) {
42
+ @media (max-width: 380px) {
46
43
  .Pimagelist {
47
- max-width: 1800px;
48
-
49
-
44
+ }
45
+ .mainImage {
46
+ height: 500px;
47
+ width: 50vh;
50
48
  }
51
49
  }
52
50
 
53
-
54
-
55
-
51
+ @media (min-width: 390px) and (max-width: 850px) {
52
+ .Pimagelist {
53
+ }
54
+ .mainImage {
55
+ height: 500px;
56
+ width: 40vh;
57
+ }
58
+ }
package/src/components/PropertyImageList/PropertyImageList.tsx CHANGED
@@ -56,7 +56,7 @@ export default function PropertyImageList(prop: PopupProps) {
56
56
  };
57
57
 
58
58
  return (
59
- <div className="col-8 me-2 Pimagelist">
59
+ <div className="col-8 Pimagelist">
60
60
  <div
61
61
  className="col-12 rounded-5 mainImage d-flex position-relative align-items-center"
62
62
  style={{
@@ -87,102 +87,107 @@ export default function PropertyImageList(prop: PopupProps) {
87
87
  </div>
88
88
 
89
89
  {/* Image Thumbnails */}
90
- <div className="d-flex flex-row gap-1 col-12 secondList">
91
- <div className="col-lg-6 d-flex flex-row p-1">
92
- <div className="col-12 position-relative d-flex justify-content-center">
90
+ <div className="d-none d-md-block">
91
+ <div className="mt-5 d-flex flex-row gap-1 col-12 secondList">
92
+ <div className=" col-lg-6 col-6 d-flex flex-row p-1">
93
+ <div className=" col-12 position-relative d-flex justify-content-center">
94
+ <div
95
+ className="col-1 h-100 d-flex position-absolute start-0"
96
+ onClick={() => handleArrowClickInMainImage("left")}
97
+ role="button"
98
+ >
99
+ <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
100
+ <img
101
+ src={iconArrowLeft}
102
+ className="arroIconColour"
103
+ alt="Left Arrow"
104
+ />
105
+ </div>
106
+ </div>
107
+ <div
108
+ className="col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-auto ms-1"
109
+ ref={imageListRef}
110
+ >
111
+ {prop.pictureUrls.length > 0 && (
112
+ <div className="col-lg-5 h-100 d-flex gap-2 flex-row rounded-3">
113
+ {prop.pictureUrls.map((picture, index) => (
114
+ <div
115
+ key={index}
116
+ className="col-lg-12 h-100 d-flex"
117
+ onClick={() => {
118
+ setCurrentImageIndex(index);
119
+ imageListRef.current!.scrollTo({
120
+ left: index * 150,
121
+ behavior: "smooth",
122
+ });
123
+ }}
124
+ role="button"
125
+ >
126
+ <img
127
+ src={picture.url}
128
+ alt={`Image ${index + 1}`}
129
+ className="col-12 h-100 rounded-3 object-fit-cover"
130
+ />
131
+ </div>
132
+ ))}
133
+ </div>
134
+ )}
135
+ </div>
136
+ <div
137
+ className="col-1 h-100 d-flex position-absolute end-0 top-0"
138
+ onClick={() => handleArrowClickInMainImage("right")}
139
+ role="button"
140
+ >
141
+ <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3 ms-1">
142
+ <img
143
+ src={iconArrowRight}
144
+ className="arroIconColour"
145
+ alt="Right Arrow"
146
+ />
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </div>
151
+
152
+ {/* Buttons for "Alle Fotos", "Grundriss", "Karte" */}
153
+ <div className="col-7 col-lg-6 d-flex flex-row">
93
154
  <div
94
- className="col-1 h-100 d-flex position-absolute start-0"
95
- onClick={() => handleArrowClickInMainImage("left")}
155
+ className="col-lg-4 p-1"
96
156
  role="button"
157
+ onClick={toggleAllPhotos}
97
158
  >
98
- <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
99
- <img
100
- src={iconArrowLeft}
101
- className="arroIconColour"
102
- alt="Left Arrow"
103
- />
159
+ <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
160
+ <img src={iconGallery} alt="Gallery Icon" />
161
+ <span className="listImgText">Alle Fotos</span>
104
162
  </div>
105
163
  </div>
106
164
  <div
107
- className="col-lg-10 rounded-3 h-100 d-flex flex-row gap-2 overflow-auto ms-1"
108
- ref={imageListRef}
165
+ className="col-lg-4 p-1"
166
+ role="button"
167
+ onClick={floorPlanClickHandler}
109
168
  >
110
- {prop.pictureUrls.length > 0 && (
111
- <div className="col-lg-5 h-100 d-flex gap-2 flex-row rounded-3">
112
- {prop.pictureUrls.map((picture, index) => (
113
- <div
114
- key={index}
115
- className="col-lg-12 h-100 d-flex"
116
- onClick={() => {
117
- setCurrentImageIndex(index);
118
- imageListRef.current!.scrollTo({
119
- left: index * 150,
120
- behavior: "smooth",
121
- });
122
- }}
123
- role="button"
124
- >
125
- <img
126
- src={picture.url}
127
- alt={`Image ${index + 1}`}
128
- className="col-12 h-100 rounded-3 object-fit-cover"
129
- />
130
- </div>
131
- ))}
132
- </div>
133
- )}
169
+ <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
170
+ <img src={iconLayers} alt="Layers Icon" />
171
+ <span className="listImgText">Grundriss</span>
172
+ </div>
134
173
  </div>
135
174
  <div
136
- className="col-1 h-100 d-flex position-absolute end-0 top-0"
137
- onClick={() => handleArrowClickInMainImage("right")}
175
+ className="col-lg-4 p-1"
138
176
  role="button"
177
+ onClick={() =>
178
+ window.scrollTo({
179
+ top: document.documentElement.scrollHeight,
180
+ })
181
+ }
139
182
  >
140
- <div className="col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3 ms-1">
141
- <img
142
- src={iconArrowRight}
143
- className="arroIconColour"
144
- alt="Right Arrow"
145
- />
183
+ <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
184
+ <img src={iconMap} alt="Map Icon" />
185
+ <span className="listImgText">Karte</span>
146
186
  </div>
147
187
  </div>
148
188
  </div>
149
189
  </div>
150
-
151
- {/* Buttons for "Alle Fotos", "Grundriss", "Karte" */}
152
- <div className="col-6 d-flex flex-row">
153
- <div className="col-lg-4 p-1" role="button" onClick={toggleAllPhotos}>
154
- <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
155
- <img src={iconGallery} alt="Gallery Icon" />
156
- <span className="listImgText">Alle Fotos</span>
157
- </div>
158
- </div>
159
- <div
160
- className="col-lg-4 p-1"
161
- role="button"
162
- onClick={floorPlanClickHandler}
163
- >
164
- <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
165
- <img src={iconLayers} alt="Layers Icon" />
166
- <span className="listImgText">Grundriss</span>
167
- </div>
168
- </div>
169
- <div
170
- className="col-lg-4 p-1"
171
- role="button"
172
- onClick={() =>
173
- window.scrollTo({
174
- top: document.documentElement.scrollHeight,
175
- })
176
- }
177
- >
178
- <div className="border col-lg-12 h-100 d-flex flex-column listImageButton border-0 rounded-3">
179
- <img src={iconMap} alt="Map Icon" />
180
- <span className="listImgText">Karte</span>
181
- </div>
182
- </div>
183
- </div>
184
190
  </div>
185
-
186
191
  {/* Popup for all photos */}
187
192
  {isImagePopupOpen && <ImageListPopup pictureUrls={prop.pictureUrls} />}
188
193