Client management modal mockup

pull/59/head
Michael Jett 2012-02-14 12:34:30 -05:00
parent a3a305aa06
commit 3f7d922324
1 changed files with 147 additions and 4 deletions

View File

@ -6,6 +6,21 @@
<meta name="description" content="">
<meta name="author" content="">
<!-- Le javascript -->
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="../bootstrap/js/bootstrap-modal.js"></script>
<script src="../bootstrap/js/bootstrap-alerts.js"></script>
<script src="../bootstrap/js/bootstrap-twipsy.js"></script>
<script src="../bootstrap/js/bootstrap-popover.js"></script>
<script src="../bootstrap/js/bootstrap-dropdown.js"></script>
<script src="../bootstrap/js/bootstrap-scrollspy.js"></script>
<script src="../bootstrap/js/bootstrap-tabs.js"></script>
<script src="../bootstrap/js/bootstrap-buttons.js"></script>
<script>$(function () {
})</script>
<!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
@ -33,6 +48,126 @@
<body>
<div id="modal-from-dom" class="modal hide fade" style="width: 577px; max-height: none; top: 35%">
<div class="modal-header">
<a href="#" class="close">&times;</a>
<h3>Edit Client</h3>
</div>
<div class="modal-body">
<form>
<fieldset>
<legend>OpenID Client</legend>
<div class="clearfix">
<label for="xlInput">Client Name</label>
<div class="input">
<input type="text" size="30" name="xlInput" id="xlInput" class="xlarge">
</div>
</div>
<div class="clearfix">
<label for="prependedInput">Redirect Url</label>
<div class="input">
<div class="input-prepend">
<span class="add-on">http://</span>
<input type="text" size="16" name="prependedInput" id="prependedInput" class="medium">
</div>
<span class="help-block">Url to be redirected</span>
</div>
</div>
<div class="clearfix">
<label id="optionsCheckboxes">Grant Types:</label>
<div class="input">
<ul class="inputs-list">
<li>
<label>
<input type="checkbox" value="option1" name="optionsCheckboxes">
<span>Grant Type Blah</span>
</label>
</li>
<li>
<label>
<input type="checkbox" value="option2" name="optionsCheckboxes">
<span>Grant Type Blah</span>
</label>
</li>
<li>
<label>
<input type="checkbox" value="option2" name="optionsCheckboxes">
<span>Grant Type Blah</span>
</label>
</li>
</ul>
<span class="help-block">
<strong>Note:</strong> Grant type help text.
</span>
</div>
</div>
<div class="clearfix">
<label for="textarea2">Scope</label>
<div class="input">
<textarea rows="3" name="textarea2" id="textarea2" class="xlarge">email,first name</textarea>
<span class="help-block">
Please enter scopes separated by commas
</span>
</div>
</div>
<div class="clearfix">
<label for="normalSelect">Authority</label>
<div class="input">
<select id="normalSelect" name="normalSelect">
<option>My Authority Option 1</option>
<option>My Authority Option 2</option>
</select>
</div>
</div>
</fieldset>
<div class="clearfix">
<label for="form-description">Description</label>
<div class="input">
<input type="text" size="30" name="form-description" id="form-description" class="xlarge">
</div>
</div>
<div class="clearfix">
<label id="form-allow-tokens">Allow refresh tokens?</label>
<div class="input">
<ul class="inputs-list">
<li>
<label>
<input type="checkbox" value="option1" name="form-allow-tokens">
<span>&nbsp;</span>
</label>
</li>
</ul>
<span class="help-block">
<strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form.
</span>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<a href="#" class="btn primary">Save</a>
<a href="#" class="btn secondary">Cancel</a>
</div>
</div>
<div class="topbar">
<div class="topbar-inner">
<div class="container-fluid">
@ -120,7 +255,9 @@
</td>
<td><input type="checkbox" checked="checked" value="" id="" name="" disabled></td>
<td>
<button class="btn">edit</button>
<button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true"
class="btn">edit
</button>
</td>
<td>
<button class="btn danger">delete</button>
@ -151,7 +288,9 @@
</td>
<td><input type="checkbox" checked="checked" value="" id="" name="" disabled></td>
<td>
<button class="btn">edit</button>
<button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true"
class="btn">edit
</button>
</td>
<td>
<button class="btn danger">delete</button>
@ -182,7 +321,9 @@
</td>
<td><input type="checkbox" checked="checked" value="" id="" name="" disabled></td>
<td>
<button class="btn">edit</button>
<button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true"
class="btn">edit
</button>
</td>
<td>
<button class="btn danger">delete</button>
@ -213,7 +354,9 @@
</td>
<td><input type="checkbox" checked="checked" value="" id="" name="" disabled></td>
<td>
<button class="btn">edit</button>
<button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true"
class="btn">edit
</button>
</td>
<td>
<button class="btn danger">delete</button>