ui - centering things without breaking sticky navbar and menu

This commit is contained in:
bunkerity 2021-08-09 17:10:26 +02:00
parent bcd421de09
commit 0573ba7b5a
No known key found for this signature in database
GPG Key ID: 3D80806F12602A7C
5 changed files with 40 additions and 32 deletions

View File

@ -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

View File

@ -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" %}

View File

@ -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>

View File

@ -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"] }}

View File

@ -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"] }}