diff --git a/Css/main.css b/Css/main.css index 5d09967..c0c3655 100644 --- a/Css/main.css +++ b/Css/main.css @@ -102,7 +102,7 @@ body { margin: 0; } #title-container { margin-bottom: 2px; } -#other-controls-container { display: flex; width: 550px; justify-content: center; z-index: 10; } +#other-controls-container { display: flex; width: 550px; justify-content: center; align-items: center; z-index: 10; } #select-mission { min-width: 0; } @@ -132,7 +132,7 @@ body { margin: 0; } #mission-modal #mission-ids div { display: flex; align-items: center; } -#modal-buttons { bottom: 0; margin-top: 10px; width: 100%; display: flex; justify-content: space-between; } +#modal-buttons { bottom: 0; margin-top: auto; width: 100%; display: flex; justify-content: space-between; } @media screen and (max-width: 812px) { #modal-container { top: 0; bottom: 0; left: 0; right: 0; transform: none; } @@ -140,6 +140,10 @@ body { margin: 0; } #other-controls-container { width: 100vw; } } +@media screen and (max-width: 411px) { + #volume-range { width: 100px; } +} + @media screen and (max-height: 600px) { #mission-modal #mission-detail { display: none; } #mission-modal #mission-icon { display: block; max-height: 20%; margin: 10px 0 10px 0; object-fit: contain; } diff --git a/Js/Main.js b/Js/Main.js index 2292547..ff12b77 100644 --- a/Js/Main.js +++ b/Js/Main.js @@ -202,6 +202,10 @@ function closeMissionModal(event, wasStarted) { } else { prevMission = document.getElementById('select-mission').value; } + closeModal(event); +} + +function closeModal(event) { let cont = document.getElementById("modal-container"); document.getElementById("click-catcher").style.cssText = 'display: none;'; cont.style.cssText = 'display: none;'; @@ -334,6 +338,35 @@ function onBodyKey(event) { } } +function openHelpModal(event) { + let cont = document.getElementById("modal-container"); + cont.innerHTML = ` +