Show More
form-elements-small.html
295 lines
| 10.8 KiB
| text/html
|
HtmlLexer
r1 | ## -*- coding: utf-8 -*- | |||
<%inherit file="/debug_style/index.html"/> | ||||
<%def name="breadcrumbs_links()"> | ||||
r1900 | ${h.link_to(_('Style'), h.route_path('debug_style_home'))} | |||
r1 | » | |||
${c.active} | ||||
</%def> | ||||
<%def name="real_main()"> | ||||
<div class="box"> | ||||
<div class="title"> | ||||
${self.breadcrumbs()} | ||||
</div> | ||||
<div class='sidebar-col-wrapper'> | ||||
${self.sidebar()} | ||||
<div class="main-content"> | ||||
<h2>Simple form elements (Depreciated)</h2> | ||||
<p>The wrapping <code>.field</code> also gets the class | ||||
<code>.field-sm</code>.</p> | ||||
<p>Buttons get additional the class <code>.btn-sm</code>.</p> | ||||
<div class="bs-example"> | ||||
<form method='post' action='none'> | ||||
<div class='form'> | ||||
<div class='fields'> | ||||
<div class='field field-sm'> | ||||
<div class='label'> | ||||
<label for='example_input'>Example input label:</label> | ||||
</div> | ||||
<div class='input'> | ||||
<input id="example_input" type="text" placeholder="Example input"> | ||||
</div> | ||||
</div> | ||||
<div class='field field-sm'> | ||||
<div class='label'> | ||||
<label for='example_input_ro'>Example input readonly:</label> | ||||
</div> | ||||
<div class='input'> | ||||
<input id="example_input_ro" type="text" readonly="readonly" placeholder="Example input"> | ||||
</div> | ||||
</div> | ||||
<div class='field field-sm'> | ||||
<div class='label'> | ||||
<label for='example_select'>Example select input:</label> | ||||
</div> | ||||
<div class="select"> | ||||
<select id="example_select" > | ||||
<option value="#">${_('Templates...')}</option> | ||||
<option value="ga">Google Analytics</option> | ||||
<option value="clicky">Clicky</option> | ||||
<option value="server_announce">${_('Server Announcement')}</option> | ||||
</select> | ||||
</div> | ||||
</div> | ||||
<script> | ||||
$(document).ready(function() { | ||||
$('#example_select').select2({ | ||||
containerCssClass: 'drop-menu', | ||||
dropdownCssClass: 'drop-menu-dropdown', | ||||
dropdownAutoWidth: true, | ||||
minimumResultsForSearch: -1 | ||||
}); | ||||
}); | ||||
</script> | ||||
<div class='field field-sm'> | ||||
<div class='label'> | ||||
<label for='example_checkbox'>Example checkbox:</label> | ||||
</div> | ||||
<div class="checkboxes"> | ||||
<div class="checkbox"> | ||||
<input id="example_checkbox" type="checkbox"> | ||||
<label for="example_checkbox">Label of the checkbox</label> | ||||
</div> | ||||
</div> | ||||
</div> | ||||
<div class='field field-sm'> | ||||
<div class='label'> | ||||
<label for='example_checkboxes'>Example multiple checkboxes:</label> | ||||
</div> | ||||
<div class="checkboxes"> | ||||
<div class="checkbox"> | ||||
<input id="example_checkboxes_01" type="checkbox"> | ||||
<label for="example_checkboxes_01">Label of the first checkbox</label> | ||||
</div> | ||||
<div class="checkbox"> | ||||
<input id="example_checkboxes_02" type="checkbox"> | ||||
<label for="example_checkboxes_02">Label of the first checkbox</label> | ||||
</div> | ||||
<div class="checkbox"> | ||||
<input id="example_checkboxes_03" type="checkbox"> | ||||
<label for="example_checkboxes_03">Label of the first checkbox</label> | ||||
</div> | ||||
</div> | ||||
</div> | ||||
<div class='field field-sm'> | ||||
<div class='label'> | ||||
<label for='example_checkboxes'>Example multiple checkboxes:</label> | ||||
</div> | ||||
## TODO: johbo: This is off compared to the checkboxes | ||||
<div class="radios"> | ||||
<label><input type="radio" checked="checked" value="hg.create.repository" name="default_repo_create" id="default_repo_create_hgcreaterepository">Enabled</label> | ||||
<label><input type="radio" value="hg.create.none" name="default_repo_create" id="default_repo_create_hgcreatenone">Disabled</label> | ||||
<span class="help-block"> | ||||
Permission to allow repository creation. This includes ability to create | ||||
repositories in root level. If this option is disabled admin of | ||||
repository group can still create repositories inside that | ||||
repository group. | ||||
</span> | ||||
</div> | ||||
</div> | ||||
<div class="buttons"> | ||||
<input type="submit" value="Save" id="example_save" class="btn btn-sm"> | ||||
<input type="reset" value="Reset" id="example_reset" class="btn btn-sm"> | ||||
</div> | ||||
</div> | ||||
</div> | ||||
</form> | ||||
</div> | ||||
<h2>Help text in form elements</h2> | ||||
<div class="bs-example"> | ||||
<form method='post' action=''> | ||||
<div class='form'> | ||||
<div class='fields'> | ||||
<div class='field field-sm'> | ||||
<div class='label'> | ||||
<label for='02_example_input'>Example input label:</label> | ||||
</div> | ||||
<div class='input'> | ||||
<input id="02_example_input" type="text" placeholder="Placeholder text"> | ||||
<span class="help-block"> | ||||
Example help text for this input element. This help text | ||||
will be shown under the input element itself. It can be | ||||
so long that it will span multiple lines. | ||||
</span> | ||||
</div> | ||||
</div> | ||||
<div class='field field-sm'> | ||||
<div class='label'> | ||||
<label for='02_example_checkbox'>Example checkbox with help block:</label> | ||||
</div> | ||||
<div class="checkboxes"> | ||||
<div class="checkbox"> | ||||
<input id="02_example_checkbox" type="checkbox"> | ||||
<label for="02_example_checkbox">Label of the checkbox</label> | ||||
</div> | ||||
<span class="help-block"> | ||||
Example help text for this checkbox element. This help text | ||||
will be shown under the checkbox element itself. It can be | ||||
so long that it will span multiple lines. | ||||
</span> | ||||
</div> | ||||
</div> | ||||
<div class='field field-sm'> | ||||
<div class='label'> | ||||
<label>Multiple checkboxes:</label> | ||||
</div> | ||||
<div class="checkboxes"> | ||||
<div class="checkbox"> | ||||
<input id="02_example_checkboxes_01" type="checkbox"> | ||||
<label for="02_example_checkboxes_01">Label of the first checkbox</label> | ||||
</div> | ||||
<div class="checkbox"> | ||||
<input id="02_example_checkboxes_02" type="checkbox"> | ||||
<label for="02_example_checkboxes_02">Label of the first checkbox</label> | ||||
</div> | ||||
<div class="checkbox"> | ||||
<input id="02_example_checkboxes_03" type="checkbox"> | ||||
<label for="02_example_checkboxes_03">Label of the first checkbox</label> | ||||
</div> | ||||
<span class="help-block"> | ||||
Example help text for this checkbox element. This help text | ||||
will be shown under the checkbox element itself. It can be | ||||
so long that it will span multiple lines. | ||||
</span> | ||||
</div> | ||||
</div> | ||||
</div> | ||||
</div> | ||||
</form> | ||||
</div> | ||||
<h2>Error messages</h2> | ||||
<div class="bs-example"> | ||||
<form method='post' action=''> | ||||
<div class='form'> | ||||
<div class='fields'> | ||||
<div class='field field-sm'> | ||||
<div class='label'> | ||||
<label for='04_example_input'>Example input label:</label> | ||||
</div> | ||||
<div class='input'> | ||||
<input id="04_example_input" type="text" placeholder="Example input"/> | ||||
<span class="error-message"> | ||||
If form validation fails, some input fields can show an | ||||
error message close to the field. | ||||
</span> | ||||
</div> | ||||
</div> | ||||
</div> | ||||
</div> | ||||
</form> | ||||
</div> | ||||
<h2>Fields with buttons</h2> | ||||
<div class="bs-example"> | ||||
<form method='post' action=''> | ||||
<div class='form'> | ||||
<div class='fields'> | ||||
<div class='field field-sm'> | ||||
<div class='label'> | ||||
<label for='05_example_input'>Example input label:</label> | ||||
</div> | ||||
<div class='input'> | ||||
<input id="05_example_input" type="text" readonly="readonly" placeholder="Example input"> | ||||
<span class="btn action_button btn-x"> | ||||
<i class="icon-remove-sign"></i> | ||||
delete | ||||
</span> | ||||
<span class="help-block"> | ||||
Used if there is a list of values and the user can remove | ||||
single entries. | ||||
</span> | ||||
</div> | ||||
</div> | ||||
<div class='field field-sm'> | ||||
<div class='label'> | ||||
<label for='05_example_input'>Example input label:</label> | ||||
</div> | ||||
<div class='input'> | ||||
<input id="05_example_input" type="text" readonly="readonly" placeholder="Example input"> | ||||
<span title="Click to unlock. You must restart RhodeCode in order to make this setting take effect." | ||||
class="tooltip" id="path_unlock" | ||||
tt_title="Click to unlock. You must restart RhodeCode in order to make this setting take effect."> | ||||
<div class="btn btn-default"> | ||||
<span><i class="icon-lock" id="path_unlock_icon"></i></span> | ||||
</div> | ||||
</span> | ||||
<span class="help-block"> | ||||
Used together with locked fields, the user has to first | ||||
unlock and afterwards it is possible to change the value. | ||||
</span> | ||||
</div> | ||||
</div> | ||||
</div> | ||||
</div> | ||||
</form> | ||||
</div> | ||||
</div> | ||||
</div> <!-- .main-content --> | ||||
</div> <!-- .box --> | ||||
</%def> | ||||