From 6d82c2820b96757b933321d86b70e7ce23da447e Mon Sep 17 00:00:00 2001
From: Real-Gecko <alexandrbezenkov@gmail.com>
Date: Mon, 25 May 2020 17:32:36 +0600
Subject: [PATCH] Fix instance bottom bar overlapping main content

---
 instances/templates/bottom_bar.html | 31 +++++++++++++++++++++++++
 instances/templates/instance.html   | 36 ++++-------------------------
 static/css/webvirtcloud.css         |  4 ++++
 3 files changed, 40 insertions(+), 31 deletions(-)
 create mode 100644 instances/templates/bottom_bar.html

diff --git a/instances/templates/bottom_bar.html b/instances/templates/bottom_bar.html
new file mode 100644
index 0000000..0678129
--- /dev/null
+++ b/instances/templates/bottom_bar.html
@@ -0,0 +1,31 @@
+{% load i18n %}
+<nav class="navbar navbar-default navbar navbar-fixed-bottom">
+    <div class="container">
+        <div class="navbar-header">
+            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar_bottom" aria-expanded="false" aria-controls="navbar">
+                <span class="sr-only">{% trans 'Toggle navigation' %}</span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </button>
+            <a class="navbar-brand" href="#">{% trans 'HOST' %}</a>
+        </div>
+        <div id="navbar_bottom" class="navbar-collapse collapse">
+            <ul class="nav navbar-nav">
+                <li>
+                    <a class="navbar-link" href="{% url 'overview' compute.id %}">
+                        <i class="fa fa-server"></i>
+                        {{ compute.name }} {% if compute.name != compute.hostname %} - {{ compute.hostname }}{% endif %}
+                    </a>
+                </li>
+                <li>
+                    <a href="{% url 'instances' compute.id %}"><i class="fa fa-desktop"></i> {% trans "Instances" %}</a>
+                </li>
+                <li class="active">
+                    <a href="{% url 'instance' compute.id vname %}"><i class="fa fa-hdd-o"></i> {{ vname }}</a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>
+<div class="bottom-bar-margin"></div>
diff --git a/instances/templates/instance.html b/instances/templates/instance.html
index f644e5a..a93dbf8 100644
--- a/instances/templates/instance.html
+++ b/instances/templates/instance.html
@@ -4,37 +4,6 @@
 {% block title %}{% trans "Instance" %} - {{ vname }}{% endblock %}
 {% block content %}
     {% include 'pleasewaitdialog.html' %}
-    {% if bottom_bar %}
-        <nav class="navbar navbar-default navbar navbar-fixed-bottom">
-            <div class="container">
-                <div class="navbar-header">
-                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar_bottom" aria-expanded="false" aria-controls="navbar">
-                        <span class="sr-only">{% trans 'Toggle navigation' %}</span>
-                        <span class="icon-bar"></span>
-                        <span class="icon-bar"></span>
-                        <span class="icon-bar"></span>
-                    </button>
-                    <a class="navbar-brand" href="#">{% trans 'HOST' %}</a>
-                </div>
-                <div id="navbar_bottom" class="navbar-collapse collapse">
-                    <ul class="nav navbar-nav">
-                        <li>
-                            <a class="navbar-link" href="{% url 'overview' compute.id %}">
-                                <i class="fa fa-server"></i>
-                                {{ compute.name }} {% if compute.name != compute.hostname %} - {{ compute.hostname }}{% endif %}
-                            </a>
-                        </li>
-                        <li>
-                            <a href="{% url 'instances' compute.id %}"><i class="fa fa-desktop"></i> {% trans "Instances" %}</a>
-                        </li>
-                        <li class="active">
-                            <a href="{% url 'instance' compute.id vname %}"><i class="fa fa-hdd-o"></i> {{ vname }}</a>
-                        </li>
-                    </ul>
-                </div>
-            </div>
-        </nav>
-    {% endif %}
     <!-- Page Heading -->
      <div>
         <div>
@@ -1690,6 +1659,11 @@
             </div>
         </div>
     </div>
+
+    {% if bottom_bar %}
+        {% include 'bottom_bar.html' %}
+    {% endif %}
+
 {% endblock %}
 {% block script %}
 <script src="{% static "js/ace.js" %}" type="text/javascript" charset="utf-8"></script>
diff --git a/static/css/webvirtcloud.css b/static/css/webvirtcloud.css
index 7789169..0bdbba5 100644
--- a/static/css/webvirtcloud.css
+++ b/static/css/webvirtcloud.css
@@ -150,4 +150,8 @@ p {
 .multipleselect-on {
     color:#ffffff;
     background-color:#000099;
+}
+
+.bottom-bar-margin {
+    margin-top: 65px;
 }
\ No newline at end of file