diff --git a/public/javascript/os.js b/public/javascript/os.js index 77f57f7..5adda0d 100644 --- a/public/javascript/os.js +++ b/public/javascript/os.js @@ -7,6 +7,9 @@ const isMobile = ( let topZ = 100; const MAX_PADDING = { left: 8, top: 8, right: 8, bottom: 60 }; +const maximizeIcon = '▢'; +const restoreIcon = '🗗'; + const startBtn = document.getElementById('start-btn'); const startMenu = document.getElementById('start-menu'); const windowsContainer = document.getElementById('windows'); @@ -341,7 +344,7 @@ function handleWindowAction(payload) { win.dataset.state = 'normal'; bringToFront(win); - + btn.classList.add('focus'); btn.classList.remove('minimized'); @@ -378,7 +381,6 @@ function applyMaximized(win) { win.classList.add('max'); win.dataset.state = 'maximized'; - } @@ -574,7 +576,7 @@ function wireWindowControls(win, taskbarBtn = null) { maximize.addEventListener('click', (evt) => { if(taskbarBtn != null) { taskbarBtn.classList.add('focus'); - maximize.innerHTML = win.dataset.state === 'normal' ? '🗗' : '▢'; + maximize.innerHTML = win.dataset.state === 'normal' ? restoreIcon : maximizeIcon; resetFocus(win.dataset.winid); } toggleMaximize(); @@ -601,7 +603,7 @@ function wireWindowControls(win, taskbarBtn = null) { if (taskbarBtn !== null) { titlebar.addEventListener('dblclick', (evt) => { toggleMaximize(); - titlebar.querySelector('.maximize').innerHTML = win.dataset.state === 'maximized' ? '🗗' : '▢'; + titlebar.querySelector('.maximize').innerHTML = win.dataset.state === 'maximized' ? restoreIcon : maximizeIcon; saveOpenWindows() }); } @@ -612,7 +614,7 @@ function wireWindowControls(win, taskbarBtn = null) { const delta = current - lastTap; if (delta < 300 && delta > 0) { // Double tap → maximize / restore - titlebar.querySelector('.maximize').innerHTML = win.dataset.state === 'maximized' ? '🗗' : '▢'; + titlebar.querySelector('.maximize').innerHTML = win.dataset.state === 'maximized' ? restoreIcon : maximizeIcon; toggleMaximize(); } lastTap = current; @@ -913,7 +915,7 @@ function makeDraggableWithSnap(win) { win.style.height = height + 'px'; win.classList.remove('max'); - win.querySelector('.maximize').innerHTML = '▢'; + win.querySelector('.maximize').innerHTML = maximizeIcon; win.dataset.state = 'normal'; win.dataset.snapped = ''; @@ -930,15 +932,14 @@ function bringToFront(win) { if(tb) { tb.classList.add('focus'); resetFocus(win.dataset.winid); - - saveOpenWindows(); // <-- HIER + saveOpenWindows(); } const currentZ = parseInt(win.style.zIndex || 0); - // Nur nach vorne holen, wenn nicht bereits ganz oben if (currentZ < topZ) { topZ += 1; win.style.zIndex = topZ; } + saveOpenWindows(); } function resetFocus(exceptID) { @@ -975,6 +976,7 @@ function restoreWindow(win, payload, taskbarBtn = null) { } } else { win.style.display = 'flex'; + win.querySelector('.maximize').innerHTML = win.dataset.state === 'maximized' ? restoreIcon : maximizeIcon; } if (state === 'maximized') { diff --git a/public/styles/os.css b/public/styles/os.css index f022206..9bef350 100644 --- a/public/styles/os.css +++ b/public/styles/os.css @@ -8,7 +8,7 @@ body, html { margin:0; padding:0; height:100%; overflow: hidden; font-family: va .window-titlebar .title { display: flex; align-items: center; min-width: 0; flex: 1; overflow: hidden; } .window-titlebar .window-title { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-left:8px; } -.window-icon { height: 10px; background-size:contain; transform: translate(1px, -1px); background-repeat: no-repeat; background-position: left; background-color: rgb(144, 179, 144); padding:4px;border-radius: 8px;} +.window-icon { height: 12px; background-size:contain; transform: translate(1px, -1px); background-repeat: no-repeat; background-position: left; background-color: rgb(144, 179, 144); padding:4px;border-radius: 6px;} .window .controls { display: flex; flex-shrink: 0;} .window .controls button { transition: background-color .3s, color .3s; padding: 2px 10px; border:none;} .window-content { display: flex; flex-direction: column; flex:1; padding:8px; overflow: auto; } @@ -24,10 +24,10 @@ body, html { margin:0; padding:0; height:100%; overflow: hidden; font-family: va .window-resize-sw { bottom: -4px; left: -4px; width: 12px; height: 12px; cursor: sw-resize; } -#taskbar { z-index: 2; position: absolute; width:100%; bottom:0; left:0; height:42px; overflow:visible; display:flex; flex: 0 0 auto; min-width:0; align-items:center; padding:0 8px; box-sizing:border-box; } -#start-btn { transition: background-color 0.3s ease; padding: 8px 15px; border-radius: 5px; border: none; margin-right:8px; } -#taskbar-windows { display:flex; gap:6px; align-items:center; flex:1; overflow-y:hidden;overflow-x: auto; min-width: 0; } -.taskbar-item { display: flex; position: relative; padding:7px 10px; border-radius:4px; } +#taskbar { z-index: 2; position: absolute; width:100%; bottom:0; left:0; height:auto; overflow:visible; display:flex; flex: 0 0 auto; min-width:0; align-items:center; padding:0 8px; box-sizing:border-box; } +#start-btn { transition: background-color 0.3s ease; padding: 8px 12px; border-radius: 5px; border: none; margin-right:8px; } +#taskbar-windows { display:flex; gap:6px; align-items:center; flex:1; overflow-y:hidden;overflow-x: auto; min-width: 0;scrollbar-width: thin; } +.taskbar-item { display: flex; position: relative; padding:4px 10px; border-radius:4px; } .taskbar-item::before { content: ''; position: absolute; bottom:1px; left:50%; width:40%; height: 4px; border-radius:4px; transform:translateX(-50%) scaleX(0); transform-origin:center; transition:transform 0.3s ease; } .taskbar-item.focus::before { transform: translateX(-50%) scaleX(1); } @@ -114,17 +114,18 @@ img.icon { width: auto; height:20px; object-fit: contain; filter: var(--theme-no /* Taskbar größer für Touch */ #taskbar { - height: 50px; padding: 0 6px; + overflow: hidden; } #start-btn { - padding: 10px 14px; + padding: 5px 14px; font-size: 16px; } .taskbar-item { - padding: 10px; + padding: 5px 5px 0 0; + white-space:nowrap; text-overflow:ellipsis; } .start-list { list-style: none; margin: 0; padding: 8px 0; height: 100%; overflow-y: auto; } diff --git a/public/views/partials/child.hbs b/public/views/partials/child.hbs index 7c3ac3e..6bc353b 100644 --- a/public/views/partials/child.hbs +++ b/public/views/partials/child.hbs @@ -7,7 +7,7 @@ {{#if this.printable}} {{/if}} - +