💄 Improvements to styles with touchUI

Closes #20

This is the best I can do, without re-writing the whole UI, or contributing to touchUI either to provide a different UI.

octoprint_eeprom_marlin/static/scss/eeprom_marlin.scss

@@ -1,6 +1,11 @@
 $touchUI_icon: "\f14b";
 
 #touch body {
+  // TOUCHUI Specific styles
+  // Yes, it annoys me that TouchUI overrides lots of styles, that make the UI look a little broken
+  // But we will have to deal with it for as long as touchUI exists & people want to use it
+
+  // Touch tab icon
   #tabs,
   #navbar #all_touchui_settings {
     #tab_plugin_eeprom_marlin_link,
@@ -10,6 +15,24 @@ $touchUI_icon: "\f14b";
       }
     }
   }
+  // Override some styles to format things a little better **only** within my plugin
+  // Uses !important to override touch UI styles definitely, we risk chance otherwise.
+  #tab_plugin_eeprom_marlin {
+    // override width of the table to stop it going off screen
+    .table {
+      width: auto !important;
+      min-width: 100% !important;
+    }
+    // bring back custom icons to buttons
+    .fas-custom {
+      font-family: "Font Awesome 5 Free" !important;
+      font-weight: 900 !important;
+    }
+    // apply a *little* bit of margin to separate the button groups, should they be stacked.
+    .btn-group {
+      margin-top: 2px;
+    }
+  }
 }
 
 #tab_plugin_eeprom_marlin {

octoprint_eeprom_marlin/templates/backup/content.jinja2

@@ -19,13 +19,13 @@
             <td data-bind="text: time"></td>
             <td>
                 <button data-bind="click: function(){ $parent.restore_backup(name) }" class="btn btn-small">
-                    <i class="fas-custom fa-custom-cloud-upload-alt"></i>
+                    <i class="fas-custom fa-fw fa-custom-cloud-upload-alt"></i>
                 </button>
                 <button data-bind="click: function(){ $parent.delete_backup(name) }" class="btn btn-small btn-danger">
-                    <i class="fa fa-trash-o"></i>
+                    <i class="fa fa-fw fa-trash-o"></i>
                 </button>
                 <a data-bind="attr: {href: '/plugin/eeprom_marlin/download/' + name}" class="btn btn-small">
-                    <i class="fa fa-download"></i>
+                    <i class="fa fa-fw fa-download"></i>
                 </a>
             </td>
         </tr>