diff --git a/pkg/index.html b/pkg/index.html
index b5506e76..7fef0fc6 100644
--- a/pkg/index.html
+++ b/pkg/index.html
@@ -95,6 +95,7 @@
display: flex;
flex-direction: column;
touch-action: none;
+ user-select: none;
box-sizing: border-box;
}
@@ -113,26 +114,31 @@
.window-body section {
flex 1;
}
-.window-body section div.tab pre {
- height:200px;
-}
+
+ .window-body section div.tab pre {
+ height:200px;
+ }
#terminal_win.window {
width: 802px;
height: 593px;
- transform: translate(5vw, 15vh);
+ left: 5vw;
+ top: 15vh;
z-index: 3;
}
#manpages.window {
-height:300px; width: min-content;
+ height:300px;
+ width: calc(65 * 8px + 59 * var(--gridGap) + 5px);
z-index: 1;
- transform: translate(calc(87vw - 60* 8px + 59 * var(--gridGap) + 5px), 40vh);
+ left: calc(85vw - 60* 8px + 59 * var(--gridGap) + 5px);
+ top: 40vh;
}
#keyboard.window {
z-index: 2;
width: calc(60* 8px + 59 * var(--gridGap) + 5px);
position: absolute;
- transform: translate(calc(85vw - 60* 8px + 59 * var(--gridGap) + 5px), 50vh);
+ left: calc(83vw - 60* 8px + 59 * var(--gridGap) + 5px);
+ top: 50vh;
}
.title-bar {
@@ -151,7 +157,8 @@ height:300px; width: min-content;
width: 28rem;
position: absolute;
z-index: 2;
- transform: translate(calc(95vw - 30rem), 5vh);
+ left: calc(95vw - 30rem);
+ top: 5vh;
}
.help h1 {
@@ -414,7 +421,8 @@ display: flex;
clear: both;
}
#manpages .window-body section > div> pre {
- cursor: default;
+ cursor: text;
+ user-select: text;
box-shadow: none;
background: #c0c0c0;
overflow: scroll;
@@ -451,7 +459,7 @@ display: flex;
interact('#terminal_win.window, #manpages.window') // target elements with the "draggable" class
.draggable({
// enable inertial throwing
- inertia: true,
+ inertia: false,
// keep the element within the area of it's parent
modifiers: [
interact.modifiers.restrictRect({
@@ -552,22 +560,26 @@ display: flex;
}
window_order.forEach(id => {
document.getElementById(id).addEventListener('click', event => {
- console.log("window_order = ", window_order );
- console.log("click id = ", id);
- let pos = window_order.indexOf(id);
- console.log("pos = ", pos);
- let removedItem = window_order.splice(pos, 1)[0];
- console.log("removedItem = ", removedItem);
- let newLength = window_order.unshift(removedItem);
- console.log("newLength = ", newLength);
- for (let i = 0; i < newLength; i++){
- document.getElementById(window_order[i]).style.zIndex = newLength - i;
- }
- });
+ setWindowOnTop(id);
+ });
});
+ function setWindowOnTop(id) {
+ //console.log("window_order = ", window_order );
+ //console.log("click id = ", id);
+ let pos = window_order.indexOf(id);
+ //console.log("pos = ", pos);
+ let removedItem = window_order.splice(pos, 1)[0];
+ //console.log("removedItem = ", removedItem);
+ let newLength = window_order.unshift(removedItem);
+ //console.log("newLength = ", newLength);
+ for (let i = 0; i < newLength; i++){
+ document.getElementById(window_order[i]).style.zIndex = newLength - i;
+ }
+ };
function dragMoveListener(event) {
var target = event.target
+ setWindowOnTop(target.id);
// keep the dragged position in the data-x/data-y attributes
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
@@ -587,6 +599,8 @@ display: flex;
function restorePosition(element) {
console.log("restorePosition ", element.id);
if (prev_window_position[element.id]) {
+ document.getElementById(element.id).style.left = prev_window_position[element.id]["left"];
+ document.getElementById(element.id).style.top = prev_window_position[element.id]["top"];
document.getElementById(element.id).style.width = prev_window_position[element.id]["width"];
document.getElementById(element.id).style.height = prev_window_position[element.id]["height"];
document.getElementById(element.id).style.webkitTransform = element.style.transform = prev_window_position[element.id]["transform"];
@@ -603,6 +617,8 @@ display: flex;
prev_window_position[element.id] = {
"width": element.style.width,
"height": element.style.height,
+ "top": element.style.top,
+ "left": element.style.left,
"transform": element.style.transform,
"data-x": element["data-x"],
"data-y": element["data-y"]
@@ -632,6 +648,8 @@ display: flex;
target.style.webkitTransform = target.style.transform =
'translate(' + x + 'px,' + y + 'px)';
+ target.style.left = x;
+ target.style.top = y;
target.setAttribute('data-x', x);
target.setAttribute('data-y', y);