commit 656c135b06498dc00fd0e27e71ab7f06b7571697
Author: Olga Brani <olgabrani@grnet.gr>
Date:   Sun Nov 10 21:32:34 2013 +0200

    new ui: vm-list list view initial commit

diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js
index c14c9c4..21fd085 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/common.js
@@ -33,6 +33,7 @@ ui.setSidebarHeight = function(){
     var h1= WindowHeight - $('.header').outerHeight();
     var h2= $('.main').outerHeight();
     $('.lt-sidebar').height((h2>h1) ? h2 : h1);
+    $('.lt-bar').height((h2>h1) ? h2 : h1);
 }
 
 
@@ -65,46 +66,6 @@ ui.entitiesActionsEnabled = function(){
     }
 }
 
-ui.entitiesActionsInit = function(){
-
-    // TODO: refactor this
-    $('.entities a').click(function(){
-        if ($(this).attr('data-reveal-id')) {
-            $('.entities li .more').hide();
-        }
-    })
-
-    if ($('.entities .items-list >li').length == 1) {
-        $('.overlay-wrapper').addClass('no-vm');
-    }
-    $('.entities li .more').each(function(){
-        var width = $(this).parent('li').outerWidth()  + 20;
-        $(this).css('width', width);
-    })
-    $('.entities li .img-wrap').mouseenter(function(e) {
-        var that = this;
-        setTimeout(function(){
-            if ($(that).closest('.container').siblings('.more').length>0) {
-                $(that).closest('.container').fadeOut(100,'easeInCirc');
-                $(that).closest('.container').siblings('.more').fadeIn(300,'easeInCirc');
-            }
-        },50);
-    });
-    $('.entities li .more').mouseleave(function(e) {
-        $(this).fadeOut(200, function() {
-            $(this).siblings('.container').fadeIn('fast');
-        });
-    });
-    $('.entities .items-list > li').mouseleave(function(e){
-        var that = this;
-        setTimeout(function(){
-            $(that).find('.more').fadeOut(200, function() {
-                $(this).siblings('.container').fadeIn('fast');
-            });
-        },100)
-    });
-}
-
 /*
 * In order for the editable value functionality to work, the html markup
 * should be:
@@ -231,6 +192,7 @@ function goToByScroll(id){
 /*
 * functions concerning checkboxes and radiobuttons links
 */
+
 ui.changeCheckboxState =function(checkbox_link) {
      $(checkbox_link).find('.snf-checkbox-unchecked, .snf-checkbox-checked').toggleClass('snf-checkbox-unchecked snf-checkbox-checked');
 }
@@ -263,7 +225,7 @@ ui.expandDownArea = function(arrow_link, area) {
 
 $(document).ready(function(){
 
-
+    ui.setSidebarHeight();
     $('#hd-search .hd-icon-search').click(function(e){
         var that = this;
         $(this).parents('.hd-search').toggleClass('hd-open');
@@ -274,8 +236,43 @@ $(document).ready(function(){
         }
     })
 
+    $('.entities a').click(function(){
+        if ($(this).attr('data-reveal-id')) {
+            $('.entities li .more').hide();
+        }
+    });
+
+    if ($('.entities .items-list >li').length == 1) {
+        $('.overlay-wrapper').addClass('no-vm');
+    };
+    $('.entities li .more').each(function(){
+        var width = $(this).parent('li').outerWidth()  + 20;
+        $(this).css('width', width);
+    });
+
+    $('.items-list li .img-wrap').on("mouseenter", function(e) {
+        var that = this;
+        if ($(this).parents('.entities').hasClass('grid-view')) {
+            if ($(that).parent('.container').siblings('.more').length>0) {
+                $(that).parent('.container').fadeOut(50,'easeInCirc');
+                $(that).parent('.container').siblings('.more').fadeIn(150,'easeInCirc');
+            }
+        }
+    });
+    $('.entities li .more').mouseleave(function(e) {
+        $(this).fadeOut(50, function() {
+            $(this).siblings('.container').fadeIn(50);
+        });
+    });
+    $('.grid-view .items-list > li').mouseleave(function(e){
+        var that = this;
+        setTimeout(function(){
+            $(that).find('.more').fadeOut(200, function() {
+                $(this).siblings('.container').fadeIn('fast');
+            });
+        },50)
+    });
 
-    ui.setSidebarHeight();
     ui.closeDiv($('.info .close'), '.info');
     ui.editable();
     ui.overlay();
@@ -314,8 +311,6 @@ $(document).ready(function(){
         }
     })
 
-    ui.entitiesActionsInit();
-    
     $('.new-btn a.current').click(function(e){
         e.preventDefault();
     })
@@ -390,18 +385,30 @@ $(document).ready(function(){
         e.preventDefault();
         $('.view-type .grid span').removeClass('current');
         $(this).find('span').addClass('current');
-        $('.items-list').removeClass('small-block-grid-2 large-block-grid-3');
-        $('.items-list').addClass('list-view');
+        $('.entities').removeClass('grid-view');
+        $('.entities').addClass('list-view');
     });
 
      $('.view-type .grid').click(function(e){
         e.preventDefault();
         $('.view-type .list span').removeClass('current');
         $(this).find('span').addClass('current');
-        $('.items-list').addClass('small-block-grid-2 large-block-grid-3');
-        $('.items-list').removeClass('list-view');
+        $('.entities').addClass('grid-view');
+        $('.entities').removeClass('list-view');
     });
 
+     $('.lt-bar .select').click(function(e){
+        $(this).find('span').toggleClass('snf-checkbox-checked snf-checkbox-unchecked');
+        $(this).find('em').toggle();
+        if ( $(this).find('span').hasClass('snf-checkbox-unchecked')){
+            $('.list-view  li .check span').removeClass('snf-checkbox-checked');
+            $('.list-view  li .check span').addClass('snf-checkbox-unchecked');
+        } else {
+            $('.list-view  li .check span').addClass('snf-checkbox-checked');
+            $('.list-view  li .check span').removeClass('snf-checkbox-unchecked');
+        }
+     });
+
     // set filter visible
     $('.filter-menu .filter').click(function(e) {
         e.preventDefault();
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/foundation/foundation.tooltips.js b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/foundation/foundation.tooltips.js
index 1696e2a..a977ba9 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/foundation/foundation.tooltips.js
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/javascripts/foundation/foundation.tooltips.js
@@ -12,6 +12,7 @@
       selector : '.has-tip',
       additionalInheritableClasses : [],
       tooltipClass : '.tooltip',
+      posBottom: 10,
       tipTemplate : function (selector, content) {
         return '<span data-selector="' + selector + '" class="' 
           + Foundation.libs.tooltips.settings.tooltipClass.substring(1) 
@@ -111,6 +112,7 @@
 
     reposition : function (target, tip, classes) {
       var width, nub, nubHeight, nubWidth, column, objPos;
+      var self = this;
 
       tip.css('visibility', 'hidden').show();
 
@@ -129,14 +131,14 @@
         }).end();
       };
 
-      objPos(tip, (target.offset().top + this.outerHeight(target) + 10), 'auto', 'auto', target.offset().left, width);
+      objPos(tip, (target.offset().top + this.outerHeight(target) + self.settings.posBottom), 'auto', 'auto', target.offset().left, width);
 
       if ($(window).width() < 767) {
-        objPos(tip, (target.offset().top + this.outerHeight(target) + 10), 'auto', 'auto', 12.5, $(this.scope).width());
+        objPos(tip, (target.offset().top + this.outerHeight(target) + self.settings.posBottom), 'auto', 'auto', 12.5, $(this.scope).width());
         tip.addClass('tip-override');
         objPos(nub, -nubHeight, 'auto', 'auto', target.offset().left);
       } else {
-        objPos(tip, (target.offset().top + this.outerHeight(target) + 10), 'auto', 'auto', target.offset().left, width);
+        objPos(tip, (target.offset().top + this.outerHeight(target) + self.settings.posBottom), 'auto', 'auto', target.offset().left, width);
         tip.removeClass('tip-override');
         if (classes && classes.indexOf('tip-top') > -1) {
           objPos(tip, (target.offset().top - this.outerHeight(tip)), 'auto', 'auto', target.offset().left, width)
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_common.scss b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_common.scss
index 693474e..8b10180 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_common.scss
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_common.scss
@@ -269,7 +269,7 @@ body {
 }
 
 .main {
-	padding:0 10px;
+	padding:0 $main-padding-horizontal;
 }
 
 /* Header ----------------------------------------------- */
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_items-list.scss b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_items-list.scss
index b70210c..d9a4136 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_items-list.scss
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_items-list.scss
@@ -1,14 +1,49 @@
 /* List view for VMs, networks  */
+.entities {
+	position:relative;
+}
 
-.items-list {
-	@include block-grid(2, 0, true);
-	padding-left:1px;
-	@media #{$small} {
-		@include block-grid(4, 0, true);
+.grid-view {
+	.lt-bar {
+		display: none;
+	}
+	.items-list {
+		@include block-grid(2, 0, true);
 		padding-left:1px;
-	};
-	background:url(../images/dashed_atom.png) repeat-y left center;
+		@media #{$small} {
+			@include block-grid(4, 0, true);
+			padding-left:1px;
+		};
+		background:url(../images/dashed_atom.png) repeat-y left center;
 
+		&>li {
+			height:215px;
+			.check {
+				display: none;
+			}
+			.info {
+				display: none;
+			}
+			.img-wrap {
+				margin-bottom: 16px;
+				height:60px;
+			}
+			.container {
+				height:160px;
+				margin: 16px 20px 20px;
+				position: relative;
+				line-height:120%;
+				.tags {
+					width: 100%;
+					min-height: 12px;
+					position: absolute;
+					bottom: 6px;
+				}
+			}
+		}
+	}
+}
+.items-list {
 	&>li {
 		text-align:center;
 		padding:20px;
@@ -17,32 +52,18 @@
 		background:url(../images/dashed-bg-corner.png) no-repeat right bottom;
 		height: 215px;
 		.img-wrap {
-			margin-bottom: 16px;
 			position: relative;
-			height:60px;
 			display: inline-block;
 			overflow: hidden;
 		}
-		.container {
-			height:160px;
-			margin: 16px 20px 20px;
-			position: relative;
-			line-height:120%;
-			.tags {
-				width: 100%;
-				min-height: 12px;
-				position: absolute;
-				bottom: 6px;
+		.status {
+			font-size: emCalc(12px);
+			a {
+				color: $secondary-color;
 			}
-			.status {
-				font-size: emCalc(12px);
-				a {
-					color: $secondary-color;
-				}
-				span {
-					color: $secondary-color;
-					display: block;
-				}
+			span {
+				color: $secondary-color;
+				display: block;
 			}
 		}
 		.more {
@@ -54,7 +75,7 @@
 			z-index:101;
 			position: absolute;
 			@include clearfix;
-			@include box-shadow(-5px 5px 5px #ccc);
+			@include box-shadow(0 0 10px #ccc);
 			.col {
 				width: 50%;
 				float: left;
@@ -73,8 +94,8 @@
 							width:100%;
 							padding: 5px 5px 5px 30px;
 							&:hover {
-								background-color: $secondary-color;
-								color:  #fff;
+								//background-color: $secondary-color;
+								color:  $secondary-color;
 							}
 						}
 					}
@@ -111,7 +132,7 @@
 			height: 30px;
 			font-weight: normal;
 		}
-		&[data-status="add-new"] {
+		&.add-new {
 			background-color: $secondary-color;
 			@include transition(background-color, 300ms, linear);
 			.container {
@@ -144,9 +165,184 @@
 			}
 		}
 	}
-	&.list-view {
-		li {
+}
+
+.list-view {
+	.btn5 {
+		display: none;
+	}
+	.lt-bar {
+		position: fixed;
+		width: $lt-bar-width;
+		left:50%;
+		top:$header-height + $bar-height;
+		padding:8px 10px;
+		margin-left:-($row-width - 2*$main-padding-horizontal)/2;
+		@include box-shadow(3px -2px 8px #ccc);
+		background:#fff;
+		a {
+			color:$overlay-color;
+			&:hover{
+				color:$secondary-color;
+			}
+		}
+		ul {
+			list-style: none outside none;
+			font-size:emCalc(12px);
+			li  {
+				list-style: none outside none;
+				padding:12px 0 ;
+				&.select {
+					span {
+						font-size: 16px;
+						margin-right: 5px;
+						position: relative;
+						top: 2px;
+						&.snf-checkbox-checked {
+							color:$secondary-color;
+						}
+					}
+					em {
+						display: none;
+						font-style: normal;
+					}
+					&:hover {
+						cursor: pointer;
+					}
+				}
+			}
+		}
+	}
+	.items-list {
+		$check-w : 60px;
+		$img-wrap-w : 70px;
+		$h4-w :40%;
+		$tags-w :8%;
+		$info-w: 30%;
+		overflow:hidden;
+		& >li {
+			@extend .clearfix;
+			height:auto;
 			width:100%;
+			padding:15px 15px 15px $lt-bar-width;
+			background-image: none;
+			&:hover{
+				background-color:lighten($primary-color,30%);
+			}
+			.check {
+				width:$check-w;
+				text-align: center;
+				float:left;
+				&:hover {
+					cursor: pointer;
+					color:$secondary-color;
+				}
+			}
+			.img-wrap {
+				width:$img-wrap-w;
+				float:left;
+				text-align: center;
+				height: $list-vm-height;
+				.os {
+					@include sprite('../images/os-unknown.png', 16px, 16px);
+					background-size:100%;
+					position: absolute;
+					display: block;
+					text-align: center;
+					line-height:18px;
+					left:50%;
+					margin-left:-8px;
+					top:3px;
+				}
+				.snf-PC_fill {
+					font-size: $list-vm-height;
+				}
+			}
+			h4 {
+				width:$h4-w
+				;
+				float:left;
+				text-align: left;
+				height:20px;
+			}
+			.tags {
+				float:left;
+				width:$tags-w;
+				min-height: 1px;
+				height:$list-vm-height;
+				line-height: $list-vm-height;
+				a {
+					vertical-align: text-top;
+				}
+			}
+			.status {
+				position: absolute;
+				left: $img-wrap-w+$check-w + $lt-bar-width;
+				text-align: left;
+				top:30px;
+				width:$h4-w;
+				span {
+					display: inline;
+				}
+			}
+			.info {
+				float: left;
+				width: $info-w;
+				font-size: emCalc(12px);
+				color:$overlay-color;
+				a {
+					color: $overlay-color;
+					&:hover {
+						color:$secondary-color;
+					}
+				}
+			}
+			&.add-new {
+				height: $bar-height;
+				line-height: $bar-height;
+				padding:0 0 0 $lt-bar-width;
+				&:hover {
+					background: $overlay-color;
+				}
+				.check {
+					visibility: hidden;
+				}
+				.img-wrap {
+					margin: 0;
+					height:$bar-height;
+					line-height: $bar-height;
+					.symbol {
+						font-size:emCalc(16px);
+						position: absolute;
+						left:0;
+						top:-3px;
+						width: 100%;
+						height: 100%;
+						margin: 0 auto;
+					}
+					span {
+						font-size:20px;
+						line-height: 30px;
+					}
+				}
+				h4 {
+					height:auto;
+					line-height: $bar-height;
+					margin:0;
+				}
+			}
+			&[data-status="building"] {
+				.img-wrap {
+					.incomplete {
+						width:$list-vm-height;
+						margin:0 auto;
+					}
+					.complete {
+						top:-$list-vm-height;
+						margin:0 auto;
+					}
+				}
+			}
 		}
 	}
 }
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_machines.scss b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_machines.scss
index 66638ba..dcdb37a 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_machines.scss
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_machines.scss
@@ -1,6 +1,6 @@
 /* Machines (VMs)  related styles  */
 
-.build-progress {
+.grid-view .build-progress {
 	animation:
 		progress_animation 5s infinite,
 		pulse 1s infinite;
@@ -9,6 +9,15 @@
 		pulse 1s infinite;
 }
 
+.list-view .build-progress {
+	animation:
+		progress_animation_list 5s infinite,
+		pulse 1s infinite;
+	-webkit-animation:
+		progress_animation_list 5s infinite,
+		pulse 1s infinite;
+}
+
 @include keyframes( progress_animation) {
 	from {
 		width: 0%
@@ -18,6 +27,15 @@
 	}
 }
 
+@include keyframes( progress_animation_list) {
+	from {
+		width: 0%
+	}
+	to {
+		width: $list-vm-height;
+	}
+}
+
 @include keyframes( pulse) {
 	from {
 		color: $secondary-color
@@ -36,11 +54,6 @@
 				opacity:0.8;
 			}
 		}
-		&:hover {
-			.snf-PC_fill {
-				color: darken($vm-active-color,10%);
-			}
-		}
 		.snf-PC_fill {
 			font-size: 60px;
 			color: $vm-active-color;
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_settings.scss b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_settings.scss
index d1b3440..f90e060 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_settings.scss
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/sass/_settings.scss
@@ -71,21 +71,25 @@ $global-radius: 1px;
 // $global-rounded: 1000px;
 
 // header settings
-$header-height:80px;
-$header-height-responsive:120px;
-$header-padding-vertical:20px;
-$header-padding-horizontal:15px;
+$header-height: 80px;
+$header-height-responsive: 120px;
+$header-padding-vertical: 20px;
+$header-padding-horizontal: 15px;
 
 // icons nav settings
-$icons-nav-margin-horizontal :10px;
+$icons-nav-margin-horizontal : 10px;
 
 // bar options
-$bar-height:30px;
-$bar-menu-height:50px;
-$bar-submenu-height:40px;
+$bar-height: 30px;
+$bar-menu-height: 50px;
+$bar-submenu-height: 40px;
 
 // button options
-$btn-height:30px;
+$btn-height: 30px;
+
+// list-view 
+$lt-bar-width: 110px;
+$list-vm-height: 34px;
 
 
 // We use these to control inset shadow shiny edges and depressions.
@@ -119,6 +123,7 @@ $btn-height:30px;
 $row-full-width:100%;
 $row-width: emCalc(960px);
 $row-small: emCalc(580px);
+$main-padding-horizontal: emCalc(10px);
 
 $conf-area-h-width: emCalc(300px);
 
@@ -1011,10 +1016,10 @@ $has-tip-border-bottom-hover: none;
 $has-tip-cursor-type: inherit;
 
 $tooltip-padding: emCalc(2px) emCalc(12px);
-$tooltip-bg: $primary-color;
+$tooltip-bg: #cecece;
 $tooltip-font-size: emCalc(12px);
 $tooltip-font-weight: normal;
-$tooltip-font-color: #fff;
+$tooltip-font-color: $black;
 // $tooltip-line-height: 1.3;
 // $tooltip-close-font-size: emCalc(10px);
 // $tooltip-close-font-weight: normal;
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
index 24b3851..1d2376f 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/stylesheets/app.css
@@ -6596,8 +6596,8 @@ a.th {
   max-width: 85%;
   left: 50%;
   width: 100%;
-  color: white;
-  background: #919194;
+  color: #1a1a1a;
+  background: #cecece;
   -webkit-border-radius: 7px;
   border-radius: 7px;
 }
@@ -6609,7 +6609,7 @@ a.th {
   width: 0;
   height: 0;
   border: solid 0;
-  border-color: transparent transparent #919194 transparent;
+  border-color: transparent transparent #cecece transparent;
   top: 0;
 }
 /* line 71, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_tooltips.scss */
@@ -6629,12 +6629,12 @@ a.th {
 @media only screen and (min-width: 768px) {
   /* line 86, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_tooltips.scss */
   .tooltip > .nub {
-    border-color: transparent transparent #919194 transparent;
+    border-color: transparent transparent #cecece transparent;
     top: 0;
   }
   /* line 90, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_tooltips.scss */
   .tooltip.tip-top > .nub {
-    border-color: #919194 transparent transparent transparent;
+    border-color: #cecece transparent transparent transparent;
     top: auto;
     bottom: 0;
   }
@@ -6644,7 +6644,7 @@ a.th {
   }
   /* line 99, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_tooltips.scss */
   .tooltip.tip-left > .nub {
-    border-color: transparent transparent transparent #919194;
+    border-color: transparent transparent transparent #cecece;
     right: 0;
     left: auto;
     top: 50%;
@@ -6652,7 +6652,7 @@ a.th {
   }
   /* line 106, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_tooltips.scss */
   .tooltip.tip-right > .nub {
-    border-color: transparent #919194 transparent transparent;
+    border-color: transparent #cecece transparent transparent;
     right: auto;
     left: 0;
     top: 50%;
@@ -6803,18 +6803,18 @@ a.th {
  */
 /* Clearfix -------------------------------------------- */
 /* line 18, ../sass/_common.scss */
-.clearfix, .storage .files li, .wizard .middle .step .os li, .wizard .middle .step .os li .details dl, .wizard .middle .step .flavor li .title, .wizard .middle .step .flavor li .options-bar {
+.clearfix, .list-view .items-list > li, .storage .files li, .wizard .middle .step .os li, .wizard .middle .step .os li .details dl, .wizard .middle .step .flavor li .title, .wizard .middle .step .flavor li .options-bar {
   zoom: 1;
 }
 /* line 20, ../sass/_common.scss */
-.clearfix:before, .storage .files li:before, .wizard .middle .step .os li:before, .wizard .middle .step .os li .details dl:before, .wizard .middle .step .flavor li .title:before, .wizard .middle .step .flavor li .options-bar:before, .clearfix:after, .storage .files li:after, .wizard .middle .step .os li:after, .wizard .middle .step .os li .details dl:after, .wizard .middle .step .flavor li .title:after, .wizard .middle .step .flavor li .options-bar:after {
+.clearfix:before, .list-view .items-list > li:before, .storage .files li:before, .wizard .middle .step .os li:before, .wizard .middle .step .os li .details dl:before, .wizard .middle .step .flavor li .title:before, .wizard .middle .step .flavor li .options-bar:before, .clearfix:after, .list-view .items-list > li:after, .storage .files li:after, .wizard .middle .step .os li:after, .wizard .middle .step .os li .details dl:after, .wizard .middle .step .flavor li .title:after, .wizard .middle .step .flavor li .options-bar:after {
   content: "\0020";
   display: block;
   height: 0;
   overflow: hidden;
 }
 /* line 26, ../sass/_common.scss */
-.clearfix:after, .storage .files li:after, .wizard .middle .step .os li:after, .wizard .middle .step .os li .details dl:after, .wizard .middle .step .flavor li .title:after, .wizard .middle .step .flavor li .options-bar:after {
+.clearfix:after, .list-view .items-list > li:after, .storage .files li:after, .wizard .middle .step .os li:after, .wizard .middle .step .os li .details dl:after, .wizard .middle .step .flavor li .title:after, .wizard .middle .step .flavor li .options-bar:after {
   clear: both;
 }
 
@@ -7025,7 +7025,7 @@ body {
 
 /* line 271, ../sass/_common.scss */
 .main {
-  padding: 0 10px;
+  padding: 0 0.625em;
 }
 
 /* Header ----------------------------------------------- */
@@ -7425,8 +7425,17 @@ body {
   }
 }
 /* List view for VMs, networks  */
-/* line 3, ../sass/_items-list.scss */
-.items-list {
+/* line 2, ../sass/_items-list.scss */
+.entities {
+  position: relative;
+}
+
+/* line 7, ../sass/_items-list.scss */
+.grid-view .lt-bar {
+  display: none;
+}
+/* line 10, ../sass/_items-list.scss */
+.grid-view .items-list {
   display: block;
   padding: 0;
   margin: 0 0;
@@ -7435,37 +7444,37 @@ body {
   background: url(../images/dashed_atom.png) repeat-y left center;
 }
 /* line 121, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_global.scss */
-.items-list:before, .items-list:after {
+.grid-view .items-list:before, .grid-view .items-list:after {
   content: " ";
   display: table;
 }
 /* line 122, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_global.scss */
-.items-list:after {
+.grid-view .items-list:after {
   clear: both;
 }
 /* line 27, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_block-grid.scss */
-.items-list > li {
+.grid-view .items-list > li {
   display: inline;
   height: auto;
   float: left;
   padding: 0 0 0;
 }
 /* line 36, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_block-grid.scss */
-.items-list > li {
+.grid-view .items-list > li {
   width: 50%;
   padding: 0 0 0;
 }
 /* line 40, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_block-grid.scss */
-.items-list > li:nth-of-type(n) {
+.grid-view .items-list > li:nth-of-type(n) {
   clear: none;
 }
 /* line 41, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_block-grid.scss */
-.items-list > li:nth-of-type(2n+1) {
+.grid-view .items-list > li:nth-of-type(2n+1) {
   clear: both;
 }
 @media only screen and (min-width: 768px) {
-  /* line 3, ../sass/_items-list.scss */
-  .items-list {
+  /* line 10, ../sass/_items-list.scss */
+  .grid-view .items-list {
     display: block;
     padding: 0;
     margin: 0 0;
@@ -7473,80 +7482,96 @@ body {
     padding-left: 1px;
   }
   /* line 121, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_global.scss */
-  .items-list:before, .items-list:after {
+  .grid-view .items-list:before, .grid-view .items-list:after {
     content: " ";
     display: table;
   }
   /* line 122, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_global.scss */
-  .items-list:after {
+  .grid-view .items-list:after {
     clear: both;
   }
   /* line 27, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_block-grid.scss */
-  .items-list > li {
+  .grid-view .items-list > li {
     display: inline;
     height: auto;
     float: left;
     padding: 0 0 0;
   }
   /* line 36, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_block-grid.scss */
-  .items-list > li {
+  .grid-view .items-list > li {
     width: 25%;
     padding: 0 0 0;
   }
   /* line 40, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_block-grid.scss */
-  .items-list > li:nth-of-type(n) {
+  .grid-view .items-list > li:nth-of-type(n) {
     clear: none;
   }
   /* line 41, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_block-grid.scss */
-  .items-list > li:nth-of-type(4n+1) {
+  .grid-view .items-list > li:nth-of-type(4n+1) {
     clear: both;
   }
 }
-/* line 12, ../sass/_items-list.scss */
-.items-list > li {
-  text-align: center;
-  padding: 20px;
-  position: relative;
-  list-style: none;
-  background: url(../images/dashed-bg-corner.png) no-repeat right bottom;
+/* line 19, ../sass/_items-list.scss */
+.grid-view .items-list > li {
   height: 215px;
 }
-/* line 19, ../sass/_items-list.scss */
-.items-list > li .img-wrap {
+/* line 21, ../sass/_items-list.scss */
+.grid-view .items-list > li .check {
+  display: none;
+}
+/* line 24, ../sass/_items-list.scss */
+.grid-view .items-list > li .info {
+  display: none;
+}
+/* line 27, ../sass/_items-list.scss */
+.grid-view .items-list > li .img-wrap {
   margin-bottom: 16px;
-  position: relative;
   height: 60px;
-  display: inline-block;
-  overflow: hidden;
 }
-/* line 26, ../sass/_items-list.scss */
-.items-list > li .container {
+/* line 31, ../sass/_items-list.scss */
+.grid-view .items-list > li .container {
   height: 160px;
   margin: 16px 20px 20px;
   position: relative;
   line-height: 120%;
 }
-/* line 31, ../sass/_items-list.scss */
-.items-list > li .container .tags {
+/* line 36, ../sass/_items-list.scss */
+.grid-view .items-list > li .container .tags {
   width: 100%;
   min-height: 12px;
   position: absolute;
   bottom: 6px;
 }
-/* line 37, ../sass/_items-list.scss */
-.items-list > li .container .status {
+
+/* line 47, ../sass/_items-list.scss */
+.items-list > li {
+  text-align: center;
+  padding: 20px;
+  position: relative;
+  list-style: none;
+  background: url(../images/dashed-bg-corner.png) no-repeat right bottom;
+  height: 215px;
+}
+/* line 54, ../sass/_items-list.scss */
+.items-list > li .img-wrap {
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
+}
+/* line 59, ../sass/_items-list.scss */
+.items-list > li .status {
   font-size: 0.75em;
 }
-/* line 39, ../sass/_items-list.scss */
-.items-list > li .container .status a {
+/* line 61, ../sass/_items-list.scss */
+.items-list > li .status a {
   color: #30c79e;
 }
-/* line 42, ../sass/_items-list.scss */
-.items-list > li .container .status span {
+/* line 64, ../sass/_items-list.scss */
+.items-list > li .status span {
   color: #30c79e;
   display: block;
 }
-/* line 48, ../sass/_items-list.scss */
+/* line 69, ../sass/_items-list.scss */
 .items-list > li .more {
   display: none;
   background: #fff;
@@ -7555,9 +7580,9 @@ body {
   z-index: 101;
   position: absolute;
   *zoom: 1;
-  -moz-box-shadow: -5px 5px 5px #cccccc;
-  -webkit-box-shadow: -5px 5px 5px #cccccc;
-  box-shadow: -5px 5px 5px #cccccc;
+  -moz-box-shadow: 0 0 10px #cccccc;
+  -webkit-box-shadow: 0 0 10px #cccccc;
+  box-shadow: 0 0 10px #cccccc;
 }
 /* line 121, ../../../../../../../../../.rvm/gems/ruby-2.0.0-p247/gems/zurb-foundation-4.3.0/scss/foundation/components/_global.scss */
 .items-list > li .more:before, .items-list > li .more:after {
@@ -7568,57 +7593,56 @@ body {
 .items-list > li .more:after {
   clear: both;
 }
-/* line 58, ../sass/_items-list.scss */
+/* line 79, ../sass/_items-list.scss */
 .items-list > li .more .col {
   width: 50%;
   float: left;
   font-size: 0.875em;
   height: 200px;
 }
-/* line 63, ../sass/_items-list.scss */
+/* line 84, ../sass/_items-list.scss */
 .items-list > li .more .col ul {
   margin: 0;
   padding: 0;
   list-style: none outside none;
 }
-/* line 67, ../sass/_items-list.scss */
+/* line 88, ../sass/_items-list.scss */
 .items-list > li .more .col ul li {
   padding: 0;
   text-align: left;
 }
-/* line 70, ../sass/_items-list.scss */
+/* line 91, ../sass/_items-list.scss */
 .items-list > li .more .col ul li a {
   color: #1e1e1e;
   display: block;
   width: 100%;
   padding: 5px 5px 5px 30px;
 }
-/* line 75, ../sass/_items-list.scss */
+/* line 96, ../sass/_items-list.scss */
 .items-list > li .more .col ul li a:hover {
-  background-color: #30c79e;
-  color: #fff;
+  color: #30c79e;
 }
-/* line 83, ../sass/_items-list.scss */
+/* line 104, ../sass/_items-list.scss */
 .items-list > li .more .col.lt ul {
   padding-top: 10px;
 }
-/* line 89, ../sass/_items-list.scss */
+/* line 110, ../sass/_items-list.scss */
 .items-list > li .more .col.rt ul li {
   height: 100px;
 }
-/* line 91, ../sass/_items-list.scss */
+/* line 112, ../sass/_items-list.scss */
 .items-list > li .more .col.rt ul li a {
   height: 100%;
   padding: 0 0 0 30px;
   line-height: 100px;
 }
-/* line 100, ../sass/_items-list.scss */
+/* line 121, ../sass/_items-list.scss */
 .items-list > li .more .name {
   background: url(../images/dashed_atom-x.png) repeat-x center top;
   padding: 10px;
   font-size: 0.625em;
 }
-/* line 106, ../sass/_items-list.scss */
+/* line 127, ../sass/_items-list.scss */
 .items-list > li h4 {
   font-size: 0.75em;
   color: #1e1e1e;
@@ -7627,8 +7651,8 @@ body {
   height: 30px;
   font-weight: normal;
 }
-/* line 114, ../sass/_items-list.scss */
-.items-list > li[data-status="add-new"] {
+/* line 135, ../sass/_items-list.scss */
+.items-list > li.add-new {
   background-color: #30c79e;
   -webkit-transition: background-color 300ms linear;
   -moz-transition: background-color 300ms linear;
@@ -7636,23 +7660,23 @@ body {
   -o-transition: background-color 300ms linear;
   transition: background-color 300ms linear;
 }
-/* line 119, ../sass/_items-list.scss */
-.items-list > li[data-status="add-new"] .container .img-wrap span:first-child {
+/* line 140, ../sass/_items-list.scss */
+.items-list > li.add-new .container .img-wrap span:first-child {
   color: white;
 }
-/* line 122, ../sass/_items-list.scss */
-.items-list > li[data-status="add-new"] .container .img-wrap .symbol {
+/* line 143, ../sass/_items-list.scss */
+.items-list > li.add-new .container .img-wrap .symbol {
   background-image: none;
   color: #30c79e;
   font-size: 30px;
   text-indent: 0;
 }
-/* line 129, ../sass/_items-list.scss */
-.items-list > li[data-status="add-new"] .container h4 {
+/* line 150, ../sass/_items-list.scss */
+.items-list > li.add-new .container h4 {
   color: white;
 }
-/* line 133, ../sass/_items-list.scss */
-.items-list > li[data-status="add-new"]:hover {
+/* line 154, ../sass/_items-list.scss */
+.items-list > li.add-new:hover {
   background-color: #485057;
   -webkit-transition: background-color 300ms linear;
   -moz-transition: background-color 300ms linear;
@@ -7661,13 +7685,216 @@ body {
   transition: background-color 300ms linear;
   cursor: pointer;
 }
-/* line 139, ../sass/_items-list.scss */
-.items-list > li[data-status="add-new"]:hover .container .img-wrap .symbol {
+/* line 160, ../sass/_items-list.scss */
+.items-list > li.add-new:hover .container .img-wrap .symbol {
+  color: #485057;
+}
+
+/* line 171, ../sass/_items-list.scss */
+.list-view .btn5, .list-view .wizard .middle .step .os li .btn-col a, .wizard .middle .step .os li .btn-col .list-view a, .list-view .wizard .middle .step .flavor li .options-bar .options li a, .wizard .middle .step .flavor li .options-bar .options li .list-view a {
+  display: none;
+}
+/* line 174, ../sass/_items-list.scss */
+.list-view .lt-bar {
+  position: fixed;
+  width: 110px;
+  left: 50%;
+  top: 110px;
+  padding: 8px 10px;
+  margin-left: -29.375em;
+  -moz-box-shadow: 3px -2px 8px #cccccc;
+  -webkit-box-shadow: 3px -2px 8px #cccccc;
+  box-shadow: 3px -2px 8px #cccccc;
+  background: #fff;
+}
+/* line 183, ../sass/_items-list.scss */
+.list-view .lt-bar a {
+  color: #485057;
+}
+/* line 185, ../sass/_items-list.scss */
+.list-view .lt-bar a:hover {
+  color: #30c79e;
+}
+/* line 189, ../sass/_items-list.scss */
+.list-view .lt-bar ul {
+  list-style: none outside none;
+  font-size: 0.75em;
+}
+/* line 192, ../sass/_items-list.scss */
+.list-view .lt-bar ul li {
+  list-style: none outside none;
+  padding: 12px 0;
+}
+/* line 196, ../sass/_items-list.scss */
+.list-view .lt-bar ul li.select span {
+  font-size: 16px;
+  margin-right: 5px;
+  position: relative;
+  top: 2px;
+}
+/* line 201, ../sass/_items-list.scss */
+.list-view .lt-bar ul li.select span.snf-checkbox-checked {
+  color: #30c79e;
+}
+/* line 205, ../sass/_items-list.scss */
+.list-view .lt-bar ul li.select em {
+  display: none;
+  font-style: normal;
+}
+/* line 209, ../sass/_items-list.scss */
+.list-view .lt-bar ul li.select:hover {
+  cursor: pointer;
+}
+/* line 216, ../sass/_items-list.scss */
+.list-view .items-list {
+  overflow: hidden;
+}
+/* line 223, ../sass/_items-list.scss */
+.list-view .items-list > li {
+  height: auto;
+  width: 100%;
+  padding: 15px 15px 15px 110px;
+  background-image: none;
+}
+/* line 229, ../sass/_items-list.scss */
+.list-view .items-list > li:hover {
+  background-color: #dfdfdf;
+}
+/* line 232, ../sass/_items-list.scss */
+.list-view .items-list > li .check {
+  width: 60px;
+  text-align: center;
+  float: left;
+}
+/* line 236, ../sass/_items-list.scss */
+.list-view .items-list > li .check:hover {
+  cursor: pointer;
+  color: #30c79e;
+}
+/* line 241, ../sass/_items-list.scss */
+.list-view .items-list > li .img-wrap {
+  width: 70px;
+  float: left;
+  text-align: center;
+  height: 34px;
+}
+/* line 246, ../sass/_items-list.scss */
+.list-view .items-list > li .img-wrap .os {
+  background: url("../images/os-unknown.png") no-repeat center center;
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  text-indent: -2000px;
+  overflow: hidden;
+  background-size: 100%;
+  position: absolute;
+  display: block;
+  text-align: center;
+  line-height: 18px;
+  left: 50%;
+  margin-left: -8px;
+  top: 3px;
+}
+/* line 257, ../sass/_items-list.scss */
+.list-view .items-list > li .img-wrap .snf-PC_fill {
+  font-size: 34px;
+}
+/* line 261, ../sass/_items-list.scss */
+.list-view .items-list > li h4 {
+  width: 40%;
+  float: left;
+  text-align: left;
+  height: 20px;
+}
+/* line 268, ../sass/_items-list.scss */
+.list-view .items-list > li .tags {
+  float: left;
+  width: 8%;
+  min-height: 1px;
+  height: 34px;
+  line-height: 34px;
+}
+/* line 274, ../sass/_items-list.scss */
+.list-view .items-list > li .tags a {
+  vertical-align: text-top;
+}
+/* line 278, ../sass/_items-list.scss */
+.list-view .items-list > li .status {
+  position: absolute;
+  left: 240px;
+  text-align: left;
+  top: 30px;
+  width: 40%;
+}
+/* line 284, ../sass/_items-list.scss */
+.list-view .items-list > li .status span {
+  display: inline;
+}
+/* line 288, ../sass/_items-list.scss */
+.list-view .items-list > li .info {
+  float: left;
+  width: 30%;
+  font-size: 0.75em;
+  color: #485057;
+}
+/* line 293, ../sass/_items-list.scss */
+.list-view .items-list > li .info a {
   color: #485057;
 }
-/* line 148, ../sass/_items-list.scss */
-.items-list.list-view li {
+/* line 295, ../sass/_items-list.scss */
+.list-view .items-list > li .info a:hover {
+  color: #30c79e;
+}
+/* line 300, ../sass/_items-list.scss */
+.list-view .items-list > li.add-new {
+  height: 30px;
+  line-height: 30px;
+  padding: 0 0 0 110px;
+}
+/* line 304, ../sass/_items-list.scss */
+.list-view .items-list > li.add-new:hover {
+  background: #485057;
+}
+/* line 307, ../sass/_items-list.scss */
+.list-view .items-list > li.add-new .check {
+  visibility: hidden;
+}
+/* line 310, ../sass/_items-list.scss */
+.list-view .items-list > li.add-new .img-wrap {
+  margin: 0;
+  height: 30px;
+  line-height: 30px;
+}
+/* line 314, ../sass/_items-list.scss */
+.list-view .items-list > li.add-new .img-wrap .symbol {
+  font-size: 1em;
+  position: absolute;
+  left: 0;
+  top: -3px;
   width: 100%;
+  height: 100%;
+  margin: 0 auto;
+}
+/* line 323, ../sass/_items-list.scss */
+.list-view .items-list > li.add-new .img-wrap span {
+  font-size: 20px;
+  line-height: 30px;
+}
+/* line 328, ../sass/_items-list.scss */
+.list-view .items-list > li.add-new h4 {
+  height: auto;
+  line-height: 30px;
+  margin: 0;
+}
+/* line 336, ../sass/_items-list.scss */
+.list-view .items-list > li[data-status="building"] .img-wrap .incomplete {
+  width: 34px;
+  margin: 0 auto;
+}
+/* line 340, ../sass/_items-list.scss */
+.list-view .items-list > li[data-status="building"] .img-wrap .complete {
+  top: -34px;
+  margin: 0 auto;
 }
 
 /* Detailed view for VMs, networks  */
@@ -7997,126 +8224,176 @@ body {
 
 /* Machines (VMs)  related styles  */
 /* line 3, ../sass/_machines.scss */
-.build-progress {
+.grid-view .build-progress {
   animation: progress_animation 5s infinite, pulse 1s infinite;
   -webkit-animation: progress_animation 5s infinite, pulse 1s infinite;
 }
 
+/* line 12, ../sass/_machines.scss */
+.list-view .build-progress {
+  animation: progress_animation_list 5s infinite, pulse 1s infinite;
+  -webkit-animation: progress_animation_list 5s infinite, pulse 1s infinite;
+}
+
 @-webkit-keyframes progress_animation {
-  /* line 13, ../sass/_machines.scss */
+  /* line 22, ../sass/_machines.scss */
   from {
     width: 0%;
   }
 
-  /* line 16, ../sass/_machines.scss */
+  /* line 25, ../sass/_machines.scss */
   to {
     width: 100%;
   }
 }
 
 @-moz-keyframes progress_animation {
-  /* line 13, ../sass/_machines.scss */
+  /* line 22, ../sass/_machines.scss */
   from {
     width: 0%;
   }
 
-  /* line 16, ../sass/_machines.scss */
+  /* line 25, ../sass/_machines.scss */
   to {
     width: 100%;
   }
 }
 
 @-ms-keyframes progress_animation {
-  /* line 13, ../sass/_machines.scss */
+  /* line 22, ../sass/_machines.scss */
   from {
     width: 0%;
   }
 
-  /* line 16, ../sass/_machines.scss */
+  /* line 25, ../sass/_machines.scss */
   to {
     width: 100%;
   }
 }
 
 @keyframes progress_animation {
-  /* line 13, ../sass/_machines.scss */
+  /* line 22, ../sass/_machines.scss */
   from {
     width: 0%;
   }
 
-  /* line 16, ../sass/_machines.scss */
+  /* line 25, ../sass/_machines.scss */
   to {
     width: 100%;
   }
 }
 
+@-webkit-keyframes progress_animation_list {
+  /* line 31, ../sass/_machines.scss */
+  from {
+    width: 0%;
+  }
+
+  /* line 34, ../sass/_machines.scss */
+  to {
+    width: 34px;
+  }
+}
+
+@-moz-keyframes progress_animation_list {
+  /* line 31, ../sass/_machines.scss */
+  from {
+    width: 0%;
+  }
+
+  /* line 34, ../sass/_machines.scss */
+  to {
+    width: 34px;
+  }
+}
+
+@-ms-keyframes progress_animation_list {
+  /* line 31, ../sass/_machines.scss */
+  from {
+    width: 0%;
+  }
+
+  /* line 34, ../sass/_machines.scss */
+  to {
+    width: 34px;
+  }
+}
+
+@keyframes progress_animation_list {
+  /* line 31, ../sass/_machines.scss */
+  from {
+    width: 0%;
+  }
+
+  /* line 34, ../sass/_machines.scss */
+  to {
+    width: 34px;
+  }
+}
+
 @-webkit-keyframes pulse {
-  /* line 22, ../sass/_machines.scss */
+  /* line 40, ../sass/_machines.scss */
   from {
     color: #30c79e;
   }
 
-  /* line 25, ../sass/_machines.scss */
+  /* line 43, ../sass/_machines.scss */
   to {
     color: #269e7d;
   }
 }
 
 @-moz-keyframes pulse {
-  /* line 22, ../sass/_machines.scss */
+  /* line 40, ../sass/_machines.scss */
   from {
     color: #30c79e;
   }
 
-  /* line 25, ../sass/_machines.scss */
+  /* line 43, ../sass/_machines.scss */
   to {
     color: #269e7d;
   }
 }
 
 @-ms-keyframes pulse {
-  /* line 22, ../sass/_machines.scss */
+  /* line 40, ../sass/_machines.scss */
   from {
     color: #30c79e;
   }
 
-  /* line 25, ../sass/_machines.scss */
+  /* line 43, ../sass/_machines.scss */
   to {
     color: #269e7d;
   }
 }
 
 @keyframes pulse {
-  /* line 22, ../sass/_machines.scss */
+  /* line 40, ../sass/_machines.scss */
   from {
     color: #30c79e;
   }
 
-  /* line 25, ../sass/_machines.scss */
+  /* line 43, ../sass/_machines.scss */
   to {
     color: #269e7d;
   }
 }
 
-/* line 31, ../sass/_machines.scss */
+/* line 49, ../sass/_machines.scss */
 .vms .items-list .img-wrap {
   width: 60px;
 }
-/* line 34, ../sass/_machines.scss */
+/* line 52, ../sass/_machines.scss */
 .vms .items-list .img-wrap span:hover {
   cursor: pointer;
   opacity: 0.8;
 }
-/* line 40, ../sass/_machines.scss */
-.vms .items-list .img-wrap:hover .snf-PC_fill {
-  color: #269e7d;
-}
-/* line 44, ../sass/_machines.scss */
+/* line 57, ../sass/_machines.scss */
 .vms .items-list .img-wrap .snf-PC_fill {
   font-size: 60px;
   color: #30c79e;
 }
-/* line 48, ../sass/_machines.scss */
+/* line 61, ../sass/_machines.scss */
 .vms .items-list .img-wrap .os {
   background: url("../images/os-unknown.png") no-repeat center center;
   width: 22px;
@@ -8128,59 +8405,59 @@ body {
   top: 8px;
   left: 19px;
 }
-/* line 53, ../sass/_machines.scss */
+/* line 66, ../sass/_machines.scss */
 .vms .items-list .img-wrap .os.windows {
   background-image: url("../images/os-windows.png");
 }
-/* line 54, ../sass/_machines.scss */
+/* line 67, ../sass/_machines.scss */
 .vms .items-list .img-wrap .os.kubuntu {
   background-image: url("../images/os-kubuntu.png");
 }
-/* line 55, ../sass/_machines.scss */
+/* line 68, ../sass/_machines.scss */
 .vms .items-list .img-wrap .os.fedora {
   background-image: url("../images/os-fedora.png");
 }
-/* line 60, ../sass/_machines.scss */
+/* line 73, ../sass/_machines.scss */
 .vms .items-list [data-status="off"] .img-wrap .snf-PC_fill {
   color: #4a5158;
 }
-/* line 64, ../sass/_machines.scss */
+/* line 77, ../sass/_machines.scss */
 .vms .items-list [data-status="off"] .status .logs, .vms .items-list [data-status="off"] .status .state {
   color: #4a5158;
 }
-/* line 70, ../sass/_machines.scss */
+/* line 83, ../sass/_machines.scss */
 .vms .items-list [data-status="error"] .img-wrap .snf-PC_fill {
   color: #ff4040;
 }
-/* line 74, ../sass/_machines.scss */
+/* line 87, ../sass/_machines.scss */
 .vms .items-list [data-status="error"] .status .logs, .vms .items-list [data-status="error"] .status .state a {
   color: #ff4040;
 }
-/* line 80, ../sass/_machines.scss */
+/* line 93, ../sass/_machines.scss */
 .vms .items-list [data-status="shutting"] .img-wrap .snf-PC_fill {
   color: #666c6b;
 }
-/* line 84, ../sass/_machines.scss */
+/* line 97, ../sass/_machines.scss */
 .vms .items-list [data-status="shutting"] .status .logs, .vms .items-list [data-status="shutting"] .status .state {
   color: #666c6b;
 }
-/* line 90, ../sass/_machines.scss */
+/* line 103, ../sass/_machines.scss */
 .vms .items-list [data-status="starting"] .img-wrap .snf-PC_fill {
   color: #566db1;
 }
-/* line 94, ../sass/_machines.scss */
+/* line 107, ../sass/_machines.scss */
 .vms .items-list [data-status="starting"] .status .logs, .vms .items-list [data-status="starting"] .status .state {
   color: #566db1;
 }
-/* line 100, ../sass/_machines.scss */
+/* line 113, ../sass/_machines.scss */
 .vms .items-list [data-status="rebooting"] .img-wrap .snf-PC_fill {
   color: #ffc54a;
 }
-/* line 104, ../sass/_machines.scss */
+/* line 117, ../sass/_machines.scss */
 .vms .items-list [data-status="rebooting"] .status .logs, .vms .items-list [data-status="rebooting"] .status .state {
   color: #ffc54a;
 }
-/* line 109, ../sass/_machines.scss */
+/* line 122, ../sass/_machines.scss */
 .vms .items-list [data-status="building"] .btn5.temp, .vms .items-list [data-status="building"] .wizard .middle .step .os li .btn-col a.temp, .wizard .middle .step .os li .btn-col .vms .items-list [data-status="building"] a.temp, .vms .items-list [data-status="building"] .wizard .middle .step .flavor li .options-bar .options li a.temp, .wizard .middle .step .flavor li .options-bar .options li .vms .items-list [data-status="building"] a.temp {
   color: #5c8fe1;
   border-color: #5c8fe1;
@@ -8188,38 +8465,38 @@ body {
   position: absolute;
   right: 0;
 }
-/* line 117, ../sass/_machines.scss */
+/* line 130, ../sass/_machines.scss */
 .vms .items-list [data-status="building"] .img-wrap .snf-PC_fill {
   display: block;
   overflow: hidden;
 }
-/* line 121, ../sass/_machines.scss */
+/* line 134, ../sass/_machines.scss */
 .vms .items-list [data-status="building"] .img-wrap .incomplete {
   color: #c7eae0;
   width: 60px;
 }
-/* line 125, ../sass/_machines.scss */
+/* line 138, ../sass/_machines.scss */
 .vms .items-list [data-status="building"] .img-wrap .complete {
   width: 0%;
   position: relative;
   top: -60px;
 }
 
-/* line 137, ../sass/_machines.scss */
+/* line 150, ../sass/_machines.scss */
 .vm .top .img-wrap {
   display: inline-block;
   height: 112px;
 }
-/* line 141, ../sass/_machines.scss */
+/* line 154, ../sass/_machines.scss */
 .vm .top .img-wrap .snf-PC_fill {
   font-size: 112px;
   color: #30c79e;
 }
-/* line 146, ../sass/_machines.scss */
+/* line 159, ../sass/_machines.scss */
 .vm .top .img-wrap.off .snf-PC_fill {
   color: #4a5158;
 }
-/* line 151, ../sass/_machines.scss */
+/* line 164, ../sass/_machines.scss */
 .vm .top .os {
   background: url("../images/os-unknown.png") no-repeat center center;
   width: 44px;
@@ -8232,30 +8509,30 @@ body {
   left: 34px;
   top: 11px;
 }
-/* line 158, ../sass/_machines.scss */
+/* line 171, ../sass/_machines.scss */
 .vm .top .os.windows {
   background-image: url("../images/os-windows.png");
 }
-/* line 159, ../sass/_machines.scss */
+/* line 172, ../sass/_machines.scss */
 .vm .top .os.kubuntu {
   background-image: url("../images/os-kubuntu.png");
 }
-/* line 160, ../sass/_machines.scss */
+/* line 173, ../sass/_machines.scss */
 .vm .top .os.fedora {
   background-image: url("../images/os-fedora.png");
 }
 
-/* line 167, ../sass/_machines.scss */
+/* line 180, ../sass/_machines.scss */
 #vm-connect .info {
   font-style: italic;
   font-size: 0.8125em;
   color: #9e9ea1;
 }
-/* line 172, ../sass/_machines.scss */
+/* line 185, ../sass/_machines.scss */
 #vm-connect .ssh {
   text-align: center;
 }
-/* line 174, ../sass/_machines.scss */
+/* line 187, ../sass/_machines.scss */
 #vm-connect .ssh span {
   padding: 10px 30px;
   background: #30c79e;
diff --git a/snf-cyclades-app/synnefo/ui/new_ui/ui/vm_list.html b/snf-cyclades-app/synnefo/ui/new_ui/ui/vm_list.html
index d571e5c..2e48163 100644
--- a/snf-cyclades-app/synnefo/ui/new_ui/ui/vm_list.html
+++ b/snf-cyclades-app/synnefo/ui/new_ui/ui/vm_list.html
@@ -749,10 +749,13 @@ Confirm that the options you have selected are correct</p>
 			</div>
 		</section>
 		<section class="main row">
-			<div class="vms entities">
+			<div class="vms entities grid-view">
 				<ul class="items-list">
-					<li data-status="add-new">
+					<li data-status="add-new" class="add-new">
 						<div class="container" data-overlay-id="#vm-wizard">
+							<div class="check">
+								<span class="snf-checkbox-unchecked"></span>
+							</div>
 							<div class="img-wrap">
 								<span class="snf-PC_fill"></span>
 								<span class="os symbol">+</span>
@@ -783,18 +786,22 @@ Confirm that the options you have selected are correct</p>
 							<div class="name">vm name 1 really large name vm name vm 1 really large name vm</div>
 						</div>
 						<div class="container">
+							<div class="check">
+								<span class="snf-checkbox-unchecked"></span>
+							</div>
 							<div class="img-wrap">
 								<span class="snf-PC_fill incomplete"></span>
 								<span class="snf-PC_fill complete"></span>
 								<span class="os">unknown</span>
 							</div>
 							<h4>vm name 1 really large name vm name vm 1 really large name vm</h4>
-							<div class="tags">
-							</div>
 							<div class= "status">
 								<span class="state"><a href="" >BUILDING</a></span>
-								<span class="logs">798.56 MB of 4.33 GB<br>(18%)</span>
+								<span class="logs">798.56 MB of 4.33 GB (18%)</span>
 							</div>
+							<div class="tags">
+							</div>
+							<div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
 						</div>
 					</li>
 					<li data-status="error">
@@ -819,17 +826,21 @@ Confirm that the options you have selected are correct</p>
 							<div class="name">short name</div>
 						</div>
 						<div class="container">
+							<div class="check">
+								<span class="snf-checkbox-unchecked"></span>
+							</div>
 							<div class="img-wrap">
-							<span class="snf-PC_fill"></span>
-							<span class="os">unknown</span>
-						</div>
+								<span class="snf-PC_fill"></span>
+								<span class="os">unknown</span>
+							</div>
 							<h4>short name</h4>
 							<div class="tags">
 							</div>
 							<div class= "status">
 								<span class="state"><a href="">ERROR</a></span>
-								<span class="logs">Image customization failed.<br>Did not finish on time.</span>
+								<span class="logs">Image customization failed. Did not finish on time.</span>
 							</div>
+							<div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
 						</div>
 					</li>
 					<li data-status="running">
@@ -854,15 +865,19 @@ Confirm that the options you have selected are correct</p>
 							<div class="name">vm name 1 really large name vm name vm 1 really large name vm</div>
 						</div>
 						<div class="container">
+							<div class="check">
+								<span class="snf-checkbox-unchecked"></span>
+							</div>
 							<div class="img-wrap">
 								<span class="snf-PC_fill"></span>
 								<span class="os fedora">fedora</span>
 							</div>
 							<h4>vm name 1 really large name vm name vm 1 really large name vm</h4>
-							<div class="tags">
-							</div>
 							<div class= "status">
 							</div>
+							<div class="tags">
+							</div>
+							<div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
 						</div>
 					</li>
 					<li data-status="rebooting">
@@ -887,6 +902,9 @@ Confirm that the options you have selected are correct</p>
 							<div class="name">vm name 1 really large name vm name vm 1 really large name vm</div>
 						</div>
 						<div class="container">
+							<div class="check">
+								<span class="snf-checkbox-unchecked"></span>
+							</div>
 							<div class="img-wrap">
 								<span class="snf-PC_fill"></span>
 								<span class="os kubuntu">kubuntu</span>
@@ -899,6 +917,7 @@ Confirm that the options you have selected are correct</p>
 								<a href="" class="tag1 has-tip" data-tooltip title="Tooltip1">&nbsp;</a>
 								<a href="" class="tag2 has-tip" data-tooltip title="Tooltip2">&nbsp;</a>
 							</div>
+							<div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
 						</div>
 					</li>
 					<li data-status="starting">
@@ -923,6 +942,9 @@ Confirm that the options you have selected are correct</p>
 							<div class="name">vm name 1 really large name vm name vm 1 really large name vm</div>
 						</div>
 						<div class="container">
+							<div class="check">
+								<span class="snf-checkbox-unchecked"></span>
+							</div>
 							<div class="img-wrap">
 								<span class="snf-PC_fill"></span>
 								<span class="os kubuntu">kubuntu</span>
@@ -933,6 +955,7 @@ Confirm that the options you have selected are correct</p>
 							</div>
 							<div class="tags">
 							</div>
+							<div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
 						</div>
 					</li>
 					<li  data-status="shutting">
@@ -957,6 +980,9 @@ Confirm that the options you have selected are correct</p>
 							<div class="name">short name</div>
 						</div>
 						<div class="container">
+							<div class="check">
+								<span class="snf-checkbox-unchecked"></span>
+							</div>
 							<div class="img-wrap">
 								<div class="img running">
 									<span class="snf-PC_fill"></span>
@@ -971,6 +997,7 @@ Confirm that the options you have selected are correct</p>
 								<a href="" class="tag1 has-tip" data-tooltip title="Tooltip1">&nbsp;</a>
 								<a href="" class="tag2 has-tip" data-tooltip title="Tooltip2">&nbsp;</a>
 							</div>
+							<div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
 						</div>
 					</li>
 					 <li data-status="running">
@@ -995,14 +1022,24 @@ Confirm that the options you have selected are correct</p>
 							<div class="name">short name</div>
 						</div>
 						<div class="container">
+							<div class="check">
+								<span class="snf-checkbox-unchecked"></span>
+							</div>
 							<div class="img-wrap">
 								<span class="snf-PC_fill"></span>
 								<span class="os kubuntu">kubuntu</span>
 							</div>
 							<h4>short name</h4>
+
 							<div class= "status">
 								<span class="state">RUNNING</span>
 							</div>
+							<div class="tags">
+								<a href="" class="tag1 has-tip" data-tooltip title="Tooltip1">&nbsp;</a>
+								<a href="" class="tag2 has-tip" data-tooltip title="Tooltip2">&nbsp;</a>
+								<a href="" class="tag3 has-tip" data-tooltip title="Tooltip2">&nbsp;</a>
+							</div>
+							<div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
 						</div>
 					</li>
 					<li data-status="off">
@@ -1027,15 +1064,19 @@ Confirm that the options you have selected are correct</p>
 							<div class="name">short name</div>
 						</div>
 						<div class="container">
+							<div class="check">
+								<span class="snf-checkbox-unchecked"></span>
+							</div>
 							<div class="img-wrap">
 								<span class="snf-PC_fill"></span>
 								<span class="os fedora">fedora</span>
 							</div>
 							<h4>short name</h4>
-							<div class="tags">
-							</div>
 							<div class= "status">
 							</div>
+							<div class="tags">
+							</div>
+							<div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
 						</div>
 					</li>
 					<li data-status="off">
@@ -1060,6 +1101,9 @@ Confirm that the options you have selected are correct</p>
 							<div class="name">vm name 1 really large name vm name vm 1 really large name vm</div>
 						</div>
 						<div class="container">
+							<div class="check">
+								<span class="snf-checkbox-unchecked"></span>
+							</div>
 							<div class="img-wrap">
 								<span class="snf-PC_fill"></span>
 								<span class="os fedora">fedora</span>
@@ -1070,6 +1114,7 @@ Confirm that the options you have selected are correct</p>
 								<a href="" class="tag2 has-tip" data-tooltip title="Tooltip2">&nbsp;</a>
 								<a href="" class="tag3 has-tip" data-tooltip title="Tooltip3">&nbsp;</a>
 							</div>
+							<div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
 						</div>
 					</li>
 					<li data-status="off">
@@ -1094,6 +1139,9 @@ Confirm that the options you have selected are correct</p>
 							<div class="name">short name</div>
 						</div>
 						<div class="container">
+							<div class="check">
+								<span class="snf-checkbox-unchecked"></span>
+							</div>
 							<div class="img-wrap">
 								<span class="snf-PC_fill"></span>
 								<span class="os fedora">fedora</span>
@@ -1104,9 +1152,21 @@ Confirm that the options you have selected are correct</p>
 								<a href="" class="tag2 has-tip" data-tooltip title="Tooltip2">&nbsp;</a>
 								<a href="" class="tag3 has-tip" data-tooltip title="Tooltip3">&nbsp;</a>
 							</div>
+							<div class="info"><a href="snf-9733.vm.okeanos.grnet.gr" title="">snf-9733.vm.okeanos.grnet.gr</a></div>
 						</div>
 					</li>
 				</ul>
+				<div class="lt-bar">
+					<ul>
+						<li class="select"><span class="snf-checkbox-unchecked checkbox"></span><em>un</em>select all</li>
+						<li class="running"><a href="#" title="">Reboot</a></li>
+						<li class="running"><a href="#" title="">Shutdown</a></li>
+						<li class="both"><a href="#">Destroy</a></li>
+						<li class="stopped"><a href="#">Start</a></li>
+						 <!-- in case we want an action always activated
+						<li class="pernament"><a href="" class="active">Action</a></li> -->
+					</ul>
+				</div>
 				<div class="welcome">It seems you have not yet created a VM! Go ahead!</div>
 			</div>
 		</section>
