wip

public/index.html

@@ -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="hero container">
-					<div class="row">
+					<h1>NGINX Config</h1>
-						<div class="col-lg-8 offset-lg-2">
+					<h2>The easiest way to configure a performant, secure,<br> and stable NGINX server.</h2>
-							<h1>NGINX Config</h1>
-							<h2>The easiest way to configure a performant, secure,<wbr> and stable nginx server.</h2>
-						</div>
-					</div>
 				</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">
+					<div class="group" ng-include="'partials/sites.html'"></div>
-						<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)">&times;</span>
-						</button>
-						<button class="btn btn-sm btn-outline-light" ng-click="addSite()">＋ Add site</button>
-					</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="sites">
-						<div class="common" ng-include="'partials/config-global.html'"></div>
+							<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">

public/partials/config-site.html

@@ -1,28 +1,19 @@
-<ul class="nav nav-tabs nav-site-tab" role="tablist">
+<ul ng-if="layout === 'default'" class="nav nav-tabs nav-site-tab" role="tablist">
-	<li class="nav-item">
+	<li ng-repeat="(key, tab) in tabs_site" 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>
+		<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>
-	<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>
 	</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>

public/partials/sites-do.html

@@ -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)">&times;</span>
+	</a>
+</li>
+
+<li class="nav-item">
+	<a class="nav-link" ng-click="addSite(key)">
+		＋ Add Site
+	</a>
+</li>

public/partials/sites.html

@@ -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)">&times;</span>
+</button>
+<button class="btn btn-sm btn-outline-light" ng-click="addSite()">＋ Add site</button>

resources/js/app.js

@@ -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.setTabSite = function(key) {
-			$scope.tab_site = tab;
+			$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();
+		}
 	}
 })();

resources/scss/_header.scss

@@ -20,6 +20,11 @@ header {
 		right: 10px;
 		top: 0;
 		z-index: 100;
+		opacity: 0.75;
+
+		.btn {
+			outline: none;
+		}
 	}
 
 	.container {

resources/scss/_utilities.scss

@@ -1,6 +1,10 @@
 [ng-cloak] {
 	display: none;
 }
+.btn:active,
+.btn:focus {
+	box-shadow: none !important;
+}
 
 .clipboard-success {
 	font-size: 0.8rem;

resources/scss/layout/_do.scss

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