From 46e14872133f3bd84e624b3876bf8cf6550a4959 Mon Sep 17 00:00:00 2001
From: Sam Wray <sam@wray.pro>
Date: Wed, 13 May 2020 11:03:55 +0100
Subject: [PATCH] improvement(layout): moves preview under module controls &
 fixes right col to 1/3 screen

---
 src/App.vue | 76 ++++++++++++++++++++++++++++-------------------------
 1 file changed, 40 insertions(+), 36 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3a0e22c..e965dfb 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -12,16 +12,6 @@
               <Gallery />
             </gl-component>
 
-            <gl-stack>
-              <gl-component title="Preview" :closable="false">
-                <CanvasDebugger />
-              </gl-component>
-
-              <gl-component title="Swap" :closable="false">
-                <ABSwap />
-              </gl-component>
-            </gl-stack>
-
             <gl-stack>
               <gl-component title="Input config" :closable="false">
                 <InputConfig />
@@ -41,32 +31,46 @@
             </gl-stack>
           </gl-row>
         </gl-col>
-        <gl-row :closable="false" ref="rightColumn" v-if="focusedModules">
-          <gl-stack title="Module properties">
-            <gl-component
-              v-for="module in focusedModules"
-              :key="module.$id"
-              :title="`${module.meta.name} properties`"
-              :closable="false"
-            >
-              <grid v-if="module.props">
-                <c span="1..">
-                  <button @click="toggleModulePin(module.$id)">
-                    {{ isPinned(module.$id) ? "Unpin" : "Pin" }}
-                  </button>
-                </c>
-                <c span="1..">
-                  <Control
-                    v-for="key in getProps(module.$moduleName)"
-                    :id="module.$id"
-                    :prop="key"
-                    :key="key"
-                  />
-                </c>
-              </grid>
-            </gl-component>
-          </gl-stack>
-        </gl-row>
+        <gl-col :width="33" :closable="false" ref="rightColumn">
+          <gl-row>
+            <gl-stack title="Module properties">
+              <gl-component
+                v-for="module in focusedModules"
+                :key="module.$id"
+                :title="`${module.meta.name} properties`"
+                :closable="false"
+              >
+                <grid v-if="module.props">
+                  <c span="1..">
+                    <button @click="toggleModulePin(module.$id)">
+                      {{ isPinned(module.$id) ? "Unpin" : "Pin" }}
+                    </button>
+                  </c>
+                  <c span="1..">
+                    <Control
+                      v-for="key in getProps(module.$moduleName)"
+                      :id="module.$id"
+                      :prop="key"
+                      :key="key"
+                    />
+                  </c>
+                </grid>
+              </gl-component>
+            </gl-stack>
+          </gl-row>
+
+          <gl-row>
+            <gl-stack>
+              <gl-component title="Preview" :closable="false">
+                <CanvasDebugger />
+              </gl-component>
+
+              <gl-component title="Swap" :closable="false">
+                <ABSwap />
+              </gl-component>
+            </gl-stack>
+          </gl-row>
+        </gl-col>
       </gl-row>
     </golden-layout>