|
|
<%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>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>
|
|
|
<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)+"');"="">
|
|
|
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>
|
|
|
|
