dashboard: cut too long templates names

circle/dashboard/static/dashboard/dashboard.css

@@ -448,3 +448,22 @@ footer a, footer a:hover, footer a:visited {
 #dashboard-vm-list a small {
   padding-left: 10px;
 }
+
+.index-template-list-name {
+  display: inline-block; 
+  max-width: 50%; 
+  text-overflow: ellipsis; 
+  white-space: nowrap; 
+  overflow: hidden; 
+  float: left;
+}
+
+#dashboard-template-list a small {
+  max-width: 50%;
+  float: left;
+  padding-top: 2px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  padding-left: 10px;
+}

circle/dashboard/templates/dashboard/index-templates.html

@@ -7,11 +7,15 @@
     <h3 class="no-margin"><i class="icon-puzzle-piece"></i> {% trans "Templates" %}
     </h3>
   </div>
-  <div class="list-group" id="vm-list-view">
+  <div class="list-group" id="dashboard-template-list">
     {% for t in templates %}
     <a href="{% url "dashboard.views.template-detail" pk=t.pk %}" class="list-group-item">
-      <i class="icon-{{ t.os_type }}"></i> {{ t.name }} <small class="text-muted">{{ t.system }}</small>
+      <span class="index-template-list-name">
+        <i class="icon-{{ t.os_type }}"></i> {{ t.name }} 
+      </span>
+      <small class="text-muted index-template-list-system">{{ t.system }}</small>
       <div class="pull-right vm-create" data-template="{{ t.pk }}"><i title="{% trans "Start vm instance" %}" class="icon-play"></i></div>
+      <div class="clearfix"></div>
     </a>
     {% empty %}
       <div class="alert alert-warning" style="margin: 10px;">