JBAS-1728 SCKO login examples / placeholders

Make examples look less like headers by making them less prominent and
moving them under each's input.

Make the input placeholder text larger for login username/password.

Signed-off-by: Bill Erickson <berickxx@gmail.com>

diff --git a/KCLS/openils/var/templates_kcls/circ/selfcheck/patron_login.tt2 b/KCLS/openils/var/templates_kcls/circ/selfcheck/patron_login.tt2
index bb2c419..1c3a581 100644 (file)
--- a/KCLS/openils/var/templates_kcls/circ/selfcheck/patron_login.tt2
+++ b/KCLS/openils/var/templates_kcls/circ/selfcheck/patron_login.tt2
@@ -1,4 +1,12 @@
 <div class="container scko-container">
+<style>
+  .login-input::-webkit-input-placeholder { 
+    font-size: 15px;
+  }
+  .login-input::-moz-placeholder { 
+    font-size: 15px;
+  }
+</style>
 <div class="row">
   <div class="col-md-12">
     <h2>1) Scan your library card barcode OR type your library card number or username<br />2) Type your PIN</h2>
@@ -13,18 +21,22 @@
       <div class="col-md-8">
         <div class="form-group">
           <div id='oils-selfck-status-div2' class='status_box'></div>
-          <label class="control-label" for="patron-login-username">Example 0017620030</label>
-          <input type="text" id='patron-login-username' class="form-control" placeholder="Enter your library card number here"/>
+          <input type="text" id='patron-login-username' 
+            class="form-control login-input" 
+            placeholder="Enter your library card number here"/>
+          <div style='margin-top:3px'>Example 0017620030</div>
         </div>
       </div>
     </div>
     <div class="row">
       <div class="col-md-10">
-        <label class="control-label" for="patron-login-password">Example 0926</label>
         <div class="row">
           <div class="col-md-6">
             <div class="form-group">
-              <input type="password" id='patron-login-password' class="form-control" placeholder="Enter your PIN here"/>
+              <input type="password" id='patron-login-password' 
+                class="form-control login-input" 
+                placeholder="Enter your PIN here"/>
+              <div style='margin-top:3px;'>Example 0926</div>
             </div>
           </div>
           <div class="col-xs-6 col-md-2">