From 97052713ed40e37027169d7e129006f5b59f0e31 Mon Sep 17 00:00:00 2001
From: wrossiter <wrossiter@467b73ca-7a2a-4603-9d3b-597d59a354a9>
Date: Wed, 29 Aug 2007 03:32:26 +0000
Subject: [PATCH] yay black candyness in the installer!

git-svn-id: svn://svn.silverstripe.com/silverstripe/open/phpinstaller/trunk@41006 467b73ca-7a2a-4603-9d3b-597d59a354a9
---
 config-form.css  | 83 ++++++++++++++++++++++++++++++++++---------
 config-form.html | 92 +++++++++++++++++-------------------------------
 install.php      |  4 +--
 3 files changed, 100 insertions(+), 79 deletions(-)

diff --git a/config-form.css b/config-form.css
index b3f8e35..c572dec 100644
--- a/config-form.css
+++ b/config-form.css
@@ -1,12 +1,18 @@
+body {
+	text-align: center;
+}
+
+#Container * {
+	text-align: left;
+}
 
 .good td {
 	color: green;
 }
 
 .warning td {
-	color: orange;
+	color: #ef7f24;
 }
-
 .testResults .error td {
 	border: 1px #CCC solid;
 	color: red;
@@ -14,30 +20,73 @@
 
 p.error {
 	padding: 0.5em;
-	background-color: #DDD;
-	border: 1px #CCC solid;
-	color: red;
+	background-color: #ffe9e9;
+	border: 1px #ff8e8e solid;
+	color: #f03838;
 }
 p.warning {
 	padding: 0.5em;
-	background-color: #DDD;
-	border: 1px #CCC solid;
-	color: orange;
+	background-color: #fef1e1;
+	border: 1px #ffc28b solid;
+	color: #cb6a1c;
 }
 p.good {
 	padding: 0.5em;
-	background-color: #DDD;
-	border: 1px #CCC solid;
-	color: #0C0;
+	background-color: #e2fee1;
+	border: 1px #43cb3e solid;
+	color: #359318;
 }
-
-.testResults {
-	border-collapse: collapse;
-	font-size: 80%;
-	width: 90%;
+p.error a,
+p.warning a,
+p.good a {
+	color: inherit;
+	text-decoration: underline;
+}
+p.error a:hover {
+	text-decoration: none;
+}
+span.middleColumn {
+	width: 306px;
+	padding: 4px;
+	margin-right: 0;
+}
+input.text, textarea, select {
+	padding: 2px 0 0 2px;
+	border: 1px solid #A7A7A7;
+	color: #000;
+	height: 1.7em;
+	font-size: 1.2em;
+	font-weight: bold;
+	width: 305px;
+}
+table.testResults {
+	border-collapse: collapse;
+	width: 100%;
+	margin: 10px 0;
+}
+#Layout h4 {
+	font-size: 2em;
 }
 .testResults td {
 	border: 1px #CCC solid;
 	width: 400px;
-	padding: 0.2em;
+	padding: 4px;
+}
+.clear {
+	clear: both;
+}
+p.mysql,
+p.adminAcc {
+	padding-top: 20px;
 }
+p#mysql_credentials,
+p#AdminAccount {
+	width: 330px;
+	margin-top: 0;
+	float: left;
+}
+#Layout input.action {
+	text-align: center;
+	width: auto;
+	font-size: 1em;
+}
\ No newline at end of file
diff --git a/config-form.html b/config-form.html
index e9b5cb4..dd242eb 100644
--- a/config-form.html
+++ b/config-form.html
@@ -25,15 +25,13 @@
 				
 				<div id="Layout">
 					<div class="typography">
-						<p>
-							Thanks for choosing to use SilverStripe!  Please follow the instructions below to get SilverStripe
-							installed.
-						</p>
+						<h1>Welcome to SilverStripe</h1>
+						<p>Thanks for choosing to use SilverStripe!  Please follow the instructions below to get SilverStripe installed.</p>
 			
 						<form action="install.php" method="post">
 							<?php if(isset($hasErrorOtherThanDatabase)) { ?>
 								<p class="error">
-									You aren't currently able to install the software.  Please <a style="color: #CCF" href="#requirements">see below</a> for details.
+									You aren't currently able to install the software.  Please <a href="#requirements">see below</a> for details.
 								</p>
 							<?php } else { ?>
 								<?php if($req->hasWarnings()) { ?>
@@ -82,15 +80,9 @@
 							<?php } ?>
 			
 							<input type="hidden" name="database" value="MySQLDatabase" />
-							<h2>MySQL Database</h2>
-							<p>
-								SilverStripe stores its content in a MySQL database.  Please provide the username
-								and password to connect to the server here.  If this account has permission to create databases, then we will
-								create the database for you; otherwise, you must give the name of a database that already exists.
-							</p>
-			
+							<h4>MySQL Database</h4>			
 							<?php if($dbReq->hasErrors()) { ?>
-								<p class="error">
+								<p class="error"><!--  class="error" -->
 									These database details don't appear to be correct.  Please enter the correct details before installing.
 								</p>
 							<?php } else { ?>
@@ -99,64 +91,44 @@
 								</p>
 							<?php } ?>
 			
-							<p style="margin-left: 2em" id="mysql_credentials">
-								<label for="mysql_server">
-									<span>MySQL server:</span>
-									<input id="mysql_server" type="text" name="mysql[server]" value="<?= $databaseConfig['server'] ?>" />
-								</label> <br />
-								<label for="mysql_username">
-									<span>MySQL username:</span>
-									<input id="mysql_username" type="text" name="mysql[username]" value="<?= $databaseConfig['username'] ?>"  />
-								</label> <br />
-								<label for="mysql_password">
-									<span>MySQL password:</span>
-									<input id="mysql_password" type="password" name="mysql[password]" value="<?= $databaseConfig['password'] ?>" />
-								</label> <br />
-								<label for="mysql_database">
-									<span>MySQL database:</span>
-									<input id="mysql_database" type="text" name="mysql[database]" value="<?= $databaseConfig['database'] ?>" onchange="this.value = this.value.replace(/[^A-Za-z0-9_]+/g,'');" />
-								</label> <br />
+							<p id="mysql_credentials">
+								<label for="mysql_server">MySQL server:</label>
+								<span class="middleColumn"><input id="mysql_server" class="text" type="text" name="mysql[server]" value="<?= $databaseConfig['server'] ?>" /></span>
+								<label for="mysql_username">MySQL username:</label>
+								<span class="middleColumn"><input id="mysql_username" class="text" type="text" name="mysql[username]" value="<?= $databaseConfig['username'] ?>"  /></span>
+								<label for="mysql_password">MySQL password:</label>
+								<span class="middleColumn"><input id="mysql_password" class="text" type="password" name="mysql[password]" value="<?= $databaseConfig['password'] ?>" /></span>
+								<label for="mysql_database">MySQL database:</label>
+								<span class="middleColumn"><input id="mysql_database" class="text" type="text" name="mysql[database]" value="<?= $databaseConfig['database'] ?>" onchange="this.value = this.value.replace(/[^A-Za-z0-9_]+/g,'');" /></span>
+								<input type="submit" class="action" value="Re-check requirements" />
 							</p>
-			
-							<p style="margin-left: 2em">
-								<input type="submit" value="Re-check requirements" />
-							</p>
-			
-							<h4>Details</h4>
+							<p class="mysql">SilverStripe stores its content in a MySQL database.  Please provide the username and password to connect to the server here.  If this account has permission to create databases, then we will create the database for you; otherwise, you must give the name of a database that already exists.</p>
+							<div class="clear"><!--  --></div>
+							<h5>Details</h5>
 							<?php $dbReq->showTable("MySQL Configuration"); ?>
 			
 							<br />
 			
-							<h2>SilverStripe Administration Account</h2>
-							<p>
+							<h4>SilverStripe Administration Account</h4>
+			
+							<p id="AdminAccount">
+								<label for="username">Administrator email:</label>
+								<span class="middleColumn"><input type="text" class="text" name="username" id="username" value="admin" /></span>
+								<label for="password">Administrator password:</label>
+								<span class="middleColumn"><input type="text" class="text" name="password" id="password" value="password" /></span>
+								<label for="firstname">Administrator first name:</label>
+								<span class="middleColumn"><input type="text" class="text" name="firstname" id="firstname" value="" /></span>
+								<label for="surname">Administrator surname:</label>
+								<span class="middleColumn"><input type="text" class="text" name="surname" id="surname" value="" /></span>
+							</p>
+							<p class="adminAcc">
 								We will set up 1 administrator account for you automatically.  Enter the email address and password.  If you'd
 								rather log-in with a username instead of an email address, enter that instead.
 							</p>
 			
-							<p style="margin-left: 2em">
-								<label for="username">
-									<span>Administrator email:</span>
-									<input type="text" name="username" id="username" value="admin" />
-								</label><br />
-								<label for="password">
-									<span>Administrator password:</span>
-									<input type="text" name="password" id="password" value="password" />
-								</label> <br />
-								<label for="firstname">
-									<span>Administrator first name:</span>
-									<input type="text" name="firstname" id="firstname" value="" />
-								</label><br />
-								<label for="surname">
-									<span>Administrator surname:</span>
-									<input type="text" name="surname" id="surname" value="" />
-								</label> <br />
-								
-								
-							</p>
-			
 							<br />
 			
-							<h2 id="requirements">Requirements</h2>
+							<h4 id="requirements">Requirements</h4>
 							<?php
 								$req->showTable();
 				?>
diff --git a/install.php b/install.php
index 5aeda37..15c6e1f 100644
--- a/install.php
+++ b/install.php
@@ -218,8 +218,8 @@ class InstallRequirements {
 			
 		} else {
 			foreach($this->tests as $section => $tests) {
-				echo "<h3>$section</h3>";
-				echo "<table class=\"testResults\" width=\"100%\">";
+				echo "<h5>$section</h5>";
+				echo "<table class=\"testResults\">";
 				
 				foreach($tests as $test => $result) {
 					echo "<tr class=\"$result[0]\"><td>$test</td><td>" . nl2br(htmlentities($result[1])) . "</td></tr>";