vm listing improved

one/templates/box-vmlist.html

-
-        <div class="contentblock" id="state">
-            <h2>Saját gépek</h2>
-            <div class="content">
 {% if instances %}
-<table style="width:388px">
-<!--<tr><th>#</th><th>Megnevezés</th><th>Állapot</th><th style="width: 96px">Műveletek</th></tr>-->
 {% for i in instances %}
-<tr style="line-height: 22px;">
-	<td>{{i.id}}</td>
-	<td><a href="/vm/show/{{i.id}}/" title="{{i.name}}">{{i.name|truncatechars:20}}</td>
-	<td>{{i.state}}</td>
-	<td>
-{% if i.state == 'ACTIVE' %}
-<a href="{{i.get_connect_uri}}" title="Csatlakozás"><img src="/static/icons/Video-display.png" alt="⌨" /></a><a href="/vm/suspend/{{i.id}}/" onclick="alert('Hamarosan a mozikban.'); return false" title="Felfüggesztés"><img src="/static/icons/Media-playback-pause.png" alt="||" /></a><a href="/vm/delete/{{i.id}}/" onclick="return confirm('Biztosan törli a gépet?')" title="Törlés"><img src="/static/icons/Edit-delete-2.png" alt="⌫" /></a><a href="/vm/reset/{{i.id}}/" onclick="alert('Hamarosan a mozikban.'); return false" title="Újraindítás"><img src="/static/icons/View-refresh.png" alt="↺" /></a>
-{% endif %}
-{% if i.state == 'PENDING' %}
-<img src="/static/load-2.gif" /> indítás...
-{% endif %}
-{% if i.state == 'SUSPENDED' %}
-<a href="/vm/continue/{{i.id}}/" title="Folytatás"><img src="/static/icons/Media-playback-start.png" alt=">" /></a>
-<a href="/vm/delete/{{i.id}}/" onclick="return confirm('Biztosan törli a gépet?')" title="Törlés"><img src="/static/icons/Edit-delete-2.png" alt="⌫" /></a>
-{% endif %}
-{% if i.state == 'FAILED' %}
-<a href="/vm/delete/{{i.id}}/" title="Törlés"><img src="/static/icons/Edit-delete-2.png" alt="⌫" /></a>
-{% endif %}
-
-	</td>
-</tr>
-
+<li class="wm">
+    <div class="summary">
+        <!--<div class="id">161</div>-->
+        <div class="name {% if i.state == 'ACTIVE' %}wm-on{% else %}wm-off{% endif %}">
+            <a href="/vm/show/{{i.id}}/" title="{{i.name}}">{{i.name|truncatechars:20}}</a>
+        </div>
+        <div class="actions">
+        	{% if i.state == 'ACTIVE' %}
+			<a href="{{i.get_connect_uri}}" title="Csatlakozás"><img src="static/icons/plug.png" alt="connect" /></a>
+			<a href="/vm/suspend/{{i.id}}/" onclick="alert('Hamarosan a mozikban.'); return false" title="Felfüggesztés"><img src="/static/icons/control-pause.png" alt="pause" /></a>
+			<a href="/vm/delete/{{i.id}}/" onclick="return confirm('Biztosan törli a gépet?')" title="Törlés"><img src="/static/icons/minus-circle.png" alt="delete" /></a>
+			<a href="/vm/reset/{{i.id}}/" onclick="alert('Hamarosan a mozikban.'); return false" title="Újraindítás"><img src="/static/icons/View-refresh.png" alt="↺" /></a>
+			{% endif %}
+			{% if i.state == 'PENDING' %}
+			<img src="/static/load-2.gif" /> indítás...
+			{% endif %}
+			{% if i.state == 'SUSPENDED' %}
+			<a href="/vm/continue/{{i.id}}/" title="Folytatás"><img src="/static/icons/control.png" alt="resume" /></a>
+			<a href="/vm/delete/{{i.id}}/" onclick="return confirm('Biztosan törli a gépet?')" title="Törlés"><img src="/static/icons/minus-circle.png" alt="delete" /></a>
+			{% endif %}
+			{% if i.state == 'FAILED' %}
+			<a href="/vm/delete/{{i.id}}/" title="Törlés"><img src="/static/icons/minus-circle.png" alt="delete" /></a>
+			{% endif %}
+        </div>
+        <div class="status">
+            {{i.state}}
+        </div>
+        <div class="clear"></div>
+    </div>
+    <div class="details" style="display: none">
+        <h3>Részletek</h3>
+        <ul>
+            <li class="name">Gép neve: <span class="value">{{i.name}}</span></li>
+            <li class="os-linux">Operációs rendszer: <span class="value">{{i.template.disk.name}}</span></li>
+            <li class="type">Instance típus: <span class="value">{{i.template.instance_type.name}}</span></li>
+            <li class="date">Létrehozás dátuma: <span class="value">{{i.created_at}}</span></li>
+        </ul>
+    </div>
+</li>
 {% endfor %}
-</table>
 {% else %}
-<p>Nem fut egy gép sem.</p>
-{% endif %}
-            </div>
+<div id="new-wm-tooltip" style="display: none">
+    <div id="new-wm-tooltip-container">
+        <p>
+            Még nem indított egy gépet sem.
+        </p>
+        <p>
+            Válasszon sablont, és iziben használhatja a kiválasztott rendszert.
+        </p>
     </div>
+</div>
+{% endif %}
\ No newline at end of file