##// END OF EJS Templates
dependencies-js: moved mark.js into a seperate dependency
r3313:600516c2 default
Show More
form-elements-small.html
295 lines | 10.8 KiB | text/html | HtmlLexer
project: added all source files and assets
r1 ## -*- coding: utf-8 -*-
<%inherit file="/debug_style/index.html"/>
<%def name="breadcrumbs_links()">
dan
debug-style: moved from pylons controller to pyramid view.
r1900 ${h.link_to(_('Style'), h.route_path('debug_style_home'))}
project: added all source files and assets
r1 &raquo;
${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>