From 0573ba7b5abf89ede5dadeaa5cc4f715a9042838 Mon Sep 17 00:00:00 2001
From: bunkerity <contact@bunkerity.com>
Date: Mon, 9 Aug 2021 17:10:26 +0200
Subject: [PATCH] ui - centering things without breaking sticky navbar and menu

---
 examples/web-ui/docker-compose.yml |  4 ++--
 ui/templates/base.html             | 10 +++++++---
 ui/templates/home.html             | 22 +++++++++-------------
 ui/templates/instances.html        | 18 +++++++++++-------
 ui/templates/services.html         | 18 +++++++++++-------
 5 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/examples/web-ui/docker-compose.yml b/examples/web-ui/docker-compose.yml
index fcb0fdb5..7fd3be10 100644
--- a/examples/web-ui/docker-compose.yml
+++ b/examples/web-ui/docker-compose.yml
@@ -24,7 +24,7 @@ services:
       - USE_CLIENT_CACHE=yes
       - USE_GZIP=yes
       - USE_API=yes
-      - API_URI=/ChangeMeToSomethingHardToGuess                      # change it to something hard to guess + must match API_URI for myui service
+      - API_URI=/ChangeMeToSomethingHardToGuess                      # change it to something hard to guess + must match API_URI from myui service
       - admin.example.com_SERVE_FILES=no
       - admin.example.com_USE_REVERSE_PROXY=yes
       - admin.example.com_REVERSE_PROXY_URL=/admin/                  # change it to something hard to guess
@@ -44,7 +44,7 @@ services:
     environment:
       - ABSOLUTE_URI=https://admin.example.com/admin/ # change it to your full URI
       - DOCKER_HOST=tcp://myuiproxy:2375
-      - API_URI=/ChangeMeToSomethingHardToGuess
+      - API_URI=/ChangeMeToSomethingHardToGuess       # must match API_URI from bunkerized-nginx
       - ADMIN_USERNAME=admin                          # change it to something hard to guess
       - ADMIN_PASSWORD=changeme                       # change it to a good password
 
diff --git a/ui/templates/base.html b/ui/templates/base.html
index dca42a81..939f2db8 100644
--- a/ui/templates/base.html
+++ b/ui/templates/base.html
@@ -9,9 +9,13 @@
 
 		{% include "menu.html" %}
 
-		<div class="container d-flex justify-content-center align-items-center" style="height: 100%;">
-			{% block content %}{% endblock %}
-		</div>
+		<main class="flex-shrink-0 text-center">
+			<div class="container">
+				{% block content %}{% endblock %}
+			</div>
+		</main>
+		<!--<div class="flex-shrink-0 container d-flex justify-content-center align-items-center" style="height: 100%; padding-top: 50px;">
+		</div>-->
 
 		{% include "footer.html" %}
 
diff --git a/ui/templates/home.html b/ui/templates/home.html
index 1808fbbf..5876b40a 100644
--- a/ui/templates/home.html
+++ b/ui/templates/home.html
@@ -2,21 +2,17 @@
 
 {% block content %}
 
-<div class="d-flex text-center justify-content-center">
+<div class="row justify-content-center">
 
-	<div class="card border-0" style="width: 30rem;">
-
-		<img src="img/logo.png" class="card-img-top" />
-
-		<div class="row row-cols-1 row-cols-md-2">
-			<div class="col pt-3">
-				<span class="badge bg-primary">{{ instances_number }}</span> bunkerized-nginx instances
-			</div>
-			<div class="col pt-3">
-				<span class="badge bg-primary">{{ services_number }}</span> web services
-			</div>
-		</div>
+	<div class="col col-12">
+		<img src="img/logo.png" style="width: 300px;" />
+	</div>
 
+	<div class="col col-12 mt-20">
+		<span class="badge bg-primary">{{ instances_number }}</span> bunkerized-nginx instances
+	</div>
+	<div class="col col-12 mt-20">
+		<span class="badge bg-primary">{{ services_number }}</span> web services
 	</div>
 
 </div>
diff --git a/ui/templates/instances.html b/ui/templates/instances.html
index 1fc0e517..12b985c0 100644
--- a/ui/templates/instances.html
+++ b/ui/templates/instances.html
@@ -5,16 +5,20 @@
 <div class="row justify-content-center">
 
 	{% if operation != "" %}
-	<div class="col col-12 col-lg-4 mt-5 text-center">
-		<div class="alert alert-primary alert-dismissible fade show text-break" role="alert">
-			{{ operation }}
-			<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+	<div class="col col-12">
+		<div class="row justify-content-center">
+			<div class="col col-12 col-lg-4">
+				<div class="alert alert-primary alert-dismissible fade show text-break" role="alert">
+					{{ operation }}
+					<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+				</div>
+			</div>
 		</div>
 	</div>
 	{% endif %}
 
 	{% if instances|length == 0 %}
-	<div class="alert alert-primary text-center">
+	<div class="col col-12 alert alert-primary">
 		No instance to show...
 	</div>
 	{% endif %}
@@ -27,7 +31,7 @@
 			{% set color = "danger" %}
 		{% endif %}
 
-	<div class="col col-12">
+	<div class="col col-12 col-lg-6">
 		<form id="form-instance-{{ instance["id"] }}">
 			<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
 			<input type="hidden" name="INSTANCE_ID" value="{{ instance["id"] }}">
@@ -47,7 +51,7 @@
 					</ul>
 				</div>
 			</div>
-			<div class="card-body text-dark">
+			<div class="card-body text-dark text-center">
 				<h5 class="card-title">
 					Status : {{ instance["status"] }}<br>
 					Type : {{ instance["type"] }}
diff --git a/ui/templates/services.html b/ui/templates/services.html
index f6800d23..bd1aa676 100644
--- a/ui/templates/services.html
+++ b/ui/templates/services.html
@@ -5,20 +5,24 @@
 <div class="row justify-content-center">
 
 	{% if operation != "" %}
-	<div class="col col-12 col-lg-4 mt-5 text-center">
-		<div class="alert alert-primary alert-dismissible fade show text-break" role="alert">
-			{{ operation }}
-			<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+	<div class="col col-12">
+		<div class="row justify-content-center">
+			<div class="col col-12 col-lg-4">
+				<div class="alert alert-primary alert-dismissible fade show text-break" role="alert">
+					{{ operation }}
+					<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+				</div>
+			</div>
 		</div>
 	</div>
 	{% endif %}
 
-	<div class="col col-12 mb-3 text-center">
+	<div class="col col-12 mb-3">
 		<button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#modal-new"><i class="fas fa-plus"></i> New</button>
 	</div>
 
 	{% if services|length == 0 %}
-	<div class="alert alert-primary text-center">
+	<div class="col col-12 alert alert-primary text-center">
 		No service to show...
 	</div>
 	{% endif %}
@@ -27,7 +31,7 @@
 
 		{% set id_server_name = service["SERVER_NAME"].replace(".", "-") %}
 
-	<div class="col col-12 col-lg-4">
+	<div class="col col-12 col-lg-6">
 		<div class="card border-primary mb-3" style="max-width: 80rem;">
 			<div class="card-header border-primary bg-primary text-white">
 				{{ service["SERVER_NAME"] }}