From 53266626b06667f93b31580c2e96189af51994a8 Mon Sep 17 00:00:00 2001
From: Sven Slootweg <jamsoftgamedev@gmail.com>
Date: Fri, 27 Dec 2013 21:34:05 +0100
Subject: [PATCH] Add templates for VPS list and admin node list

---
 frontend/templates/pure/admin/node/add.tpl  | 50 +++++++++++++++++++++
 frontend/templates/pure/admin/node/list.tpl | 30 +++++++++++++
 frontend/templates/pure/client/vps/list.tpl |  2 +-
 frontend/templates/pure/static/css/cvm.css  | 16 +++++--
 scss/pure/cvm.scss                          | 21 ++++++++-
 5 files changed, 112 insertions(+), 7 deletions(-)
 create mode 100644 frontend/templates/pure/admin/node/add.tpl
 create mode 100644 frontend/templates/pure/admin/node/list.tpl

diff --git a/frontend/templates/pure/admin/node/add.tpl b/frontend/templates/pure/admin/node/add.tpl
new file mode 100644
index 0000000..9a3388b
--- /dev/null
+++ b/frontend/templates/pure/admin/node/add.tpl
@@ -0,0 +1,50 @@
+<h2>{%!title-admin-addnode}</h2>
+
+{%if isempty|errors == false}
+	<div class="error">
+		<div class="title"><i class="fa fa-times-circle"></i> {%!error-form}</div>
+		<div class="message">
+			<ul>
+				{%foreach error in errors}
+					<li>{%?error}</li>
+				{%/foreach}
+			</ul>
+		</div>
+	</div>
+{%/if}
+
+<form enctype="multipart/form-data" method="post" action="/admin/nodes/add/" class="pure-form pure-form-aligned">
+	<div class="pure-control-group">
+		<label for="form_addnode_name">{%!addnode-name}</label>
+		{%input type="text" group="addnode" name="name"}
+	</div>
+	
+	<div class="pure-control-group">
+		<label for="form_addnode_hostname">{%!addnode-hostname}</label>
+		{%input type="text" group="addnode" name="hostname"}
+	</div>
+	
+	<div class="pure-control-group">
+		<label for="form_addnode_location">{%!addnode-location}</label>
+		{%input type="text" group="addnode" name="location"}
+	</div>
+	
+	<div class="pure-control-group">
+		<label for="form_addnode_customkey">{%!addnode-customkeypair}</label>
+		{%input type="checkbox" group="addnode" name="customkey" data-enable-group="customkey" class="enabler"}
+	</div>
+	
+	<div class="disabled pure-control-group" data-disabled-group="customkey">
+		<label for="form_addnode_publickey">{%!addnode-publickey}</label>
+		{%input type="file" group="addnode" name="publickey" disabled="disabled"}
+	</div>
+	
+	<div class="disabled pure-control-group" data-disabled-group="customkey">
+		<label for="form_addnode_privatekey">{%!addnode-privatekey}</label>
+		{%input type="file" group="addnode" name="privatekey" disabled="disabled"}
+	</div>
+	
+	<div class="pure-controls">
+		<button type="submit" name="submit">{%!button-admin-addnode}</button>
+	</div>
+</form>
diff --git a/frontend/templates/pure/admin/node/list.tpl b/frontend/templates/pure/admin/node/list.tpl
new file mode 100644
index 0000000..1203a6b
--- /dev/null
+++ b/frontend/templates/pure/admin/node/list.tpl
@@ -0,0 +1,30 @@
+<h2>{%!title-admin-nodelist}</h2>
+
+<div class="pure-menu pure-menu-open pure-menu-horizontal submenu">
+	<ul>
+		<li><a href="/admin/nodes/add/"><i class="fa fa-fw fa-plus-circle"></i> {%!toolbar-addnode}</a></li>
+	</ul>
+</div>
+
+<table class="pure-table pure-table-bordered stretch">
+	<thead>
+		<tr>
+			<th>{%!list-column-hostname}</th>
+			<th>{%!list-column-location}</th>
+		</tr>
+	</thead>
+	<tbody>
+		{%foreach node in nodes}
+			<tr class="clickable" data-url="/admin/node/{%?node[id]}/">
+				<td>
+					<a href="/admin/node/{%?node[id]}/">
+						{%?node[hostname]}
+					</a>
+				</td>
+				<td>
+					{%?node[location]}
+				</td>
+			</tr>
+		{%/foreach}
+	</tbody>
+</table>
diff --git a/frontend/templates/pure/client/vps/list.tpl b/frontend/templates/pure/client/vps/list.tpl
index 7470a8f..0a8f3b1 100644
--- a/frontend/templates/pure/client/vps/list.tpl
+++ b/frontend/templates/pure/client/vps/list.tpl
@@ -1,4 +1,4 @@
-<table class="pure-table pure-table-bordered vps-list">
+<table class="pure-table pure-table-bordered stretch vps-list">
 	<thead>
 		<tr>
 			<th></th>
diff --git a/frontend/templates/pure/static/css/cvm.css b/frontend/templates/pure/static/css/cvm.css
index 52506c6..3b75474 100644
--- a/frontend/templates/pure/static/css/cvm.css
+++ b/frontend/templates/pure/static/css/cvm.css
@@ -2,7 +2,8 @@
   width: 960px;
   margin: 0px auto; }
   .wrapper h1, .wrapper h2, .wrapper h3, .wrapper h4, .wrapper h5, .wrapper h6 {
-    margin-top: 4px; }
+    margin-top: 4px;
+    margin-bottom: 7px; }
   .wrapper .pure-g > div {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
@@ -30,10 +31,10 @@
       font-size: 15px; }
   .wrapper .header .logo {
     margin-bottom: 8px; }
-  .wrapper .menu {
+  .wrapper .pure-menu-horizontal {
     background-color: #F1F1F1;
     margin-bottom: 16px; }
-    .wrapper .menu a:hover {
+    .wrapper .pure-menu-horizontal a:hover {
       background-color: #E6E6E6; }
   .wrapper .contents #form_login {
     background-color: #F1F1F1;
@@ -44,5 +45,12 @@
   .wrapper .contents .narrow-wrapper {
     width: 420px;
     margin: 0px auto; }
-  .wrapper .contents table.vps-list {
+  .wrapper .contents table.stretch {
     width: 100%; }
+  .wrapper .contents .submenu {
+    font-size: 14px;
+    margin-bottom: 4px; }
+    .wrapper .contents .submenu i.fa {
+      margin-right: 0px; }
+    .wrapper .contents .submenu li a {
+      padding: 5px 10px; }
diff --git a/scss/pure/cvm.scss b/scss/pure/cvm.scss
index 57777e7..99ea90b 100644
--- a/scss/pure/cvm.scss
+++ b/scss/pure/cvm.scss
@@ -6,6 +6,7 @@
 	h1, h2, h3, h4, h5, h6
 	{
 		margin-top: 4px;
+		margin-bottom: 7px;
 	}
 	
 	.pure-g > div {
@@ -67,7 +68,7 @@
 		}
 	}
 	
-	.menu
+	.pure-menu-horizontal
 	{
 		background-color: #F1F1F1;
 		margin-bottom: 16px;
@@ -98,9 +99,25 @@
 			margin: 0px auto;
 		}
 		
-		table.vps-list
+		table.stretch
 		{
 			width: 100%;
 		}
+		
+		.submenu
+		{
+			font-size: 14px;
+			margin-bottom: 4px;
+			
+			i.fa
+			{
+				margin-right: 0px;
+			}
+			
+			li a
+			{
+				padding: 5px 10px;
+			}
+		}
 	}
 }