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

tabbed layout

pull/23/head
Szekeres Bálint 2018-08-19 23:17:07 +02:00
parent 1a74a34576
commit e8825585e0
17 changed files with 759 additions and 568 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
package.json
View File

@ -33,14 +33,19 @@
},
"scripts": {
"start": "npm run build && http-server",
"build": "npm run build:scss",
"build:prod": "npm run build:scss:prod && npm run autoprefixer",
"build:scss": "node-sass --source-map=public/assets/css/app.min.css.map resources/scss/app.scss public/assets/css/app.min.css",
"build:scss:prod": "node-sass --output-style=compressed resources/scss/app.scss public/assets/css/app.min.css",
"autoprefixer": "postcss public/assets/css/app.min.css --use autoprefixer --no-map --replace --verbose",
"test": "start-server-and-test start http://localhost:8080 cypress:run",
"test:debug": "start-server-and-test start http://localhost:8080 cypress:open",
"cypress:run": "cypress run",
"cypress:open": "cypress open",
"autoprefixer": "postcss public/assets/css/app.min.css --use autoprefixer --no-map --replace --verbose"
"cypress:open": "cypress open"
}
}

1
public/assets/img/refresh.svg
View File

@ -1 +0,0 @@
<svg height="14" viewBox="0 0 12 14" width="12" xmlns="http://www.w3.org/2000/svg"><path d="m11.805 8.25q0 .039-.008.055-.5 2.094-2.094 3.395t-3.734 1.301q-1.141 0-2.207-.43t-1.902-1.227l-1.008 1.008q-.148.148-.352.148t-.352-.148-.148-.352v-3.5q0-.203.148-.352t.352-.148h3.5q.203 0 .352.148t.148.352-.148.352l-1.07 1.07q.555.516 1.258.797t1.461.281q1.047 0 1.953-.508t1.453-1.398q.086-.133.414-.914.062-.18.234-.18h1.5q.102 0 .176.074t.074.176zm.195-6.25v3.5q0 .203-.148.352t-.352.148h-3.5q-.203 0-.352-.148t-.148-.352.148-.352l1.078-1.078q-1.156-1.07-2.727-1.07-1.047 0-1.953.508t-1.453 1.398q-.086.133-.414.914-.062.18-.234.18h-1.555q-.102 0-.176-.074t-.074-.176v-.055q.508-2.094 2.109-3.395t3.75-1.301q1.141 0 2.219.434t1.914 1.223l1.016-1.008q.148-.148.352-.148t.352.148.148.352z" fill="#fff"/></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 804 B

29
public/assets/js/app.js
View File

@ -19,7 +19,7 @@
.html5Mode(true)
.hashPrefix('!');
})
.controller('NginxConfigIoController', function NginxConfigIoController($scope, $location, $timeout) {
.controller('NginxConfigIoController', function NginxConfigIoController($scope, $window, $location, $timeout) {
///////////////////////
// PRIVATE VARIABLES //
///////////////////////
@ -38,7 +38,7 @@
path: '',
document_root: '/public',
https: false,
https: true,
http2: true,
redirect: true,
@ -59,11 +59,12 @@
fallback_php: true,
fallback_php_path: '/api/',
php: '7.2',
php: true,
php_connection: '7.2',
wordpress: false,
drupal: false,
file_structure: 'unified',
file_structure: 'modularized',
referrer_policy: 'no-referrer-when-downgrade',
content_security_policy: 'default-src * data: \'unsafe-eval\' \'unsafe-inline\'',
@ -89,6 +90,7 @@
$scope.data = angular.copy($scope.defaultData);
$scope.dataInit = false;
$scope.isDirty = false;
$scope.tab = 'site';
$scope.sslCertificateChanged = false;
$scope.sslCertificateKeyChanged = false;
@ -276,6 +278,10 @@
});
};
$scope.setTab = function(tab) {
$scope.tab = tab;
};
$scope.setPreset = function(preset) {
$scope.data.php = $scope.defaultData.php;
$scope.data.wordpress = $scope.defaultData.wordpress;
@ -285,7 +291,7 @@
switch(preset) {
case 'frontend':
$scope.data.php = 'off';
$scope.data.php = false;
$scope.data.index = 'index.html';
$scope.data.fallback_html = true;
break;
@ -306,6 +312,10 @@
});
};
$scope.getChangesForTab = function(tab) {
return $window.document.querySelectorAll('section.tabs .tab-content .tab-' + tab + ' .input-changed').length;
};
///////////////////////////
@ -392,7 +402,7 @@
};
$scope.isPHP = function() {
return $scope.data.php !== 'off';
return $scope.data.php;
};
$scope.isWordPress = function() {
@ -438,6 +448,13 @@
$scope.refreshHighlighting();
$scope.updateHash();
if (!$scope.data.php) {
$scope.defaultData.index = 'index.html';
$scope.data.index = 'index.html';
} else {
$scope.defaultData.index = 'index.php';
}
for (var key in $scope.data) {
if (!angular.equals(newValue[key], oldValue[key])) {
gtag('event', key, {

1064
public/index.html
View File

File diff suppressed because it is too large Load Diff

2
public/templates/conf/nginx.conf.html
View File

@ -64,5 +64,5 @@ http {
include /etc/nginx/sites-enabled/*;</span><span ng-if="data.file_structure === 'unified'">
# {{ !data.non_www ? 'www.' : '' }}{{ domain() }}
<ng-include ng-include-tabs="1" src="'templates/conf/example.com.conf.html?v=COMMIT_HASH'" sonload="refreshHighlighting()"></ng-include></span>
<ng-include ng-include-tabs="1" src="'templates/conf/sites-available/example.com.conf.html?v=COMMIT_HASH'" sonload="refreshHighlighting()"></ng-include></span>
}

0
public/templates/conf/_drupal.conf.html → public/templates/conf/nginxconfig.io/drupal.conf.html
View File

0
public/templates/conf/_general.conf.html → public/templates/conf/nginxconfig.io/general.conf.html
View File

0
public/templates/conf/_letsencrypt.conf.html → public/templates/conf/nginxconfig.io/letsencrypt.conf.html
View File

6
public/templates/conf/_php_fastcgi.conf.html → public/templates/conf/nginxconfig.io/php_fastcgi.conf.html
View File

@ -2,9 +2,9 @@ try_files $uri =404;
# fastcgi
fastcgi_pass {{
data.php === 'tcp' ? '127.0.0.1:9000' : (
data.php === '5.x' ? 'unix:/var/run/php5-fpm.sock' : (
'unix:/var/run/php/php' + data.php +'-fpm.sock'
data.php_connection === 'tcp' ? '127.0.0.1:9000' : (
data.php_connection === '5.x' ? 'unix:/var/run/php5-fpm.sock' : (
'unix:/var/run/php/php' + data.php_connection +'-fpm.sock'
)
)
}};

4
public/templates/conf/_wordpress.conf.html → public/templates/conf/nginxconfig.io/wordpress.conf.html
View File

@ -1,6 +1,6 @@
# WordPress: allow TinyMCE
location = /wp-includes/js/tinymce/wp-tinymce.php {
include _php_fastcgi.conf;
include nginxconfig.io/php_fastcgi.conf;
}
# WordPress: deny wp-content, wp-includes php files
@ -31,5 +31,5 @@ location ~* ^/(?:xmlrpc\.php|wp-links-opml\.php|wp-config\.php|wp-config-sample\
# WordPress: throttle wp-login.php
location = /wp-login.php {
limit_req zone=login burst=2 nodelay;
include _php_fastcgi.conf;
include nginxconfig.io/php_fastcgi.conf;
}</span>

20
public/templates/conf/example.com.conf.html → public/templates/conf/sites-available/example.com.conf.html
View File

@ -55,10 +55,10 @@ server {<!--
location ~ \.php$ {<!--
✔ modularized || ✔ WordPress --><span ng-if="isModularized() || isWordPress()">
include _php_fastcgi.conf;</span><!--
include nginxconfig.io/php_fastcgi.conf;</span><!--
✔ unified && ✘ WordPress --><span ng-if="isUnified() && !isWordPress()">
<ng-include ng-include-tabs="{{ isUnified() ? 3 : 1 }}" src="'templates/conf/_php_fastcgi.conf.html?v=COMMIT_HASH'" onload="refreshHighlighting()"></ng-include></span>
<ng-include ng-include-tabs="{{ isUnified() ? 3 : 1 }}" src="'templates/conf/nginxconfig.io/php_fastcgi.conf.html?v=COMMIT_HASH'" onload="refreshHighlighting()"></ng-include></span>
}</span><!--
✔ unified --><span ng-if="isModularized()">
@ -67,27 +67,27 @@ server {<!--
✔ modularized --><span ng-if="isModularized()">
include _general.conf;</span><!--
include nginxconfig.io/general.conf;</span><!--
✔ modularized && ✔ WordPress --><span ng-if="isModularized() && isWordPress()">
include _wordpress.conf;</span><!--
include nginxconfig.io/wordpress.conf;</span><!--
✔ modularized && ✔ Drupal --><span ng-if="isModularized() && isDrupal()">
include _drupal.conf;</span><!--
include nginxconfig.io/drupal.conf;</span><!--
✔ unified --><span ng-if="isUnified()">
<!-- --><ng-include ng-include-tabs="2" src="'templates/conf/_general.conf.html?v=COMMIT_HASH'" onload="refreshHighlighting()"></ng-include></span><!--
<!-- --><ng-include ng-include-tabs="2" src="'templates/conf/nginxconfig.io/general.conf.html?v=COMMIT_HASH'" onload="refreshHighlighting()"></ng-include></span><!--
✔ unified && ✔ WordPress --><span ng-if="isUnified() && isWordPress()">
<!-- --><ng-include ng-include-tabs="2" src="'templates/conf/_wordpress.conf.html?v=COMMIT_HASH'" onload="refreshHighlighting()"></ng-include></span><!--
<!-- --><ng-include ng-include-tabs="2" src="'templates/conf/nginxconfig.io/wordpress.conf.html?v=COMMIT_HASH'" onload="refreshHighlighting()"></ng-include></span><!--
✔ unified && ✔ Drupal --><span ng-if="isUnified() && isDrupal()">
<!-- --><ng-include ng-include-tabs="2" src="'templates/conf/_drupal.conf.html?v=COMMIT_HASH'" onload="refreshHighlighting()"></ng-include></span>
<!-- --><ng-include ng-include-tabs="2" src="'templates/conf/nginxconfig.io/drupal.conf.html?v=COMMIT_HASH'" onload="refreshHighlighting()"></ng-include></span>
}<!--
@ -180,11 +180,11 @@ server {
✔ modularized && ✔ Let's Encrypt --><span ng-if="isModularized() && isCertLetsEncrypt()">
include _letsencrypt.conf;</span><!--
include nginxconfig.io/letsencrypt.conf;</span><!--
✔ unified && ✔ Let's Encrypt --><span ng-if="isUnified() && isCertLetsEncrypt()">
<ng-include ng-include-tabs="2" src="'templates/conf/_letsencrypt.conf.html?v=COMMIT_HASH'" onload="refreshHighlighting()"></ng-include></span><!--
<ng-include ng-include-tabs="2" src="'templates/conf/nginxconfig.io/letsencrypt.conf.html?v=COMMIT_HASH'" onload="refreshHighlighting()"></ng-include></span><!--
✔ Let's Encrypt --><span ng-if="isCertLetsEncrypt()">

3
resources/scss/_ads.scss
View File

@ -11,7 +11,8 @@
}
aside.sidebar & {
height: 600px;
height: 300px;
max-height: 300px;
}
}

79
resources/scss/_main.scss
View File

@ -1,6 +1,6 @@
section.presets {
text-align: center;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
margin-bottom: 1rem;
.btn {
&.btn-outline-dark{
@ -16,6 +16,80 @@ section.presets {
}
}
section.tabs {
margin-bottom: 1rem;
.nav-tabs {
.nav-item {
a {
cursor: pointer;
position: relative;
transition: all 0.25s;
&.changed {
font-weight: 700;
padding-left: 0.6rem;
padding-right: 1.4rem;
small {
display: inline;
}
}
small {
position: absolute;
top: 50%;
right: 0.25rem;
transform: translateY(-50%);
display: none;
color: #999;
}
}
}
}
.tab-content {
padding: 0.5rem 0.75rem;
border-left: 1px solid #dee2e6;
border-right: 1px solid #dee2e6;
border-bottom: 1px solid #dee2e6;
border-bottom-right-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
.form-group {
margin-bottom: 0.25rem;
.form-check {
padding-top: 0.2rem;
.form-check-label {
cursor: pointer;
user-select: none;
}
}
.form-control.input-changed,
.form-check.input-changed,
select.input-changed {
background-color: #fdffd9;
}
.form-check.input-changed {
border-radius: 0.2rem;
}
.btn {
&.btn-download {
img {
vertical-align: -2px;
margin-right: 0.1rem;
width: 1rem;
}
}
}
}
}
}
main {
flex: 1 1 auto;
@ -30,6 +104,7 @@ main {
font-size: 0;
padding: 0.2rem 0.4rem 0.05rem;
vertical-align: text-bottom;
float: right;
}
}

100
resources/scss/_sidebar.scss
View File

@ -1,102 +1,8 @@
aside.options {
.card {
background-color: #f8f8f8;
& + .card {
margin-top: 1rem;
}
.card-body {
padding: 0.25rem 0.5rem 0.5rem;
font-size: 0.9rem;
.form-group {
margin-bottom: 0.5rem;
&:last-child {
margin-bottom: 0;
}
}
.form-subgroup {
margin-left: 0.35rem;
border-left: 2px solid #ced4da;
padding-left: 0.5rem;
.form-subgroup {
margin-left: 0;
border-left: 1px solid #d7e0ea;
padding-left: 0.4rem;
}
.form-check + .form-subgroup {
margin-left: 5.5px;
}
}
.form-label {
margin-bottom: 0.15rem;
margin-left: 0.15rem;
}
.form-control {
&.domain {
&::placeholder {
color: #000;
}
&:placeholder-shown {
border-color: #3131ff;
}
}
&[type="text"],
&[type="email"] {
&:placeholder-shown {
background-color: #fefefe;
}
}
}
.form-control.input-changed,
.form-check.input-changed,
select.input-changed {
background-color: #fff3cd;
}
.form-check.input-changed {
border-radius: 0.2rem;
}
.form-check-label {
cursor: pointer;
user-select: none;
}
.row {
&.no-gutters {
& + .no-gutters {
margin-top: 0.5rem;
}
.col-md-6 {
&:first-child {
padding-right: 3px;
}
&:last-child {
padding-left: 3px;
}
}
}
}
}
}
}
aside.sidebar {
margin-top: 1rem;
@include media-breakpoint-up(lg) {
margin-top: -2.4rem;
margin-top: -2.5rem;
}
.github-link {

6
resources/scss/_variables.scss Normal file
View File

@ -0,0 +1,6 @@
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1300px
);

2
resources/scss/app.scss
View File

@ -1,3 +1,5 @@
@import 'variables';
@import 'vendor/bootstrap';
@import 'vendor/highlight-js';
@import 'vendor/angular-tooltips';

2
resources/scss/vendor/_bootstrap.scss vendored
View File

@ -15,7 +15,7 @@
// @import '../../../node_modules/bootstrap/scss/button-group';
@import '../../../node_modules/bootstrap/scss/input-group';
@import '../../../node_modules/bootstrap/scss/custom-forms';
// @import '../../../node_modules/bootstrap/scss/nav';
@import '../../../node_modules/bootstrap/scss/nav';
// @import '../../../node_modules/bootstrap/scss/navbar';
@import '../../../node_modules/bootstrap/scss/card';
// @import '../../../node_modules/bootstrap/scss/breadcrumb';