mirror of
https://github.com/placeAtlas/atlas.git
synced 2024-09-26 12:09:00 +02:00
Prioritize bottom bar visibility over object list
Updated active error to be more prominent
This commit is contained in:
parent
6b1200d6fb
commit
5ddec7631b
3 changed files with 36 additions and 13 deletions
|
@ -243,6 +243,10 @@ #bottomBar {
|
|||
padding-bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
|
||||
}
|
||||
|
||||
#bottomBar:hover {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#wrapper.listTransitioning #bottomBar {
|
||||
transition: left .3s ease-in-out, padding-left .3s linear;
|
||||
}
|
||||
|
@ -392,12 +396,6 @@ .period-group {
|
|||
transition: box-shadow 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.period-group {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
.period-group[data-active=true] {
|
||||
box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .75);
|
||||
}
|
||||
|
@ -411,11 +409,30 @@ .period-group[data-status=active] {
|
|||
}
|
||||
|
||||
.period-group[data-active=true][data-status=error] {
|
||||
box-shadow: 0 0 0 .15rem rgba(var(--bs-danger-rgb), .75);
|
||||
animation: 1s infinite alternate periodGroupActiveError;
|
||||
}
|
||||
|
||||
.period-group[data-status=error] {
|
||||
box-shadow: 0 0 0 .1rem rgba(var(--bs-danger-rgb), .5);
|
||||
box-shadow: 0 0 0 .1rem rgba(var(--bs-danger-rgb), .25);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.period-group {
|
||||
transition: none;
|
||||
}
|
||||
.period-group[data-active=true][data-status=error] {
|
||||
box-shadow: 0 0 0 .15rem rgba(var(--bs-danger-rgb), 1);
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes periodGroupActiveError {
|
||||
from {
|
||||
box-shadow: 0 0 0 .15rem rgba(var(--bs-danger-rgb), 1);
|
||||
}
|
||||
to {
|
||||
box-shadow: 0 0 0 .15rem rgba(var(--bs-danger-rgb), .5);
|
||||
}
|
||||
}
|
||||
|
||||
#periods #periodsStatus:empty {
|
||||
|
|
|
@ -186,8 +186,8 @@ async function updateTime(newPeriod = currentPeriod, newVariation = currentVaria
|
|||
currentPeriod = variationConfig.default
|
||||
newPeriod = currentPeriod
|
||||
}
|
||||
if (variationConfig.versions.length === 1) document.getElementById("bottomBar").classList.add('no-time-slider')
|
||||
else document.getElementById("bottomBar").classList.remove('no-time-slider')
|
||||
if (variationConfig.versions.length === 1) bottomBar.classList.add('no-time-slider')
|
||||
else bottomBar.classList.remove('no-time-slider')
|
||||
}
|
||||
timelineSlider.value = currentPeriod
|
||||
updateTooltip(newPeriod, newVariation)
|
||||
|
|
|
@ -26,6 +26,7 @@ backgroundCanvas.height = 2000
|
|||
const backgroundContext = backgroundCanvas.getContext("2d")
|
||||
|
||||
const wrapper = document.getElementById("wrapper")
|
||||
const bottomBar = document.getElementById("bottomBar")
|
||||
|
||||
const showListButton = document.getElementById("showListButton")
|
||||
const offcanvasList = document.getElementById("offcanvasList")
|
||||
|
@ -143,7 +144,13 @@ offcanvasList.addEventListener('hidden.bs.offcanvas', function (e) {
|
|||
updateLines()
|
||||
})
|
||||
|
||||
closeObjectsListButton.addEventListener("click", function () {
|
||||
closeObjectsListButton.addEventListener("click", clearObjectsList)
|
||||
|
||||
bottomBar.addEventListener("mouseover", function () {
|
||||
if (!fixed) clearObjectsList()
|
||||
})
|
||||
|
||||
function clearObjectsList() {
|
||||
closeObjectsListButton.classList.add("d-none")
|
||||
objectsListOverflowNotice.classList.add("d-none")
|
||||
entriesList.classList.remove("disableHover")
|
||||
|
@ -152,8 +159,7 @@ closeObjectsListButton.addEventListener("click", function () {
|
|||
updateLines()
|
||||
fixed = false
|
||||
render()
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
function toggleFixed(e, tapped) {
|
||||
if (!fixed && hovered.length == 0) {
|
||||
|
|
Loading…
Reference in a new issue