Prioritize bottom bar visibility over object list

Updated active error to be more prominent
This commit is contained in:
mxdanger 2022-05-09 12:57:23 -07:00
parent 6b1200d6fb
commit 5ddec7631b
3 changed files with 36 additions and 13 deletions

View file

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

View file

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

View file

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