7x31
/
nginxconfig.io
mirror of https://github.com/digitalocean/nginxconfig.io.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Move is-changed to control

This commit is contained in:
MattIPv4 2020-04-30 17:01:21 +01:00
parent 969d610831
commit 8e97e8d4f2
5 changed files with 68 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/nginxconfig/scss/style.scss
View File

@ -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;

30
src/nginxconfig/templates/domain_sections/https.vue
View File

@ -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"

20
src/nginxconfig/templates/domain_sections/php.vue
View File

@ -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>

10
src/nginxconfig/templates/domain_sections/python.vue
View File

@ -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,

32
src/nginxconfig/templates/domain_sections/server.vue
View File

@ -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>