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;
} }
@ -33,7 +34,7 @@
padding-top: 60px; padding-top: 60px;
} }
h1,label { h1, label {
text-shadow: 1px 1px 1px #FFFFFF; text-shadow: 1px 1px 1px #FFFFFF;
} }
@ -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,210 +71,185 @@
<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>
<div class="container-fluid"> <div class="container-fluid">
<div class="row-fluid"> <div class="row-fluid">
<div class="sidebar span-3"> <div class="sidebar span-3">
<div class="well"> <div class="well">
<h5>Administrative</h5> <h5>Administrative</h5>
<ul> <ul>
<li><a href="#">Manage Clients</a></li> <li><a href="#">Manage Clients</a></li>
<li><a href="#">White Lists</a></li> <li><a href="#">White Lists</a></li>
<li><a href="#">Black Lists</a></li> <li><a href="#">Black Lists</a></li>
</ul> </ul>
<h5>Personal</h5> <h5>Personal</h5>
<ul> <ul>
<li><a href="#">Manage Sites</a></li> <li><a href="#">Manage Sites</a></li>
<li><a href="#">Manage Active Tokens</a></li> <li><a href="#">Manage Active Tokens</a></li>
<li><a href="#">Profile</a></li> <li><a href="#">Profile</a></li>
</ul> </ul>
</div>
</div> </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> <li class="active"><a href="#">Manage Clients</a><span class="divider">/</span></li>
<li class="active"><a href="#">Manage Clients</a><span class="divider">/</span></li> Edit Client
Edit Client </ul>
</ul>
<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"> <div class="well">
<label for="xlInput">Client Name</label>
<div class="row-fluid">
<div class="input"> <div class="span6">
<input type="text" size="30" name="xlInput" id="xlInput" class="xlarge"> <label>Client name</label>
</div> <input type="text" class="span3" placeholder="Type something"> <span class="help-inline">Associated help text!</span>
</div>
<label>Refresh URL</label>
<input type="text" class="span3" placeholder="http://"><span class="help-inline">Associated help text!</span>
</div>
<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 class="control-group"> <hr>
<label for="prependedInput">Redirect Url</label>
<div class="input"> <div class="">
<div class="input-prepend"> <p class="help-block">Refresh tokens allow clients to request another authorization
<span class="add-on">http://</span> token after it
<input type="text" size="16" name="prependedInput" id="prependedInput" expires.</p>
class="medium"> <label class="checkbox">
<input type="checkbox"> Allow refresh tokens?
</label>
<button type="submit" class="btn btn-primary">Submit</button>
</div> </div>
<span class="help-block">Url to be redirected</span>
</div> </div>
</div> </fieldset>
<fieldset>
<legend>Additional Options</legend>
<div class="row-fluid">
<div class="control-group"> <div class="span4 control-group">
<label id="optionsCheckboxes">Grant Types:</label>
<div class="input"> <label class="control-label">Grant Types</label>
<ul class="inputs-list">
<li> <div class="controls">
<label> <label class="checkbox">
<input type="checkbox" value="option1" name="optionsCheckboxes"> <input type="checkbox" name="grant-type-checkbox-list1" value="option1">
<span>Grant Type Blah</span> Option one
</label> </label>
</li> <label class="checkbox">
<li> <input type="checkbox" name="grant-type-checkbox-list2" value="option2">
<label> Option two
<input type="checkbox" value="option2" name="optionsCheckboxes">
<span>Grant Type Blah</span>
</label> </label>
</li> <label class="checkbox">
<li> <input type="checkbox" name="grant-type-checkbox-list3" value="option3">
<label> Option three
<input type="checkbox" value="option2" name="optionsCheckboxes">
<span>Grant Type Blah</span>
</label> </label>
</li>
</ul>
<span class="help-block">
<strong>Note:</strong> Grant type help text.
</span>
</div>
</div>
<div class="control-group"> <p class="help-block"><strong>Note:</strong> Labels surround all the options for
<label for="textarea2">Scope</label> much larger click areas and a more usable form.</p>
</div>
<div class="input"> </div>
<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="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>
<span class="help-block">
<strong>Note:</strong> Authority type help text.
</span>
</div>
</div>
<div class="control-group"> <p class="help-block"><strong>Note:</strong> Labels surround all the options for
<label for="appendedInput">Access Token Timeout</label> much larger click areas and a more usable form.</p>
</div>
<div class="input">
<div class="input-append">
<input type="text" size="16" name="appendedInput" id="appendedInput" class="mini">
<label class="add-on">seconds</label>
</div> </div>
</div>
</div>
<div class="control-group"> <div class="span4 control-group">
<label for="form-description">Description</label> <label class="control-label" for="access-token-timeout-seconds" style="">Access Token Timeout</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="access-token-timeout-seconds" size="16"><span class="add-on">seconds</span>
</div> </div>
</div> <span class="help-inline">Here's more help text</span>
</div>
<div class="control-group"> <label class="control-label" for="refresh-token-timeout-seconds" style="">Refresh Token Timeout</label>
<label id="form-allow-tokens">Allow refresh tokens?</label>
<div class="input"> <div class="controls form-horizontal" style="">
<ul class="inputs-list"> <div class="input-append">
<li> <input type="text" class="span2" id="refresh-token-timeout-seconds" size="16"><span class="add-on">seconds</span>
<label> </div>
<input type="checkbox" value="option1" name="form-allow-tokens"> <span class="help-inline">Here's more help text</span>
<span>&nbsp;</span> </div>
</label>
</li> </div>
</ul>
<div class="span12 control-group">
<label for="textarea2">Scope</label>
<div class="input">
<textarea rows="3" class="xlarge span10" placeholder="email,first name, last name" id="textarea2" name="textarea2"></textarea>
<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>
<footer>
<p>&copy; Company 2012</p>
</footer>
</div> </div>
</div>
<footer>
<p>&copy; Company 2012</p>
</footer>
</div> </div>
</body> </body>
</html> </html>

Loading…
Cancel
Save