Edit form mock-up updates. Organized forms and input.

pull/59/head
Michael Jett 13 years ago
parent 51b8650327
commit b38c8c18d6

@ -15,6 +15,7 @@
padding-top: 60px; padding-top: 60px;
padding-bottom: 40px; padding-bottom: 40px;
} }
.sidebar-nav { .sidebar-nav {
padding: 9px 0; padding: 9px 0;
} }
@ -62,6 +63,7 @@
<span class="icon-bar"></span> <span class="icon-bar"></span>
</a> </a>
<a class="brand" href="#">Project name</a> <a class="brand" href="#">Project name</a>
<div class="nav-collapse"> <div class="nav-collapse">
<ul class="nav"> <ul class="nav">
<li class="active"><a href="#">Home</a></li> <li class="active"><a href="#">Home</a></li>
@ -69,7 +71,8 @@
<li><a href="#contact">Contact</a></li> <li><a href="#contact">Contact</a></li>
</ul> </ul>
<p class="navbar-text pull-right">Logged in as <a href="#">username</a></p> <p class="navbar-text pull-right">Logged in as <a href="#">username</a></p>
</div><!--/.nav-collapse --> </div>
<!--/.nav-collapse -->
</div> </div>
</div> </div>
</div> </div>
@ -94,8 +97,7 @@
</div> </div>
<div class="span9">
<div class="span-9">
<div class=""> <div class="">
<ul class="breadcrumb"> <ul class="breadcrumb">
<li><a href="#">Home</a> <span class="divider">/</span></li> <li><a href="#">Home</a> <span class="divider">/</span></li>
@ -106,173 +108,148 @@
<h1>Edit Client</h1> <h1>Edit Client</h1>
<div id="edit-client-form">
<div>
<div class="">
<form> <form>
<fieldset> <fieldset>
<legend>OpenID Client</legend> <legend>Details</legend>
</fieldset>
<div class="control-group">
<label for="xlInput">Client Name</label>
<div class="input"> <div class="well">
<input type="text" size="30" name="xlInput" id="xlInput" class="xlarge">
</div>
</div>
<div class="control-group"> <div class="row-fluid">
<label for="prependedInput">Redirect Url</label> <div class="span6">
<label>Client name</label>
<input type="text" class="span3" placeholder="Type something"> <span class="help-inline">Associated help text!</span>
<div class="input"> <label>Refresh URL</label>
<div class="input-prepend"> <input type="text" class="span3" placeholder="http://"><span class="help-inline">Associated help text!</span>
<span class="add-on">http://</span>
<input type="text" size="16" name="prependedInput" id="prependedInput"
class="medium">
</div> </div>
<span class="help-block">Url to be redirected</span> <div class="span6">
<label>Description</label>
<textarea class="input-xlarge" id="textarea" placeholder="Type a description" rows="3"></textarea> <span class="help-inline">Associated help text!</span>
</div> </div>
</div> </div>
<div class="control-group"> <hr>
<label id="optionsCheckboxes">Grant Types:</label>
<div class="input"> <div class="">
<ul class="inputs-list"> <p class="help-block">Refresh tokens allow clients to request another authorization
<li> token after it
<label> expires.</p>
<input type="checkbox" value="option1" name="optionsCheckboxes"> <label class="checkbox">
<span>Grant Type Blah</span> <input type="checkbox"> Allow refresh tokens?
</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> </label>
</li> <button type="submit" class="btn btn-primary">Submit</button>
</ul>
<span class="help-block">
<strong>Note:</strong> Grant type help text.
</span>
</div> </div>
</div> </div>
</fieldset>
<fieldset>
<legend>Additional Options</legend>
<div class="control-group"> <div class="row-fluid">
<label for="textarea2">Scope</label>
<div class="input"> <div class="span4 control-group">
<textarea rows="3" name="textarea2" id="textarea2" class="xlarge">email,first
name</textarea> <label class="control-label">Grant Types</label>
<span class="help-block">
Please enter scopes separated by commas <div class="controls">
</span> <label class="checkbox">
<input type="checkbox" name="grant-type-checkbox-list1" value="option1">
Option one
</label>
<label class="checkbox">
<input type="checkbox" name="grant-type-checkbox-list2" value="option2">
Option two
</label>
<label class="checkbox">
<input type="checkbox" name="grant-type-checkbox-list3" value="option3">
Option three
</label>
<p class="help-block"><strong>Note:</strong> Labels surround all the options for
much larger click areas and a more usable form.</p>
</div> </div>
</div> </div>
<div class="control-group"> <div class="span4 control-group">
<label id="authorities">Authorities:</label>
<div class="input"> <label class="control-label">Auth Types</label>
<ul class="inputs-list">
<li> <div class="controls">
<label> <label class="checkbox">
<input type="checkbox" name="optionsCheckboxes" value="option1"> <input type="checkbox" name="auth-type-checkbox-list1" value="option1">
<span>Authority Type Blah</span> Option one
</label> </label>
</li> <label class="checkbox">
<li> <input type="checkbox" name="auth-type-checkbox-list2" value="option2">
<label> Option two
<input type="checkbox" name="optionsCheckboxes" value="option2">
<span>Authority Type Blah</span>
</label> </label>
</li> <label class="checkbox">
<li> <input type="checkbox" name="auth-type-checkbox-list3" value="option3">
<label> Option three
<input type="checkbox" name="optionsCheckboxes" value="option2">
<span>Authority Type Blah</span>
</label> </label>
</li>
</ul> <p class="help-block"><strong>Note:</strong> Labels surround all the options for
<span class="help-block"> much larger click areas and a more usable form.</p>
<strong>Note:</strong> Authority type help text.
</span>
</div> </div>
</div> </div>
<div class="control-group"> <div class="span4 control-group">
<label for="appendedInput">Access Token Timeout</label> <label class="control-label" for="access-token-timeout-seconds" style="">Access Token Timeout</label>
<div class="input"> <div class="controls form-horizontal" style="">
<div class="input-append"> <div class="input-append">
<input type="text" size="16" name="appendedInput" id="appendedInput" class="mini"> <input type="text" class="span2" id="access-token-timeout-seconds" size="16"><span class="add-on">seconds</span>
<label class="add-on">seconds</label>
</div>
</div> </div>
<span class="help-inline">Here's more help text</span>
</div> </div>
<div class="control-group"> <label class="control-label" for="refresh-token-timeout-seconds" style="">Refresh Token Timeout</label>
<label for="form-description">Description</label>
<div class="input"> <div class="controls form-horizontal" style="">
<input type="text" size="30" name="form-description" id="form-description" <div class="input-append">
class="xlarge"> <input type="text" class="span2" id="refresh-token-timeout-seconds" size="16"><span class="add-on">seconds</span>
</div>
<span class="help-inline">Here's more help text</span>
</div> </div>
</div> </div>
<div class="control-group">
<label id="form-allow-tokens">Allow refresh tokens?</label> <div class="span12 control-group">
<label for="textarea2">Scope</label>
<div class="input"> <div class="input">
<ul class="inputs-list"> <textarea rows="3" class="xlarge span10" placeholder="email,first name, last name" id="textarea2" name="textarea2"></textarea>
<li>
<label>
<input type="checkbox" value="option1" name="form-allow-tokens">
<span>&nbsp;</span>
</label>
</li>
</ul>
<span class="help-block"> <span class="help-block">
<strong>Note:</strong> Labels surround all the options for much larger click areas and a more usable form. Please enter scopes separated by commas
</span> </span>
</div> </div>
</div> </div>
<div class="control-group">
<label for="appendedInput">Refresh Token Timeout</label>
<div class="input">
<div class="input-append">
<input type="text" size="16" name="appendedInput" id="refresh-token-timout"
class="mini">
<label class="add-on">seconds</label>
</div>
</div>
</div> </div>
</fieldset>
</form> </form>
</div> </div>
<div class="modal-footer">
<a href="#" class="btn primary">Save</a>
<a href="#" class="btn secondary">Cancel</a>
</div>
</div> </div>
</div> </div>
</div>
<footer> <footer>
<p>&copy; Company 2012</p> <p>&copy; Company 2012</p>
</footer> </footer>
</div> </div>
</div>
</div>
</body> </body>
</html> </html>

Loading…
Cancel
Save