MirrorHub/atlas
0
0
Fork 0
mirror of https://github.com/placeAtlas/atlas.git synced 2024-06-25 06:38:56 +02:00
Code Issues Projects Releases Wiki Activity

Prioritize bottom bar visibility over object list

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

33
web/_css/style.css
View file

@ -243,6 +243,10 @@ #bottomBar {
padding-bottom: max(0.5rem, env(safe-area-inset-bottom)) !important; padding-bottom: max(0.5rem, env(safe-area-inset-bottom)) !important;
} }
#bottomBar:hover {
z-index: 1;
}
#wrapper.listTransitioning #bottomBar { #wrapper.listTransitioning #bottomBar {
transition: left .3s ease-in-out, padding-left .3s linear; transition: left .3s ease-in-out, padding-left .3s linear;
} }
@ -392,12 +396,6 @@ .period-group {
transition: box-shadow 0.15s ease-in-out; transition: box-shadow 0.15s ease-in-out;
} }
@media (prefers-reduced-motion: reduce) {
.period-group {
transition: none;
}
}
.period-group[data-active=true] { .period-group[data-active=true] {
box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .75); 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] { .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] { .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 { #periods #periodsStatus:empty {

4
web/_js/time.js
View file

@ -186,8 +186,8 @@ async function updateTime(newPeriod = currentPeriod, newVariation = currentVaria
currentPeriod = variationConfig.default currentPeriod = variationConfig.default
newPeriod = currentPeriod newPeriod = currentPeriod
} }
if (variationConfig.versions.length === 1) document.getElementById("bottomBar").classList.add('no-time-slider') if (variationConfig.versions.length === 1) bottomBar.classList.add('no-time-slider')
else document.getElementById("bottomBar").classList.remove('no-time-slider') else bottomBar.classList.remove('no-time-slider')
} }
timelineSlider.value = currentPeriod timelineSlider.value = currentPeriod
updateTooltip(newPeriod, newVariation) updateTooltip(newPeriod, newVariation)

12
web/_js/view.js
View file

@ -26,6 +26,7 @@ backgroundCanvas.height = 2000
const backgroundContext = backgroundCanvas.getContext("2d") const backgroundContext = backgroundCanvas.getContext("2d")
const wrapper = document.getElementById("wrapper") const wrapper = document.getElementById("wrapper")
const bottomBar = document.getElementById("bottomBar")
const showListButton = document.getElementById("showListButton") const showListButton = document.getElementById("showListButton")
const offcanvasList = document.getElementById("offcanvasList") const offcanvasList = document.getElementById("offcanvasList")
@ -143,7 +144,13 @@ offcanvasList.addEventListener('hidden.bs.offcanvas', function (e) {
updateLines() updateLines()
}) })
closeObjectsListButton.addEventListener("click", function () { closeObjectsListButton.addEventListener("click", clearObjectsList)
bottomBar.addEventListener("mouseover", function () {
if (!fixed) clearObjectsList()
})
function clearObjectsList() {
closeObjectsListButton.classList.add("d-none") closeObjectsListButton.classList.add("d-none")
objectsListOverflowNotice.classList.add("d-none") objectsListOverflowNotice.classList.add("d-none")
entriesList.classList.remove("disableHover") entriesList.classList.remove("disableHover")
@ -152,8 +159,7 @@ closeObjectsListButton.addEventListener("click", function () {
updateLines() updateLines()
fixed = false fixed = false
render() render()
}) }
function toggleFixed(e, tapped) { function toggleFixed(e, tapped) {
if (!fixed && hovered.length == 0) { if (!fixed && hovered.length == 0) {