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

Compare commits

base: Jamon:b240756a64b7ecf4c1331779d84f0e84050e65d3
Branches Tags
Jamon:main
...
compare: Jamon:ef77fe72592d6223fdff8f08a5de8b3e23d9812a
Branches Tags
Jamon:main

2 Commits
b240756a64 ... ef77fe7259

Author SHA1 Message Date
Jamon
ef77fe7259 Added burger button for mobile - to hide the Quit/Menu (and future) UI buttons, giving more room for UI elements 2024-08-11 17:06:42 +12:00
Jamon
ef7a0f06ed CSS adjustments for small screens/mobile for the song duration bar and UI buttons 2024-08-11 16:42:37 +12:00
3 changed files with 125 additions and 0 deletions
Show Stats Expand all files Collapse all files

3
index.html
View File

@ -16,9 +16,12 @@
<body>
<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="uiButton" class="button">Menu</button>
</div>
</div>
<div id="uiWidget" class="hidden">
<div class="widget-tabs">
<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.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();

105
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 {
position: fixed;
top: 10px;
@ -561,6 +604,7 @@ body {
overflow: hidden;
display: none;
align-items: center;
z-index: 1000;
}
.song-duration-fill {
@ -595,6 +639,7 @@ body {
display: inline-block;
padding-left: 100%;
animation: scroll 15s linear infinite;
padding-right: 20px; /* Add padding to prevent overlap with timer */
}
@keyframes scroll {
@ -610,6 +655,66 @@ body {
flex-shrink: 0;
}
/* Updated styles for mobile */
@media screen and (max-width: 600px) {
.song-duration-bar {
top: 10px;
left: auto;
right: 10px;
transform: none;
width: calc(100% - 130px); /* Full width minus space for buttons and buffer */
max-width: auto; /* Limit maximum width */
height: 20px;
border-radius: 10px;
}
#ui {
position: fixed;
top: 10px;
left: 10px;
z-index: 1001; /* Ensure UI is above song duration bar */
}
#ui button {
padding: 5px 10px;
font-size: 12px;
}
#songName {
font-size: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex-grow: 1; /* Allow song name to take up available space */
}
#songTimer {
font-size: 10px;
margin-left: 5px;
flex-shrink: 0; /* Prevent timer from shrinking */
}
.song-info {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0 5px;
}
}
/* Additional adjustments for very small screens */
@media screen and (max-width: 400px) {
.song-duration-bar {
width: calc(100% - 120px); /* Slightly more space on very small screens */
}
#songName, #songTimer {
font-size: 9px;
}
}
.skin-option.glow-effect {
box-shadow: 0 0 10px 3px currentColor;
animation: glow 1.5s ease-in-out infinite alternate;