From f54d4bd6cb9226e41fb350aba85cbc8f31644ee9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ba=CC=81lint=20Szekeres?= <balint.szekeres@feat.agency>
Date: Sun, 19 May 2019 11:45:48 +0200
Subject: [PATCH] site group, preset group

---
 public/index.html           | 158 ++++++++++++++++++------------------
 resources/scss/_header.scss |  28 ++++++-
 2 files changed, 106 insertions(+), 80 deletions(-)

diff --git a/public/index.html b/public/index.html
index 253f4e0..fe4e4c6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -36,87 +36,91 @@
 
 				<div class="sites">
 					<div class="title">Sites:</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 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)">&times;</span>
+						</button>
+						<button class="btn btn-sm btn-outline-light" ng-click="addSite()">＋ Add site</button>
+					</div>
 				</div>
 
 				<div class="presets">
 					<div class="title">Presets:</div>
-					<button
-						type="button"
-						class="btn btn-sm btn-outline-light"
-						ng-click="setPreset('frontend')"
-						ng-class="{ 'active': !isPHP() && !isPython() && !isProxy() && isIndexHTML() && isFallbackHTML() }"
-						tooltips
-						tooltip-template="• disabled PHP<br>• index.html fallback routing"
-						tooltip-side="bottom"
-					>Frontend <span ng-include="'assets/img/brands/angular.svg'"></span> <span ng-include="'assets/img/brands/react.svg'"></span> <span ng-include="'assets/img/brands/vuejs.svg'"></span></button>
-					<button
-						type="button"
-						class="btn btn-sm btn-outline-light"
-						ng-click="setPreset('backend')"
-						ng-class="{ 'active': isPHP() && isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && !isDrupal() && !isMagento() }"
-						tooltips
-						tooltip-template="• enabled PHP<br>• index.php fallback routing"
-						tooltip-side="bottom"
-					>PHP <span ng-include="'assets/img/brands/php.svg'"></span> <span ng-include="'assets/img/brands/laravel.svg'"></span> <span ng-include="'assets/img/brands/symfony.svg'"></span> <span ng-include="'assets/img/brands/codeigniter.svg'""></span></button>
-					<button
-						type="button"
-						class="btn btn-sm btn-outline-light"
-						ng-click="setPreset('django')"
-						ng-class="{ 'active': isPython() && isDjango() && !isRoot() }"
-						tooltips
-						tooltip-template="• enabled Python<br>• Django rules<br>• <code>root</code> disabled"
-						tooltip-side="bottom"
-					>Django <span ng-include="'assets/img/brands/python.svg'"></span><span ng-include="'assets/img/brands/django.svg'"></span></button>
-					<button
-						type="button"
-						class="btn btn-sm btn-outline-light"
-						ng-class="{ 'active': isProxy() && !isRoot() }"
-						ng-click="setPreset('nodejs')"
-						tooltips
-						tooltip-template="• enabled reverse proxy"
-						tooltip-side="bottom"
-					>Node.js <span ng-include="'assets/img/brands/nodejs.svg'"></span></button>
-					<button
-						type="button"
-						class="btn btn-sm btn-outline-light"
-						ng-class="{ 'active': isPHP() && isIndexHTML() && isFallbackHTML() }"
-						ng-click="setPreset('spa')"
-						tooltips
-						tooltip-template="• enabled PHP<br>• index.html fallback routing<br>• index.php API routing"
-						tooltip-side="bottom"
-					>Single-page application</button>
-					<button
-						type="button"
-						class="btn btn-sm btn-outline-light"
-						ng-click="setPreset('wordpress')"
-						ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && isWordPress() && !isDrupal() && !isMagento() }"
-						tooltips
-						tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• WordPress security rules"
-						tooltip-side="bottom"
-					><span ng-include="'assets/img/brands/wordpress.svg'"></span> WordPress</button>
-					<button
-						type="button"
-						class="btn btn-sm btn-outline-light"
-						ng-click="setPreset('drupal')"
-						ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && isDrupal() && !isMagento() }"
-						tooltips
-						tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• Drupal security rules"
-						tooltip-side="bottom"
-					><span ng-include="'assets/img/brands/drupal.svg'"></span> Drupal</button>
-					<button
-						type="button"
-						class="btn btn-sm btn-outline-light"
-						ng-click="setPreset('magento')"
-						ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && !isDrupal() && isMagento() }"
-						tooltips
-						tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• Magento security rules"
-						tooltip-side="bottom"
-					><span ng-include="'assets/img/brands/magento.svg'"></span> Magento</button>
+					<div class="group">
+						<button
+							type="button"
+							class="btn btn-sm btn-outline-light"
+							ng-click="setPreset('frontend')"
+							ng-class="{ 'active': !isPHP() && !isPython() && !isProxy() && isIndexHTML() && isFallbackHTML() }"
+							tooltips
+							tooltip-template="• disabled PHP<br>• index.html fallback routing"
+							tooltip-side="bottom"
+						>Frontend <span ng-include="'assets/img/brands/angular.svg'"></span> <span ng-include="'assets/img/brands/react.svg'"></span> <span ng-include="'assets/img/brands/vuejs.svg'"></span></button>
+						<button
+							type="button"
+							class="btn btn-sm btn-outline-light"
+							ng-click="setPreset('backend')"
+							ng-class="{ 'active': isPHP() && isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && !isDrupal() && !isMagento() }"
+							tooltips
+							tooltip-template="• enabled PHP<br>• index.php fallback routing"
+							tooltip-side="bottom"
+						>PHP <span ng-include="'assets/img/brands/php.svg'"></span> <span ng-include="'assets/img/brands/laravel.svg'"></span> <span ng-include="'assets/img/brands/symfony.svg'"></span> <span ng-include="'assets/img/brands/codeigniter.svg'""></span></button>
+						<button
+							type="button"
+							class="btn btn-sm btn-outline-light"
+							ng-click="setPreset('django')"
+							ng-class="{ 'active': isPython() && isDjango() && !isRoot() }"
+							tooltips
+							tooltip-template="• enabled Python<br>• Django rules<br>• <code>root</code> disabled"
+							tooltip-side="bottom"
+						>Django <span ng-include="'assets/img/brands/python.svg'"></span><span ng-include="'assets/img/brands/django.svg'"></span></button>
+						<button
+							type="button"
+							class="btn btn-sm btn-outline-light"
+							ng-class="{ 'active': isProxy() && !isRoot() }"
+							ng-click="setPreset('nodejs')"
+							tooltips
+							tooltip-template="• enabled reverse proxy"
+							tooltip-side="bottom"
+						>Node.js <span ng-include="'assets/img/brands/nodejs.svg'"></span></button>
+						<button
+							type="button"
+							class="btn btn-sm btn-outline-light"
+							ng-class="{ 'active': isPHP() && isIndexHTML() && isFallbackHTML() }"
+							ng-click="setPreset('spa')"
+							tooltips
+							tooltip-template="• enabled PHP<br>• index.html fallback routing<br>• index.php API routing"
+							tooltip-side="bottom"
+						>Single-page application</button>
+						<button
+							type="button"
+							class="btn btn-sm btn-outline-light"
+							ng-click="setPreset('wordpress')"
+							ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && isWordPress() && !isDrupal() && !isMagento() }"
+							tooltips
+							tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• WordPress security rules"
+							tooltip-side="bottom"
+						><span ng-include="'assets/img/brands/wordpress.svg'"></span> WordPress</button>
+						<button
+							type="button"
+							class="btn btn-sm btn-outline-light"
+							ng-click="setPreset('drupal')"
+							ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && isDrupal() && !isMagento() }"
+							tooltips
+							tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• Drupal security rules"
+							tooltip-side="bottom"
+						><span ng-include="'assets/img/brands/drupal.svg'"></span> Drupal</button>
+						<button
+							type="button"
+							class="btn btn-sm btn-outline-light"
+							ng-click="setPreset('magento')"
+							ng-class="{ 'active': isIndexPHP() && isFallbackPHP() && !isFallbackHTML() && !isWordPress() && !isDrupal() && isMagento() }"
+							tooltips
+							tooltip-template="• enabled PHP<br>• index.php fallback routing<br>• Magento security rules"
+							tooltip-side="bottom"
+						><span ng-include="'assets/img/brands/magento.svg'"></span> Magento</button>
+					</div>
 				</div>
 			</div>
 		</header>
diff --git a/resources/scss/_header.scss b/resources/scss/_header.scss
index a2f85a2..0525c10 100644
--- a/resources/scss/_header.scss
+++ b/resources/scss/_header.scss
@@ -49,7 +49,7 @@ header {
 	.github {
 		@include media-breakpoint-up(lg) {
 			position: absolute;
-			right: 0;
+			right: 15px;
 			top: 10px;
 		}
 
@@ -106,11 +106,13 @@ header {
 		}
 	}
 
-	.title {
+	.sites .title,
+	.presets .title {
 		color: #eee;
 		font-size: 0.9rem;
+		line-height: 1.9rem;
 		font-style: italic;
-		vertical-align: -5px;
+		vertical-align: top;
 		margin-right: 4px;
 		text-align: center;
 
@@ -120,6 +122,26 @@ header {
 		}
 	}
 
+	.sites .group,
+	.presets .group {
+		@include media-breakpoint-up(lg) {
+			display: inline-block;
+			vertical-align: top;
+		}
+	}
+
+	.sites .group {
+		@include media-breakpoint-up(lg) {
+			width: calc(100% - 290px);
+		}
+	}
+
+	.presets .group {
+		@include media-breakpoint-up(lg) {
+			width: calc(100% - 64px);
+		}
+	}
+
 	.btn-outline-light {
 		box-shadow: none !important;
 		border-color: #999;