From 8e97e8d4f200c8697121fdb3eedb93bdbaaed230 Mon Sep 17 00:00:00 2001
From: MattIPv4 <me@mattcowley.co.uk>
Date: Thu, 30 Apr 2020 17:01:21 +0100
Subject: [PATCH] Move is-changed to control

---
 src/nginxconfig/scss/style.scss               | 42 +++++++++----------
 .../templates/domain_sections/https.vue       | 30 ++++++-------
 .../templates/domain_sections/php.vue         | 20 ++++-----
 .../templates/domain_sections/python.vue      | 10 ++---
 .../templates/domain_sections/server.vue      | 32 +++++++-------
 5 files changed, 68 insertions(+), 66 deletions(-)

diff --git a/src/nginxconfig/scss/style.scss b/src/nginxconfig/scss/style.scss
index f9b5d06..ac91eb2 100644
--- a/src/nginxconfig/scss/style.scss
+++ b/src/nginxconfig/scss/style.scss
@@ -96,6 +96,27 @@ $highlight: #f2c94c;
       }
     }
 
+    .is-changed {
+      input {
+        &,
+        &:focus {
+          background: rgba($highlight, .35);
+        }
+      }
+
+      .checkbox,
+      .radio,
+      .text {
+        background: rgba($highlight, .35);
+      }
+
+      label {
+        &.text {
+          padding: .25rem .5rem;
+        }
+      }
+    }
+
     label {
       @include sailec-medium;
 
@@ -131,27 +152,6 @@ $highlight: #f2c94c;
     }
   }
 
-  .is-changed {
-    input {
-      &,
-      &:focus {
-        background: rgba($highlight, .35);
-      }
-    }
-
-    .checkbox,
-    .radio,
-    .text {
-      background: rgba($highlight, .35);
-    }
-
-    label {
-      &.text {
-        padding: .25rem .5rem;
-      }
-    }
-  }
-
   .checkbox,
   .radio {
     border-radius: $border-radius;
diff --git a/src/nginxconfig/templates/domain_sections/https.vue b/src/nginxconfig/templates/domain_sections/https.vue
index 009165c..e76ddbd 100644
--- a/src/nginxconfig/templates/domain_sections/https.vue
+++ b/src/nginxconfig/templates/domain_sections/https.vue
@@ -5,8 +5,8 @@
                 <label class="label">HTTPS</label>
             </div>
             <div class="field-body">
-                <div :class="`field${httpsChanged ? ' is-changed' : ''}`">
-                    <div class="control">
+                <div class="field">
+                    <div :class="`control${httpsChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="https" class="p-default p-curve p-fill p-icon">
                                 <i slot="extra" class="icon fas fa-check"></i>
@@ -23,8 +23,8 @@
                 <label class="label">HTTP/2</label>
             </div>
             <div class="field-body">
-                <div :class="`field${http2Changed ? ' is-changed' : ''}`">
-                    <div class="control">
+                <div class="field">
+                    <div :class="`control${http2Changed ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="http2" class="p-default p-curve p-fill p-icon">
                                 <i slot="extra" class="icon fas fa-check"></i>
@@ -41,8 +41,8 @@
                 <label class="label">Force HTTPS</label>
             </div>
             <div class="field-body">
-                <div :class="`field${forceHttpsChanged ? ' is-changed' : ''}`">
-                    <div class="control">
+                <div class="field">
+                    <div :class="`control${forceHttpsChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="forceHttps" class="p-default p-curve p-fill p-icon">
                                 <i slot="extra" class="icon fas fa-check"></i>
@@ -97,8 +97,10 @@
                 <label class="label">Certification type</label>
             </div>
             <div class="field-body">
-                <div :class="`field${certTypeChanged ? ' is-changed' : ''}`">
-                    <div v-for="(name, value) in $props.data.certType.options" class="control">
+                <div class="field">
+                    <div v-for="(name, value) in $props.data.certType.options"
+                         :class="`control${certTypeChanged ? ' is-changed' : ''}`"
+                    >
                         <div class="radio">
                             <PrettyRadio v-model="certType" :value="value" class="p-default p-round p-fill p-icon">
                                 <i slot="extra" class="icon fas fa-check"></i>
@@ -115,8 +117,8 @@
                 <label class="label">Let's Encrypt email</label>
             </div>
             <div class="field-body">
-                <div :class="`field${letsEncryptEmailChanged ? ' is-changed' : ''}`">
-                    <div class="control">
+                <div class="field">
+                    <div :class="`control${letsEncryptEmailChanged ? ' is-changed' : ''}`">
                         <input v-model="letsEncryptEmail"
                                class="input"
                                type="text"
@@ -132,8 +134,8 @@
                 <label class="label">ssl_certificate</label>
             </div>
             <div class="field-body">
-                <div :class="`field${sslCertificateChanged ? ' is-changed' : ''}`">
-                    <div class="control">
+                <div class="field">
+                    <div :class="`control${sslCertificateChanged ? ' is-changed' : ''}`">
                         <input v-model="sslCertificate"
                                class="input"
                                type="text"
@@ -149,8 +151,8 @@
                 <label class="label">ssl_certificate_key</label>
             </div>
             <div class="field-body">
-                <div :class="`field${sslCertificateKeyChanged ? ' is-changed' : ''}`">
-                    <div class="control">
+                <div class="field">
+                    <div :class="`control${sslCertificateKeyChanged ? ' is-changed' : ''}`">
                         <input v-model="sslCertificateKey"
                                class="input"
                                type="text"
diff --git a/src/nginxconfig/templates/domain_sections/php.vue b/src/nginxconfig/templates/domain_sections/php.vue
index 32b3dcd..e171869 100644
--- a/src/nginxconfig/templates/domain_sections/php.vue
+++ b/src/nginxconfig/templates/domain_sections/php.vue
@@ -5,8 +5,8 @@
                 <label class="label">PHP</label>
             </div>
             <div class="field-body">
-                <div class="field is-changed">
-                    <div class="control">
+                <div class="field">
+                    <div class="control is-changed">
                         <label class="text">
                             PHP is disabled.
                             <template v-if="$parent.$props.data.reverseProxy.reverseProxy.computed">
@@ -26,8 +26,8 @@
                 <label class="label">PHP</label>
             </div>
             <div class="field-body">
-                <div :class="`field${phpChanged ? ' is-changed' : ''}`">
-                    <div class="control">
+                <div class="field">
+                    <div :class="`control${phpChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="php" class="p-default p-curve p-fill p-icon">
                                 <i slot="extra" class="icon fas fa-check"></i>
@@ -44,8 +44,8 @@
                 <label class="label">WordPress rules</label>
             </div>
             <div class="field-body">
-                <div :class="`field${wordPressRulesChanged ? ' is-changed' : ''}`">
-                    <div class="control">
+                <div class="field">
+                    <div :class="`control${wordPressRulesChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="wordPressRules" class="p-default p-curve p-fill p-icon">
                                 <i slot="extra" class="icon fas fa-check"></i>
@@ -62,8 +62,8 @@
                 <label class="label">Drupal rules</label>
             </div>
             <div class="field-body">
-                <div :class="`field${drupalRulesChanged ? ' is-changed' : ''}`">
-                    <div class="control">
+                <div class="field">
+                    <div :class="`control${drupalRulesChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="drupalRules" class="p-default p-curve p-fill p-icon">
                                 <i slot="extra" class="icon fas fa-check"></i>
@@ -80,8 +80,8 @@
                 <label class="label">Magento rules</label>
             </div>
             <div class="field-body">
-                <div :class="`field${magentoRulesChanged ? ' is-changed' : ''}`">
-                    <div class="control">
+                <div class="field">
+                    <div :class="`control${magentoRulesChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="magentoRules" class="p-default p-curve p-fill p-icon">
                                 <i slot="extra" class="icon fas fa-check"></i>
diff --git a/src/nginxconfig/templates/domain_sections/python.vue b/src/nginxconfig/templates/domain_sections/python.vue
index b0776e3..a7280f5 100644
--- a/src/nginxconfig/templates/domain_sections/python.vue
+++ b/src/nginxconfig/templates/domain_sections/python.vue
@@ -26,8 +26,8 @@
                 <label class="label">Python</label>
             </div>
             <div class="field-body">
-                <div :class="`field${pythonChanged ? ' is-changed' : ''}`">
-                    <div class="control">
+                <div class="field">
+                    <div :class="`control${pythonChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="python" class="p-default p-curve p-fill p-icon">
                                 <i slot="extra" class="icon fas fa-check"></i>
@@ -44,8 +44,8 @@
                 <label class="label">Django rules</label>
             </div>
             <div class="field-body">
-                <div :class="`field${djangoRulesChanged ? ' is-changed' : ''}`">
-                    <div class="control">
+                <div class="field">
+                    <div :class="`control${djangoRulesChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="djangoRules" class="p-default p-curve p-fill p-icon">
                                 <i slot="extra" class="icon fas fa-check"></i>
@@ -68,7 +68,7 @@
     const defaults = {
         python: {
             default: false,
-            enabled: true,
+            enabled: false,
         },
         djangoRules: {
             default: false,
diff --git a/src/nginxconfig/templates/domain_sections/server.vue b/src/nginxconfig/templates/domain_sections/server.vue
index 3be22b8..9d8d8d1 100644
--- a/src/nginxconfig/templates/domain_sections/server.vue
+++ b/src/nginxconfig/templates/domain_sections/server.vue
@@ -1,23 +1,23 @@
 <template>
     <div>
         <div class="field-row">
-            <div :class="`field${domainChanged ? ' is-changed' : ''}`">
+            <div class="field">
                 <label class="label">Domain</label>
-                <div class="control">
+                <div :class="`control${domainChanged ? ' is-changed' : ''}`">
                     <input v-model="domain" class="input" type="text" :placeholder="domainDefault" />
                 </div>
             </div>
 
-            <div :class="`field${pathChanged ? ' is-changed' : ''}`">
+            <div class="field">
                 <label class="label">Path</label>
-                <div class="control">
+                <div :class="`control${pathChanged ? ' is-changed' : ''}`">
                     <input v-model="path" class="input" type="text" :placeholder="`/var/www/${domain}`" />
                 </div>
             </div>
 
-            <div :class="`field${documentRootChanged ? ' is-changed' : ''}`">
+            <div class="field">
                 <label class="label">Document root</label>
-                <div class="control">
+                <div :class="`control${documentRootChanged ? ' is-changed' : ''}`">
                     <input v-model="documentRoot" class="input" type="text" :placeholder="documentRootDefault" />
                 </div>
             </div>
@@ -28,8 +28,8 @@
                 <label class="label">www subdomain</label>
             </div>
             <div class="field-body">
-                <div :class="`field${wwwSubdomainChanged ? ' is-changed' : ''}`">
-                    <div class="control">
+                <div class="field">
+                    <div :class="`control${wwwSubdomainChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="wwwSubdomain" class="p-default p-curve p-fill p-icon">
                                 <i slot="extra" class="icon fas fa-check"></i>
@@ -46,8 +46,8 @@
                 <label class="label">CDN subdomain</label>
             </div>
             <div class="field-body">
-                <div :class="`field${cdnSubdomainChanged ? ' is-changed' : ''}`">
-                    <div class="control">
+                <div class="field">
+                    <div :class="`control${cdnSubdomainChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="cdnSubdomain" class="p-default p-curve p-fill p-icon">
                                 <i slot="extra" class="icon fas fa-check"></i>
@@ -64,8 +64,8 @@
                 <label class="label">Redirect subdomains</label>
             </div>
             <div class="field-body">
-                <div :class="`field${redirectSubdomainsChanged ? ' is-changed' : ''}`">
-                    <div class="control">
+                <div class="field">
+                    <div :class="`control${redirectSubdomainsChanged ? ' is-changed' : ''}`">
                         <div class="checkbox">
                             <PrettyCheck v-model="redirectSubdomains" class="p-default p-curve p-fill p-icon">
                                 <i slot="extra" class="icon fas fa-check"></i>
@@ -84,23 +84,23 @@
                 <label class="label">listen</label>
             </div>
             <div class="field-body">
-                <div :class="`field has-addons${listenIpv4Changed ? ' is-changed' : ''}`">
+                <div class="field has-addons">
                     <div class="control">
                         <a class="button is-static">
                             IPv4
                         </a>
                     </div>
-                    <div class="control is-expanded">
+                    <div :class="`control is-expanded${listenIpv4Changed ? ' is-changed' : ''}`">
                         <input v-model="listenIpv4" class="input" type="text" :placeholder="listenIpv4Default" />
                     </div>
                 </div>
-                <div :class="`field has-addons${listenIpv6Changed ? ' is-changed' : ''}`">
+                <div class="field has-addons">
                     <div class="control">
                         <a class="button is-static">
                             IPv6
                         </a>
                     </div>
-                    <div class="control is-expanded">
+                    <div :class="`control is-expanded${listenIpv6Changed ? ' is-changed' : ''}`">
                         <input v-model="listenIpv6" class="input" type="text" :placeholder="listenIpv6Default" />
                     </div>
                 </div>