Animated atlas shift

Fixed tooltip issue

web/_css/style.css

@@ -86,9 +86,7 @@ #container {
 	width: calc(100% - 400px);
 	height: 100%;
 	margin-left: 400px;
-
 	touch-action: manipulation;
-
 	overflow: hidden;
 	overflow-x: hidden;
 	overflow-y: hidden;
@@ -159,7 +157,12 @@ noscript {
 	margin-top: 10px;
 }
 
-.listHidden #container {
+#wrapper.listHidden.listTransitioning #container{
+	width: calc(100% - 400px);
+	margin-left: 400px;
+}
+
+.listHidden #container, .listTransitioning #container {
 	width: 100%;
 	margin-left: 0;
 }
@@ -171,6 +174,10 @@ #innerContainer {
 	z-index: -2000;
 }
 
+body[data-init-done] .listTransitioning #innerContainer {
+	transition: left .3s ease-in-out;
+}
+
 #image {
 	position: absolute;
 	height: 100%;
@@ -321,10 +328,9 @@ #timeControls {
 }
 
 #timeControlsTooltip {
-	opacity: 0;
-	position: absolute;
 	bottom: 2.75rem;
 	visibility: hidden;
+	transition: visibility .15s linear, opacity .15s linear;
 }
 
 @supports (backdrop-filter: blur()) or (-webkit-backdrop-filter: blur()) {

web/_js/view.js

@@ -87,31 +87,62 @@ document.getElementById("sort").addEventListener("input", function (e) {
 });
 
 var showDraw = document.getElementById('offcanvasDraw')
-showDraw.addEventListener('shown.bs.offcanvas', function() {
+showDraw.addEventListener('show.bs.offcanvas', function() {
+	wrapper.classList.add('listTransitioning');
+	applyView();
+})
+
+var shownDraw = document.getElementById('offcanvasDraw')
+shownDraw.addEventListener('shown.bs.offcanvas', function() {
 	wrapper.classList.remove('listHidden');
+	wrapper.classList.remove('listTransitioning');
 	applyView();
 })
 
 var hideDraw = document.getElementById('offcanvasDraw')
-hideDraw.addEventListener('hidden.bs.offcanvas', function() {
+hideDraw.addEventListener('hide.bs.offcanvas', function() {
+	wrapper.classList.add('listTransitioning');
+	applyView();
+})
+
+var hiddenDraw = document.getElementById('offcanvasDraw')
+hiddenDraw.addEventListener('hidden.bs.offcanvas', function() {
 	wrapper.classList.add('listHidden');
+	wrapper.classList.remove('listTransitioning');
 	applyView();
 })
 
 var showList = document.getElementById('offcanvasList')
-showList.addEventListener('shown.bs.offcanvas', function(e) {
+showList.addEventListener('show.bs.offcanvas', function(e) {
+	wrapper.classList.add('listTransitioning');
+	applyView();
+	console.log("show")
+});
+
+var shownList = document.getElementById('offcanvasList')
+shownList.addEventListener('shown.bs.offcanvas', function(e) {
 	entriesListShown = true;
 	wrapper.classList.remove('listHidden');
+	wrapper.classList.remove('listTransitioning');
 	updateHovering(e);
 	applyView();
 	render();
 	updateLines();
+	console.log("shown")
 });
 
 var hideList = document.getElementById('offcanvasList')
-hideList.addEventListener('hidden.bs.offcanvas', function(e) {
+hideList.addEventListener('hide.bs.offcanvas', function(e) {
+	wrapper.classList.add('listTransitioning');
+	applyView();
+	console.log("hide")
+});
+
+var hiddenList = document.getElementById('offcanvasList')
+hiddenList.addEventListener('hidden.bs.offcanvas', function(e) {
 	entriesListShown = false;
 	wrapper.classList.add('listHidden');
+	wrapper.classList.remove('listTransitioning');
 	updateHovering(e);
 	applyView();
 	render();
@@ -684,6 +715,7 @@ function updateHovering(e, tapped) {
 				}
 
 				if (hovered.length > 0){
+					document.getElementById("timeControlsSlider").blur();
 					closeObjectsListButton.classList.remove("d-none");
 					if ((objectsContainer.scrollHeight > objectsContainer.clientHeight) && !tapped) {
 						objectsListOverflowNotice.classList.remove("d-none");

web/index.html

@@ -261,7 +261,7 @@ <h5 class="offcanvas-title" id="offcanvasListLabel">Atlas Entries List</h5>
 				<div id="timeControls" class="bg-body px-2 py-1 border rounded shadow">
 					<label for="timeControlsSlider" class="visually-hidden">Time control slider</label>
 					<input type="range" class="form-range" min="1" max="1" value="1" id="timeControlsSlider" aria-describedby="timeControlsTooltip"></input>
-					<div class="tooltip fade border rounded text-nowrap" role="tooltip" id="timeControlsTooltip"><div class="bg-body rounded p-1">Tooltip</div></div>
+					<div class="tooltip border rounded text-nowrap" role="tooltip" id="timeControlsTooltip"><div class="bg-body rounded p-1">Tooltip</div></div>
 				</div>
 				<div id="author" class="bg-body d-flex align-items-center justify-content-center py-1 px-2 rounded shadow" style="--bs-bg-opacity: .9;">
 					<span style="font-size: 0.75rem;">Code owned by <a href="https://github.com/placeAtlas" target="_blank" rel="noopener noreferrer">Place Atlas</a>. Source on <a href="https://github.com/placeAtlas/atlas" target="_blank" rel="noopener noreferrer">GitHub</a>. Site powered by <a href="https://www.netlify.com" target="_blank" rel="noopener noreferrer">Netlify</a>.</span>