From 4933238f3f60c3f08755ef538fd1e6c4c7da8ad7 Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Wed, 4 Sep 2024 12:04:59 +0200
Subject: [PATCH] Signature - improve UI signature app

---
 .../public/vuejs/DocumentSignature/App.vue    | 72 +++++++++----------
 .../views/Workflow/_signature_sign.html.twig  |  2 +-
 2 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index 04cdf9eea..2074c4163 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -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>
-  <div class="col-12 text-center">
+  <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;
diff --git a/src/Bundle/ChillMainBundle/Resources/views/Workflow/_signature_sign.html.twig b/src/Bundle/ChillMainBundle/Resources/views/Workflow/_signature_sign.html.twig
index 8b2770952..1c4b0a8f2 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/Workflow/_signature_sign.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/Workflow/_signature_sign.html.twig
@@ -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>