From d8626b7e130803b8b0bcc4eb8f4716acd4a621c9 Mon Sep 17 00:00:00 2001
From: Joel Collins <joel@jtcollins.net>
Date: Tue, 17 Mar 2020 17:39:11 +0000
Subject: [PATCH] Improved settings layout

---
 .../settingsComponents/microscopeSettings.vue |  6 ++--
 .../settingsComponents/streamSettings.vue     | 32 ++++++++-----------
 .../viewComponents/settingsDisplay.vue        | 32 ++++++++++++-------
 3 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/src/components/viewComponents/settingsComponents/microscopeSettings.vue b/src/components/viewComponents/settingsComponents/microscopeSettings.vue
index 601df633..4a1c77a4 100644
--- a/src/components/viewComponents/settingsComponents/microscopeSettings.vue
+++ b/src/components/viewComponents/settingsComponents/microscopeSettings.vue
@@ -1,8 +1,6 @@
 <template>
   <div v-if="settings" id="microscopeSettings">
     <form @submit.prevent="applyConfigRequest">
-      <h4>Stage</h4>
-
       <label class="uk-form-label" for="form-stacked-text"
         >Backlash compensation</label
       >
@@ -41,7 +39,7 @@
         </div>
       </div>
 
-      <h4>Microscope</h4>
+      <br />
 
       <div>
         <label class="uk-form-label" for="form-stacked-text"
@@ -55,6 +53,8 @@
         />
       </div>
 
+      <br />
+
       <button
         type="submit"
         class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin-small uk-width-1-1"
diff --git a/src/components/viewComponents/settingsComponents/streamSettings.vue b/src/components/viewComponents/settingsComponents/streamSettings.vue
index 45cd987e..95016673 100644
--- a/src/components/viewComponents/settingsComponents/streamSettings.vue
+++ b/src/components/viewComponents/settingsComponents/streamSettings.vue
@@ -7,24 +7,20 @@
       >
     </p>
 
-    <div class="uk-child-width-1-2" uk-grid>
-      <p>
-        <label :class="[{ 'uk-disabled': !this.$store.getters.ready }]"
-          ><input
-            v-model="autoGpuPreview"
-            class="uk-checkbox"
-            type="checkbox"
-          />
-          GPU preview</label
-        >
-      </p>
-      <p>
-        <label :class="[{ 'uk-disabled': !this.$store.getters.ready }]"
-          ><input v-model="trackWindow" class="uk-checkbox" type="checkbox" />
-          Track window</label
-        >
-      </p>
-    </div>
+    <hr />
+
+    <p>
+      <label :class="[{ 'uk-disabled': !this.$store.getters.ready }]"
+        ><input v-model="autoGpuPreview" class="uk-checkbox" type="checkbox" />
+        GPU preview</label
+      >
+    </p>
+    <p>
+      <label :class="[{ 'uk-disabled': !this.$store.getters.ready }]"
+        ><input v-model="trackWindow" class="uk-checkbox" type="checkbox" />
+        Track window</label
+      >
+    </p>
   </div>
 </template>
 
diff --git a/src/components/viewComponents/settingsDisplay.vue b/src/components/viewComponents/settingsDisplay.vue
index 8b457552..798d5613 100644
--- a/src/components/viewComponents/settingsDisplay.vue
+++ b/src/components/viewComponents/settingsDisplay.vue
@@ -1,19 +1,22 @@
 <template>
-  <div id="settingsDisplay" class="uk-padding">
-    <div class="uk-child-width-expand@m" uk-grid>
-      <div>
-        <h3>System settings</h3>
-        <appSettings />
-        <streamSettings />
+  <div id="settingsDisplay" class="uk-padding uk-height-1-1">
+    <div class="uk-height-1-1 uk-child-width-expand@m" uk-grid>
+      <div class="uk-padding-remove">
+        <div class="settings-pane uk-padding-small">
+          <h3>System settings</h3>
+          <appSettings />
+          <hr />
+          <streamSettings />
+        </div>
       </div>
-      <div>
-        <div v-if="$store.getters.ready">
+      <div class="uk-padding-remove">
+        <div v-if="$store.getters.ready" class="settings-pane uk-padding-small">
           <h3>Camera settings</h3>
           <cameraSettings />
         </div>
       </div>
-      <div>
-        <div v-if="$store.getters.ready">
+      <div class="uk-padding-remove">
+        <div v-if="$store.getters.ready" class="settings-pane uk-padding-small">
           <h3>Microscope settings</h3>
           <microscopeSettings />
         </div>
@@ -41,4 +44,11 @@ export default {
 };
 </script>
 
-<style lang="less"></style>
+<style lang="less">
+.settings-pane {
+  border-width: 0 1px 0 0;
+  border-style: solid;
+  border-color: rgba(180, 180, 180, 0.25);
+  min-height: 100%;
+}
+</style>