From 5259ea71a1ea3092c52b80ed5ede52820b45f41e Mon Sep 17 00:00:00 2001
From: nobohan <juminet@gmail.com>
Date: Wed, 30 Oct 2024 10:29:08 +0100
Subject: [PATCH] signature vue app: improve responsive design

---
 .../public/vuejs/DocumentSignature/App.vue    | 66 +++++++++----------
 1 file changed, 31 insertions(+), 35 deletions(-)

diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index 3572aa323..2b2b1e31f 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -41,7 +41,7 @@
           </option>
         </select>
         <button
-          class="btn btn-light btn-sm"
+          class="btn btn-light btn-xs p-1"
           :disabled="page <= 1"
           @click="turnPage(-1)"
         >
@@ -49,14 +49,17 @@
         </button>
         <span>{{ page }}/{{ pageCount }}</span>
         <button
-          class="btn btn-light btn-sm"
+          class="btn btn-light btn-xs p-1"
           :disabled="page >= pageCount"
           @click="turnPage(1)"
         >
           ❯
         </button>
       </div>
-      <div v-if="signature.zones.length > 1" class="col-3 p-0">
+      <div
+        v-if="signature.zones.length > 1"
+        class="col-5 p-0 text-center turnSignature"
+      >
         <button
           :disabled="userSignatureZone === null || userSignatureZone?.index < 1"
           class="btn btn-light btn-sm"
@@ -64,8 +67,7 @@
         >
           {{ $t("last_zone") }}
         </button>
-      </div>
-      <div v-if="signature.zones.length > 1" class="col-3 p-0">
+        <span>|</span>
         <button
           :disabled="userSignatureZone?.index >= signature.zones.length - 1"
           class="btn btn-light btn-sm"
@@ -74,7 +76,7 @@
           {{ $t("next_zone") }}
         </button>
       </div>
-      <div class="col text-end p-0">
+      <div class="col text-end" v-if="signedState !== 'signed'">
         <button
           class="btn btn-misc btn-sm"
           :hidden="!userSignatureZone"
@@ -92,8 +94,6 @@
         >
           {{ $t("cancel") }}
         </button>
-      </div>
-      <div class="col-1" v-if="signedState !== 'signed'">
         <button
           class="btn btn-create btn-sm"
           :class="{ active: canvasEvent === 'add' }"
@@ -106,7 +106,7 @@
     <div
       class="row justify-content-center border-bottom pdf-tools d-none d-md-flex"
     >
-      <div v-if="pageCount > 1" class="col-3 text-center turn-page">
+      <div v-if="pageCount > 1" class="col-3 text-center turn-page ps-3">
         <select
           class="form-select form-select-sm"
           id="zoomSelect"
@@ -119,7 +119,7 @@
           </option>
         </select>
         <button
-          class="btn btn-light btn-sm"
+          class="btn btn-light btn-xs p-1"
           :disabled="page <= 1"
           @click="turnPage(-1)"
         >
@@ -127,7 +127,7 @@
         </button>
         <span>{{ page }} / {{ pageCount }}</span>
         <button
-          class="btn btn-light btn-sm"
+          class="btn btn-light btn-xs p-1"
           :disabled="page >= pageCount"
           @click="turnPage(1)"
         >
@@ -136,7 +136,7 @@
       </div>
       <div
         v-if="signature.zones.length > 1 && signedState !== 'signed'"
-        class="col text-end d-xl-none"
+        class="col-4 d-xl-none text-center turnSignature p-0"
       >
         <button
           :disabled="userSignatureZone === null || userSignatureZone?.index < 1"
@@ -145,11 +145,7 @@
         >
           {{ $t("last_zone") }}
         </button>
-      </div>
-      <div
-        v-if="signature.zones.length > 1 && signedState !== 'signed'"
-        class="col text-start d-xl-none"
-      >
+        <span>|</span>
         <button
           :disabled="userSignatureZone?.index >= signature.zones.length - 1"
           class="btn btn-light btn-sm"
@@ -160,7 +156,7 @@
       </div>
       <div
         v-if="signature.zones.length > 1 && signedState !== 'signed'"
-        class="col text-end d-none d-xl-flex p-0"
+        class="col-4 d-none d-xl-flex p-0 text-center turnSignature"
       >
         <button
           :disabled="userSignatureZone === null || userSignatureZone?.index < 1"
@@ -169,11 +165,7 @@
         >
           {{ $t("last_sign_zone") }}
         </button>
-      </div>
-      <div
-        v-if="signature.zones.length > 1 && signedState !== 'signed'"
-        class="col text-start d-none d-xl-flex p-0"
-      >
+        <span>|</span>
         <button
           :disabled="userSignatureZone?.index >= signature.zones.length - 1"
           class="btn btn-light btn-sm"
@@ -182,7 +174,7 @@
           {{ $t("next_sign_zone") }}
         </button>
       </div>
-      <div class="col text-end p-0" v-if="signedState !== 'signed'">
+      <div class="col text-end" v-if="signedState !== 'signed'">
         <button
           class="btn btn-misc btn-sm"
           :hidden="!userSignatureZone"
@@ -199,11 +191,6 @@
         >
           {{ $t("cancel") }}
         </button>
-      </div>
-      <div
-        class="col text-end p-0 pe-2 pe-xxl-4"
-        v-if="signedState !== 'signed'"
-      >
         <button
           class="btn btn-create btn-sm"
           :class="{ active: canvasEvent === 'add' }"
@@ -286,7 +273,7 @@ const signedState: Ref<SignedState> = ref("pending");
 const page: Ref<number> = ref(1);
 const pageCount: Ref<number> = ref(0);
 const zoom: Ref<number> = ref(1);
-const zoomLevel = '';
+const zoomLevel = "";
 const zoomLevels: Ref<ZoomLevel[]> = ref([
   {
     id: 0,
@@ -323,6 +310,13 @@ const zoomLevels: Ref<ZoomLevel[]> = ref([
       fr: "200%",
     },
   },
+  {
+    id: 5,
+    zoom: 3,
+    label: {
+      fr: "300%",
+    },
+  },
 ]);
 let userSignatureZone: Ref<null | SignatureZone> = ref(null);
 let pdf = {} as PDFDocumentProxy;
@@ -684,7 +678,12 @@ div.pdf-tools {
   background-color: #f3f3f3;
   font-size: 0.6rem;
   button {
-    font-size: 0.75rem!important;
+    font-size: 0.75rem !important;
+  }
+  div.turnSignature {
+    span {
+      font-size: 1rem;
+    }
   }
   @media (min-width: 1400px) {
     // background: none;
@@ -698,10 +697,7 @@ div.turn-page {
     margin: auto 0.4rem;
   }
   select {
-    width: 3.5rem;
-    @media (min-width: 850px) {
-      width: 5rem;
-    }
+    width: 5rem;
     font-size: 0.75rem;
   }
 }