style: make more consistent styles

- Fix indentation in places
- User settings have better labels
- Lab info title now the same as others
- Add "empty" sections to be more helpful to the user. They are not
using links, since most of the "workflow" is handled by javascript.
- Update padding in places to better line up with other elements
- Add padding to bootstrap notifications (add check for messages to not
just have random padding on the top of the page)
- Remove unnecessary text in a form
- Remove card-body from table-only or list-only cards (lists and tables
are now flush with cards)
- Add bg-danger to not-working hosts
- Replace True/False text shown to the user with Yes/No
- Remove ":" from some headers
- Vertical buttons are now in a button group
- Add pre-wrap class to avoid pre from breaking box sizing on the
booking detail page
- Reduce table indent in pod card and add table overflow scrollbar

Signed-off-by: Jeremy Plsek <jeremyplsek@gmail.com>
Change-Id: If09dca2f2b7386c44eeeb817ef76e8f748e456da

1 files changed, 12 insertions, 10 deletions

diff --git a/src/templates/base.html b/src/templates/base.html
index 0b3f8c2..4011739 100644
--- a/src/templates/base.html
+++ b/src/templates/base.html
@@ -72,11 +72,11 @@
                 <nav class="navbar navbar-expand-lg border-bottom p-0 w-100 sidebar">
                     <div class="collapse navbar-collapse" id="sidebar">
                         <div class="list-group list-group-flush w-100 bg-light">
-                            <a href="/" class="list-group-item list-group-item-action bg-light">
+                            <a href="/" class="list-group-item list-group-item-action">
                                 Home
                             </a>
                             {% csrf_token %}
-                            <a class="list-group-item list-group-item-action bg-light" data-toggle="collapse"
+                            <a class="list-group-item list-group-item-action" data-toggle="collapse"
                                 href="#createList" role="button">
                                 Create <i class="fas fa-angle-down rotate"></i>
                             </a>
@@ -100,21 +100,21 @@
                                     Configure OPNFV
                                 </a>
                             </div>
-                            <a href="{% url 'resource:hosts' %}" class="list-group-item list-group-item-action bg-light">
+                            <a href="{% url 'resource:hosts' %}" class="list-group-item list-group-item-action">
                                 Hosts
                             </a>
                             {% if user.is_authenticated %}
-                                <a href="{% url 'account:users' %}" class="list-group-item list-group-item-action bg-light">
+                                <a href="{% url 'account:users' %}" class="list-group-item list-group-item-action">
                                     User List
                                 </a>
                             {% endif %}
-                            <a href="{% url 'booking:list' %}" class="list-group-item list-group-item-action bg-light">
+                            <a href="{% url 'booking:list' %}" class="list-group-item list-group-item-action">
                                 Booking List
                             </a>
-                            <a href="{% url 'booking:stats' %}" class="list-group-item list-group-item-action bg-light">
+                            <a href="{% url 'booking:stats' %}" class="list-group-item list-group-item-action">
                                 Booking Statistics
                             </a>
-                            <a class="list-group-item list-group-item-action bg-light" data-toggle="collapse"
+                            <a class="list-group-item list-group-item-action" data-toggle="collapse"
                                 href="#accountList" role="button">
                                 Account <i class="fas fa-angle-down rotate"></i>
                             </a>
@@ -132,10 +132,10 @@
                                     My Snapshots
                                 </a>
                             </div>
-                            <a href="{% url 'dashboard:all_labs' %}" class="list-group-item list-group-item-action bg-light">
+                            <a href="{% url 'dashboard:all_labs' %}" class="list-group-item list-group-item-action">
                                 Lab Info
                             </a>
-                            <a href="{% url 'notifier:messages' %}" class="list-group-item list-group-item-action bg-light">
+                            <a href="{% url 'notifier:messages' %}" class="list-group-item list-group-item-action">
                                 Inbox
                             </a>
                         </div>
@@ -150,7 +150,9 @@
                     </div>
                 </div>
                 {% endif %}
-                <div id="bsm">{% bootstrap_messages %}</div>
+                {% if messages %}
+                    <div id="bsm" class="mt-4">{% bootstrap_messages %}</div>
+                {% endif %}
                 <!-- Content block placed here -->
                 {% block content %}
                 {% endblock content %}