Skip to content

Commit 39711c4

Browse files
committed
Fixed map centering based on screen-width.
1 parent 82e0bbf commit 39711c4

2 files changed

Lines changed: 29 additions & 31 deletions

File tree

experiment-7/assets/css/style.css

Lines changed: 4 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -136,8 +136,6 @@ body {
136136
left: 0;
137137
width: 100vw;
138138
height: 100vh;
139-
/* margin-top: calc(-100vh / 2 + 300px);
140-
margin-left: calc(-100vw / 2 + 300px); */
141139
background: transparent !important;
142140
}
143141

@@ -187,24 +185,17 @@ body {
187185
}
188186

189187
#chat-section-right {
190-
/* width: 30%; */
191188
width: 50%;
192-
height: 80vh;
189+
height: 560px;
193190
flex-direction: column;
194191
}
195192

196193
#chat-section-left {
197-
/* width: 30%;
198-
height: 80vh;
199-
overflow-y: auto;
200-
flex-direction: column; */
201194
display: none;
202195
}
203196

204197
#map-section {
205-
/* width: 50%; */
206198
width: 45%;
207-
/* height: 80vh; */
208199
}
209200

210201
#category-pie-chart {
@@ -226,14 +217,6 @@ body {
226217
padding: 0 0 15px;
227218
height: 40vh;
228219
width: 100%;
229-
/* border-radius: var(--border-radius-medium);
230-
border: 1px solid var(--highlight);
231-
box-shadow: var(--shadow-inner); */
232-
/* border-radius: var(--border-radius-medium);
233-
border-bottom: 1px solid var(--highlight);
234-
border-left: 1px solid var(--highlight);
235-
border-right: 1px solid var(--highlight); */
236-
237220
}
238221

239222
.chat-messages-wrapper {
@@ -282,14 +265,10 @@ border-right: 1px solid var(--highlight); */
282265
}
283266

284267
.chat-input-container {
285-
/* position: absolute;
286-
bottom: 0;
287-
z-index: 1000; */
288268
width: 100%;
289269
border-bottom-left-radius: 8px;
290270
border-bottom-right-radius: 8px;
291271
background-color: rgba(250, 250, 250, .9);
292-
/* border-top: 1px dotted var(--highlight); */
293272
padding: var(--spacing-small);
294273
}
295274

@@ -337,8 +316,7 @@ z-index: 1000; */
337316

338317
.chat-content-container {
339318
border-top: none;
340-
background: transparent;
341-
/* border-radius: var(--border-radius-medium); */
319+
background-color: rgba(250, 250, 250, .9);
342320
border-bottom-left-radius: var(--border-radius-medium);
343321
border-bottom-right-radius: var(--border-radius-medium);
344322
border: 1px solid var(--highlight);
@@ -359,9 +337,9 @@ z-index: 1000; */
359337
.chat-tab {
360338
padding: 10px;
361339
cursor: pointer;
340+
color: #999;
362341
background-color: rgba(235, 235, 235, 0.7);
363342
border-bottom: 1px solid var(--highlight);
364-
/* margin-bottom: -1px; */
365343
transition: all 0.2s ease;
366344
}
367345

@@ -384,6 +362,7 @@ z-index: 1000; */
384362
}
385363

386364
.chat-tab.active {
365+
color: #000;
387366
background-color: rgba(250, 250, 250, .9);
388367
border-bottom: 3px solid white;
389368
font-weight: bold;

experiment-7/assets/js/app-script.js

Lines changed: 25 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@
1919
config: {
2020
mapbox: {
2121
token: window.MAPBOX_TOKEN,
22-
initialCenter: [-71.07601, 42.28988],
22+
// initialCenter: [-71.07601, 42.28988],
23+
initialCenter: [-71.07, 42.29],
2324
backgroundInitialZoom: 12,
2425
magnifiedInitialZoom: 13
2526
},
@@ -107,6 +108,23 @@
107108
this.setupEventHandlers(beforeMap, afterMap);
108109
},
109110

111+
adjustMapCenter() {
112+
const referenceDiv = document.getElementById('map-section');
113+
console.log('Getting reference div');
114+
if (window.innerWidth > 768) {
115+
console.log('Need to recenter map');
116+
const shiftX = referenceDiv.offsetWidth / 3;
117+
console.log('Shift by: ' + shiftX);
118+
const currentCenter = beforeMap.getCenter();
119+
const point = beforeMap.project(currentCenter);
120+
point.x += shiftX;
121+
122+
const newCenter = beforeMap.unproject(point);
123+
124+
beforeMap.setCenter(newCenter);
125+
}
126+
},
127+
110128
/**
111129
* Set up map event handlers
112130
* @param {Object} beforeMap
@@ -155,6 +173,7 @@
155173
console.log('Initial background map data applied');
156174
}
157175
}
176+
this.adjustMapCenter();
158177
});
159178
beforeMap.on('moveend', () => this.handleMapMoveEnd(beforeMap, afterMap));
160179
},
@@ -745,7 +764,7 @@
745764
);
746765

747766
function tryUpdateMap(attempts = 0) {
748-
if (attempts >= 5) {
767+
if (attempts >= 10) {
749768
console.error("Failed to update map after multiple attempts");
750769
return;
751770
}
@@ -843,19 +862,19 @@ window.clientside = {
843862
...window.clientside,
844863
scrollChat: function(messages, containerId) {
845864
if (!messages) return {};
846-
865+
847866
// Get the container
848867
const container = document.getElementById(containerId);
849868
if (!container) return {};
850-
869+
851870
// Force immediate scroll to bottom
852871
container.scrollTop = container.scrollHeight;
853-
872+
854873
// Also scroll after a short delay to ensure all content is rendered
855874
setTimeout(() => {
856875
container.scrollTop = container.scrollHeight;
857876
}, 100);
858-
877+
859878
return {};
860879
}
861880
};

0 commit comments

Comments
 (0)