Signature - improve UI signature app

This commit is contained in:
nobohan 2024-09-04 12:04:59 +02:00 committed by Julien Fastré
parent c23568032c
commit 4933238f3f
Signed by: julienfastre
GPG Key ID: BDE2190974723FCB
2 changed files with 37 additions and 37 deletions

View File

@ -26,37 +26,9 @@
</template>
</modal>
</teleport>
<div class="col-12">
<div
class="row justify-content-center mb-2"
v-if="signature.zones.length > 1"
>
<div class="col-4 gap-2 d-grid">
<button
:disabled="userSignatureZone === null || userSignatureZone?.index < 1"
class="btn btn-light btn-sm"
@click="turnSignature(-1)"
>
{{ $t("last_sign_zone") }}
</button>
</div>
<div class="col-4 gap-2 d-grid">
<button
:disabled="userSignatureZone?.index >= signature.zones.length - 1"
class="btn btn-light btn-sm"
@click="turnSignature(1)"
>
{{ $t("next_sign_zone") }}
</button>
</div>
</div>
<div
id="turn-page"
class="row justify-content-center mb-2"
v-if="pageCount > 1"
>
<div class="col-6-sm col-3-md text-center">
<div class="col-12 m-auto">
<div class="row justify-content-center border-bottom pdf-tools">
<div v-if="pageCount > 1" class="col-4 text-center turn-page">
<button
class="btn btn-light btn-sm"
:disabled="page <= 1"
@ -73,14 +45,35 @@
</button>
</div>
<div v-if="signature.zones.length > 1" class="col-4 col-xl-3 text-end">
<button
:disabled="userSignatureZone === null || userSignatureZone?.index < 1"
class="btn btn-light btn-sm"
@click="turnSignature(-1)"
>
{{ $t("last_sign_zone") }}
</button>
</div>
<div v-if="signature.zones.length > 1" class="col-4 col-xl-3 text-start">
<button
:disabled="userSignatureZone?.index >= signature.zones.length - 1"
class="btn btn-light btn-sm"
@click="turnSignature(1)"
>
{{ $t("next_sign_zone") }}
</button>
</div>
</div>
<div class="col-12 text-center">
</div>
<div class="col-xs-12 col-md-12 col-lg-9 m-auto my-5 text-center">
<canvas class="m-auto" id="canvas"></canvas>
</div>
<div class="col-12 p-4" id="action-buttons" v-if="signedState !== 'signed'">
<div
class="col-xs-12 col-md-12 col-lg-9 m-auto p-4"
id="action-buttons"
v-if="signedState !== 'signed'"
>
<div class="row mb-3">
<div class="col-12 d-flex justify-content-end">
<div class="col-4 col-xl-3 gap-2 d-grid">
@ -510,7 +503,7 @@ downloadAndOpen();
<style scoped lang="scss">
#canvas {
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1);
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
}
div#action-buttons {
position: sticky;
@ -518,7 +511,14 @@ div#action-buttons {
background-color: white;
z-index: 100;
}
div#turn-page {
div.pdf-tools {
background-color: #f3f3f3;
@media (min-width: 1200px) {
background: none;
border: none !important;
}
}
div.turn-page {
span {
font-size: 0.8rem;
margin: 0 0.4rem;

View File

@ -27,7 +27,7 @@
<div class="content" id="content">
<div class="container-xxl">
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-9 my-5 m-auto">
<div class="col-12 m-auto">
<div class="row" id="document-signature"></div>
</div>
</div>