mehdi-akbari-map 1.0.7 → 1.0.9

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/styles.css CHANGED
@@ -9,7 +9,7 @@
9
9
  overflow: hidden;
10
10
  }
11
11
 
12
-
12
+ /* Sidebar Desktop */
13
13
  .sidebar {
14
14
  width: 350px;
15
15
  background: #ffffff;
@@ -26,231 +26,189 @@
26
26
  font-size: 18px;
27
27
  color: #111827;
28
28
  border-bottom: 1px solid #f3f4f6;
29
- background: #fafafa;
30
29
  }
31
30
 
32
31
  .sidebar-list {
33
32
  flex: 1;
34
33
  overflow-y: auto;
35
- scrollbar-width: thin;
36
- }
37
-
38
-
39
- .map-container {
40
- flex: 1;
41
- position: relative;
42
- background: #f3f4f6;
43
34
  }
44
35
 
45
-
36
+ /* Store Card New Layout */
46
37
  .store-card {
47
38
  padding: 16px;
48
39
  border-bottom: 1px solid #f3f4f6;
49
40
  cursor: pointer;
50
- transition: all 0.2s ease;
51
- border-right: 4px solid transparent;
52
- background: #fff;
53
- }
54
-
55
- .store-card:hover {
56
- background: #f9fafb;
41
+ transition: background 0.2s ease;
42
+ background: #ffffff;
57
43
  }
58
44
 
59
45
  .store-card.active {
60
- background: #eff6ff;
61
- border-right-color: #2563eb;
46
+ background: #f8fafc;
62
47
  }
63
48
 
64
49
  .store-card-header {
65
50
  display: flex;
66
51
  justify-content: space-between;
67
52
  align-items: flex-start;
68
- margin-bottom: 8px;
53
+ margin-bottom: 12px;
69
54
  }
70
55
 
71
56
  .store-name {
72
57
  margin: 0;
73
- font-size: 16px;
74
- font-weight: 700;
58
+ font-size: 15px;
59
+ font-weight: 800;
75
60
  color: #111827;
76
61
  }
77
62
 
78
- .store-city {
79
- display: block;
80
- font-size: 12px;
63
+ .store-location-tag {
64
+ display: flex;
65
+ align-items: center;
66
+ gap: 4px;
81
67
  color: #6b7280;
82
- margin-top: 2px;
68
+ margin-top: 4px;
83
69
  }
84
70
 
85
- .store-price {
86
- color: #059669;
87
- font-weight: 800;
88
- font-size: 14px;
89
- background: #ecfdf5;
90
- padding: 2px 8px;
91
- border-radius: 6px;
92
- }
93
-
94
- .store-desc {
71
+ .store-city {
95
72
  font-size: 12px;
96
- color: #4b5563;
97
- line-height: 1.5;
98
- margin: 8px 0;
99
- display: -webkit-box;
100
- -webkit-line-clamp: 2;
101
- -webkit-box-orient: vertical;
102
- overflow: hidden;
73
+ font-weight: 600;
103
74
  }
104
75
 
105
-
106
- .store-details-wrapper {
107
- display: grid;
108
- grid-template-rows: 0fr;
109
- transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
110
- overflow: hidden;
76
+ .report-btn {
77
+ display: flex;
78
+ align-items: center;
79
+ gap: 4px;
80
+ background: #f3f4f6;
81
+ border: none;
82
+ padding: 4px 10px;
83
+ border-radius: 8px;
84
+ color: #6b7280;
85
+ font-size: 11px;
86
+ font-weight: 700;
87
+ cursor: pointer;
111
88
  }
112
89
 
113
- .active .store-details-wrapper {
114
- grid-template-rows: 1fr;
115
- margin-top: 14px;
90
+ .store-performance {
91
+ font-size: 12px;
92
+ font-weight: 700;
93
+ margin-bottom: 10px;
116
94
  }
117
95
 
118
- .store-details-content {
119
- min-height: 0;
96
+ .perf-value {
97
+ color: #10b981;
120
98
  }
121
99
 
122
- .action-buttons {
100
+ /* Description Section */
101
+ .store-desc-section {
123
102
  display: flex;
124
- gap: 8px;
125
- padding-bottom: 4px;
103
+ align-items: flex-start;
104
+ gap: 10px;
105
+ margin-bottom: 16px;
126
106
  }
127
107
 
128
- .btn {
129
- flex: 1;
130
- padding: 10px 5px;
108
+ .store-mini-logo {
109
+ width: 40px;
110
+ height: 40px;
131
111
  border-radius: 8px;
132
- text-align: center;
133
- text-decoration: none;
134
- font-size: 12px;
135
- font-weight: 700;
136
- color: #fff;
137
- transition: transform 0.1s, opacity 0.2s;
112
+ object-fit: cover;
113
+ border: 1px solid #e5e7eb;
138
114
  }
139
115
 
140
- .btn:active { transform: scale(0.95); }
141
- .btn-call { background: #2563eb; }
142
- .btn-wa { background: #10b981; }
143
- .btn-route { background: #7c3aed; }
144
-
145
-
146
- .neshan-marker-container {
147
- pointer-events: auto;
116
+ .store-desc {
117
+ flex: 1;
118
+ font-size: 12px;
119
+ color: #4b5563;
120
+ line-height: 1.6;
121
+ margin: 0;
122
+ display: -webkit-box;
123
+ -webkit-line-clamp: 2;
124
+ -webkit-box-orient: vertical;
125
+ overflow: hidden;
148
126
  }
149
127
 
150
- .neshan-marker-body {
128
+ /* Footer Section */
129
+ .store-card-footer {
151
130
  display: flex;
152
- flex-direction: column;
131
+ justify-content: space-between;
153
132
  align-items: center;
154
- transform-origin: bottom center;
133
+ border-top: 1px dashed #e5e7eb;
134
+ padding-top: 12px;
155
135
  }
156
136
 
157
- .neshan-marker-label {
158
- background: #2563eb;
159
- color: #ffffff !important;
160
- font-size: 12px;
137
+ .price-container {
138
+ display: flex;
139
+ align-items: baseline;
140
+ gap: 4px;
141
+ }
142
+
143
+ .price-value {
144
+ font-size: 16px;
161
145
  font-weight: 900;
162
- padding: 4px 12px;
163
- border-radius: 20px;
164
- margin-top: 6px;
165
- box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
166
- border: 2px solid #ffffff;
167
- white-space: nowrap;
168
- pointer-events: none;
146
+ color: #111827;
169
147
  }
170
148
 
149
+ .price-unit {
150
+ font-size: 11px;
151
+ color: #6b7280;
152
+ font-weight: 600;
153
+ }
171
154
 
172
- .neshan-cluster-marker {
155
+ .contact-trigger {
173
156
  display: flex;
174
157
  align-items: center;
175
- justify-content: center;
176
- background: #ffffff;
177
- border: 3px solid #2563eb;
178
- border-radius: 50%;
179
- width: 36px;
180
- height: 36px;
181
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
182
- cursor: pointer;
158
+ gap: 6px;
159
+ color: #1d4ed8;
160
+ font-size: 13px;
161
+ font-weight: 800;
183
162
  }
184
163
 
185
- .neshan-cluster-marker:hover {
186
- border-color: #1d4ed8;
187
- box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3);
164
+ .arrow-icon {
165
+ transition: transform 0.3s ease;
166
+ transform: rotate(180deg);
188
167
  }
189
168
 
190
- .neshan-cluster-count {
191
- color: #2563eb;
192
- font-weight: 900;
193
- font-size: 16px;
194
- pointer-events: none;
169
+ .arrow-icon.open {
170
+ transform: rotate(0deg);
195
171
  }
196
172
 
197
-
198
- .neshan-marker-selected .neshan-marker-body {
199
- animation: marker-bounce 0.8s infinite alternate cubic-bezier(0.45, 0.05, 0.55, 0.95);
200
- z-index: 100;
173
+ /* Vertical Buttons */
174
+ .action-buttons.vertical {
175
+ display: flex;
176
+ flex-direction: column;
177
+ gap: 10px;
178
+ margin-top: 15px;
201
179
  }
202
180
 
203
- @keyframes marker-bounce {
204
- from { transform: translateY(0) scale(1.1); }
205
- to { transform: translateY(-12px) scale(1.15); }
181
+ .btn.full-width {
182
+ width: 100%;
183
+ padding: 12px;
184
+ border-radius: 12px;
185
+ text-decoration: none;
206
186
  }
207
187
 
208
-
209
- .is-mobile .mobile-slider {
210
- position: absolute;
211
- bottom: 24px;
212
- left: 0;
213
- right: 0;
188
+ .btn-content {
214
189
  display: flex;
215
- gap: 12px;
216
- padding: 0 20px;
217
- overflow-x: auto;
218
- scroll-snap-type: x mandatory;
219
- pointer-events: auto;
220
- z-index: 20;
221
-
222
- align-items: flex-end;
190
+ align-items: center;
191
+ justify-content: space-between;
192
+ padding: 0 10px;
223
193
  }
224
194
 
225
- .is-mobile .mobile-slider::-webkit-scrollbar { display: none; }
195
+ /* Rest of the styles (Map, Markers, Clusters, Mobile) remain same */
196
+ .map-container { flex: 1; position: relative; background: #f3f4f6; }
197
+ .store-details-wrapper { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; overflow: hidden; }
198
+ .active .store-details-wrapper { grid-template-rows: 1fr; }
199
+ .store-details-content { min-height: 0; }
200
+ .btn-call { background: #1d4ed8; color: white; }
201
+ .btn-wa { background: #10b981; color: white; }
202
+ .btn-route { background: #7c3aed; color: white; }
226
203
 
227
- .is-mobile .store-card {
228
- min-width: 300px;
229
- max-width: 85vw;
230
- background: #ffffff;
231
- border-radius: 16px;
232
- box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
233
- pointer-events: auto;
234
- scroll-snap-align: center;
235
- border: none;
236
-
237
- height: auto;
238
- flex-shrink: 0;
204
+ .is-mobile .mobile-slider {
205
+ position: absolute; bottom: 0; left: 0; right: 0;
206
+ display: flex; gap: 12px; padding: 20px 20px 40px 20px;
207
+ overflow-x: auto; scroll-snap-type: x mandatory;
208
+ z-index: 20; align-items: flex-end;
239
209
  }
240
-
241
-
242
- .product-badge {
243
- position: absolute;
244
- top: 20px;
245
- right: 20px;
246
- background: rgba(255, 255, 255, 0.95);
247
- backdrop-filter: blur(4px);
248
- padding: 10px 18px;
249
- border-radius: 12px;
250
- box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
251
- font-weight: 800;
252
- font-size: 14px;
253
- color: #1f2937;
254
- z-index: 5;
255
- border: 1px solid rgba(0, 0, 0, 0.05);
210
+ .is-mobile .store-card {
211
+ min-width: 300px; max-width: 85vw;
212
+ border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
213
+ scroll-snap-align: center; border: none;
256
214
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mehdi-akbari-map",
3
- "version": "1.0.7",
3
+ "version": "1.0.9",
4
4
  "description": "A professional Map",
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",