Improved layout

src/js/admin-general-view.js

@@ -46,7 +46,7 @@ module.exports = {
       configReset: false,
       latest: '',
       autoCheckUpgrade: true,
-      default_config: ''
+      reset_variant: ''
     }
   },
 
@@ -98,10 +98,10 @@ module.exports = {
       fr.readAsText(files[0]);
     },
 
-    reset: async function (variant) {
+    reset: async function () {
       const fetchConfig = async () => {
         try {
-          return await fetchJSON(`onefinity_${variant}_defaults.json`);
+          return await fetchJSON(`onefinity_${this.reset_variant}_defaults.json`);
         } catch (err) {
           api.alert("Invalid default config file");
           console.error('Invalid default config file', err);

src/pug/templates/admin-general-view.pug

@@ -53,14 +53,22 @@ script#admin-general-view-template(type="text/x-template")
     message(:show.sync="confirmReset")
       h3(slot="header") Reset to default configuration?
       p(slot="body") Non-network configuration changes will be lost.
-      p(slot="body") Select defaults to restore
-      p(slot="body")
-        button.pure-button.button-success(@click="reset('woodworker_x35')") Woodworker X-35
-        button.pure-button.button-success(@click="reset('machinist_x35')") Machinist X-35
-        button.pure-button.button-success(@click="reset('woodworker_x50')") Woodworker X-50
-        button.pure-button.button-success(@click="reset('journeyman_x50')") Journeyman X-50
+      p(slot="body") Select defaults to restore:
+      p.reset-variants(slot="body")
+        input#tab1(type="radio", name="reset_variant" @click="reset_variant = 'machinist_x35'")
+        label(for="tab1", title="Machinist X-35") Machinist X-35
+
+        input#tab2(type="radio", name="reset_variant" @click="reset_variant = 'woodworker_x35'")
+        label(for="tab2", title="Woodworker X-35") Woodworker X-35
+
+        input#tab3(type="radio", name="reset_variant" @click="reset_variant = 'woodworker_x50'")
+        label(for="tab3", title="Woodworker X-50") Woodworker X-50
+
+        input#tab4(type="radio", name="reset_variant" @click="reset_variant = 'journeyman_x50'")
+        label(for="tab4", title="Journeyman X-50") Journeyman X-50
       div(slot="footer")
         button.pure-button(@click="confirmReset = false") Cancel
+        button.pure-button.pure-button-primary(@click="reset") Reset
         
     message(:show.sync="configReset")
       h3(slot="header") Success

src/stylus/style.styl

@@ -993,3 +993,19 @@ tt.save
 
   .tab_container
     width 98%
+
+.reset-variants
+    padding-left 40px
+    padding-bottom 20px
+    display grid
+    grid-template-rows repeat(4, auto)
+    grid-template-columns min-content auto
+    grid-gap 20px 10px
+
+  input[type="radio"]
+    width 30px
+    height 30px
+
+  label
+    font-size 16pt
+    align-self center