Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

css bugfix + package-portable-linux script tweak #87

Merged
merged 4 commits into from
Jan 22, 2024
Merged

css bugfix + package-portable-linux script tweak #87

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
38b8068
Update index.html
Headedbranch225 Jan 9, 2024
8f9caa1
If negative z-index is bad vibes, we should set z-index+1 various places
sz3 Jan 11, 2024
d2ddcc2
Use innerWidth to avert android firefox shenanigans
sz3 Jan 10, 2024
0f2d718
Tweak to make package-portable-linux slightly less docker dependent
sz3 Jan 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions package-portable-linux.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
11 changes: 8 additions & 3 deletions web/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -57,7 +64,6 @@
left: 0;
text-align: center;
width: 100%;
z-index: -1;
}

#invisible_click {
Expand Down Expand Up @@ -114,7 +120,6 @@
display: flex;
flex-direction: column;
justify-content: center;
z-index: 1;
height: 60px;
width: 30px;
margin-left: 15px;
Expand Down
3 changes: 1 addition & 2 deletions web/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In the process of testing I found a weird interaction with window.outerWidth seemingly being >100% on android firefox? So we'll just use innerWidth...

The goal is to use 100% of the visible viewport, erring on the side of <100% if there's any ambiguity. Note that we're still using outerHeight (not innerHeight) below, so there is room for more rigor here.

var height = window.outerHeight;
Main.scaleCanvas(canvas, width, height);
Main.alignInvisibleClick(canvas);
Expand Down