From 619e717b5a5446fc1164b04898858dddc473153b Mon Sep 17 00:00:00 2001
From: Skylar Ittner <skylar@netsyms.com>
Date: Fri, 2 Jul 2021 11:40:01 -0600
Subject: [PATCH] Make it look better

---
 css/main.css | 23 ++++++++++++++++++-----
 index.html   |  9 ++++++---
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/css/main.css b/css/main.css
index aaf44c8..6d0dbee 100644
--- a/css/main.css
+++ b/css/main.css
@@ -16,13 +16,26 @@ html, body {
     padding: 0;
 }
 
+
 #page-canvas-container {
-    height: 85vh;
-    max-height: 85vh;
-    max-width: 100vw;
+    position: absolute;
+    left: 0px;
+    right: 0px;
+    top: 0px;
+    bottom: 0px;
     overflow: auto;
 }
 
+#page-canvas-container-container #shadowbox {
+    position: absolute;
+    left: 0px;
+    right: calc(100vw - 99%);
+    top: 0px;
+    bottom: 0px;
+    box-shadow: inset 0px 0px 10px 5px rgba(0,0,0,0.5);
+    pointer-events: none;
+}
+
 #page-canvas-container .page-canvas {
     margin: 0.5em;
     box-shadow: 6px 6px 7px -1px rgba(0,0,0,0.5);
@@ -39,10 +52,10 @@ html, body {
 
 #page-canvas-container #placementguidebox {
     opacity: 0.5;
-    position: absolute;
+    position: fixed;
     float: left;
-    /* margin-top: -40px; */
     padding: 0;
+    pointer-events: none;
 }
 
 #signature_pad {
diff --git a/index.html b/index.html
index 08cef88..a3f1f7f 100644
--- a/index.html
+++ b/index.html
@@ -99,7 +99,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     </div>
 </div>
 
-<div class="card">
+<div class="card d-flex flex-column h-100">
     <div class="card-body">
         <div class="btn-toolbar d-inline-block" role="toolbar">
             <div class="btn-group me-2 mb-2" role="group" aria-label="First group">
@@ -128,8 +128,11 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
             </div>
         </div>
     </div>
-    <div class="card-body" id="page-canvas-container">
-        <canvas id="placementguidebox" width="1000" height="1000"></canvas>
+    <div class="card-body flex-grow-1 w-100 h-100 p-0 position-relative" id="page-canvas-container-container">
+        <div id="page-canvas-container" class="p-0 m-0">
+            <canvas id="placementguidebox" width="1000" height="1000"></canvas>
+        </div>
+        <div id="shadowbox"></div>
     </div>
 </div>