From 44df080b723acabf9b4fc194b083496846bf4cfd Mon Sep 17 00:00:00 2001
From: catborise <catborise@yahoo.com>
Date: Mon, 25 Nov 2019 11:02:50 +0300
Subject: [PATCH] Rearrange supported hypervisors list: if there are hypervisor
 support more than 5, it spans to multiple line which causes distortion.

---
 computes/templates/overview.html | 35 ++++++++++++++++++++++++--------
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/computes/templates/overview.html b/computes/templates/overview.html
index 81398b9..e6f824f 100644
--- a/computes/templates/overview.html
+++ b/computes/templates/overview.html
@@ -52,14 +52,33 @@
         </div>
         <div class="col-xs-8 col-sm-9">
             <p>{{ hostname }}</p>
-            <p>{% for arch, hpv in hypervisor.items %}
-                  <span class="glyphicon glyphicon-chevron-right"></span>
-                  <span class="label label-default">{{ arch }}</span>
-                  {% for h in hpv %}
-                      <span class="label label-primary">{{ h }}</span>
-                  {% endfor %}
-                {% endfor %}
-            </p>
+            <p><div class="btn-group" style="margin-left: 8px">
+            {% for arch, hpv in hypervisor.items %}
+                {% if forloop.counter < 4 %}
+                <div class="btn-group" >
+                    <button class="btn btn-xs btn-default dropdown-toggle" type="button" id="dropdownMenuButton{{ forloop.counter0 }}" data-toggle="dropdown">
+                        {{ arch }}
+                        <span class="caret"></span>
+                    </button>
+                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton{{ forloop.counter0 }}" role="menu">
+                        {% for h in hpv %}
+                            <li><a href="#">{{ h }}</a></li>
+                        {% endfor %}
+                    </ul>
+                </div>
+                {% else %}
+                    <button class="btn btn-xs btn-default dropdown-toggle" type="button" id="dropdownMenuButton{{ forloop.counter0 }}" data-toggle="dropdown">
+                        {{ hypervisor|length }} {% trans 'more' %}...
+                        <span class="caret"></span>
+                    </button>
+                    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton{{ forloop.counter0 }}" role="menu">
+                        {% for arc in hypervisor.keys %}
+                                <li><a href="#">{{ arc }}</a></li>
+                        {% endfor %}
+                    </ul>
+                {% endif %}
+            {% endfor %}
+            </div></p>
             <p>{{ emulator }}</p>
             <p>
                 <span class="label label-default">Qemu</span>