Make it look better

This commit is contained in:
Skylar Ittner 2021-07-02 11:40:01 -06:00
parent 414495a4cb
commit 619e717b5a
2 changed files with 24 additions and 8 deletions

View File

@ -16,13 +16,26 @@ html, body {
padding: 0; padding: 0;
} }
#page-canvas-container { #page-canvas-container {
height: 85vh; position: absolute;
max-height: 85vh; left: 0px;
max-width: 100vw; right: 0px;
top: 0px;
bottom: 0px;
overflow: auto; 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 { #page-canvas-container .page-canvas {
margin: 0.5em; margin: 0.5em;
box-shadow: 6px 6px 7px -1px rgba(0,0,0,0.5); box-shadow: 6px 6px 7px -1px rgba(0,0,0,0.5);
@ -39,10 +52,10 @@ html, body {
#page-canvas-container #placementguidebox { #page-canvas-container #placementguidebox {
opacity: 0.5; opacity: 0.5;
position: absolute; position: fixed;
float: left; float: left;
/* margin-top: -40px; */
padding: 0; padding: 0;
pointer-events: none;
} }
#signature_pad { #signature_pad {

View File

@ -99,7 +99,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
</div> </div>
</div> </div>
<div class="card"> <div class="card d-flex flex-column h-100">
<div class="card-body"> <div class="card-body">
<div class="btn-toolbar d-inline-block" role="toolbar"> <div class="btn-toolbar d-inline-block" role="toolbar">
<div class="btn-group me-2 mb-2" role="group" aria-label="First group"> <div class="btn-group me-2 mb-2" role="group" aria-label="First group">
@ -128,9 +128,12 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
</div> </div>
</div> </div>
</div> </div>
<div class="card-body" id="page-canvas-container"> <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> <canvas id="placementguidebox" width="1000" height="1000"></canvas>
</div> </div>
<div id="shadowbox"></div>
</div>
</div> </div>
<div id="svgtrimbox"></div> <div id="svgtrimbox"></div>