mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-09-26 12:09:00 +02:00
Animated atlas shift
Fixed tooltip issue
This commit is contained in:
parent
e9d8ca7b14
commit
30ae06ceba
3 changed files with 48 additions and 10 deletions
|
@ -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()) {
|
||||
|
|
|
@ -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");
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue