Moose

htdocs/css/general.css

@@ -11,11 +11,11 @@
 :root {
     --default-amount-color: #a5b3c0;
     --default-font-color: #c2c2c2;
-    --default-font-size: 2.1vw;
+    --default-font-size: 2.1vmax;
     --default-header-color: #64aa82;
-    --default-header-font-size: 2.4vw;
+    --default-header-font-size: 2.4vmax;
     --link-color: #436055;
-    --link-font-size: 1.8vw;
+    --link-font-size: 1.8vmax;
 
     font-size: var(--default-font-size);
     background-color: black;
@@ -29,7 +29,7 @@ html * {
 html {
     margin: 0;
     padding: 0;
-    width: auto;
+    width: 100vw;
     height: 100vh;
     background: url('../images/background.jpg') no-repeat;
     background-size: 100% 100%;
@@ -39,6 +39,7 @@ body {
     margin: 0;
     padding: 0;
     height: 100vh;
+    width: 100vw;
 }
 
 a {
@@ -148,7 +149,7 @@ textarea {
 .app-header {
     font-family: "Digital Sans EF Medium", sans-serif;
     color: var(--default-header-color);
-    font-size: 4vh;
+    font-size: 4vmax;
     margin-top: 0;
     margin-right: 20px;
     margin-left: 10px;

htdocs/index.html

@@ -219,7 +219,7 @@
         <div class="box" style="flex-grow: 1; display: flex; flex-direction: column;">
           <h1 style="flex-grow: 0;">Upload Progress <a href="javascript:void(0)" id="ID_RenterUploadsOk">back</a></h1>
           <div id="ID_UploadProgressTableContainer" style="padding: 0; margin: 0; flex-grow: 1;">
-            <table class="transparent order-column compact" id="ID_UploadProgressTable"></table>
+            <table class="hidden-element transparent order-column compact" id="ID_UploadProgressTable"></table>
           </div>
         </div>
       </div>

htdocs/js/index.js

@@ -63,6 +63,7 @@
   window.uiUpdate = (() => {
 
     const _renter = (() => {
+
       return {
         setAllocatedFunds: (currency) => {
           setInnerText('ID_Renter_AllocatedFunds', currency);
@@ -115,13 +116,8 @@
           }
         },
         setUploadProgress: (items) => {
-          items = items || "[]";
-
-          const table = $('#ID_UploadProgressTable');
-          const dataTable = table.DataTable();
-          dataTable.clear();
-          dataTable.rows.add(JSON.parse(items));
-          dataTable.draw(false);
+          _uploadItems = JSON.parse(items || "[]");
+          buildUploadTable();
         }
       };
     })();
@@ -297,6 +293,33 @@
 
   let _mountHandler;
   let _allowRenterSave = true;
+  let _uploadItems;
+  let _uploadTableInitialized = false;
+
+  function buildUploadTable() {
+    const table = $('#ID_UploadProgressTable');
+    if (!table.hasClass('hidden-element')) {
+      if (!_uploadTableInitialized) {
+        _uploadTableInitialized = true;
+        table.DataTable({
+          data: [],
+          columns: [
+            {title: "SiaPath"},
+            {title: "Progress"}
+          ],
+          deferRender: true,
+          scrollY: 343,
+          scrollCollapse: false,
+          paging: false,
+          dom: '<"pull-left"f>rt<"bottom"lip><"clear">',
+        });
+      }
+      const dataTable = table.DataTable();
+      dataTable.clear();
+      dataTable.rows.add(_uploadItems);
+      dataTable.draw(false);
+    }
+  }
 
   function setMainWindow(name) {
     console.log('Setting main window: ' + name);
@@ -357,13 +380,18 @@
   }
 
   function handleRenterUploads() {
+    const table = $('#ID_UploadProgressTable');
+
     const okButton = document.getElementById('ID_RenterUploadsOk');
     okButton.onclick = () => {
       okButton.onclick = null;
+      table.addClass('hidden-element');
       beginMainApplication(false);
     };
 
     setMainWindow('upload_progress_window');
+    table.removeClass('hidden-element');
+    buildUploadTable();
   }
 
   function handleSiaEditSettings() {
@@ -695,19 +723,6 @@
     console.log('Main window load');
     document.getElementById('ID_ServerVersion').innerText = '...';
 
-    $('#ID_UploadProgressTable').DataTable( {
-      data: [],
-      columns: [
-        { title: "SiaPath" },
-        { title: "Progress" }
-      ],
-      deferRender:    true,
-      scrollY:        343,
-      scrollCollapse: false,
-      paging: false,
-      dom: '<"pull-left"f>rt<"bottom"lip><"clear">',
-    } );
-
     reloadApplication(true);
   });
 })();