MirrorHub/atlas
0
0
Fork 0
mirror of https://github.com/placeAtlas/atlas.git synced 2024-06-16 10:18:47 +02:00
Code Issues Projects Releases Wiki Activity

Animated atlas shift

Browse source 
Fixed tooltip issue
This commit is contained in:
mxdanger 2022-04-28 01:32:06 -07:00
parent e9d8ca7b14
commit 30ae06ceba
3 changed files with 48 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
web/_css/style.css
View file

@ -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()) {

40
web/_js/view.js
View file

@ -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");

2
web/index.html
View file

@ -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>