Show More
buttons.html
197 lines
| 7.9 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>Buttons</h2> | ||||
<p> | ||||
Form buttons in various sizes. Buttons are always capitalised. | ||||
Use the following classes: | ||||
</p> | ||||
<ul> | ||||
## TODO: lisa: Are we actually using three sizes of buttons?? | ||||
<li><code>.btn-lg</code> for large buttons</li> | ||||
<li><code>.btn-sm</code> for small buttons</li> | ||||
<li><code>.btn-xs</code> for xtra small buttons</li> | ||||
</ul> | ||||
<p>Note that <code>.btn-mini</code> is supported for legacy reasons.</p> | ||||
<div class="bs-example"> | ||||
## TODO: johbo: Should also work without the form element | ||||
<form method='post' action=''> | ||||
<div class='form'> | ||||
<div class="buttons"> | ||||
<input type="submit" value="Save .btn-lg" id="example_save" class="btn btn-lg"> | ||||
<input type="reset" value="Reset" id="example_reset" class="btn btn-lg"> | ||||
<button class="btn btn-lg">Large</button> | ||||
<a class="btn btn-lg" href="#">A link as button</a> | ||||
</div> | ||||
<div class="buttons"> | ||||
<input type="submit" value="Save" id="example_save" class="btn"> | ||||
<input type="reset" value="Reset" id="example_reset" class="btn"> | ||||
<button class="btn">Normal</button> | ||||
<button class="btn btn-danger">Normal</button> | ||||
<a class="btn" href="#">A link as button</a> | ||||
</div> | ||||
<div class="buttons"> | ||||
<input type="submit" value="Save .btn-sm" id="example_save" class="btn btn-sm"> | ||||
<input type="reset" value="Reset" id="example_reset" class="btn btn-sm"> | ||||
<button class="btn btn-sm">Small</button> | ||||
<button class="btn btn-sm btn-danger">Small</button> | ||||
<a class="btn btn-sm" href="#">A link as button</a> | ||||
</div> | ||||
<div class="buttons"> | ||||
<input type="submit" value="Save .btn-xs" id="example_save" class="btn btn-xs"> | ||||
<input type="reset" value="Reset" id="example_reset" class="btn btn-xs"> | ||||
<button class="btn btn-xs">XSmall</button> | ||||
<button class="btn btn-xs btn-danger">XSmall</button> | ||||
<a class="btn btn-xs" href="#">A link as button</a> | ||||
</div> | ||||
<div class="buttons"> | ||||
<input type="submit" value="Save .btn-mini" id="example_save" class="btn btn-mini"> | ||||
<input type="reset" value="Reset" id="example_reset" class="btn btn-mini"> | ||||
</div> | ||||
<div class="buttons"> | ||||
Buttons of style <code>.btn-link</code>: | ||||
<input type="reset" value="Reset" id="example_reset" class="btn btn-link"> | ||||
<button class="btn btn-link">Edit</button> | ||||
<button class="btn btn-danger btn-link">Delete</button> | ||||
</div> | ||||
</div> | ||||
</form> | ||||
</div> | ||||
<h2>Buttons as Links</h2> | ||||
<p> | ||||
Most of our Edit/Delete buttons come in the following form. | ||||
Inside of a table, these are "action buttons", and while an | ||||
Edit <em>link</em> is a typical blue link, a Delete <em>button</em> | ||||
is red as per the 'btn-danger' styling and use <code>.btn-link</code>. | ||||
</p> | ||||
<p> | ||||
We use "Delete" when the thing being deleted cannot be undone; | ||||
"Reset", and "Revoke" are used where applicable. | ||||
</p> | ||||
<p> | ||||
Note: Should there be a need for a change in the wording, be | ||||
aware that corresponding documentation may also need updating. | ||||
</p> | ||||
<div class="bs-example"> | ||||
<table class="rctable edit_fields"> | ||||
<tr><td></td><td></td></tr> | ||||
<tr> | ||||
<td></td> | ||||
<td class=" td-action"> | ||||
<div class="grid_edit"> | ||||
<a href="/_admin/repo_groups/breads/edit" title="Edit">Edit</a> | ||||
</div> | ||||
<div class="grid_delete"> | ||||
<form action="/_admin/repo_groups/breads" method="post"><div style="display:none"> | ||||
<input name="_method" type="hidden" value="delete"> | ||||
</div> | ||||
<div style="display: none;"><input id="csrf_token" name="csrf_token" type="hidden" value="03d6cc48726b885039b2f7675e85596b7dae6ecf"></div> | ||||
r1945 | <button class="btn btn-link btn-danger" type="submit" onclick="return confirm('" +_ungettext('confirm="" to="" delete="" this="" group:="" %s="" with="" repository','confirm="" repositories',gr_count)="" %="" (repo_group_name,="" gr_count)+"');"=""> | |||
r1 | Delete | |||
</button> | ||||
</form> | ||||
</div> | ||||
</td> | ||||
</tr> | ||||
</table> | ||||
<div class="highlight-html"><xmp> | ||||
<a href="some-link" title="${_('Edit')}">${_('Edit')}</a> | ||||
<button class="btn btn-link btn-danger" type="submit" | ||||
onclick="return confirm('${_('Confirm to remove this field: Field')}');"> | ||||
${_('Delete')} | ||||
</button> | ||||
</xmp></div> | ||||
</div> | ||||
<h2>Buttons disabled</h2> | ||||
<p>Note that our application still uses the class <code>.disabled</code> | ||||
in some places. Interim we support both but prefer to use the | ||||
attribute <code>disabled</code> where possible.</p> | ||||
<div class="bs-example"> | ||||
## TODO: johbo: Should also work without the form element | ||||
<form method='post' action=''> | ||||
<div class='form'> | ||||
<div class="buttons"> | ||||
<input type="submit" value="Save .btn-lg" id="example_save" class="btn btn-lg" disabled> | ||||
<input type="reset" value="Reset" id="example_reset" class="btn btn-lg" disabled> | ||||
<button class="btn btn-lg" disabled>Large</button> | ||||
</div> | ||||
<div class="buttons"> | ||||
<input type="submit" value="Save" id="example_save" class="btn" disabled> | ||||
<input type="reset" value="Reset" id="example_reset" class="btn" disabled> | ||||
<button class="btn" disabled>Normal</button> | ||||
<button class="btn btn-danger" disabled>Normal</button> | ||||
</div> | ||||
<div class="buttons"> | ||||
<input type="submit" value="Save .btn-sm" id="example_save" class="btn btn-sm" disabled> | ||||
<input type="reset" value="Reset" id="example_reset" class="btn btn-sm" disabled> | ||||
<button class="btn btn-sm" disabled>Small</button> | ||||
<button class="btn btn-sm btn-danger" disabled>Small</button> | ||||
</div> | ||||
<div class="buttons"> | ||||
<input type="submit" value="Save .btn-xs" id="example_save" class="btn btn-xs" disabled> | ||||
<input type="reset" value="Reset" id="example_reset" class="btn btn-xs" disabled> | ||||
<button class="btn btn-xs" disabled>XSmall</button> | ||||
<button class="btn btn-xs btn-danger" disabled>XSmall</button> | ||||
</div> | ||||
<div class="buttons"> | ||||
<input type="submit" value="Save .btn-mini" id="example_save" class="btn btn-mini" disabled> | ||||
<input type="reset" value="Reset" id="example_reset" class="btn btn-mini" disabled> | ||||
</div> | ||||
<div class="buttons"> | ||||
Buttons of style <code>.btn-link</code>: | ||||
<input type="reset" value="Reset" id="example_reset" class="btn btn-link" disabled> | ||||
<button class="btn btn-link" disabled>Edit</button> | ||||
<button class="btn btn-link btn-danger" disabled>Delete</button> | ||||
</div> | ||||
</div> | ||||
</form> | ||||
</div> | ||||
</div> | ||||
</div> <!-- .main-content --> | ||||
</div> <!-- .box --> | ||||
</%def> | ||||