## -*- coding: utf-8 -*- <%inherit file="/debug_style/index.html"/> <%def name="breadcrumbs_links()"> ${h.link_to(_('Style'), h.route_path('debug_style_home'))} » ${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</h2> <p>When working with forms, please upgrade to this new form layout. See the depreciated forms pages for the previous layout.</p> <p>These forms are marked by the class <code>rcform</code>. See html for details on formatting. </p> <p>Some other notes: The customized checkboxes and radio buttons use the label for styling. This has been disabled for lower versions of IE using the <code>:not()</code> selector. Select2 dropdowns need to be redone, but this may be in a later iteration. </p> <h2>Examples</h2> <form method='post' action='none' class="rcform"> <fieldset> <legend>Dropdown:</legend> <div class="fields"> <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> <script> $(document).ready(function() { $('#example_select').select2({ containerCssClass: 'drop-menu', dropdownCssClass: 'drop-menu-dropdown', dropdownAutoWidth: true, minimumResultsForSearch: -1 }); }); </script> </fields> </fieldset> <fieldset> <legend>Multiple Dropdowns in a list:</legend> <ul class="fields formlist"> <li> <select id="example_select3" > <option value="#">${_('Templates...')}</option> <option value="ga">Google Analytics</option> <option value="clicky">Clicky</option> <option value="server_announce">${_('Server Announcement')} </ option> </select> <script> $(document).ready(function() { $('#example_select3').select2({ containerCssClass: 'drop-menu', dropdownCssClass: 'drop-menu-dropdown', dropdownAutoWidth: true, minimumResultsForSearch: -1 }); }); </script> </li> <li> <select id="example_select4" > <option value="#">${_('Templates...')}</option> <option value="ga">Google Analytics</option> <option value="clicky">Clicky</option> <option value="server_announce">${_('Server Announcement')} </ option> </select> <script> $(document).ready(function() { $('#example_select4').select2({ containerCssClass: 'drop-menu', dropdownCssClass: 'drop-menu-dropdown', dropdownAutoWidth: true, minimumResultsForSearch: -1 }); }); </script> </li> <li> <select id="example_select5" > <option value="#">${_('Templates...')}</option> <option value="ga">Google Analytics</option> <option value="clicky">Clicky</option> <option value="server_announce">${_('Server Announcement')} </ option> </select> <script> $(document).ready(function() { $('#example_select5').select2({ containerCssClass: 'drop-menu', dropdownCssClass: 'drop-menu-dropdown', dropdownAutoWidth: true, minimumResultsForSearch: -1 }); }); </script> </li> </ul> </fieldset> <fieldset> <legend>Dropdown with checkbox:</legend> <div class="fields"> <select id="example_select2" > <option value="#">${_('Some text...')}</option> <option value="ga">A really long thing</option> <option value="clicky">Repo Name</option> <option value="server_announce">${_('Variable Item')}</option> </select> <input type="checkbox" name="size" id="size_1" value="small"/> <label for="size_1">Checkbox for something</label>\ <span class="label">Checkbox for something</span> <span class="help-block"> Note: There is a very specific selector which centers the checkbox on the dropdown; it requires that the script NOT be between the two. </span> </div> <script> $(document).ready(function() { $('#example_select2').select2({ containerCssClass: 'drop-menu', dropdownCssClass: 'drop-menu-dropdown', dropdownAutoWidth: true, minimumResultsForSearch: -1 }); }); </script> </fieldset> <fieldset> <legend>Radio Buttons:</legend> <div class="fields"> <input type="radio" name="size" id="size_2" value="small"/> <label for="size_2">Radio one</label> <span class="label">Radio Button One</span> <input type="radio" name="size" id="size_3" value="small"/> <label for="size_3">Radio two</label> <span class="label">Radio Button Two</span> <input type="radio" checked name="size" id="size_4" value="small"/> <label for="size_4">Radio three</label> <span class="label">Radio Button Three</span> </div> </fieldset> <fieldset> <legend>Checkboxes with help text:</legend> <div class="fields"> <input type="checkbox" name="size" id="size_5" value="small"/> <label for="size_5">Checkbox one</label> <span class="label">Checkbox One</span> <input type="checkbox" checked name="size" id="size_6" value="small"/> <label for="size_6">Checkbox two</label> <span class="label">Checkbox Two</span> <input type="checkbox" checked name="size" id="size_7" value="small"/> <label for="size_7">Checkbox three</label> <span class="label">Checkbox Three</span> <span class="help-block"> Help text can be put wherever needed. Inside of .fields, it is confined to the width of the input sections. </span> </div> </fieldset> <fieldset> <legend>Checkboxes as a list:</legend> <div class="fields"> <ul class="formlist"> <li> <input type="checkbox" name="size" id="size_8" value="small "/> <label for="size_8">Checkbox one</label> <span class="label">Checkbox One</span> </li> <li> <input type="checkbox" checked name="size" id="size_9" value=" small"/> <label for="size_9">Checkbox two</label> <span class="label">Checkbox Two</span> </li> <li> <input type="checkbox" checked name="size" id="size_10" value=" small"/> <label for="size_10">Checkbox three</label> <span class="label">Checkbox Three</span> </li> </ul> <span class="help-block"> In some instances, you may wish for dropdowns, checkboxes, or radio buttons to be in a list rather than inline. This is achieved using .formlist. </span> </div> </fieldset> <fieldset> <legend>Text Input:</legend> <div class="fields"> <input id="example_input" type="text" placeholder="Example input"> <input id="example_input" type="text" placeholder="Example input"> </div> </fieldset> <fieldset> <legend>Textarea:</legend> <div class="fields"> <textarea placeholder="This is a textarea."></textarea> </div> </fieldset> <fieldset> <legend>Some Inputs with a button:</legend> <div class="fields"> <input class="disabled" id="paths_root_path" name="paths_root_path" readonly="readonly" size="59" type="text" value="Disabled input"> <span id="path_unlock" class="tooltip" title="Click to unlock. You must restart RhodeCode in order to make this setting take effect."> <div class="btn btn-default"> <span><i id="path_unlock_icon" class="icon-lock"></i></span> </div> </span> <input id="paths_root_path" name="paths_root_path" size="59" type="text" placeholder="Input"> <span class="btn btn-x" onclick="ajaxDeletePattern(11,'id11')"> Delete </span> </div> </fieldset> <fieldset class="select side-by-side-selector"> <div class="left-group"> <label class="text" >${_('Chosen group members')}</label> <select id="users_group_members2" multiple size='8'> </select> <div class="btn" id="remove_all_elements2" > ${_('Remove all elements')} <i class="icon-chevron-right"></i> </div> </div> <div class="middle-group"> <i id="add_element2" class="icon-chevron-left"></i> <br /> <i id="remove_element2" class="icon-chevron-right"></i> </div> <div class="right-group"> <label class="text" >${_('Available members')}</label> <select id="available_members2" multiple size='8'> <option value="#">${_('Some example text...')}</option> <option value="ga">A really long thing</option> <option value="clicky">Repo Name</option> <option value="server_announce">${_('Variable Item')}</option> </select> <div class="btn" id="add_all_elements2" > <i class="icon-chevron-left"></i>${_('Add all elements')} </div> </div> </fieldset> <div class="buttons"> <input type="submit" value="Save" id="example_save" class="btn"> <input type="reset" value="Reset" id="example_reset" class="btn"> </div> </form> </div> <!-- .main-content --> </div> <!-- .sidebar-col-wrappe --> </div> <!-- .box --> </%def>