Collapsable coordinate box

web/_css/style.css

@@ -651,12 +651,18 @@ #exportOverlay {
 #coordsWrapper {
 	min-width: 100px;
 	position: absolute;
-    top: 10px;
-    left: 400px;
     display: flex;
 	gap: 10px;
 	z-index: 100;
 }
+.collapsed {	
+    top: 49px;
+    left: 149px;
+}
+.uncollapsed {
+    top: 49px;
+    left: 380px;
+}
 @media (max-width: 750px) {
 	#coordsWrapper {
 		display: none;

web/_js/view.js

@@ -252,6 +252,7 @@ function initView(){
 		} else {
 			wrapper.className += " listHidden";
 		}
+		updateHovering();
 		applyView();
 		render();
 		updateLines();
@@ -336,6 +337,12 @@ function initView(){
 	}
 
 	function updateHovering(e, tapped){
+		var coordsWrapper = document.getElementById("coordsWrapper");
+		if (entriesListShown) {
+			coordsWrapper.className = "uncollapsed"
+		} else {
+			coordsWrapper.className = "collapsed"
+		}
 		
 		if(!dragging && (!fixed || tapped)){
 			var pos = [
@@ -343,7 +350,6 @@ function initView(){
 				,(e.clientY - (container.clientHeight/2 - innerContainer.clientHeight/2 + zoomOrigin[1] + container.offsetTop))/zoom
 			];
 			var coords_p = document.getElementById("coords_p");
-			console.log(coords_p)
 			coords_p.innerText = Math.ceil(pos[0]) + ", " + Math.ceil(pos[1]);
 
 			if(pos[0] <= 2200 && pos[0] >= -100 && pos[0] <= 2200 && pos[0] >= -100){
@@ -571,6 +577,7 @@ function initView(){
 					zoom = 4;
 					renderBackground(atlas);
 					applyView();
+					updateHovering();
 					
 					zoomOrigin = [
 						 innerContainer.clientWidth/2  - this.entry.center[0]* zoom// + container.offsetLeft
@@ -806,6 +813,7 @@ function initView(){
 			entriesListShown = false;
 			wrapper.className += " listHidden";
 		}
+		updateHovering();
 
 		viewportWidth = document.documentElement.clientWidth;
 		

web/index.html

@@ -139,10 +139,10 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
 			
 			<button id="hideListButton"></button>
 
-			<div id="coordsWrapper">
+			<div id="coordsWrapper" class="collapsed">
 
 				<div id="coords">
-					<p id="coords_p">100,100</p>
+					<p id="coords_p">0, 0</p>
 				</div>
 			</div>