chore(web): merges updates to test fixture

This commit is contained in:
Joshua A. Horton 2022-07-14 15:58:28 +07:00
parent 10e3378e63
commit 5bb13a0b5a
2 changed files with 41 additions and 11 deletions

View file

@ -22,28 +22,28 @@
border: 1px dashed lightgray;
}
#demo-container {
#host-fixture {
max-width: fit-content;
max-height: fit-content;
}
#demo-container.screen4.bounds1.full {
#host-fixture.screen4.bounds1.full {
padding: 20px 0px 0px 0px;
}
#demo-container.screen4.bounds2.full {
#host-fixture.screen4.bounds2.full {
padding: 30px 10px 0px 10px;
}
#demo-container.bounds4.full {
#host-fixture.bounds4.full {
padding: 0px 0px 45px 0px;
}
#demo-container.screen3.bounds4.full {
#host-fixture.screen3.bounds4.full {
padding: 0px;
}
#demo-container.screen4.bounds4.full {
#host-fixture.screen4.bounds4.full {
padding: 25px 0px 45px 0px;
}
@ -69,20 +69,50 @@
.safe-zone {
border: 1px dashed black;
position: absolute;
z-index: 101;
pointer-events: none;
}
.safe-default .safe-zone {
margin: 2px;
width: calc(100% - 6px);
height: calc(100% - 6px);
}
.safe-loose .safe-zone {
margin: 4px;
width: calc(100% - 10px);
height: calc(100% - 10px);
z-index: 101;
pointer-events: none;
}
.safe-generous .safe-zone {
margin: 16px;
width: calc(100% - 34px);
height: calc(100% - 34px);
}
.safe-proximity {
border: 1px dashed lightgray;
position: absolute;
pointer-events: none;
}
.safe-default .safe-proximity {
margin: 3px;
width: calc(100% - 8px);
height: calc(100% - 8px);
}
.safe-loose .safe-proximity {
margin: 5px;
width: calc(100% - 12px);
height: calc(100% - 12px);
pointer-events: none;
}
.safe-generous .safe-proximity {
margin: 20px;
width: calc(100% - 42px);
height: calc(100% - 42px);
}
#faux-page {

View file

@ -19,11 +19,11 @@
<body>
<!-- START: recognizer host fixture -->
<!-- CSS classes for demo configuration should only be applied here, to `demoContainer`. -->
<div id="demo-container" class="screen2 bounds1">
<div id="host-fixture" class="screen2 bounds1">
<div id='faux-viewport' class="faux-screen">
<div class="faux-screen-border"></div>
<div id="safe-zone" class="safe-zone">
<div class="safe-proximity"></div>
<div id="padded-safe-zone" class="safe-proximity"></div>
</div>
<div id="faux-page">
<div class="receiver-host">