From e0aa7cd8122cdfefaeb376b4b234a3bd3c90db78 Mon Sep 17 00:00:00 2001
From: David Craig <david@silverstripe.com>
Date: Thu, 6 Aug 2015 14:19:05 +1200
Subject: [PATCH] Add lightweight base form styling

---
 code/model/UserDefinedForm.php         |  1 +
 css/UserForm.css                       | 29 ++++++++++++++++++++++++++
 javascript/UserForm_frontend.js        |  2 ++
 templates/Includes/UserFormProgress.ss | 20 ++++++++++--------
 templates/Includes/UserFormStepNav.ss  | 20 +++++++++++-------
 5 files changed, 56 insertions(+), 16 deletions(-)
 create mode 100644 css/UserForm.css

diff --git a/code/model/UserDefinedForm.php b/code/model/UserDefinedForm.php
index a4c6e19..6fbc60d 100755
--- a/code/model/UserDefinedForm.php
+++ b/code/model/UserDefinedForm.php
@@ -307,6 +307,7 @@ class UserDefinedForm_Controller extends Page_Controller {
 		
 		// load the jquery
 		$lang = i18n::get_lang_from_locale(i18n::get_locale());
+		Requirements::css(USERFORMS_DIR . '/css/UserForm.css');
 		Requirements::javascript(FRAMEWORK_DIR .'/thirdparty/jquery/jquery.js');
 		Requirements::javascript(USERFORMS_DIR . '/thirdparty/jquery-validate/jquery.validate.min.js');
 		Requirements::add_i18n_javascript(USERFORMS_DIR . '/javascript/lang');
diff --git a/css/UserForm.css b/css/UserForm.css
new file mode 100644
index 0000000..cfdbf62
--- /dev/null
+++ b/css/UserForm.css
@@ -0,0 +1,29 @@
+/**
+ * Lightweight base styles for the front-end form.
+ */
+#userform-progress .step-buttons,
+.step-navigation .step-buttons {
+	margin-left: 0;
+}
+
+#userform-progress .step-buttons .step-button-wrapper,
+.step-navigation .step-buttons .step-button-wrapper {
+	display: inline-block;
+	list-style-type: none;
+}
+
+#userform-progress .progress {
+	position: relative;
+	height: 1em;
+	background: #eee;
+}
+
+#userform-progress .progress .progress-bar {
+	position: absolute;
+	height: 1em;
+	background: #666;
+}
+
+.userform {
+	clear: both;
+}
diff --git a/javascript/UserForm_frontend.js b/javascript/UserForm_frontend.js
index 0fce9cd..dad383a 100644
--- a/javascript/UserForm_frontend.js
+++ b/javascript/UserForm_frontend.js
@@ -169,6 +169,8 @@ jQuery(function ($) {
 			self.update(newStep + 1);
 		});
 
+		this.update(1);
+
 		return this;
 	}
 
diff --git a/templates/Includes/UserFormProgress.ss b/templates/Includes/UserFormProgress.ss
index af45d48..4fbe80c 100644
--- a/templates/Includes/UserFormProgress.ss
+++ b/templates/Includes/UserFormProgress.ss
@@ -1,17 +1,19 @@
 <% cached "UserForms_Navigation", $LastEdited %>
 <% if $NumberOfSteps.Count > "1" %>
-<nav id="userform-progress" aria-hidden="true" style="display:none;">
+<div id="userform-progress" aria-hidden="true" style="display:none;">
 	<p>Step <span class="current-step-number">1</span> of $NumberOfSteps.Count</p>
 	<div class="progress">
 		<div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="$NumberOfSteps.Count"></div>
 	</div>
-	<ul>
-		<% loop $NumberOfSteps %>
-			<li <% if $Pos == '1' %>class="current"<% end_if %>>
-				<button class="step-button-jump">$Pos</button>
-			</li>
-		<% end_loop %>
-	<ul>
-</nav>
+	<nav>
+		<ul class="step-buttons">
+			<% loop $NumberOfSteps %>
+				<li class="step-button-wrapper<% if $Pos == '1' %> current<% end_if %>">
+					<button class="step-button-jump">$Pos</button>
+				</li>
+			<% end_loop %>
+		<ul>
+	</nav>
+</div>
 <% end_if %>
 <% end_cached %>
diff --git a/templates/Includes/UserFormStepNav.ss b/templates/Includes/UserFormStepNav.ss
index e6eca8a..c776a3c 100644
--- a/templates/Includes/UserFormStepNav.ss
+++ b/templates/Includes/UserFormStepNav.ss
@@ -1,22 +1,28 @@
 <% if $FirstLast == "first last" %>
 <% else %>
 <nav class="step-navigation" aria-hidden="true" style="display:none;">
-	<ul>
+	<ul class="step-buttons">
 		<% if $FirstLast == "first" %>
 		<% else %>
-		<li><button class="step-button-prev">Prev</button><li>
+		<li class="step-button-wrapper">
+			<button class="step-button-prev">Prev</button>
+		</li>
 		<% end_if %>
 
 		<% if $FirstLast == "last" %>
+
 		<% if $ContainingPage.Actions %>
-		<div class="Actions">
-			<% loop $ContainingPage.Actions %>
+		<% loop $ContainingPage.Actions %>
+		<li class="step-button-wrapper">
 			$Field
-			<% end_loop %>
-		</div>
+		</li>
+		<% end_loop %>
 		<% end_if %>
+
 		<% else %>
-		<li><button class="step-button-next">Next</button></li>
+		<li class="step-button-wrapper">
+			<button class="step-button-next">Next</button>
+		</li>
 		<% end_if %>
 	</ul>
 </nav>