From f82570cc51681ffabdfb7f811cc1adfe7a463f6a Mon Sep 17 00:00:00 2001
From: stitch <futurebetagamer@gmail.com>
Date: Thu, 29 Aug 2024 13:08:51 +0300
Subject: [PATCH] removed signing tab on mobile. added signing popup on mobile

---
 assets/css/files.css       | 37 ++++++++++++++++++
 assets/js/signMobileBox.js | 13 +++++++
 dashboard-complete.html    |  1 +
 dashboard-draft.html       |  1 +
 dashboard-failed.html      |  1 +
 dashboard-progress.html    | 77 +++++++++++++++++++-------------------
 dashboard.html             |  1 +
 index.html                 |  1 +
 8 files changed, 93 insertions(+), 39 deletions(-)
 create mode 100644 assets/js/signMobileBox.js

diff --git a/assets/css/files.css b/assets/css/files.css
index 906d955..18c37e0 100644
--- a/assets/css/files.css
+++ b/assets/css/files.css
@@ -405,6 +405,15 @@
   top: -25px;
 }
 
+.btnMain.filesPageSecMidActionsTriggerBtnAlt {
+  background: white;
+  color: #434343;
+  padding: 5px 30px;
+  box-shadow: unset;
+  position: static;
+  top: -20px;
+}
+
 .filesPageSecMidActionsTop {
   display: flex;
   flex-direction: row;
@@ -815,3 +824,31 @@
   min-width: 160px;
 }
 
+.MobileSignBox {
+  position: fixed;
+  bottom: 50px;
+  background: white;
+  left: 5px;
+  right: 5px;
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  box-shadow: 0 0 4px 0 rgb(0,0,0,0.25);
+  border-radius: 5px;
+  grid-gap: 10px;
+}
+
+@media (min-width: 768px) {
+  .MobileSignBox {
+    display: none;
+  }
+}
+
+.MobileSignBoxControl {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+}
+
diff --git a/assets/js/signMobileBox.js b/assets/js/signMobileBox.js
new file mode 100644
index 0000000..f969ecc
--- /dev/null
+++ b/assets/js/signMobileBox.js
@@ -0,0 +1,13 @@
+document.getElementById('pageActionTriggerMobile').addEventListener('click', function() {
+    var targetDiv = document.getElementById('pageActionTriggerMobileTarget');
+    var innerElement = this.querySelector('*'); // Selects the first child element of the clicked element
+
+    // Toggle the display property of the target div
+    if (targetDiv.style.display === 'none' || targetDiv.style.display === '') {
+        targetDiv.style.display = 'flex';
+        innerElement.style.transform = 'rotate(180deg)';
+    } else {
+        targetDiv.style.display = 'none';
+        innerElement.style.transform = 'rotate(0deg)';
+    }
+});
diff --git a/dashboard-complete.html b/dashboard-complete.html
index e1dfa77..d61c499 100644
--- a/dashboard-complete.html
+++ b/dashboard-complete.html
@@ -390,6 +390,7 @@
     <script src="assets/js/dashboardTriggers.js"></script>
     <script src="assets/js/pageActionView.js"></script>
     <script src="assets/js/popups.js"></script>
+    <script src="assets/js/signMobileBox.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/dashboard-draft.html b/dashboard-draft.html
index e586a37..8ffc5b8 100644
--- a/dashboard-draft.html
+++ b/dashboard-draft.html
@@ -577,6 +577,7 @@
     <script src="assets/js/dashboardTriggers.js"></script>
     <script src="assets/js/pageActionView.js"></script>
     <script src="assets/js/popups.js"></script>
+    <script src="assets/js/signMobileBox.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/dashboard-failed.html b/dashboard-failed.html
index 98cdce6..149691a 100644
--- a/dashboard-failed.html
+++ b/dashboard-failed.html
@@ -390,6 +390,7 @@
     <script src="assets/js/dashboardTriggers.js"></script>
     <script src="assets/js/pageActionView.js"></script>
     <script src="assets/js/popups.js"></script>
+    <script src="assets/js/signMobileBox.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/dashboard-progress.html b/dashboard-progress.html
index 9d2e9d9..92e9c39 100644
--- a/dashboard-progress.html
+++ b/dashboard-progress.html
@@ -96,9 +96,9 @@
                         <div class="filesPageSec filesPageSecMid">
                             <div class="tabsMain filesPageSecMidTab">
                                 <ul class="nav nav-tabs tabsMainTop filesPageSecMidTabTop" role="tablist" style="/*display: flex;*/">
-                                    <li class="nav-item tabsMainTopTab filesPageSecMidTabTopTabTab" role="presentation"><a class="nav-link active tabsMainTopTabLink filesPageSecMidTabTabLink" role="tab" data-bs-toggle="tab" href="#tab-1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-64 0 512 512" width="1em" height="1em" fill="currentColor">
+                                    <li class="nav-item tabsMainTopTab filesPageSecMidTabTopTabTab" role="presentation"><a class="nav-link active tabsMainTopTabLink filesPageSecMidTabTabLink" role="tab" data-bs-toggle="tab" href="#tab-1"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor">
                                                 <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
-                                                <path d="M0 64C0 28.65 28.65 0 64 0H224V128C224 145.7 238.3 160 256 160H384V448C384 483.3 355.3 512 320 512H64C28.65 512 0 483.3 0 448V64zM256 128V0L384 128H256z"></path>
+                                                <path d="M421.7 220.3L188.5 453.4L154.6 419.5L158.1 416H112C103.2 416 96 408.8 96 400V353.9L92.51 357.4C87.78 362.2 84.31 368 82.42 374.4L59.44 452.6L137.6 429.6C143.1 427.7 149.8 424.2 154.6 419.5L188.5 453.4C178.1 463.8 165.2 471.5 151.1 475.6L30.77 511C22.35 513.5 13.24 511.2 7.03 504.1C.8198 498.8-1.502 489.7 .976 481.2L36.37 360.9C40.53 346.8 48.16 333.9 58.57 323.5L291.7 90.34L421.7 220.3zM492.7 58.75C517.7 83.74 517.7 124.3 492.7 149.3L444.3 197.7L314.3 67.72L362.7 19.32C387.7-5.678 428.3-5.678 453.3 19.32L492.7 58.75z"></path>
                                             </svg></a></li>
                                     <li class="nav-item tabsMainTopTab" role="presentation"><a class="nav-link tabsMainTopTabLink" role="tab" data-bs-toggle="tab" href="#tab-2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor">
                                                 <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
@@ -108,10 +108,6 @@
                                                 <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
                                                 <path d="M0 64C0 28.65 28.65 0 64 0H224V128C224 145.7 238.3 160 256 160H384V198.6C310.1 219.5 256 287.4 256 368C256 427.1 285.1 479.3 329.7 511.3C326.6 511.7 323.3 512 320 512H64C28.65 512 0 483.3 0 448V64zM256 128V0L384 128H256zM288 368C288 288.5 352.5 224 432 224C511.5 224 576 288.5 576 368C576 447.5 511.5 512 432 512C352.5 512 288 447.5 288 368zM448 303.1C448 295.2 440.8 287.1 432 287.1C423.2 287.1 416 295.2 416 303.1V351.1H368C359.2 351.1 352 359.2 352 367.1C352 376.8 359.2 383.1 368 383.1H416V431.1C416 440.8 423.2 447.1 432 447.1C440.8 447.1 448 440.8 448 431.1V383.1H496C504.8 383.1 512 376.8 512 367.1C512 359.2 504.8 351.1 496 351.1H448V303.1z"></path>
                                             </svg></a></li>
-                                    <li class="nav-item tabsMainTopTab" role="presentation"><a class="nav-link tabsMainTopTabLink" role="tab" data-bs-toggle="tab" href="#tab-4"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor">
-                                                <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
-                                                <path d="M421.7 220.3L188.5 453.4L154.6 419.5L158.1 416H112C103.2 416 96 408.8 96 400V353.9L92.51 357.4C87.78 362.2 84.31 368 82.42 374.4L59.44 452.6L137.6 429.6C143.1 427.7 149.8 424.2 154.6 419.5L188.5 453.4C178.1 463.8 165.2 471.5 151.1 475.6L30.77 511C22.35 513.5 13.24 511.2 7.03 504.1C.8198 498.8-1.502 489.7 .976 481.2L36.37 360.9C40.53 346.8 48.16 333.9 58.57 323.5L291.7 90.34L421.7 220.3zM492.7 58.75C517.7 83.74 517.7 124.3 492.7 149.3L444.3 197.7L314.3 67.72L362.7 19.32C387.7-5.678 428.3-5.678 453.3 19.32L492.7 58.75z"></path>
-                                            </svg></a></li>
                                 </ul>
                                 <div class="tab-content tabsMainBottom">
                                     <div class="tab-pane active tabsMainBottomPane" role="tabpanel" id="tab-1">
@@ -169,6 +165,41 @@
                                                 </div>
                                             </div>
                                         </div>
+                                        <div class="MobileSignBox">
+                                            <div class="MobileSignBoxControl">
+                                                <p class="filesPageSecMidActionsTopInfoText">Add your signature</p><button id="pageActionTriggerMobile" class="btnMain filesPageSecMidActionsTriggerBtn filesPageSecMidActionsTriggerBtnAlt" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-64 0 512 512" width="1em" height="1em" fill="currentColor">
+                                                        <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
+                                                        <path d="M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z"></path>
+                                                    </svg></button>
+                                            </div>
+                                            <div id="pageActionTriggerMobileTarget" class="filesPageSecMidActionsWrapper" style="display: none;">
+                                                <div class="filesPageSecMidActionsTop">
+                                                    <div class="filesPageSecMidActionsTopInfo"></div>
+                                                    <div class="filesPageSecMidActionsTopActions"><button class="btnMain" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
+                                                                <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
+                                                                <path d="M421.7 220.3L188.5 453.4L154.6 419.5L158.1 416H112C103.2 416 96 408.8 96 400V353.9L92.51 357.4C87.78 362.2 84.31 368 82.42 374.4L59.44 452.6L137.6 429.6C143.1 427.7 149.8 424.2 154.6 419.5L188.5 453.4C178.1 463.8 165.2 471.5 151.1 475.6L30.77 511C22.35 513.5 13.24 511.2 7.03 504.1C.8198 498.8-1.502 489.7 .976 481.2L36.37 360.9C40.53 346.8 48.16 333.9 58.57 323.5L291.7 90.34L421.7 220.3zM492.7 58.75C517.7 83.74 517.7 124.3 492.7 149.3L444.3 197.7L314.3 67.72L362.7 19.32C387.7-5.678 428.3-5.678 453.3 19.32L492.7 58.75z"></path>
+                                                            </svg>Draw</button><button class="btnMain" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
+                                                                <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
+                                                                <path d="M105.4 182.6c12.5 12.49 32.76 12.5 45.25 .001L224 109.3V352c0 17.67 14.33 32 32 32c17.67 0 32-14.33 32-32V109.3l73.38 73.38c12.49 12.49 32.75 12.49 45.25-.001c12.49-12.49 12.49-32.75 0-45.25l-128-128C272.4 3.125 264.2 0 256 0S239.6 3.125 233.4 9.375L105.4 137.4C92.88 149.9 92.88 170.1 105.4 182.6zM480 352h-160c0 35.35-28.65 64-64 64s-64-28.65-64-64H32c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h448c17.67 0 32-14.33 32-32v-96C512 366.3 497.7 352 480 352zM432 456c-13.2 0-24-10.8-24-24c0-13.2 10.8-24 24-24s24 10.8 24 24C456 445.2 445.2 456 432 456z"></path>
+                                                            </svg>Upload<input type="file" class="btnMainInputFile"></button></div>
+                                                </div>
+                                                <div class="filesPageSecMidActionsMid">
+                                                    <div class="filesPageSecMidActionsMidDraw"></div><input type="text" class="inputMain" placeholder="Text-based signature">
+                                                </div>
+                                                <div class="filesPageSecMidActionsBottom"><button class="btnMain filesPageSecMidActionsBottomBtn" type="button">Sign/Next/Complete</button></div>
+                                                <div class="filesPageSecMidActionsFoot">
+                                                    <div class="filesPageSecMidActionsFootInside">
+                                                        <div class="filesPageSecMidActionsFootInsideWrap"><button class="btnMain filesPageSecMidActionsFootInsideWrapBtn filesPageSecMidActionsFootInsideWrapBtnDone" type="button">1</button></div>
+                                                        <div class="filesPageSecMidActionsFootInsideWrap filesPageSecMidActionsFootInsideWrapBtnDone"><button class="btnMain filesPageSecMidActionsFootInsideWrapBtn filesPageSecMidActionsFootInsideWrapBtnDone" type="button">2</button></div>
+                                                        <div class="filesPageSecMidActionsFootInsideWrap"><button class="btnMain filesPageSecMidActionsFootInsideWrapBtn" type="button">3</button>
+                                                            <div class="filesPageSecMidActionsFootInsideWrapSlab"></div>
+                                                        </div>
+                                                        <div class="filesPageSecMidActionsFootInsideWrap"><button class="btnMain filesPageSecMidActionsFootInsideWrapBtn" type="button">4</button></div>
+                                                        <div class="filesPageSecMidActionsFootInsideWrap"><button class="btnMain filesPageSecMidActionsFootInsideWrapBtn filesPageSecMidActionsFootInsideWrapBtnDone" type="button">5</button></div>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
                                     </div>
                                     <div class="tab-pane tabsMainBottomPane filesPageSecMidTabBottomPane" role="tabpanel" id="tab-2">
                                         <div class="filesPageSecMidWrap filesPageSecMidWrapAlt">
@@ -303,39 +334,6 @@
                                             </div>
                                         </div>
                                     </div>
-                                    <div class="tab-pane tabsMainBottomPane filesPageSecMidTabBottomPane" role="tabpanel" id="tab-4">
-                                        <div class="filesPageSecMidWrap">
-                                            <div class="filesPageSecMidActionsWrapper">
-                                                <div class="filesPageSecMidActionsTop">
-                                                    <div class="filesPageSecMidActionsTopInfo">
-                                                        <p class="filesPageSecMidActionsTopInfoText">Add your signature</p>
-                                                    </div>
-                                                    <div class="filesPageSecMidActionsTopActions"><button class="btnMain" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
-                                                                <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
-                                                                <path d="M421.7 220.3L188.5 453.4L154.6 419.5L158.1 416H112C103.2 416 96 408.8 96 400V353.9L92.51 357.4C87.78 362.2 84.31 368 82.42 374.4L59.44 452.6L137.6 429.6C143.1 427.7 149.8 424.2 154.6 419.5L188.5 453.4C178.1 463.8 165.2 471.5 151.1 475.6L30.77 511C22.35 513.5 13.24 511.2 7.03 504.1C.8198 498.8-1.502 489.7 .976 481.2L36.37 360.9C40.53 346.8 48.16 333.9 58.57 323.5L291.7 90.34L421.7 220.3zM492.7 58.75C517.7 83.74 517.7 124.3 492.7 149.3L444.3 197.7L314.3 67.72L362.7 19.32C387.7-5.678 428.3-5.678 453.3 19.32L492.7 58.75z"></path>
-                                                            </svg>Draw</button><button class="btnMain" type="button"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="1em" height="1em" fill="currentColor" class="btnMainIcon">
-                                                                <!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. -->
-                                                                <path d="M105.4 182.6c12.5 12.49 32.76 12.5 45.25 .001L224 109.3V352c0 17.67 14.33 32 32 32c17.67 0 32-14.33 32-32V109.3l73.38 73.38c12.49 12.49 32.75 12.49 45.25-.001c12.49-12.49 12.49-32.75 0-45.25l-128-128C272.4 3.125 264.2 0 256 0S239.6 3.125 233.4 9.375L105.4 137.4C92.88 149.9 92.88 170.1 105.4 182.6zM480 352h-160c0 35.35-28.65 64-64 64s-64-28.65-64-64H32c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h448c17.67 0 32-14.33 32-32v-96C512 366.3 497.7 352 480 352zM432 456c-13.2 0-24-10.8-24-24c0-13.2 10.8-24 24-24s24 10.8 24 24C456 445.2 445.2 456 432 456z"></path>
-                                                            </svg>Upload<input type="file" class="btnMainInputFile"></button></div>
-                                                </div>
-                                                <div class="filesPageSecMidActionsMid">
-                                                    <div class="filesPageSecMidActionsMidDraw"></div><input type="text" class="inputMain" placeholder="Text-based signature">
-                                                </div>
-                                                <div class="filesPageSecMidActionsBottom"><button class="btnMain filesPageSecMidActionsBottomBtn" type="button">Sign/Next/Complete</button></div>
-                                                <div class="filesPageSecMidActionsFoot">
-                                                    <div class="filesPageSecMidActionsFootInside">
-                                                        <div class="filesPageSecMidActionsFootInsideWrap"><button class="btnMain filesPageSecMidActionsFootInsideWrapBtn filesPageSecMidActionsFootInsideWrapBtnDone" type="button">1</button></div>
-                                                        <div class="filesPageSecMidActionsFootInsideWrap filesPageSecMidActionsFootInsideWrapBtnDone"><button class="btnMain filesPageSecMidActionsFootInsideWrapBtn filesPageSecMidActionsFootInsideWrapBtnDone" type="button">2</button></div>
-                                                        <div class="filesPageSecMidActionsFootInsideWrap"><button class="btnMain filesPageSecMidActionsFootInsideWrapBtn" type="button">3</button>
-                                                            <div class="filesPageSecMidActionsFootInsideWrapSlab"></div>
-                                                        </div>
-                                                        <div class="filesPageSecMidActionsFootInsideWrap"><button class="btnMain filesPageSecMidActionsFootInsideWrapBtn" type="button">4</button></div>
-                                                        <div class="filesPageSecMidActionsFootInsideWrap"><button class="btnMain filesPageSecMidActionsFootInsideWrapBtn filesPageSecMidActionsFootInsideWrapBtnDone" type="button">5</button></div>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -460,6 +458,7 @@
     <script src="assets/js/dashboardTriggers.js"></script>
     <script src="assets/js/pageActionView.js"></script>
     <script src="assets/js/popups.js"></script>
+    <script src="assets/js/signMobileBox.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/dashboard.html b/dashboard.html
index 3abecb1..835a788 100644
--- a/dashboard.html
+++ b/dashboard.html
@@ -573,6 +573,7 @@
     <script src="assets/js/dashboardTriggers.js"></script>
     <script src="assets/js/pageActionView.js"></script>
     <script src="assets/js/popups.js"></script>
+    <script src="assets/js/signMobileBox.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/index.html b/index.html
index 2921630..859e389 100644
--- a/index.html
+++ b/index.html
@@ -253,6 +253,7 @@
     <script src="assets/js/dashboardTriggers.js"></script>
     <script src="assets/js/pageActionView.js"></script>
     <script src="assets/js/popups.js"></script>
+    <script src="assets/js/signMobileBox.js"></script>
 </body>
 
 </html>
\ No newline at end of file