WIP

public/partials/config-site.html

@@ -11,7 +11,7 @@
 		</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-do.html'"></div>
+		<div class="text-center presets" ng-include="'partials/presets-do.html'"></div>
 	</div>
 	<div class="tab-pane tab-server" ng-class="{ 'active': tabs_site[tab_site].slug === 'server' }">
 		<div class="row mb-2">

public/partials/index.html

@@ -35,11 +35,11 @@
 			<div class="col-lg-9" ng-class="{ 'col-lg-12': layout === 'do' }">
 				<div class="sites">
 					<h5 ng-if="layout === 'do'">Per-Website Config</h5>
-					<div ng-include="'partials/config-site.html'"></div>
+					<div ng-include="'partials/config-site.html'" ng-keydown="siteKeydown($event)"></div>
 				</div>
 				<div class="common">
 					<h5 ng-if="layout === 'do'">Global Config</h5>
-					<div ng-include="'partials/config-global.html'"></div>
+					<div ng-include="'partials/config-global.html'" ng-keydown="commonKeydown($event)"></div>
 				</div>
 			</div>
 			<div ng-if="layout === 'default'" class="col-lg-3" ng-cloak>

public/partials/presets-do.html

@@ -1,6 +1,6 @@
 <button
 	type="button"
-	class="btn btn-sm btn-light"
+	class="btn btn-light"
 	ng-click="setPreset('frontend')"
 	ng-class="{ 'active': !isPHP() && !isPython() && !isProxy() && isIndexHTML() && isFallbackHTML() }"
 	tooltips
@@ -9,7 +9,7 @@
 >Frontend</button>
 <button
 	type="button"
-	class="btn btn-sm btn-light"
+	class="btn btn-light"
 	ng-click="setPreset('backend')"
 	ng-class="{ 'active': isPHP() && isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && !isDrupal() && !isMagento() }"
 	tooltips
@@ -18,7 +18,7 @@
 >PHP</button>
 <button
 	type="button"
-	class="btn btn-sm btn-light"
+	class="btn btn-light"
 	ng-click="setPreset('django')"
 	ng-class="{ 'active': isPython() && isDjango() && !isRoot() }"
 	tooltips
@@ -27,7 +27,7 @@
 >Django</button>
 <button
 	type="button"
-	class="btn btn-sm btn-light"
+	class="btn btn-light"
 	ng-class="{ 'active': isProxy() && !isRoot() }"
 	ng-click="setPreset('nodejs')"
 	tooltips
@@ -36,7 +36,7 @@
 >Node.js</button>
 <button
 	type="button"
-	class="btn btn-sm btn-light"
+	class="btn btn-light"
 	ng-class="{ 'active': isPHP() && isIndexHTML() && isFallbackHTML() }"
 	ng-click="setPreset('spa')"
 	tooltips
@@ -45,7 +45,7 @@
 >Single-page application</button>
 <button
 	type="button"
-	class="btn btn-sm btn-light"
+	class="btn btn-light"
 	ng-click="setPreset('wordpress')"
 	ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && isWordPress() && !isDrupal() && !isMagento() }"
 	tooltips
@@ -54,7 +54,7 @@
 >WordPress</button>
 <button
 	type="button"
-	class="btn btn-sm btn-light"
+	class="btn btn-light"
 	ng-click="setPreset('drupal')"
 	ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && isDrupal() && !isMagento() }"
 	tooltips
@@ -63,7 +63,7 @@
 >Drupal</button>
 <button
 	type="button"
-	class="btn btn-sm btn-light"
+	class="btn btn-light"
 	ng-click="setPreset('magento')"
 	ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && !isDrupal() && isMagento() }"
 	tooltips

resources/js/app.js

@@ -645,6 +645,22 @@
 			}
 		}
 
+		$scope.siteKeydown = function(event) {
+			if (event.which === 37) {
+				$scope.setTabSiteBack();
+			} else if (event.which === 39) {
+				$scope.setTabSiteNext();
+			}
+		}
+
+		$scope.commonKeydown = function(event) {
+			if (event.which === 37) {
+				$scope.setTabCommonBack();
+			} else if (event.which === 39) {
+				$scope.setTabCommonNext();
+			}
+		}
+
 		$scope.setPreset = function(preset) {
 			$scope.data.sites[$scope.site].php				= $scope.defaultData.sites[0].php;
 			$scope.data.sites[$scope.site].wordpress		= $scope.defaultData.sites[0].wordpress;

resources/scss/layout/_do.scss

@@ -43,10 +43,6 @@
 #app.layout-do {
 	font-family: 'Sailec', sans-serif;
 
-	.btn-sm {
-		padding: 0.375rem 0.5rem;
-	}
-
 	.btn-light.active {
 		@extend .btn-primary;
 	}
@@ -210,6 +206,20 @@
 				border-top-right-radius: 5px;
 			}
 
+			.presets {
+				display: flex;
+				margin: 40px auto 30px;
+
+				tooltip,
+				.btn {
+					flex: 1 1 auto;
+				}
+
+				.btn {
+					width: 90%;
+				}
+			}
+
 			.nav-pills {
 				margin: 25px 0;
 				background-color: #ffffff;