diff --git a/public/ar_main.js b/public/ar_main.js index 52984eaf955cbb773faa8c1a999354693e38f6ef..d4e436adcc1ce84e72a7ae875b77c0221d68cf6e 100644 --- a/public/ar_main.js +++ b/public/ar_main.js @@ -356,32 +356,27 @@ function openMoveMenu() { const dynamicMenu = document.getElementById("dynamic-menu"); dynamicMenu.style.display = "flex"; dynamicMenu.innerHTML = ` - <div id="move-menu"> - <h3>Position anpassen</h3> - <label> - Verschiebungsgröße: <span id="move-delta-display">${moveDelta.toFixed(2)}</span> - <input type="range" min="0.01" max="1.0" step="0.01" value="${moveDelta}" onchange="updateMoveDelta(this.value)"> - </label> - <div id="button-controls"> - <button class="control-button" id="up" onclick="moveModelDynamic('z', -moveDelta)"> - <img src="assets/icons/up-arrow.png" alt="Up" /> - </button> - <div class="middle-row"> - <button class="control-button" id="left" onclick="moveModelDynamic('x', -moveDelta)"> - <img src="assets/icons/left-arrow.png" alt="Left" /> - </button> - <div class="spacer"></div> - <button class="control-button" id="right" onclick="moveModelDynamic('x', moveDelta)"> - <img src="assets/icons/right-arrow.png" alt="Right" /> - </button> - </div> - <button class="control-button" id="down" onclick="moveModelDynamic('z', moveDelta)"> - <img src="assets/icons/down-arrow.png" alt="Down" /> - </button> - </div> - <button onclick="closeDynamicMenu()">Zurück</button> + <h3>Position anpassen</h3> + <label> + Verschiebungsgröße: <span id="move-delta-display">${moveDelta.toFixed(2)}</span> + <input type="range" min="0.01" max="1.0" step="0.01" value="${moveDelta}" onchange="updateMoveDelta(this.value)"> + </label> + <div style="display: flex; gap: 4px;"> + <div class="control-button" id="left" onclick="moveModelDynamic('x', -moveDelta)"> + <img src="assets/icons/left-arrow.png" alt="Up" /> + </div> + <div class="control-button" id="right" onclick="moveModelDynamic('x', moveDelta)"> + <img src="assets/icons/right-arrow.png" alt="Up" /> + </div> + <div class="control-button" id="up" onclick="moveModelDynamic('z', -moveDelta)"> + <img src="assets/icons/up-arrow.png" alt="Up" /> + </div> + <div class="control-button" id="down" onclick="moveModelDynamic('z', moveDelta)"> + <img src="assets/icons/down-arrow.png" alt="Up" /> </div> - `; + </div> + <button onclick="closeDynamicMenu()">Zurück</button> + `; } function updateMoveDelta(value) { diff --git a/public/style.css b/public/style.css index 49fd00d87e02290aecd5ecc9a2de0e0f85a5e428..38cc221635960494b7faf06b4e2ac5c0f441c038 100644 --- a/public/style.css +++ b/public/style.css @@ -253,7 +253,6 @@ button:active { flex-direction: column; align-items: center; justify-content: center; - gap: 2px; } #button-controls .middle-row { @@ -274,9 +273,8 @@ button:active { } #button-controls .control-button img { - width: 100%; - height: 100%; - object-fit: contain; + width: 40px; + height: 40px; } #button-controls .control-button:active {