form hints are back in business on the registration page

could easily be added to the other forms as well but this would need some moving around (registration.css is wrong) and changes to the layouts (hint takes the available 4 columns remaining on the right of the grid)

diff --git a/portal/static/css/registration.css b/portal/static/css/registration.css
index e41f9e2..1a274a2 100644 (file)
--- a/portal/static/css/registration.css
+++ b/portal/static/css/registration.css
@@ -13,6 +13,19 @@ label.error {
     font-size: 12px; 
 }
 
-.hint {
+.form-hint {
     display:none;
 }
+/* show up hints when hovering on a the field */
+/* pick a small font to avoid flickering effects */
+div.form-group:hover p.form-hint {
+    display: block;
+    color: #FFFFFF;
+    background: rgba(0, 0, 0, 0.6);
+    padding: 3px 10px;
+    font-size: small;
+    
+    -moz-border-radius: 7px;
+    -webkit-border-radius: 7px;
+    border-radius: 7px;
+}

diff --git a/portal/templates/registration_view.html b/portal/templates/registration_view.html
index dcc239b..6b41691 100644 (file)
--- a/portal/templates/registration_view.html
+++ b/portal/templates/registration_view.html
@@ -32,15 +32,15 @@
       <label for="firstname" class="col-md-4 control-label">First Name</label>
       <div class="col-md-4">
        <input type="text" name="firstname" class="required form-control" minlength="2" value="{{ firstname }}" placeholder="First Name" />
-       <p class="hint">Enter your first name</p>
       </div>
+      <div class="col-md-4"> <p class="form-hint">Enter your first name</p> </div>
     </div>
     <div class="form-group">
       <label for="lastname" class="col-md-4 control-label">Last Name</label>
       <div class="col-md-4">
        <input type="text" name="lastname" size="25" class="required form-control" minlength="2" value="{{ lastname }}" placeholder="Last Name" />
-       <p class="hint">Enter your last name</p>
       </div>
+      <div class="col-md-4"><p class="form-hint">Enter your last name</p></div>
     </div>
     <div class="form-group">
       <label for="auth_list" class="col-md-4 control-label">Authority</label>
@@ -50,31 +50,31 @@
          <option value="{{ authority.authority_hrn }}"/>{{authority.name}} ({{authority.authority_hrn}})</option>
          {% endfor %}
        </select>
-       <p class="hint">Please select an authority responsible for vetting your account</p>
       </div>
+      <div class="col-md-4"><p class="form-hint">Please select an authority responsible for vetting your account</p></div>
     </div>
     
     <div class="form-group">
       <label for="email" class="col-md-4 control-label">Email</label>
       <div class="col-md-4">
        <input type="email" name="email" size="25"  class="required form-control" value="{{ email }}"/> 
-       <p class="hint">Enter a valid email address</p>
       </div>
+      <div class="col-md-4"><p class="form-hint">Enter a valid email address</p></div>
     </div>
     <div class="form-group">
       <label for="password" class="col-md-4 control-label">Password</label>
       <div class="col-md-4">
        <input type="password"  id="password" name="password"   class="required form-control" minlength="4" value="{{ password }}"/> 
-       <p class="hint">Enter password</p>
       </div>
+      <div class="col-md-4"><p class="form-hint">Enter password</p></div>
     </div>
     <div class="form-group">
       <label for="password" class="col-md-4 control-label">Confirm Password</label>
       <div class="col-md-4">
        <input type="password"  id="confirmpassword" name="confirmpassword"   minlength="4" class="required form-control" 
               value="" placeholder="Confirm Password"/>
-       <p class="hint">Retype the password</p>
       </div>
+      <div class="col-md-4"><p class="form-hint">Retype the password</p></div>
     </div>
     <div class="form-group">
       <label for="question" class="col-md-4 control-label">My Keys</label>
@@ -83,16 +83,16 @@
          <option value="generate">Generate key pairs for me </option>
          <option value="upload">Upload my public key </option>
        </select>
-       <p class="hint">Genkey: Account Delegation Automatic (Recommended)</p> 
       </div>
+      <div class="col-md-4"><p class="form-hint">Genkey: Account Delegation Automatic (Recommended)</p> </div>
     </div>
     <div class="form-group" style="display:none;" id="upload_key">
       <label for="file" class="col-md-4 control-label">Upload public key</label>
       <div class="col-md-4">
        <input type="file" name="user_public_key" class="required" id="user_public_key"/>
-       <p class="hint">Account Delegation: Manual (Advanced Users)</p>
        <p class="warning" id="pkey_del_msg">Once your account is validated, you will have to delegate your credentials manually using SFA [Advanced users only]</p>
       </div>
+      <div class="col-md-4"><p class="form-hint">Account Delegation: Manual (Advanced Users)</p></div>
     </div>
     <div class="form-group" id="register">
       <div class="col-md-offset-4 col-md-4">