From 46be185c65a519d7d545fa5dd1f90f27c6743bd7 Mon Sep 17 00:00:00 2001
From: Sam Minnee <sam@silverstripe.com>
Date: Tue, 12 Oct 2010 21:56:46 +0000
Subject: [PATCH] ENHANCEMENT Improved wording and styling in installer. Added
 links to server requirements, themes download, tutorial. Decreased vertical
 space before the "install" button to make it more obvious. (from r101246)

git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/sapphire/trunk@111975 467b73ca-7a2a-4603-9d3b-597d59a354a9
---
 _register_database.php       |  2 +-
 dev/install/config-form.html | 68 +++++++++++++++++++-----------------
 dev/install/install.css      | 41 ++++++++++++++++++----
 3 files changed, 71 insertions(+), 40 deletions(-)

diff --git a/_register_database.php b/_register_database.php
index 2a9734efe..7c5b6c22a 100644
--- a/_register_database.php
+++ b/_register_database.php
@@ -39,7 +39,7 @@ DatabaseAdapterRegistry::register(
 		'missingExtensionText' => 'The <a href="http://php.net/manual/en/book.sqlite3.php">SQLite3</a> and <a href="http://php.net/manual/en/book.pdo.php">PDO</a> classes are not available. Please install or enable them and refresh this page.',
 		'fields' => array(
 			'path' => array(
-				'title' => 'Database path <small>(absolute path, writeable by the webserver user. Recommended to be outside of your webroot)</small>',
+				'title' => 'Database path<br /><small>Absolute path, writeable by the webserver user.<br />Recommended to be outside of your webroot</small>',
 				'default' => realpath(dirname($_SERVER['SCRIPT_FILENAME'])) . '/assets/.sqlitedb'
 			),
 			'database' => array(
diff --git a/dev/install/config-form.html b/dev/install/config-form.html
index 49d71b4e7..2eb3822f7 100644
--- a/dev/install/config-form.html
+++ b/dev/install/config-form.html
@@ -24,8 +24,7 @@
 				
 				<div id="Layout">
 					<div class="typography">
-						<h1>Welcome to SilverStripe</h1>
-						<p>Thanks for choosing to use SilverStripe!  Please follow the instructions below to get SilverStripe installed.</p>
+						<p>Thanks for choosing to use SilverStripe!  Please follow the instructions below to get you up and running.</p>
 			
 						<form action="install.php" method="post">
 							<?php if(isset($hasErrorOtherThanDatabase)) { ?>
@@ -48,10 +47,6 @@
 									<p class="error">
 										The database details don't appear to be correct.  Please <a href="#database_credentials">review and correct</a> before installing.
 									</p>
-								<?php } else { ?>
-									<p class="good">
-										These database details look all good!
-									</p>
 								<?php } ?>
 								
 								<?php if($adminReq->hasErrors()) { ?>
@@ -60,14 +55,11 @@
 									</p>
 								<?php } ?>
 								
-								<h3>Template to install:</h3>
-								<ul id="Themes">
-									<li><input type="radio" name="template" value="blackcandy" id="BlackCandy" <?php if(!isset($_POST['template']) || $_POST['template'] == 'blackcandy') {?>checked="checked"<?php }?>><label for="BlackCandy">BlackCandy, default template ready to use.</label></li>
-									<li><input type="radio" name="template" value="tutorial" id="EmptyTemplate" <?php if(isset($_POST['template']) && $_POST['template'] == 'tutorial') {?>checked="checked"<?php }?>><label for="EmptyTemplate">Empty template, ready to begin the tutorial.</label></li>
-								</ul>
-								<p>You can change the template or download another from the SilverStripe website after installation.</p>
-								
-								<input type="checkbox" id="stats" name="stats" checked="checked"><label for="stats">Send information on my webserver to SilverStripe (this is only version information, used for statistical purposes)</label><br>
+								<p id="stats-container">
+									<input type="checkbox" id="stats" name="stats" checked="checked">
+										<label for="stats">Send information about my webserver to silverstripe.org<br />
+											<small>(anonymized version information, used for statistical purposes)</small>
+									</label><p>
 								
 								<?php if($alreadyInstalled) { ?>
 									<p class="warning">
@@ -91,6 +83,13 @@
 										(this will take a minute or so)
 									</span>
 								</p>
+								
+								<h4 class="sectionHeading">Theme</h4>
+								<p>You can change the theme or <a href="http://silverstripe.org/themes">download</a> another from the SilverStripe website after installation.</p>
+								<ul id="Themes">
+									<li><input type="radio" name="template" value="blackcandy" id="BlackCandy" <?php if(!isset($_POST['template']) || $_POST['template'] == 'blackcandy') {?>checked="checked"<?php }?>><label for="BlackCandy"><a href="http://silverstripe.org/blackcandy/">BlackCandy</a> - our default theme ready to use.</label></li>
+									<li><input type="radio" name="template" value="tutorial" id="EmptyTemplate" <?php if(isset($_POST['template']) && $_POST['template'] == 'tutorial') {?>checked="checked"<?php }?>><label for="EmptyTemplate">Empty template - ready to begin the <a href="http://doc.silverstripe.org/doku.php?id=tutorials" target="_blank">tutorial</a>.</label></li>
+								</ul>
 							<?php } ?>
 			
 							<h4 class="sectionHeading">Database</h4>
@@ -102,16 +101,8 @@
 									<strong>Other databases:</strong><br>
 									Databases in the list that are greyed out cannot currently be used. Click on them for more information and possible remedies.
 								</p>
-								<div class="fields">
-									<?php if($envFileExists) { ?>
-									<div id="use_environment_field" class="field">
-										<input id="use_environment" type="checkbox" name="useEnv" <?php if($usingEnv) echo "checked=\"checked\"" ?>>
-										<label for="use_environment">Use _ss_environment file for configuration</label>
-									</div>
-									<?php } ?>
-								
+								<div class="fields">							
 									<div class="field">
-										<label>Database type:</label>
 										<ul id="database_selection">
 											<?php
 											foreach($databaseClasses as $class => $details) {
@@ -193,6 +184,14 @@
 											}
 											?>
 										</ul>
+										
+										<?php if($envFileExists) { ?>
+										<div id="use_environment_field" class="field">
+											<input id="use_environment" type="checkbox" name="useEnv" <?php if($usingEnv) echo "checked=\"checked\"" ?>>
+											<label for="use_environment">Use _ss_environment file for configuration (<a href="http://doc.silverstripe.org/doku.php?id=environment-management" target="_blank">?</a>)</label>
+										</div>
+										<?php } ?>
+										
 									</div>
 									
 									<div class="action">
@@ -205,39 +204,36 @@
 							
 							<?php $dbReq->showTable("Database Configuration"); ?>
 							
-							<h4 class="sectionHeading">SilverStripe Administration Account</h4>
+							<h4 class="sectionHeading">CMS Admin Account</h4>
 							<div id="AdminAccount" class="section">
 								<p id="adminAcc" class="helpText">
-									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.
+									We will set up the first administrator account for you automatically. You can change these details later in the "Security" section within the CMS.
 								</p>
 								<div class="fields">
 									<div class="field">
-										<label for="admin_username">Administrator email:</label>
+										<label for="admin_username">Email:</label>
 										<span class="middleColumn">
 											<input type="text" class="text configured-by-env" name="admin[username]" id="admin_username" value="<?php echo $adminConfig['username']; ?>" <?php if($usingEnv && defined('SS_DEFAULT_ADMIN_USERNAME')) echo 'disabled="disabled"' ?>>
 										</span>
 									</div>
 									<div class="field">
-										<label for="admin_password">Administrator password:</label>
+										<label for="admin_password">Password:</label>
 										<span class="middleColumn">
 											<input type="password" class="text configured-by-env" name="admin[password]" id="admin_password" value="<?php echo $adminConfig['password']; ?>" <?php if($usingEnv && defined('SS_DEFAULT_ADMIN_PASSWORD')) echo 'disabled="disabled"' ?>>
 										</span>
 									</div>
 									<div class="field">
-										<label for="admin_firstname">Administrator first name:</label>
+										<label for="admin_firstname">First name:</label>
 										<span class="middleColumn">
 											<input type="text" class="text" name="admin[firstname]" id="admin_firstname" value="<?php echo $adminConfig['firstname']; ?>">
 										</span>
 									</div>
 									<div class="field">
-										<label for="admin_surname">Administrator surname:</label>
+										<label for="admin_surname">Surname:</label>
 										<span class="middleColumn">
 											<input type="text" class="text" name="admin[surname]" id="admin_surname" value="<?php echo $adminConfig['surname']; ?>">
 										</span>
 									</div>
-									<div class="action">
-										<input type="submit" class="action" value="Re-check requirements">
-									</div>
 								</div>
 							</div>
 							
@@ -290,6 +286,14 @@ else echo 'localhost
 
 							<h4 id="requirements">Requirements</h4>
 							<?php $req->showTable(); ?>
+							
+							<p>
+								Read more about our <a href="http://doc.silverstripe.org/doku.php?id=server-requirements" target="_blank">server requirements</a>.
+							</p>
+							
+							<div class="action">
+								<input type="submit" class="action" value="Re-check requirements">
+							</div>
 						</form>
 					</div>
 				</div>
diff --git a/dev/install/install.css b/dev/install/install.css
index 646039b51..aa938dc8b 100644
--- a/dev/install/install.css
+++ b/dev/install/install.css
@@ -2,9 +2,19 @@ body {
 	text-align: center;
 }
 
+#Container .typography p {
+	margin-left: 0;
+	margin-right: 0;
+}
+
 #Container * {
 	text-align: left;
 }
+
+#Header p {
+	margin-left: 30px;
+}
+
 ul#Themes{
 	list-style: none;
 	margin: 5px;
@@ -12,6 +22,8 @@ ul#Themes{
 	ul#Themes li {
 		clear: both;
 		padding: 3px 0;
+		margin-left: 0;
+		padding-left: 0;
 	}
 	ul#Themes input {
 		float: left;
@@ -69,8 +81,9 @@ p.error a:hover {
 	text-decoration: none;
 }
 span.middleColumn {
-	width: 312px;
+	width: 297px;
 	margin-right: 0;
+	margin-top: 0;
 	padding: 4px;
 }
 input.text, textarea, select {
@@ -79,11 +92,13 @@ input.text, textarea, select {
 	color: #000;
 	font-size: 1.2em;
 	font-weight: bold;
-	width: 305px;
+	width: 290px;
+}
+#stats-container label {
+	display: inline;
 }
 #stats {
-	float: left;
-	margin: 5px;
+	margin-right: 5px;
 }
 table.testResults {
 	border-collapse: collapse;
@@ -108,6 +123,10 @@ table.testResults {
 	padding-top: 20px;
 }
 
+.typography label {
+	margin-bottom: 0;
+}
+
 .helpText {
 	float: right;
 	padding-right: 40px;
@@ -164,16 +183,16 @@ table.testResults {
 #database_selection {
 	overflow: hidden;
 	margin: 0;
-	margin-top: 15px;
 }
 	#database_selection li {
+		margin-left: 0;
+		padding-left: 0;
 	}
 		#database_selection li input {
 			margin-right: 5px;;
 		}
 		#database_selection li label {
 			display: inline;
-			font-weight: bold;
 		}
 
 .databaseError {
@@ -183,4 +202,12 @@ table.testResults {
 	margin: 10px;
 	margin-bottom: 0;
 	display: none;
-}
\ No newline at end of file
+}
+
+	.databaseError ul {
+		margin-bottom: 0;
+	}
+	.databaseError ul, .databaseError li {
+		margin-left: 0;
+		padding-left: 0;
+	}
\ No newline at end of file