ui: VM ip addresses subview improvements

snf-cyclades-app/synnefo/ui/static/snf/css/main.css

@@ -3251,7 +3251,7 @@ div.reboot-dialog button.details:hover {
   margin-bottom: 0;
 }
 
-.machine .info-content.ips .ips .port-ip-item:hover {
+.machine .info-content.ips.ips .port-item:hover {
   background-color: #75A7BF;
 }
 
@@ -3266,6 +3266,10 @@ div.reboot-dialog button.details:hover {
   float: left;
 }
 
+.single .machine .info-content.ips .ips .model-item .ip {
+  padding-top: 5px;
+}
+
 .machine .info-content.ips .ips .model-item .type {
   float: left;
   margin-right: 10px;
@@ -3296,8 +3300,8 @@ div.reboot-dialog button.details:hover {
 }
 
 .machine .info-content.ips .ips {
-  width: 80%;
-  float: right;
+  width: 50%;
+  float: left;
 }
 
 .machine .info-content.ips .port-item:last-child {
@@ -3323,7 +3327,7 @@ div.reboot-dialog button.details:hover {
 }
 
 .machine .info-content.ips .port-item .network-header {
-  width: 18%;
+  width: 50%;
   float: left;
 }
 
@@ -3336,8 +3340,18 @@ div.reboot-dialog button.details:hover {
   width: 100%;
 }
 
+.single .machine .info-content.ips .ips,
+.single .machine .info-content.ips .port-item .network-header {
+  float: none;
+}
+
+.single .machine .info-content.ips .port-item .network-header {
+  padding: 5px;
+  margin-top: -10px;
+}
+  
+
 .machine .info-content.ips .port-item .port {
-  font-weight: bold;
 }
 
 .single .machine .info-content.ips {
@@ -3348,7 +3362,6 @@ div.reboot-dialog button.details:hover {
 .machine .info-content.ips {
     background-color: #84B7D0;
     padding: 0px 0px;
-    padding-left: 5px;
     font-size: 0.6em;
 }
 
@@ -3714,6 +3727,10 @@ div.machine a.manage-metadata:hover {
     font-size: 104%;
 }
 
+.single .ips-content.toggler-content {
+  padding: 0;
+}
+
 .single .toggler-content {
     background-color: #84B7D0;
     clear: both;

snf-cyclades-app/synnefo/ui/static/snf/js/ui/web/ui_icon_view.js

@@ -751,8 +751,7 @@
             var ports_view = new views.VMPortListView({
               collection: vm.ports, 
               container: ports_container,
-              parent: this,
-              truncate: 14
+              parent: this
             });
             this.ports_views[vm.id] = ports_view
             ports_view.show();

snf-cyclades-app/synnefo/ui/static/snf/js/ui/web/ui_single_view.js

@@ -270,7 +270,7 @@
               collection: vm.ports, 
               container: ports_container,
               parent: this,
-              truncate: 40
+              truncate: 55
             });
             this.ports_views[vm.id] = ports_view
             ports_view.show();

snf-cyclades-app/synnefo/ui/static/snf/js/ui/web/ui_vms_base_view.js

@@ -760,7 +760,7 @@
         if (!name) {
           name = 'Internet'
         }
-        var truncate_length = this.parent_view.options.truncate || 14;
+        var truncate_length = this.parent_view.options.truncate || 40;
         name = synnefo.util.truncate(name, truncate_length, '...');
         return name || 'Loading...';
       },

snf-cyclades-app/synnefo/ui/templates/partials/machines.html

@@ -68,17 +68,16 @@
 </div>
 
 <div id="vm-port-ip-tpl" class="hidden clearfix port-ip-item">
-  <div class="type" data-rv-text="model.type"></div>
+  <div class="type" data-rv-text="model.type|prefix IP "></div>
   <div class="ip" data-rv-text="model.ip_address"></div>
-  <div class="cidr" data-rv-text="model.subnet.cidr"></div>
 </div>
 
 <div id="vm-port-view-tpl">
+  <div class="ips" data-rv-collection-view="model.ips|VMPortIpsView"></div>
   <div class="clearfix network-header">
     <img data-rv-src="model.network.is_public|get_network_icon" />
     <div class="port" data-rv-text="model.network.name|get_network_name"></div>
   </div>
-  <div class="ips" data-rv-collection-view="model.ips|VMPortIpsView"></div>
 </div>
 
 <div id="vm-port-list-view-tpl" class="collection-list-view hidden info-content ips">

snf-cyclades-app/synnefo/ui/templates/partials/machines_icon.html

@@ -37,7 +37,7 @@
                         </div>
                         <div class="cont-toggler-wrapper ips">
                           <span class="info-header cont-toggler toggler">
-                            <span class="label">{% trans "ip addresses" %}</span>
+                            <span class="label">{% trans "IP addresses" %}</span>
                           </span>
                         </div>
                 </div>

snf-cyclades-app/synnefo/ui/templates/partials/machines_single.html

@@ -53,7 +53,7 @@
                     </div>
                     <div class="cont-toggler-wrapper toggler-header ips">
                       <span class="info-header cont-toggler toggler">
-                        <span class="label">{% trans "ip addresses" %}</span>
+                        <span class="label">{% trans "IP addresses" %}</span>
                       </span>
                     </div>
                   </div>