Add lightweight base form styling

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');

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;
+}

javascript/UserForm_frontend.js

@@ -169,6 +169,8 @@ jQuery(function ($) {
 			self.update(newStep + 1);
 		});
 
+		this.update(1);
+
 		return this;
 	}
 

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 %>

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>