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

bottom bar css

Browse source
This commit is contained in:
Alex Tsernoh 2022-04-05 18:31:48 +01:00
parent 95a6f54c68
commit 3c490c0be6
No known key found for this signature in database
GPG key ID: 5A0BA13F0012A4BA
2 changed files with 79 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

99
web/_css/style.css
View file

@ -648,16 +648,73 @@ #exportOverlay {
display: none;
}
#zoomControls {
#bottomBar {
position: absolute;
bottom: 10px;
left: 370px;
width: 90px;
display: flex;
bottom: 10px;
left: 10px;
right: 10px;
display: flex;
gap: 10px;
}
.listHidden #zoomControls {
left: 10px;
div:not(.listHidden) > #bottomBar {
left: 370px !important;
}
@media (max-width: 1120px) {
div:not(.listHidden) > #bottomBar {
flex-wrap: wrap;
}
.listHidden #author {
flex: 1;
}
}
@media (max-width: 750px) {
#bottomBar {
flex-wrap: wrap;
}
#timeControls {
min-width: calc(100vw - 390px) !important;
}
#author {
flex: 1;
min-width: 100% !important;
}
}
#timeControls {
flex: 1;
background-color: #555;
border: 1px #000 solid;
padding: 3px;
font-size: 12px;
text-align: center;
min-width: 300px;
}
#timeControls input {
height: 100%;
width: 100%;
}
#author {
background-color: #555;
border: 1px #000 solid;
padding: 3px;
font-size: 12px;
z-index: 1100;
min-width: 320px;
text-align: center;
}
#zoomControls {
width: 90px;
display: flex;
align-self: flex-end;
}
#zoomControls button {
@ -715,8 +772,8 @@ @media (max-width: 500px) {
width: 100%;
}
div:not(.listHidden) > #zoomControls {
display: none;
div:not(.listHidden) > #bottomBar {
display: none !important;
}
div:not(.listHidden) > button#hideListButton {
@ -736,18 +793,6 @@ @media (max-width: 500px) {
}
}
@media (max-width: 750px) {
div:not(.listHidden) > #author {
display: none;
}
}
@media (max-width: 400px) {
#author {
display: none;
}
}
@media (max-width: 350px) {
#entriesListContainer > nav > a#drawLink {
display: none;
@ -947,18 +992,6 @@ #entriesList .object {
text-align: left;
}
#author {
position: absolute;
bottom: 10px;
right: 10px;
background-color: #555;
border: 1px #000 solid;
padding: 3px;
font-size: 12px;
z-index: 1100;
text-align: center;
}
#aboutContainer {
position: absolute;
top: 50px;

14
web/index.html
View file

@ -137,7 +137,19 @@ <h1 id="title">The 2022 /r/place Atlas</h1>
<button id="hideListButton"></button>
<div id="zoomControls"><button title="Zoom In" id="zoomInButton"></button><button title="Reset View" id="zoomResetButton"></button><button title="Zoom Out" id="zoomOutButton"></button></div>
<div id="bottomBar">
<div id="zoomControls">
<button title="Zoom In" id="zoomInButton"></button>
<button title="Reset View" id="zoomResetButton"></button>
<button title="Zoom Out" id="zoomOutButton"></button>
</div>
<div id="timeControls">
<input type="range" min="1" max="10" value="10" class="slider" id="timeControlsSlider">
</div>
<div id="author">
Code by <a href="https://draemm.li/various/place-atlas/" target="_blank" rel="author">Roland Rytz</a>. Source on <a target="_blank" href="https://github.com/RolandR/place-atlas">GitHub</a> (<a target="_blank" href="https://github.com/Codixer/place-atlas">2022 Version Github</a>). Images provided by <a target="_blank" href="https://place.thatguyalex.com/">Alex Tsernoh</a>.
</div>
</div>
<div id="drawControlsContainer">
<a id="drawBackButton" href="./">&lt; Back to the Atlas</a>