UI changes

htdocs/css/general.css

@@ -100,7 +100,7 @@ h3 {
 }
 
 input {
-    font-family: 'localFixed', monospace;
+    font-family: monospace;
     border: 1px solid #3b4b3d;
     padding: 5px;
     margin: 0;
@@ -121,8 +121,7 @@ select {
     outline: 1px;
     background: rgba(64, 142, 62, 0.04);
     color: var(--default-font-color);
-    padding: 5px 15px;
+    padding: 5px;
-    height: 33px;
     font-size: var(--default-font-size);
     -webkit-appearance: none;
     -webkit-user-select: none;
@@ -185,3 +184,20 @@ textarea {
 .hidden-element {
     display: none;
 }
+
+.scrollable-content {
+    overflow-x: hidden;
+    overflow-y: scroll;
+}
+
+.scrollable-content, ::-webkit-scrollbar {
+    width: 10px;
+}
+
+.scrollable-content, ::-webkit-scrollbar * {
+    background: transparent;
+}
+
+.scrollable-content, ::-webkit-scrollbar-thumb {
+    background: rgba(90, 90, 90, 0.4) !important;
+}

htdocs/index.html

@@ -148,8 +148,8 @@
           </tr>
         </table>
       </div>
-      <div class="footer">
+      <div style="width: inherit;margin: 0 10px;padding: 0;">
-        <table style="width: 100%">
+        <table style="width: inherit;">
           <tr>
             <td style="text-align: left;white-space: nowrap;"><b>Height:</b></td>
             <td style="white-space: nowrap;" id="ID_BlockHeight">...</td>
@@ -178,35 +178,32 @@
     </div>
     <div class="hidden-element" id="sia_settings_window">
       <div class="box" id="sia_settings">
-        <h1>Sia Settings</h1>
+        <h1>General Settings</h1>
-        <h2>Lock Wallet on Application Exit</h2>
+        <input type="checkbox" id="ID_Settings_LockWalletOnExit">&nbsp;Lock wallet on exit<br><br>
-        <input type="checkbox" id="ID_Settings_LockWalletOnExit"><br><br>
+        <input type="checkbox" id="ID_Settings_AutoStartOnLogon">&nbsp;Auto-start on logon<br><br>
-        <h2>Auto-start on Logon</h2>
+        <input type="checkbox" id="ID_Settings_LaunchFileMgrOnMount">&nbsp;Launch file manager on mount<br><br>
-        <input type="checkbox" id="ID_Settings_AutoStartOnLogon"><br><br>
+        <input type="checkbox" id="ID_Settings_CloseToTray">&nbsp;Close to system tray<br><br>
-        <h2>Launch file manager on mount</h2>
+        <input type="checkbox" id="ID_Settings_LaunchBundledSiad">&nbsp;Use Bundled siad<br><br>
-        <input type="checkbox" id="ID_Settings_LaunchFileMgrOnMount"><br><br>
+        <h1>API Port</h1>
-        <h2>Close to system tray</h2>
-        <input type="checkbox" id="ID_Settings_CloseToTray"><br><br>
-        <h2>Use Bundled siad</h2>
-        <input type="checkbox" id="ID_Settings_LaunchBundledSiad"><br><br>
-        <h2>API Port</h2>
         <input type="number" id="ID_Settings_ApiPort"><br><br>
-        <h2>Host Port</h2>
+        <h1>Host Port</h1>
         <input type="number" id="ID_Settings_HostPort"><br><br>
-        <h2>RPC Port</h2>
+        <h1>RPC Port</h1>
         <input type="number" id="ID_Settings_RpcPort"><br><br>
         <button id="ID_SiaSettingsOK" type="button">Save</button>
         <button id="ID_SiaSettingsCancel" type="button">Cancel</button>
       </div>
     </div>
-    <div class="hidden-element" id="upload_progress_window">
+    <div class="hidden-element" id="upload_progress_window" style="height: inherit;">
-      <div class="box">
+      <div style="display: flex; flex-direction: column; height: inherit;">
-        <h1>Upload Progress</h1>
+        <div class="box" style="flex-grow: 1; display: flex;">
-        <div class="fill" style="overflow-x: hidden;overflow-y: scroll; min-height: 74.5vh; max-height: 74.5vh;">
+          <h1 style="flex-grow: 0;">Upload Progress</h1>
-          <table class="fill-content" style="width: 100%;" id="ID_UploadProgressTable"></table>
+          <div style="padding: 0; margin: 0; flex-grow: 1; display: flex; overflow-x: hidden; overflow-y: scroll;">
+            <table style="flex-grow: 1;" id="ID_UploadProgressTable"></table>
+          </div>
         </div>
+        <button id="ID_RenterUploadsOk" style="margin-left: 10px; margin-bottom: 10px; flex-grow: 0; width: 110px" type="button">Back</button>
       </div>
-      <button id="ID_RenterUploadsOk" style="width: 110px" type="button">Back</button>
     </div>
     <div id="shutdown_window" class="hidden-element" style="padding: 0; margin: 0;position: fixed; height: 100%; width: 100%;background-image: url(./images/shutdown.gif); background-size: 100% 100%; background-repeat: no-repeat; z-index: 99999"></div>
   </body>