tonyair/silverstripe-userforms
1
0
Fork 0
mirror of https://github.com/silverstripe/silverstripe-userforms.git synced 2024-10-22 17:05:42 +02:00
Code Issues Projects Releases Wiki Activity

Add lightweight base form styling

Browse Source
This commit is contained in:
David Craig 2015-08-06 14:19:05 +12:00 committed by Damian Mooyman
parent c58d15fc67
commit e0aa7cd812
5 changed files with 56 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
code/model/UserDefinedForm.php
View File

@ -307,6 +307,7 @@ class UserDefinedForm_Controller extends Page_Controller {
// load the jquery // load the jquery
$lang = i18n::get_lang_from_locale(i18n::get_locale()); $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(FRAMEWORK_DIR .'/thirdparty/jquery/jquery.js');
Requirements::javascript(USERFORMS_DIR . '/thirdparty/jquery-validate/jquery.validate.min.js'); Requirements::javascript(USERFORMS_DIR . '/thirdparty/jquery-validate/jquery.validate.min.js');
Requirements::add_i18n_javascript(USERFORMS_DIR . '/javascript/lang'); Requirements::add_i18n_javascript(USERFORMS_DIR . '/javascript/lang');

29
css/UserForm.css Normal file
View File

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

2
javascript/UserForm_frontend.js
View File

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

20
templates/Includes/UserFormProgress.ss
View File

@ -1,17 +1,19 @@
<% cached "UserForms_Navigation", $LastEdited %> <% cached "UserForms_Navigation", $LastEdited %>
<% if $NumberOfSteps.Count > "1" %> <% 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> <p>Step <span class="current-step-number">1</span> of $NumberOfSteps.Count</p>
<div class="progress"> <div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="$NumberOfSteps.Count"></div> <div class="progress-bar" role="progressbar" aria-valuenow="1" aria-valuemin="1" aria-valuemax="$NumberOfSteps.Count"></div>
</div> </div>
<ul> <nav>
<% loop $NumberOfSteps %> <ul class="step-buttons">
<li <% if $Pos == '1' %>class="current"<% end_if %>> <% loop $NumberOfSteps %>
<button class="step-button-jump">$Pos</button> <li class="step-button-wrapper<% if $Pos == '1' %> current<% end_if %>">
</li> <button class="step-button-jump">$Pos</button>
<% end_loop %> </li>
<ul> <% end_loop %>
</nav> <ul>
</nav>
</div>
<% end_if %> <% end_if %>
<% end_cached %> <% end_cached %>

20
templates/Includes/UserFormStepNav.ss
View File

@ -1,22 +1,28 @@
<% if $FirstLast == "first last" %> <% if $FirstLast == "first last" %>
<% else %> <% else %>
<nav class="step-navigation" aria-hidden="true" style="display:none;"> <nav class="step-navigation" aria-hidden="true" style="display:none;">
<ul> <ul class="step-buttons">
<% if $FirstLast == "first" %> <% if $FirstLast == "first" %>
<% else %> <% 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 %> <% end_if %>
<% if $FirstLast == "last" %> <% if $FirstLast == "last" %>
<% if $ContainingPage.Actions %> <% if $ContainingPage.Actions %>
<div class="Actions"> <% loop $ContainingPage.Actions %>
<% loop $ContainingPage.Actions %> <li class="step-button-wrapper">
$Field $Field
<% end_loop %> </li>
</div> <% end_loop %>
<% end_if %> <% end_if %>
<% else %> <% 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 %> <% end_if %>
</ul> </ul>
</nav> </nav>