Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

It has been a long two or three weeks...

Browse Source
This commit is contained in:
Scott Idem
2024-03-15 17:48:14 -04:00
parent 68b0efb6c9
commit 0400aa429b
13 changed files with 725 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
src/lib/element_qr_scanner.svelte
View File

@@ -278,7 +278,7 @@ function handle_qr_manual_entry() {
<section
class="ae_element qr_scanner border border-2 border-primary p-2 space-y-2 flex flex-col gap-1 justify-center items-center"
class="ae_element qr_scanner border border-2 border-primary space-y-2 flex flex-col gap-1 justify-center items-center min-w-full max-w-full"
class:not_started={scanning_status == 'not_started'}
class:paused={scanning_status == 'paused'}
class:scanning={scanning_status == 'scanning'}
@@ -292,7 +292,7 @@ function handle_qr_manual_entry() {
<!-- <legend class="d_none">QR Scanner:</legend> -->
<div
class="ae_container qr_scanning_container flex flex-col gap-1 justify-center"
class="ae_container qr_scanning_container"
>
<div
class="ae_options"
@@ -300,10 +300,10 @@ function handle_qr_manual_entry() {
{#if scanning_status == 'not_started' }
<button on:click={handle_start_qr_scanning} class="btn btn-lg variant-soft-primary btn_start"><span class="fas fa-qrcode"></span> Start Scanning</button>
{:else if scanning_status == 'paused' && show_pause_btn}
<button on:click={handle_resume_qr_scanning} class="btn btn-lg variant-soft-primary btn_resume"><span class="fas fa-play"></span> Resume</button>
<button on:click={handle_resume_qr_scanning} class="btn btn-md variant-soft-primary btn_resume"><span class="fas fa-play"></span> Resume</button>
<span>Scanning paused</span>
{:else if scanning_status == 'scanning'}
<button on:click={handle_stop_qr_scanning} class="btn btn-lg variant-soft-secondary btn_stop"><span class="fas fa-stop-circle"></span> Stop</button>
<button on:click={handle_stop_qr_scanning} class="btn btn-md variant-soft-secondary btn_stop"><span class="fas fa-stop-circle m-1"></span> Stop</button>
{#if show_pause_btn}
<button on:click={handle_pause_qr_scanning} class="btn btn-lg variant-soft-secondary btn_pause"><span class="fas fa-pause-circle"></span> Pause</button>
{/if}
@@ -392,4 +392,55 @@ function handle_qr_manual_entry() {
background-color: hsla(120, 100%, 75%, 0.3);
border-color: hsla(120, 100%, 75%, 0.6);
}
.qr_scanner {
/* outline: solid thin pink; */
max-width: 100vw;
/* overflow-x: scroll; */
display: flex;
flex-direction: column;
/* flex-wrap: wrap; */
justify-content: flex-start;
align-items: center; /* center */
align-content: stretch;
}
.ae_element.qr_scanner div.qr_scanner_viewfinder {
/* max-width: 100vw; */
/* contain: content; */
/* contain: contain; */
}
.qr_scanner .qr_scanner_viewfinder {
/* outline: dashed medium blue; */
min-width: 400px;
width: 100%;
/* max-width: 100%; */
max-width: 500px;
/* max-width: 100vw; */
/* outline: solid thin red; */
contain: contain;
overflow-x: scroll;
}
@media (max-width: 767px) {
.qr_scanner .qr_scanner_viewfinder {
/* outline: dashed medium red; */
min-width: 80vw;
/* width: 100%; */
/* max-width: 100%; */
/* max-width: 450px; */
max-width: 100vw;
margin: 0;
padding: 0;
}
}
</style>