Jamon/resonancerumble
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added burger button for mobile - to hide the Quit/Menu (and future) UI buttons, giving more room for UI elements

Browse Source
This commit is contained in:
Jamon 2024-08-11 17:06:42 +12:00
parent ef7a0f06ed
commit ef77fe7259
3 changed files with 64 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -16,9 +16,12 @@
<body> <body>
<div id="ui" style="display: none;"> <div id="ui" style="display: none;">
<button id="burgerButton" class="mobile-only">☰</button>
<div id="menuButtons">
<button id="quitButton" class="button">Quit</button> <button id="quitButton" class="button">Quit</button>
<button id="uiButton" class="button">Menu</button> <button id="uiButton" class="button">Menu</button>
</div> </div>
</div>
<div id="uiWidget" class="hidden"> <div id="uiWidget" class="hidden">
<div class="widget-tabs"> <div class="widget-tabs">
<button class="tab-button" data-tab="settings">Settings</button> <button class="tab-button" data-tab="settings">Settings</button>

17
static/js/game.js
View File

@ -3850,5 +3850,22 @@ function hideSongDurationBar() {
document.getElementById('songDurationBar').style.display = 'none'; document.getElementById('songDurationBar').style.display = 'none';
} }
document.addEventListener('DOMContentLoaded', () => {
const burgerButton = document.getElementById('burgerButton');
const menuButtons = document.getElementById('menuButtons');
burgerButton.addEventListener('click', () => {
menuButtons.classList.toggle('show');
});
// Close the menu when clicking outside
document.addEventListener('click', (event) => {
if (!burgerButton.contains(event.target) && !menuButtons.contains(event.target)) {
menuButtons.classList.remove('show');
}
});
});
init(); init();

47
static/styles.css
View File

@ -548,6 +548,49 @@ body {
} }
} }
#burgerButton {
display: none;
background-color: #ff00ff;
color: white;
border: none;
padding: 10px;
font-size: 20px;
cursor: pointer;
border-radius: 5px;
}
#menuButtons {
display: flex;
flex-direction: row;
gap: 5px;
}
#menuButtons button {
margin-bottom: 5px;
}
@media screen and (max-width: 768px) {
#burgerButton {
display: block;
}
#menuButtons {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: rgba(18, 4, 88, 0.9);
padding: 10px;
border-radius: 5px;
flex-direction: column;
}
#menuButtons.show {
display: flex;
}
}
.song-duration-bar { .song-duration-bar {
position: fixed; position: fixed;
top: 10px; top: 10px;
@ -620,14 +663,12 @@ body {
right: 10px; right: 10px;
transform: none; transform: none;
width: calc(100% - 130px); /* Full width minus space for buttons and buffer */ width: calc(100% - 130px); /* Full width minus space for buttons and buffer */
max-width: 200px; /* Limit maximum width */ max-width: auto; /* Limit maximum width */
height: 20px; height: 20px;
border-radius: 10px; border-radius: 10px;
} }
#ui { #ui {
display: flex;
align-items: center;
position: fixed; position: fixed;
top: 10px; top: 10px;
left: 10px; left: 10px;