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>