From 627fc0cb7f9559cbe57171c11bf50fc494c356ae Mon Sep 17 00:00:00 2001
From: MattIPv4 <me@mattcowley.co.uk>
Date: Fri, 8 May 2020 16:16:16 +0100
Subject: [PATCH] Add toggle for column layout

---
 src/nginxconfig/templates/app.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/nginxconfig/templates/app.vue b/src/nginxconfig/templates/app.vue
index 9a7192c..fda41c0 100644
--- a/src/nginxconfig/templates/app.vue
+++ b/src/nginxconfig/templates/app.vue
@@ -23,12 +23,14 @@ limitations under the License.
             <template v-slot:header>
             </template>
             <template v-slot:buttons>
+                <a v-if="splitColumn" class="button is-primary is-outline" @click="splitColumn = false">Single column mode</a>
+                <a v-else class="button is-primary" @click="splitColumn = true">Split column mode</a>
             </template>
         </Header>
 
         <div class="main container" :style="{ display: ready ? undefined : 'none' }">
-            <div class="columns">
-                <div class="column is-half is-full-mobile is-full-tablet">
+            <div class="columns is-multiline">
+                <div :class="`column ${splitColumn ? 'is-half' : 'is-full'} is-full-mobile is-full-tablet`">
                     <h2>Per-website config</h2>
 
                     <div class="tabs">
@@ -59,7 +61,7 @@ limitations under the License.
                     <Setup :data="{ domains, global }"></Setup>
                 </div>
 
-                <div class="column is-half is-full-mobile is-full-tablet">
+                <div :class="`column ${splitColumn ? 'is-half' : 'is-full'} is-full-mobile is-full-tablet`">
                     <h2>Config files</h2>
                     <Prism language="json" :code="exportData"></Prism>
                 </div>
@@ -102,6 +104,7 @@ limitations under the License.
                 global: Global.delegated,
                 active: 0,
                 ready: false,
+                splitColumn: false,
             };
         },
         computed: {