MirrorHub/atlas
0
0
Fork 0
mirror of https://github.com/placeAtlas/atlas.git synced 2024-12-25 07:24:14 +01:00
Code Issues Projects Releases Wiki Activity

Updated time controls slider appearance

Browse source
This commit is contained in:
mxdanger 2022-04-27 14:13:25 -07:00
parent 517a381cb6
commit 2411f3a351
3 changed files with 27 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
web/_css/style.css
View file

@ -315,12 +315,9 @@ @media (min-width: 1300px) {
margin-left: auto;
}
}
#timeControls input {
height: 100%;
-webkit-appearance: none;
appearance: none;
width: 100%;
#timeControls {
display: flex;
align-items: center;
}
#timeControlsTooltip {
@ -343,25 +340,30 @@ #timeControls:hover #timeControlsTooltip, #timeControlsSlider:focus + #timeContr
visibility: visible;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 1rem;
height: 2rem;
background: var(--bs-light);
#timeControlsSlider::-webkit-slider-thumb {
width: 0.75rem;
height: 1.5rem;
margin-top: -0.25rem;
border-radius: .25rem;
cursor: pointer;
box-shadow: 0 .5rem 1rem rgba(17,17,17,.5);
outline: 1px solid var(--bs-body-bg);
}
.slider::-moz-range-thumb {
appearance: none;
width: 1rem;
height: 2rem;
background: var(--bs-light);
#timeControlsSlider::-webkit-slider-runnable-track {
height: 1rem;
border-radius: .25rem;
}
#timeControlsSlider::-moz-range-thumb {
width: 0.75rem;
height: 1.5rem;
margin-top: -0.25rem;
border-radius: .25rem;
outline: 1px solid var(--bs-body-bg);
}
#timeControlsSlider::-moz-range-track {
height: 1rem;
border-radius: .25rem;
cursor: pointer;
box-shadow: 0 .5rem 1rem rgba(17,17,17,.5);
}
#entriesList .card {

4
web/_js/time.js
View file

@ -212,8 +212,8 @@ function updateTooltip(newPeriod, newVariation) {
// Clamps position of tooltip to prevent from going off screen
const timelineSliderRect = timelineSlider.getBoundingClientRect();
let min = -timelineSliderRect.left+8;
let max = (window.innerWidth-tooltip.offsetWidth)-timelineSliderRect.left-8;
let min = -timelineSliderRect.left+12;
let max = (window.innerWidth-tooltip.offsetWidth)-timelineSliderRect.left+4;
tooltip.style.left = Math.min(Math.max((timelineSlider.offsetWidth)*(timelineSlider.value)/(timelineSlider.max)-tooltip.offsetWidth/2, min), max) + "px";
}

4
web/index.html
View file

@ -254,9 +254,9 @@ <h5 class="offcanvas-title" id="offcanvasListLabel">Atlas Entries List</h5>
<select class="form-select shadow" name="variants" id="variants" title="Background image variants"></select>
</div>
</div>
<div id="timeControls">
<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="slider bg-secondary px-1 rounded shadow" min="1" max="1" value="1" id="timeControlsSlider" aria-describedby="timeControlsTooltip"></input>
<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>
<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;">