From 151bb3af5e7d503a9cc73d773245638668e64b12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ba=CC=81lint=20Szekeres?= <balint.szekeres@feat.agency>
Date: Sun, 10 Nov 2019 21:44:16 +0100
Subject: [PATCH] WIP

---
 public/partials/config-site.html |  2 +-
 public/partials/index.html       |  4 ++--
 public/partials/presets-do.html  | 16 ++++++++--------
 resources/js/app.js              | 16 ++++++++++++++++
 resources/scss/layout/_do.scss   | 18 ++++++++++++++----
 5 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/public/partials/config-site.html b/public/partials/config-site.html
index 2f13a39..0d076fe 100644
--- a/public/partials/config-site.html
+++ b/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">
diff --git a/public/partials/index.html b/public/partials/index.html
index 4548516..d319005 100644
--- a/public/partials/index.html
+++ b/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>
diff --git a/public/partials/presets-do.html b/public/partials/presets-do.html
index c3ab9f2..27443fc 100644
--- a/public/partials/presets-do.html
+++ b/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
diff --git a/resources/js/app.js b/resources/js/app.js
index 317d823..8f6bd2b 100644
--- a/resources/js/app.js
+++ b/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;
diff --git a/resources/scss/layout/_do.scss b/resources/scss/layout/_do.scss
index f6e7b4f..8149482 100644
--- a/resources/scss/layout/_do.scss
+++ b/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;