My Users

My users is where shopper admins can administer the users on their account. There are currency fields and some options contained within all with CSS hooks for styling.

The layout here is an unordered list containing the user's username as a heading followed by a definition list containing the user information.

<p class="new-user"><a href="/my-users.html?v=new">Create new user</a></p>
 
<ul>
	<li class="odd">
		<form action="..." method="post" enctype="application/x-www-form-urlencoded">
			<fieldset>
				<h3>username</h3>
				<dl class="account-info">
					<dt>Name</dt>
					<dd class="text">John Doe</dd>
					<dt>Email</dt>
					<dd class="text"><a href="..." title="Compose email to John Doe">johndoe@example.com</a></dd>
					<dt>Remaining budget</dt>
					<dd class="currency">
                                               <span class="currency-field" id="my-budget" >
                                                       <span class="amount"><input type="text" name="..." value="..." size="12" /></span>
                                                       <span class="select-currency">
                                                               <select name="...">
                                                                        <option value="EUR">&euro;</option>
                                                                        <option value="GBP" selected="selected" >&pound;</option>
                                                                        <option value="USD">$</option>
                                                               </select>
                                                       </span>
                                               </span>
                                               <input type="submit" value="Update" class="submit" />
                                        </dd>
					<dt>Monthly budget</dt>
					<dd class="currency">
                                               <span class="currency-field" id="monthly-budget" >
                                                       <span class="amount"><input type="text" name="..." value="0" size="12" /></span>
                                                       <span class="select-currency">
                                                                <select name="...">
                                                                        <option value="EUR">&euro;</option>
                                                                        <option value="GBP" selected="selected" >&pound;</option>
                                                                        <option value="USD">$</option>
                                                                </select>
                                                       </span>
                                               </span>
                                               <input type="submit" value="Update" class="submit" />
                                        </dd>
					<dt>Options</dt>
					<dd class="options">
						<a class="disable" href="..." title="Disable this account">Disable</a> | 
						<a class="delete" href="..." title="Delete this account">Delete</a>
                                        </dd>
				</dl>
			</fieldset>
		</form>
	</li>
</ul>

The main thing to note here is that as with the usual form conventions, the <dd>s have a class name denoting what information they contain eg. .currency or .text. Use these to apply some general styling to the <input> and <select> if needed.

There is also a 'create new user' section under my-users. It is a simple LIST form.

NOTE: The following code is written out for all currency fields but is earmarked to change slightly in the future.

  <dd class="currency">
    <span class="currency-field" id="monthly-budget" >
      <span class="amount"><input type="text" name="..." value="0" size="12" /></span>
      <span class="select-currency">
        <select name="...">
          <option value="EUR">&euro;</option>
          <option value="GBP" selected="selected" >&pound;</option>
          <option value="USD">$</option>
        </select>
      </span>
    </span>
  </dd>