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/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>
