Merge pull request #81 from innogames/bootstrap_bugfixes

Bootstrap bugfixes

serveradmin/common/static/css/serveradmin.css

@@ -17,11 +17,6 @@ html, body {
     font-size: 0.9rem;
 }
 
-.list-group-item label {
-    position: relative;
-    bottom: 3px;
-}
-
 .form-group label {
     font-weight: bold;
 }
@@ -110,4 +105,23 @@ u {
     border: none !important;
     background: var(--background-primary) !important;
     color: #212529 !important;
+}
+
+/* Not all browser support appearance attribute yet */
+.custom-select {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+}
+
+a[aria-expanded=true]:before {
+    content: "Hide";
+}
+
+a[aria-expanded=false]:before {
+    content: "Show";
+}
+
+#spinner {
+    animation-play-state: paused;
 }

serveradmin/common/static/js/serveradmin.js

@@ -7,23 +7,58 @@ $(document).ready(function() {
     // This is our progress spinner we can call e.g. spinner.enable() from
     // everywhere when ever we need it for example when doing long running
     // ajax requests for the servershell search.
-    spinner = {
+    window.spinner = {
+        _id: null,
+        _running: 0,
+        _spinner: $('#spinner'),
+        _counter: $('#spinner-counter'),
+        _value: $('#spinner-counter-value'),
+        _toggle_css: function() {
+            if (this._spinner.css('display') === 'none') {
+                this._spinner.show();
+                this._counter.show();
+            }
+
+            if (this._spinner.hasClass('text-success')) {
+                this._spinner.removeClass('text-success');
+                this._spinner.addClass('text-secondary');
+
+                this._counter.removeClass('text-success');
+                this._counter.addClass('text-secondary');
+
+                this._spinner.css('animation-play-state', 'paused');
+            }
+            else {
+                this._spinner.removeClass('text-secondary');
+                this._spinner.addClass('text-success');
+
+                this._counter.removeClass('text-secondary');
+                this._counter.addClass('text-success');
+
+                this._spinner.css('animation-play-state', 'running');
+            }
+        },
         enable: function () {
-            $('#spinner').show();
-            $('#spinner-counter').show();
-
-            let update_spinner = function() {
-                let element = $('#spinner-counter-time');
-                element.html(Number.parseInt(element.html()) + 1);
-                setTimeout(update_spinner, 1);
-            };
-            setTimeout(update_spinner, 1);
+            this._running++;
+            if (this._running > 1) {
+                return;
+            }
+
+            this._value.html(0);
+            this._toggle_css();
+
+            this._id = setInterval(function () {
+                spinner._value.html(Number.parseInt(spinner._value.html()) + 1);
+            }, 1);
         },
         disable: function () {
-            $('#spinner').hide();
-            $('#spinner-counter').hide();
-            $('#spinner-counter-time').html(0);
-            $('#spinner-counter-unit').html('ms');
+            this._running--;
+
+            if (this._running === 0) {
+                this._toggle_css();
+                clearInterval(this._id);
+            }
         },
+
     }
 });

serveradmin/common/templates/base.html

@@ -40,10 +40,10 @@
         </ul>
     </div>
 
-    <span id="spinner-counter" class="text-success" style="display: none">
-        <span id="spinner-counter-time">0</span> <span id="spinner-counter-unit">ms</span> &nbsp;
+    <span id="spinner-counter" class="text-secondary" style="display: none;">
+        <span id="spinner-counter-value">0</span> ms&nbsp;
     </span>
-    <div id="spinner" class="spinner-border text-success" style="display: none;" role="status">
+    <div id="spinner" class="spinner-border text-secondary" role="status" style="display: none;">
         <span class="sr-only">Loading...</span>
     </div>
 </nav>
@@ -52,7 +52,7 @@
     {% if messages %}
         {% for message in messages %}
             <div class="alert {{ message.level_tag|bootstrap_alert }} alert-dismissible fade show" role="alert">
-                <strong>{{ message }} {{ message.level_tag }}</strong>
+                <strong>{{ message }}</strong>
                 <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                 </button>
@@ -75,4 +75,3 @@
 {% block additional_scripts %}{% endblock %}
 </body>
 </html>
-

serveradmin/common/templatetags/common.py

@@ -42,3 +42,25 @@ def bootstrap_alert(level_tag):
         'error': 'danger',
     }
     return 'alert-' + django_bootstrap[level_tag]
+
+
+@register.filter
+def group(items, number_of_groups):
+    """Group items into number of groups
+
+    Takes a countable items and divides it into the desired number of groups.
+
+    :param items:
+    :param number_of_groups:
+    :return:
+    """
+
+    if not items:
+        return []
+
+    groups = list()
+    step = round(len(items) / number_of_groups)
+    for counter in range(0, len(items), step):
+        groups.extend([items[counter:counter + step]])
+
+    return groups

serveradmin/graphite/templates/graphite/graph_table.html

@@ -121,9 +121,3 @@ <h5>{{ name }}</h5>
     </div>
 </div>
 {% endblock %}
-
-{% block additional_body %}
-    {% if not is_ajax %}
-        <script type="text/javascript" src="{{ STATIC_URL }}js/graphite.js"></script>
-    {% endif %}
-{% endblock %}

serveradmin/resources/static/css/resources.css

@@ -0,0 +1,5 @@
+.graph_sprite {
+     display: block;
+     width: 150px;
+     height: 100px;
+}