dashboard: limit widths

- virtual machines text is too long, change it to VMs on smaller res
- limit name/system on vm create from template

circle/dashboard/static/dashboard/dashboard.css

@@ -514,6 +514,17 @@ footer a, footer a:hover, footer a:visited {
   float: left;
 }
 
+
+.index-vm-list-host {
+  display: inline-block;
+  max-width: 25%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  float: left;
+  padding-top: 3px;
+}
+
 #dashboard-vm-list a small {
   padding-left: 10px;
 }
@@ -1051,3 +1062,22 @@ textarea[name="new_members"] {
   white-space: nowrap;
   text-align: center;
 }
+
+.vm-create-list-name {
+  display: inline-block;
+  max-width: 60%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  float: left;
+}
+
+
+.vm-create-list-system {
+  display: inline-block;
+  max-width: 40%;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  float: right;
+}

circle/dashboard/templates/dashboard/_vm-create-1.html

@@ -5,8 +5,14 @@
   {% for t in templates %}
   <div class="vm-create-template">
     <div class="vm-create-template-summary">
+      <span class="vm-create-list-name">
         {{ t.name }}
-      <span class="pull-right"><i class="fa fa-{{ t.os_type }}"></i> {{ t.system }}</span>
+      </span>
+      <span class="vm-create-list-system">
+        <i class="fa fa-{{ t.os_type }}"></i>
+        {{ t.system }}
+      </span>
+      <div class="clearfix"></div>
     </div>
     <div class="vm-create-template-details">
       <ul>

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

@@ -13,7 +13,14 @@
       <span class="btn btn-default btn-xs infobtn" title="{% trans "List of your current virtual machines. Favourited ones are ahead of others." %}"><i class="fa fa-info-circle"></i></span>
     </div>
     <h3 class="no-margin">
-      <i class="fa fa-desktop"></i> {% trans "Virtual machines" %}
+      <span class="visible-xs">
+        <i class="fa fa-desktop"></i>
+        {% trans "VMs" %}
+      </span>
+      <span class="hidden-xs">
+        <i class="fa fa-desktop"></i>
+        {% trans "Virtual machines" %}
+      </span>
     </h3>
   </div>
   <div class="list-group" id="vm-list-view">
@@ -25,7 +32,7 @@
           <i class="fa {{ i.get_status_icon }}" title="{{ i.get_status_display }}"></i>
           {{ i.name }}
         </span>
-        <small class="text-muted">
+        <small class="text-muted index-vm-list-host">
           {% if i.owner == request.user %}{{ i.short_hostname }}
           {% else %}{{i.owner.profile.get_display_name}}{% endif %}
         </small>