wip
Bálint Szekeres
parent
2df3759015
commit
1a32c3ca70
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -24,13 +24,9 @@
|
|||
</div>
|
||||
<div ng-if="layout === 'do'" ng-cloak>
|
||||
<nav class="do" ng-include="'partials/nav-do.html'"></nav>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-8 offset-lg-2">
|
||||
<h1>NGINX Config</h1>
|
||||
<h2>The easiest way to configure a performant, secure,<wbr> and stable nginx server.</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hero container">
|
||||
<h1>NGINX Config</h1>
|
||||
<h2>The easiest way to configure a performant, secure,<br> and stable NGINX server.</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
|
|
@ -43,18 +39,12 @@
|
|||
|
||||
<img ng-if="layout === 'default'" src="assets/img/logo-light.svg" class="logo" alt="nginxconfig.io">
|
||||
|
||||
<div class="sites">
|
||||
<div ng-if="layout === 'default'" class="sites">
|
||||
<div class="title">Sites:</div>
|
||||
<div class="group">
|
||||
<button class="btn btn-sm btn-outline-light" ng-repeat="(key, value) in data.sites" ng-click="setSite(key)" ng-class="{ 'active': site === key }" ng-cloak>
|
||||
{{ getDomain(key) }}<small ng-cloak>({{ getSiteChanges(key) !== undefined ? getSiteChanges(key) : '?' }})</small>
|
||||
<span class="close" ng-if="key > 0" ng-click="removeSite(key)">×</span>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-light" ng-click="addSite()">＋ Add site</button>
|
||||
</div>
|
||||
<div class="group" ng-include="'partials/sites.html'"></div>
|
||||
</div>
|
||||
|
||||
<div class="presets" ng-if="layout === 'default'">
|
||||
<div ng-if="layout === 'default'" class="presets">
|
||||
<div class="title">Presets:</div>
|
||||
<div class="group" ng-include="'partials/presets.html'"></div>
|
||||
</div>
|
||||
|
|
@ -64,8 +54,14 @@
|
|||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-lg-9" ng-class="{ 'col-lg-12': layout === 'do' }">
|
||||
<div class="sites" ng-include="'partials/config-site.html'"></div>
|
||||
<div class="common" ng-include="'partials/config-global.html'"></div>
|
||||
<div class="sites">
|
||||
<h5 ng-if="layout === 'do'">Per-Website Config</h5>
|
||||
<div ng-include="'partials/config-site.html'"></div>
|
||||
</div>
|
||||
<div class="common">
|
||||
<h5 ng-if="layout === 'do'">Global Config</h5>
|
||||
<div ng-include="'partials/config-global.html'"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-if="layout !== 'do'" class="col-lg-3" ng-cloak>
|
||||
<aside class="sidebar">
|
||||
|
|
|
|||
|
|
@ -1,28 +1,19 @@
|
|||
<ul class="nav nav-tabs nav-site-tab" role="tablist">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" ng-click="setTabSite('server')" ng-class="{ 'active': tab_site === 'server', 'changed': getSiteTabChanges('server') }">Server<small ng-cloak>({{ getSiteTabChanges('server') }})</small></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" ng-click="setTabSite('https')" ng-class="{ 'active': tab_site === 'https', 'changed': getSiteTabChanges('https') }">HTTPS<small ng-cloak>({{ getSiteTabChanges('https') }})</small></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" ng-click="setTabSite('php')" ng-class="{ 'active': tab_site === 'php', 'changed': getSiteTabChanges('php') }">PHP<small ng-cloak>({{ getSiteTabChanges('php') }})</small></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" ng-click="setTabSite('python')" ng-class="{ 'active': tab_site === 'python', 'changed': getSiteTabChanges('python') }">Python<small ng-cloak>({{ getSiteTabChanges('python') }})</small></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" ng-click="setTabSite('proxy')" ng-class="{ 'active': tab_site === 'proxy', 'changed': getSiteTabChanges('proxy') }">Reverse proxy<small ng-cloak>({{ getSiteTabChanges('proxy') }})</small></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" ng-click="setTabSite('routing')" ng-class="{ 'active': tab_site === 'routing', 'changed': getSiteTabChanges('routing') }">Routing<small ng-cloak>({{ getSiteTabChanges('routing') }})</small></a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" ng-click="setTabSite('logging')" ng-class="{ 'active': tab_site === 'logging', 'changed': getSiteTabChanges('logging') }">Logging<small ng-cloak>({{ getSiteTabChanges('logging') }})</small></a>
|
||||
<ul ng-if="layout === 'default'" class="nav nav-tabs nav-site-tab" role="tablist">
|
||||
<li ng-repeat="(key, tab) in tabs_site" class="nav-item">
|
||||
<a class="nav-link" ng-click="setTabSite(key)" ng-class="{ 'active': tab_site === key, 'changed': getSiteTabChanges(tab.slug) }">{{ tab.name }}<small ng-cloak>({{ getSiteTabChanges(tab.slug) }})</small></a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul ng-if="layout === 'do'" class="nav nav-tabs nav-site-tab" ng-include="'partials/sites-do.html'" role="tablist"></ul>
|
||||
<div class="tab-content site-content">
|
||||
<div class="tab-pane tab-server" ng-class="{ 'active': tab_site === 'server' }">
|
||||
<ul ng-if="layout === 'do'" class="nav nav-pills nav-fill" role="tablist">
|
||||
<li ng-repeat="(key, tab) in tabs_site" class="nav-item">
|
||||
<a class="nav-link" ng-click="setTabSite(key)" ng-class="{ 'active': tab_site === key, 'changed': getSiteTabChanges(tab.slug), 'visited': key < tab_site }">{{ tab.name }}<small ng-cloak>({{ getSiteTabChanges('php') }})</small></a>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="tab-pane tab-presets" ng-class="{ 'active': tabs_site[tab_site].slug === 'presets' }">
|
||||
<div class="text-center" ng-include="'partials/presets.html'"></div>
|
||||
</div>
|
||||
<div class="tab-pane tab-server" ng-class="{ 'active': tabs_site[tab_site].slug === 'server' }">
|
||||
<div class="row mb-2">
|
||||
<div class="col-sm-4">
|
||||
<div class="form-group">
|
||||
|
|
@ -128,7 +119,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane tab-https" ng-class="{ 'active': tab_site === 'https' }">
|
||||
<div class="tab-pane tab-https" ng-class="{ 'active': tabs_site[tab_site].slug === 'https' }">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-3 col-form-label col-form-label-sm">
|
||||
<span tooltips tooltip-template="Provides support for HTTPS.<br><br><i>using Mozilla SSL config</i>">HTTPS</span>
|
||||
|
|
@ -238,7 +229,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane tab-php" ng-class="{ 'active': tab_site === 'php' }">
|
||||
<div class="tab-pane tab-php" ng-class="{ 'active': tabs_site[tab_site].slug === 'php' }">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-3 col-form-label col-form-label-sm">
|
||||
PHP
|
||||
|
|
@ -284,7 +275,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane tab-python" ng-class="{ 'active': tab_site === 'python' }">
|
||||
<div class="tab-pane tab-python" ng-class="{ 'active': tabs_site[tab_site].slug === 'python' }">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-3 col-form-label col-form-label-sm">
|
||||
Python
|
||||
|
|
@ -308,7 +299,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane tab-proxy" ng-class="{ 'active': tab_site === 'proxy' }">
|
||||
<div class="tab-pane tab-proxy" ng-class="{ 'active': tabs_site[tab_site].slug === 'proxy' }">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-3 col-form-label col-form-label-sm">
|
||||
Reverse proxy
|
||||
|
|
@ -343,7 +334,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane tab-routing" ng-class="{ 'active': tab_site === 'routing' }">
|
||||
<div class="tab-pane tab-routing" ng-class="{ 'active': tabs_site[tab_site].slug === 'routing' }">
|
||||
<div class="form-group row">
|
||||
<label class="col-sm-3 col-form-label col-form-label-sm">
|
||||
<span tooltips tooltip-template="Enable root directive."><code>root</code></span>
|
||||
|
|
@ -410,7 +401,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-pane tab-logging" ng-class="{ 'active': tab_site === 'logging' }">
|
||||
<div class="tab-pane tab-logging" ng-class="{ 'active': tabs_site[tab_site].slug === 'logging' }">
|
||||
<div class="form-group row" ng-class="{ disabled: !isAccessLog() }">
|
||||
<label class="col-sm-3 col-form-label col-form-label-sm">
|
||||
<span tooltips tooltip-template="Domain specific access_log."><code>access_log</code> by domain</span>
|
||||
|
|
@ -434,4 +425,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-navigation-buttons" ng-if="layout === 'do'">
|
||||
<button class="btn btn-outline-secondary" ng-click="setTabSiteBack()">Back</button>
|
||||
<button class="btn btn-primary" ng-click="setTabSiteNext()">Next</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
<li class="nav-item" ng-repeat="(key, value) in data.sites">
|
||||
<a class="nav-link" ng-click="setSite(key)" ng-class="{ 'active': site === key }" ng-cloak>
|
||||
{{ getDomain(key) }}<small ng-cloak>({{ getSiteChanges(key) !== undefined ? getSiteChanges(key) : '?' }})</small>
|
||||
<span class="close" ng-if="key > 0" ng-click="removeSite(key)">×</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" ng-click="addSite(key)">
|
||||
＋ Add Site
|
||||
</a>
|
||||
</li>
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
<button class="btn btn-sm btn-outline-light" ng-repeat="(key, value) in data.sites" ng-click="setSite(key)" ng-class="{ 'active': site === key }" ng-cloak>
|
||||
{{ getDomain(key) }}<small ng-cloak>({{ getSiteChanges(key) !== undefined ? getSiteChanges(key) : '?' }})</small>
|
||||
<span class="close" ng-if="key > 0" ng-click="removeSite(key)">×</span>
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-light" ng-click="addSite()">＋ Add site</button>
|
||||
|
|
@ -380,7 +380,7 @@
|
|||
/////////////////////
|
||||
// SCOPE VARIABLES //
|
||||
/////////////////////
|
||||
$scope.layout = $window.LAYOUT || 'default';
|
||||
$scope.layout = 'default';
|
||||
$scope.defaultData = DEFAULTS;
|
||||
|
||||
$scope.dataInit = false;
|
||||
|
|
@ -389,9 +389,40 @@
|
|||
$scope.masonryInit = false;
|
||||
|
||||
$scope.site = 0;
|
||||
$scope.tab_site = 'server';
|
||||
$scope.tab_site = 0;
|
||||
$scope.tab_common = 'https';
|
||||
|
||||
$scope.tabs_site = [
|
||||
{
|
||||
name: 'Server',
|
||||
slug: 'server',
|
||||
},
|
||||
{
|
||||
name: 'HTTPS',
|
||||
slug: 'https',
|
||||
},
|
||||
{
|
||||
name: 'PHP',
|
||||
slug: 'php',
|
||||
},
|
||||
{
|
||||
name: 'Python',
|
||||
slug: 'python',
|
||||
},
|
||||
{
|
||||
name: 'Reverse proxy',
|
||||
slug: 'proxy',
|
||||
},
|
||||
{
|
||||
name: 'Routing',
|
||||
slug: 'routing',
|
||||
},
|
||||
{
|
||||
name: 'Logging',
|
||||
slug: 'logging',
|
||||
},
|
||||
];
|
||||
|
||||
$scope.siteChanges = {};
|
||||
$scope.commonChanges = {};
|
||||
|
||||
|
|
@ -543,10 +574,22 @@
|
|||
$timeout(calculateChanges);
|
||||
};
|
||||
|
||||
$scope.setTabSite = function(tab) {
|
||||
$scope.tab_site = tab;
|
||||
$scope.setTabSite = function(key) {
|
||||
$scope.tab_site = key;
|
||||
};
|
||||
|
||||
$scope.setTabSiteBack = function() {
|
||||
if ($scope.tab_site > 0) {
|
||||
$scope.tab_site--;
|
||||
}
|
||||
};
|
||||
|
||||
$scope.setTabSiteNext = function() {
|
||||
if ($scope.tab_site < $scope.tabs_site.length - 1) {
|
||||
$scope.tab_site++;
|
||||
}
|
||||
}
|
||||
|
||||
$scope.setTabCommon = function(tab) {
|
||||
$scope.tab_common = tab;
|
||||
};
|
||||
|
|
@ -706,7 +749,16 @@
|
|||
};
|
||||
|
||||
$scope.toggleLayout = function() {
|
||||
$scope.layout = ($scope.layout === 'default' ? 'do' : 'default');
|
||||
if ($scope.layout === 'default') {
|
||||
$scope.layout = 'do';
|
||||
$scope.tabs_site.unshift({
|
||||
name: 'Presets',
|
||||
slug: 'presets',
|
||||
});
|
||||
} else {
|
||||
$scope.layout = 'default';
|
||||
$scope.tabs_site.shift();
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
|
@ -1205,5 +1257,9 @@
|
|||
//////////
|
||||
setDataFromHash();
|
||||
initMasonry();
|
||||
|
||||
if ($window.LAYOUT !== $scope.layout) {
|
||||
$scope.toggleLayout();
|
||||
}
|
||||
}
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -20,6 +20,11 @@ header {
|
|||
right: 10px;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
opacity: 0.75;
|
||||
|
||||
.btn {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
[ng-cloak] {
|
||||
display: none;
|
||||
}
|
||||
.btn:active,
|
||||
.btn:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.clipboard-success {
|
||||
font-size: 0.8rem;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,48 @@
|
|||
@font-face {
|
||||
font-family: 'Sailec';
|
||||
src: url('../fonts/Sailec-Regular.woff2') format('woff2'),
|
||||
url('../fonts/Sailec-Regular.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Sailec';
|
||||
src: url('../fonts/Sailec-Bold.woff2') format('woff2'),
|
||||
url('../fonts/Sailec-Bold.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Sailec';
|
||||
src: url('../fonts/Sailec-Light.woff2') format('woff2'),
|
||||
url('../fonts/Sailec-Light.woff') format('woff');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Sailec';
|
||||
src: url('../fonts/Sailec-Medium.woff2') format('woff2'),
|
||||
url('../fonts/Sailec-Medium.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Sailec';
|
||||
src: url('../fonts/Sailec-LightItalic.woff2') format('woff2'),
|
||||
url('../fonts/Sailec-LightItalic.woff') format('woff');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
||||
|
||||
body.layout-do {
|
||||
font-family: 'Sailec', sans-serif;
|
||||
|
||||
header {
|
||||
padding: 0;
|
||||
background-color: #031b4e;
|
||||
|
|
@ -46,11 +90,194 @@ body.layout-do {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.hero {
|
||||
padding-top: 72px;
|
||||
padding-bottom: 72px;
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
line-height: 45px;
|
||||
margin-bottom: 27px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 20px;
|
||||
line-height: 200%;
|
||||
font-weight: 300;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
section.tabs {
|
||||
h5 {
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
margin-bottom: 39px;
|
||||
}
|
||||
|
||||
.sites {
|
||||
margin-top: 53px;
|
||||
}
|
||||
|
||||
.common {
|
||||
margin-top: 53px;
|
||||
}
|
||||
|
||||
.nav-tabs {
|
||||
.nav-item {
|
||||
flex-grow: 0;
|
||||
|
||||
&:first-child {
|
||||
.nav-link {
|
||||
padding-right: 35px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 11px 42px 11px 22px;
|
||||
color: #0069ff;
|
||||
|
||||
small {
|
||||
display: inline;
|
||||
top: 52.5%;
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
.close {
|
||||
float: none;
|
||||
position: absolute;
|
||||
right: 6px;
|
||||
top: 55%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
background-color: #fafafa;
|
||||
padding-left: 40px;
|
||||
padding-right: 40px;
|
||||
|
||||
.nav-pills {
|
||||
margin: 25px 0;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #dde1e8;
|
||||
border-radius: 5px;
|
||||
overflow: hidden;
|
||||
|
||||
.nav-item {
|
||||
&:first-child {
|
||||
.nav-link {
|
||||
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.nav-link {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
border-right: 1px solid #dde1e8;
|
||||
border-radius: 0;
|
||||
|
||||
&.active {
|
||||
background-color: #0069ff;
|
||||
|
||||
&:hover {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
&.changed {
|
||||
font-weight: 700;
|
||||
|
||||
small {
|
||||
display: inline;
|
||||
color: #ccc;
|
||||
top: 52.5%;
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
padding-left: 0.3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.visited {
|
||||
background-color: #dfeeff;
|
||||
}
|
||||
|
||||
small {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
display: none;
|
||||
color: #999;
|
||||
|
||||
@include media-breakpoint-down(lg) {
|
||||
right: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-group {
|
||||
.form-control-sm,
|
||||
.col-form-label-sm {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-navigation-buttons {
|
||||
margin: 20px 0 32px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: #0069ff;
|
||||
}
|
||||
|
||||
.btn-outline-light {
|
||||
box-shadow: none !important;
|
||||
color: #666;
|
||||
border-color: #dde1e8;
|
||||
margin: 0 3px 4px;
|
||||
|
||||
&.active,
|
||||
&:hover {
|
||||
background-color: #fff;
|
||||
border-color: #212529;
|
||||
color: #000;
|
||||
|
||||
svg {
|
||||
path {
|
||||
fill: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
height: 1.1rem;
|
||||
vertical-align: text-bottom;
|
||||
|
||||
path {
|
||||
fill: #999;
|
||||
transition: fill 0.15s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue