Merge pull request #87 from sz3/build-and-css-bugfix-24-2

css bugfix + package-portable-linux script tweak
sz3 · Jan 22, 2024 · 97f4af3 · 97f4af3
2 parents 0119374 + 0f2d718
commit 97f4af3
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 7 deletions.
diff --git a/package-portable-linux.sh b/package-portable-linux.sh
@@ -2,7 +2,8 @@
 ## targeting old glibc
 # docker run --mount type=bind,source="$(pwd)",target="/usr/src/app" -it ubuntu:16.04
 
-cd /usr/src/app
+SCRIPT_DIR=$(dirname "${BASH_SOURCE[0]}")
+cd $SCRIPT_DIR
 
 # https://gist.github.com/jlblancoc/99521194aba975286c80f93e47966dc5
 apt update
@@ -25,7 +26,7 @@ mkdir build-portable/ && cd build-portable/
 /usr/local/bin/cmake .. -DCMAKE_BUILD_TYPE=RELEASE -DBUILD_SHARED_LIBS=OFF -DOPENCV_GENERATE_PKGCONFIG=YES -DOPENCV_FORCE_3RDPARTY_BUILD=YES
 make -j5 install
 
-cd /usr/src/app
+cd $SCRIPT_DIR
 mkdir build-portable/ && cd build-portable/
 /usr/local/bin/cmake .. -DBUILD_PORTABLE_LINUX=1
 make -j5 install
diff --git a/web/index.html b/web/index.html
@@ -34,16 +34,23 @@
 	top: 0;
 }
 
+#invisible_click, #canvas, #nav-container {
+	z-index: 1;
+}
+
+#nav-button {
+	z-index: 2;
+}
 
 #canvas {
 	display: block;
+	position: relative;
 }
 
 #dragdrop {
 	background-color: #3C3D82;
 	background-image: linear-gradient(135deg, rgba(249, 249, 249, 0.1) 0%, rgba(249, 249, 249, 0.1) 18%,rgba(70, 70, 70, 0.1) 18%, rgba(70, 70, 70, 0.1) 33%,rgba(229, 229, 229, 0.1) 33%, rgba(229, 229, 229, 0.1) 35%,rgba(53, 53, 53, 0.1) 35%, rgba(53, 53, 53, 0.1) 47%,rgba(156, 156, 156, 0.1) 47%, rgba(156, 156, 156, 0.1) 100%),linear-gradient(135deg, rgba(106, 106, 106, 0.08) 0%, rgba(106, 106, 106, 0.08) 9%,rgba(123, 123, 123, 0.08) 9%, rgba(123, 123, 123, 0.08) 10%,rgba(69, 69, 69, 0.08) 10%, rgba(69, 69, 69, 0.08) 38%,rgba(33, 33, 33, 0.08) 38%, rgba(33, 33, 33, 0.08) 65%,rgba(24, 24, 24, 0.08) 65%, rgba(24, 24, 24, 0.08) 77%,rgba(210, 210, 210, 0.08) 77%, rgba(210, 210, 210, 0.08) 100%),linear-gradient(45deg, rgba(70, 70, 70, 0.02) 0%, rgba(70, 70, 70, 0.02) 23%,rgba(225, 225, 225, 0.02) 23%, rgba(225, 225, 225, 0.02) 29%,rgba(118, 118, 118, 0.02) 29%, rgba(118, 118, 118, 0.02) 36%,rgba(28, 28, 28, 0.02) 36%, rgba(28, 28, 28, 0.02) 42%,rgba(142, 142, 142, 0.02) 42%, rgba(142, 142, 142, 0.02) 85%,rgba(95, 95, 95, 0.02) 85%, rgba(95, 95, 95, 0.02) 93%,rgba(32, 32, 32, 0.02) 93%, rgba(32, 32, 32, 0.02) 98%,rgba(71, 71, 71, 0.02) 98%, rgba(71, 71, 71, 0.02) 100%),linear-gradient(135deg, rgba(207, 207, 207, 0.05) 0%, rgba(207, 207, 207, 0.05) 12%,rgba(32, 32, 32, 0.05) 12%, rgba(32, 32, 32, 0.05) 27%,rgba(79, 79, 79, 0.05) 27%, rgba(79, 79, 79, 0.05) 32%,rgba(139, 139, 139, 0.05) 32%, rgba(139, 139, 139, 0.05) 43%,rgba(150, 150, 150, 0.05) 43%, rgba(150, 150, 150, 0.05) 79%,rgba(139, 139, 139, 0.05) 79%, rgba(139, 139, 139, 0.05) 87%,rgba(55, 55, 55, 0.05) 87%, rgba(55, 55, 55, 0.05) 91%,rgba(68, 68, 68, 0.05) 91%, rgba(68, 68, 68, 0.05) 100%),linear-gradient(0deg, rgba(108, 108, 108, 0.1) 0%, rgba(108, 108, 108, 0.1) 16%,rgba(163, 163, 163, 0.1) 16%, rgba(163, 163, 163, 0.1) 18%,rgba(32, 32, 32, 0.1) 18%, rgba(32, 32, 32, 0.1) 29%,rgba(122, 122, 122, 0.1) 29%, rgba(122, 122, 122, 0.1) 61%,rgba(141, 141, 141, 0.1) 61%, rgba(141, 141, 141, 0.1) 67%,rgba(53, 53, 53, 0.1) 67%, rgba(53, 53, 53, 0.1) 78%,rgba(142, 142, 142, 0.1) 78%, rgba(142, 142, 142, 0.1) 100%),linear-gradient(0deg, rgba(160, 160, 160, 0.08) 0%, rgba(160, 160, 160, 0.08) 27%,rgba(163, 163, 163, 0.08) 27%, rgba(163, 163, 163, 0.08) 29%,rgba(37, 37, 37, 0.08) 29%, rgba(37, 37, 37, 0.08) 35%,rgba(96, 96, 96, 0.08) 35%, rgba(96, 96, 96, 0.08) 73%,rgba(250, 250, 250, 0.08) 73%, rgba(250, 250, 250, 0.08) 90%,rgba(91, 91, 91, 0.08) 90%, rgba(91, 91, 91, 0.08) 100%),linear-gradient(90deg, rgba(191, 191, 191, 0.08) 0%, rgba(191, 191, 191, 0.08) 2%,rgba(170, 170, 170, 0.08) 2%, rgba(170, 170, 170, 0.08) 7%,rgba(49, 49, 49, 0.08) 7%, rgba(49, 49, 49, 0.08) 9%,rgba(131, 131, 131, 0.08) 9%, rgba(131, 131, 131, 0.08) 23%,rgba(197, 197, 197, 0.08) 23%, rgba(197, 197, 197, 0.08) 29%,rgba(154, 154, 154, 0.08) 29%, rgba(154, 154, 154, 0.08) 91%,rgba(211, 211, 211, 0.08) 91%, rgba(211, 211, 211, 0.08) 100%),linear-gradient(90deg, rgb(0,119,100),rgb(0,0,119));
 	margin: 0 auto;
-	z-index: -1;
 	color: #F0F0F0;
 	outline: 6px solid black;
 	box-shadow: 0px 0px 12px black, 0px 0px 18px black;
@@ -57,7 +64,6 @@
 	left: 0;
 	text-align: center;
 	width: 100%;
-	z-index: -1;
 }
 
 #invisible_click {
@@ -114,7 +120,6 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  z-index: 1;
   height: 60px;
   width: 30px;
   margin-left: 15px;

diff --git a/web/main.js b/web/main.js
@@ -49,8 +49,7 @@ return {
   {
     // reset zoom
     var canvas = document.getElementById('canvas');
-    canvas.style.zoom = (window.innerWidth / window.outerWidth);
-    var width = window.outerWidth;
+    var width = window.innerWidth;
     var height = window.outerHeight;
     Main.scaleCanvas(canvas, width, height);
     Main.alignInvisibleClick(canvas);