From 3cfe9bf0593a88777735a068f6f69586d9b8a47e Mon Sep 17 00:00:00 2001
From: Sven Slootweg <jamsoftgamedev@gmail.com>
Date: Fri, 27 Dec 2013 22:13:36 +0100
Subject: [PATCH] More 'pure' theme designy thingies

---
 frontend/templates/pure/admin/node/lookup.tpl | 87 +++++++++++++++++++
 frontend/templates/pure/static/css/cvm.css    | 15 +++-
 scss/pure/cvm.scss                            | 30 ++++++-
 3 files changed, 130 insertions(+), 2 deletions(-)
 create mode 100644 frontend/templates/pure/admin/node/lookup.tpl

diff --git a/frontend/templates/pure/admin/node/lookup.tpl b/frontend/templates/pure/admin/node/lookup.tpl
new file mode 100644
index 0000000..c3611b0
--- /dev/null
+++ b/frontend/templates/pure/admin/node/lookup.tpl
@@ -0,0 +1,87 @@
+<h2>{%!title-admin-nodeinfo}</h2>
+
+<div class="pure-menu pure-menu-open pure-menu-horizontal submenu">
+	<ul>
+		<li><a href="/admin/node/{%?id}/add/"><i class="fa fa-fw fa-asterisk"></i> {%!toolbar-createvps}</a></li>
+		<li><a href="/admin/node/{%?id}/edit/"><i class="fa fa-fw fa-pencil"></i> {%!toolbar-editnode}</a></li>
+	</ul>
+</div>
+
+<section>
+	<table class="pure-table pure-table-bordered stretch">
+		<tr>
+			<th class="vertical">{%!list-column-nodeid}</th>
+			<td>{%?id}</td>
+		</tr>
+		<tr>
+			<th class="vertical">{%!list-column-hostname}</th>
+			<td>{%?hostname}</td>
+		</tr>
+		<tr>
+			<th class="vertical">{%!list-column-location}</th>
+			<td>{%?location}</td>
+		</tr>
+	</table>
+</section>
+
+<section>
+	<h3>{%!header-admin-node-vpses}</h3>
+	<table class="pure-table pure-table-bordered stretch">
+		<thead>
+			<tr>
+				<th></th>
+				<th>{%!list-column-hostname}</th>
+				<th>{%!list-column-platform}</th>
+				<th>{%!list-column-disk}</th>
+				<th>{%!list-column-ram}</th>
+				<th>{%!list-column-template}</th>
+			</tr>
+		</thead>
+		<tbody>
+			{%if isset|vpses == true}
+				{%foreach vps in vpses}
+					<tr class="clickable" data-url="/{%?vps[id]}/">
+						<td class="vps-status">
+							{%if vps[status] == running}
+								<img src="/templates/default/static/images/status/online.png" alt="{%!list-status-running}">
+							{%elseif vps[status] == stopped}
+								<img src="/templates/default/static/images/status/offline.png" alt="{%!list-status-stopped}">
+							{%elseif vps[status] == suspended}
+								<img src="/templates/default/static/images/status/suspended.png" alt="{%!list-status-suspended}">
+							{%else}
+								<img src="/templates/default/static/images/status/unknown.png" alt="{%!list-status-unknown}">
+							{%/if}
+						</td>
+						<td>
+							<a href="/{%?vps[id]}/">
+								{%?vps[hostname]}
+							</a>
+						</td>
+						<td>
+							<a href="/{%?vps[id]}/">
+								{%if vps[virtualization-type] == 1}
+									OpenVZ
+								{%/if}{%if vps[virtualization-type] == 2}
+									Xen PV
+								{%/if}{%if vps[virtualization-type] == 3}
+									Xen HVM
+								{%/if}{%if vps[virtualization-type] == 4}
+									KVM
+								{%/if}
+							</a>
+						</td>
+						<td>
+							{%?vps[diskspace]}
+							<span class="unit">{%?vps[diskspace-unit]}</span>
+						</td>
+						<td>
+							{%?vps[guaranteed-ram]}
+							<span class="unit">{%?vps[guaranteed-ram-unit]}</span>
+						</td>
+						<td>{%?vps[template]}</td>
+					</tr>
+				{%/foreach}
+			{%/if}
+		</tbody>
+	</table>
+</section>
diff --git a/frontend/templates/pure/static/css/cvm.css b/frontend/templates/pure/static/css/cvm.css
index 3b75474..af00669 100644
--- a/frontend/templates/pure/static/css/cvm.css
+++ b/frontend/templates/pure/static/css/cvm.css
@@ -11,9 +11,19 @@
     .wrapper .pure-g > div.padded {
       padding: 8px 10px; }
   .wrapper .pure-menu a {
-    color: #353535; }
+    color: #515151; }
     .wrapper .pure-menu a i.fa {
       margin-right: 9px; }
+  .wrapper .pure-menu .pure-menu-selected a {
+    color: black; }
+  .wrapper .pure-table th.vertical {
+    background: #e0e0e0;
+    color: black;
+    text-align: left;
+    vertical-align: bottom;
+    border-bottom: 1px solid #cbcbcb; }
+  .wrapper section {
+    margin-bottom: 16px; }
   .wrapper .error {
     padding: 8px 10px;
     background-color: #FFD4D4;
@@ -47,6 +57,9 @@
     margin: 0px auto; }
   .wrapper .contents table.stretch {
     width: 100%; }
+  .wrapper .contents .clickable a {
+    color: inherit;
+    text-decoration: inherit; }
   .wrapper .contents .submenu {
     font-size: 14px;
     margin-bottom: 4px; }
diff --git a/scss/pure/cvm.scss b/scss/pure/cvm.scss
index 99ea90b..57ef7ad 100644
--- a/scss/pure/cvm.scss
+++ b/scss/pure/cvm.scss
@@ -24,13 +24,35 @@
 	{
 		a
 		{
-			color: #353535;
+			color: #515151;
 			
 			i.fa
 			{
 				margin-right: 9px;
 			}
 		}
+		
+		.pure-menu-selected a
+		{
+			color: black;
+		}
+	}
+	
+	.pure-table
+	{
+		th.vertical
+		{
+			background: #e0e0e0;
+			color: black;
+			text-align: left;
+			vertical-align: bottom;
+			border-bottom: 1px solid #cbcbcb;
+		}
+	}
+	
+	section
+	{
+		margin-bottom: 16px;
 	}
 	
 	.error
@@ -104,6 +126,12 @@
 			width: 100%;
 		}
 		
+		.clickable a
+		{
+			color: inherit;
+			text-decoration: inherit;
+		}
+		
 		.submenu
 		{
 			font-size: 14px;