Make connection status much prettier.

Author: jawsper

barsystem/src/barsystem/gui/static/css/main.css

@@ -82,26 +82,9 @@ input[type=number] {
 	font-weight: bold;
 }
 
-#connection {
-	position: absolute;
-	top: 0;
-	left: 0;
-	z-index: 1001;
+.connection-status.ok {
+	color: green;
 }
-#connection.ok div {
-	border-color: green;
-	background-color: green;
-}
-#connection.fail div {
-	border-color: red;
-	background-color: red;
-}
-#connection div {
-	border-width: 1px;
-	border-style: solid;
-	border-color: transparent;
-	border-radius: 10px;
-	width: 20px;
-	height: 20px;
-	background-color: transparent;
+.connection-status  {
+	color: red;
 }

barsystem/src/barsystem/gui/templates/barsystem/index.html

@@ -76,8 +76,13 @@ <h3>Halp how does this work?</h3>
 </div>
 {% endblock %}
 
+{% block navextra %}
+<div class="navbar-left">
+<span class="navbar-text"><span id="connection" class="connection-status glyphicon glyphicon-signal"></span></span>
+</div>
+{% endblock %}
+
 {% block extracontent %}
-<div id="connection"><div></div></div>
 <form id="messageForm" method="post">
 {% csrf_token %}
 <input type="hidden" name="message" />

barsystem/src/barsystem/gui/templates/barsystem/products.html

@@ -208,5 +208,11 @@ <h4 class="modal-title">Help</h4>
 </li>
 </template>
 <!-- end template -->
-<div id="connection"><div></div></div>
+{% endblock %}
+
+
+{% block navextra %}
+<div class="navbar-left">
+<span class="navbar-text"><span id="connection" class="connection-status glyphicon glyphicon-signal"></span></span>
+</div>
 {% endblock %}