From 1d198ca05d99b311f1519d6247c8141246d0582d Mon Sep 17 00:00:00 2001
From: Nivanka Fonseka <nivanka@silverstripers.com>
Date: Mon, 20 Mar 2023 15:45:30 +1300
Subject: [PATCH] added a HTML wrapper to make it easier to style

---
 .../Form/Includes/UserFormProgress.ss         | 28 ++++++++++---------
 1 file changed, 15 insertions(+), 13 deletions(-)

diff --git a/templates/SilverStripe/UserForms/Form/Includes/UserFormProgress.ss b/templates/SilverStripe/UserForms/Form/Includes/UserFormProgress.ss
index 5bfb843..96210a7 100644
--- a/templates/SilverStripe/UserForms/Form/Includes/UserFormProgress.ss
+++ b/templates/SilverStripe/UserForms/Form/Includes/UserFormProgress.ss
@@ -1,19 +1,21 @@
 <% if $Steps.Count > 1 %>
 	<div id="userform-progress" class="userform-progress" aria-hidden="true" style="display:none;">
 		<p>Page <span class="current-step-number">1</span> of <span class="total-step-number">$Steps.Count</span></p>
-		<div class="progress">
-			<div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="$Steps.Count"></div>
-		</div>
-		<nav aria-label="Pages in this form">
-			<ul class="step-buttons">
-				<% loop $Steps %>
-				<li class="step-button-wrapper<% if $IsFirst %> current<% end_if %>" data-for="$Name">
-					<%-- Remove js-align class to remove javascript positioning --%>
-					<button class="step-button-jump js-align" disabled="disabled" data-step="$Pos"><% if $Top.ButtonText %>$Top.ButtonText <% end_if %>$Pos</button>
-				</li>
-				<% end_loop %>
-			</ul>
-		</nav>
+        <div class="userform-progress-navigator">
+            <div class="progress">
+                <div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="$Steps.Count"></div>
+            </div>
+            <nav aria-label="Pages in this form">
+                <ul class="step-buttons">
+                    <% loop $Steps %>
+                        <li class="step-button-wrapper<% if $IsFirst %> current<% end_if %>" data-for="$Name">
+                            <%-- Remove js-align class to remove javascript positioning --%>
+                            <button class="step-button-jump js-align" disabled="disabled" data-step="$Pos"><% if $Top.ButtonText %>$Top.ButtonText <% end_if %>$Pos</button>
+                        </li>
+                    <% end_loop %>
+                </ul>
+            </nav>
+        </div>
 	</div>
 	<h2 class="progress-title"></h2>
 <% end_if %>