removed signing tab on mobile. added signing popup on mobile

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;
+}
+

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)';
+    }
+});

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>

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>

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>

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>

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>

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>