m4xx1m/dv-community-map
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve legend display on mobile

Browse Source
This commit is contained in:
Pyro Nicampt committed 2024-12-31 19:20:55 -06:00
1 parent 22122c2bd8
commit b5fdfb3fb8
3 files changed
+55 -37
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+13 -12
View File
@@ -10,6 +10,7 @@
<meta property="og:url" content="https://pyronicampt.github.io/DV-Community-Map/">
<meta property="og:image" content="https://pyronicampt.github.io/DV-Community-Map/opengraph.png">
<meta property="og:description" content="Web-based map of Derail Valley">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<script type="module" src="index.js"></script>
<script type="module" src="legend.js"></script>
</head>
@@ -208,20 +209,28 @@
</svg>
</div>
</div>
<div id="stats" class="orange">
<div id="zoomLevelDisplay"></div>
Map v0.4 alpha
<br>
Updated for Game Build 99.3
<br>
This tool is a fan work, Derail Valley owned by Altfuture
</div>
<div id="topleft">
<div id="headerbar" class="panel orange">
<div>
DV Community Map
</div>
</div>
<div id="legend" style="display: flex;">
<div id="legendContents" style="display:flex; flex-direction:column; width: 400px;">
<div id="legend">
<div id="legendContents">
<div class="panel">
Welcome to the WIP community map of <a href="https://www.derailvalley.com/" style="white-space:nowrap;">Derail Valley</a>, a resource for documenting and displaying all tracks and points of interest.
<hr>
Hover over tracks and objects for detailed information.
</div>
<div class="panel" style="width:330px">
<div class="panel">
<h3>Key</h3>
<hr>
<div id="legendKey"></div>
@@ -236,16 +245,8 @@
<a href="https://derailvalley.wiki.gg/wiki/Derail_Valley_Wiki">DV Wiki</a>
</div>
</div>
<div id="legendButton" class="panel orange" style="height: fit-content;"><svg style="transform:rotate(180deg) translateY(-3px)" height="25" viewBox="0 0 32 32"><path fill="currentColor" d="M31 16 20 31l-16 0L15 16 4 1l16 0Z"/></svg></div>
<div id="legendButton" class="panel orange"><svg style="transform:rotate(180deg) translateY(0px)" viewBox="0 0 32 32"><path fill="currentColor" d="M31 16 20 31l-16 0L15 16 4 1l16 0Z"/></svg></div>
</div>
</div>
<div id="footer" class="orange">
<div id="zoomLevelDisplay"></div>
Map v0.4 alpha
<br>
Updated for Game Build 99.3
<br>
This tool is a fan work, Derail Valley owned by Altfuture
</div>
</body>
</html>
legend.js
+4 -3
View File
@@ -75,12 +75,13 @@ document.addEventListener('DOMContentLoaded', async () => {
addSettingEntry(thisSetting, settingsPanel);
}
const legend = document.getElementById('legend');
const legendContents = document.getElementById('legendContents');
const legendButton = document.getElementById('legendButton');
const legendArrow = legendButton.children[0];
let legendState = true;
let legendButtonEvent = e => {
legendArrow.style.transform = `rotate(${legendState ? 180 : 0}deg) translateY(${legendState ? -3 : 3}px)`;
legend.style.transform = `translateX(${legendState ? 0 : legendButton.clientWidth-legend.clientWidth}px)`;
legendArrow.style.transform = `rotate(${legendState ? 180 : 0}deg) translateY(${legendState ? -0 : 0}px)`;
legend.style.transform = `translateX(${legendState ? 0 : -legendContents.clientWidth}px)`;
legendState = !legendState;
};
legendButton.addEventListener('click', legendButtonEvent);
@@ -90,8 +91,8 @@ document.addEventListener('DOMContentLoaded', async () => {
function addSettingEntry(thisSetting, parent, indent=0){
thisSetting.divContainer = document.createElement('div');
thisSetting.divContainer.innerHTML = '&nbsp;'.repeat(indent);
thisSetting.inputElement = document.createElement('input');
thisSetting.inputElement.style.margin = `0 0.5em 0 ${indent}em`;
thisSetting.labelElement = document.createElement('label');
parent.appendChild(thisSetting.divContainer);
thisSetting.divContainer.appendChild(thisSetting.inputElement);
style.css
+38 -22
View File
@@ -11,9 +11,11 @@
--cullThreshold_state_6: none;
--absScale: 1;
--legendButtonSize: 50px;
}
html, body, #map, #mapContainer, h1, h2, h3, h4, h5{
html *{
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
@@ -24,6 +26,8 @@ html, body{
font-family: "Noto Sans";
font-variation-settings: "wght" 400;
color: #e9e9e9;
font-size: 14px;
overflow:hidden;
}
a{
@@ -37,51 +41,63 @@ a:visited{
color: #e79830;
}
#topleft{
position:fixed;
top: 0px;
left: 0px;
pointer-events: none;
}
.panel{
width: fit-content;
border: 2px solid #b3b3b396;
background: linear-gradient(120deg, #2c3f58, #191e2e);
text-shadow: 2px 2px 5px #0003;
margin: 5px;
padding: 8px 13px;
border-radius: 10px;
border-radius: 5px;
pointer-events: all;
}
#topleft{
position:fixed;
top: 0px;
left: 0px;
pointer-events: none;
height: 100vh;
overflow: hidden;
max-width: min(500px,100vw);
display: flex;
flex-direction: column;
}
#headerbar{
background: linear-gradient(120deg, #3d5779, #121522);
font-size: 30px;
font-size: 2em;
border-left: 0px;
font-variation-settings: "wght" 500;
padding: 10px 30px 10px 30px;
margin: 10px 0px;
border-radius: 0px 10px 10px 0px;
max-width: fit-content;
}
#legendButton{
cursor: pointer;
user-select: none;
padding: 8px;
height: var(--legendButtonSize);
width: var(--legendButtonSize);
>*{
transition: transform 200ms ease;
height: 100%;
}
}
#legend{
transition: transform 400ms cubic-bezier(0.445, 0.050, 0.550, 0.950);
}
#legendButton>*{
transition: transform 200ms ease;
}
#legendKey{
font-size: 15px;
display: flex;
flex-flow: column wrap;
max-height: 310px;
flex-direction: row;
flex-shrink: 1;
min-height: 0px;
}
#legendContents{
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #62778a #1c1e2d;
pointer-events: all;
}
#settingsPanel{
@@ -91,12 +107,12 @@ a:visited{
}
}
#footer{
#stats{
position: fixed;
width: fit-content;
right: 10px;
bottom: 5px;
font-size: 12px;
font-size: 0.8em;
text-align: right;
}