CAT-177 SCKO Button Tweaks

- Increase space between Sidebar buttons.
- Make Login nad sidebar buttons bigger.
- Bold text on Sidebar buttons.

Signed-off-by: Kyle Huckins <khuckins@catalyte.io>

diff --git a/KCLS/openils/var/templates_kcls/circ/selfcheck/main.tt2 b/KCLS/openils/var/templates_kcls/circ/selfcheck/main.tt2
index e05ad2c..f460ef9 100644 (file)
--- a/KCLS/openils/var/templates_kcls/circ/selfcheck/main.tt2
+++ b/KCLS/openils/var/templates_kcls/circ/selfcheck/main.tt2
@@ -176,25 +176,25 @@ function switchTo(str,subpage) {
             <div class="col-md-12">
           </div>
 
-          <div class="col-md-12 pad-vert-btn">
+          <div class="col-md-12 pad-vert-sidebar-btn">
             <a href="javascript:;" id="back_button" 
               onclick="switchTo('step3'); dojo.byId('oils-selfck-status-div').innerHTML = '';"
-              class="btn btn-primary">
+              class="btn btn-lg btn-primary scko-btn-sidebar">
               <img alt='back to checkout' class="scko-btn-to-checkout" src="[% ctx.media_prefix %]/images/selfcheck/arrow.png"/>
               <span>Back to Check-out</span></a>
           </div>
 
-          <div class="col-md-12 pad-vert-btn">
+          <div class="col-md-12 pad-vert-sidebar-btn">
             <button id='oils-selfck-nav-logout-print' alt='logout and print receipt' style=""
-              class="btn btn-danger">Finish & Print Receipt</button>
+              class="btn btn-lg btn-danger scko-btn-sidebar">Finish & Print Receipt</button>
           </div>
-          <div class="col-md-12 pad-vert-btn">
+          <div class="col-md-12 pad-vert-sidebar-btn">
             <button id='oils-selfck-nav-logout-email' alt='logout and email receipt' style=""
-              class="btn btn-danger hidden">Finish & Email Receipt</button>
+              class="btn btn-lg btn-danger hidden scko-btn-sidebar">Finish & Email Receipt</button>
           </div>
-          <div class="col-md-12 pad-vert-btn">
+          <div class="col-md-12 pad-vert-sidebar-btn">
             <button id='oils-selfck-nav-logout' alt='logout without receipt' style=""
-              class="btn btn-danger">Finish No Receipt</button>
+              class="btn btn-lg btn-danger scko-btn-sidebar">Finish No Receipt</button>
           </div>
             <script src="[% ctx.media_prefix %]/js/ui/kcls/circ/selfcheck/floating.js"></script>
           </div>
@@ -220,7 +220,7 @@ function switchTo(str,subpage) {
     <div class="row pad-vert">
       <div class="col-md-12">
         <button id='oils-selfck-nav-return-login' alt='Return to Login'
-          class="btn btn-info">Return to Login</button>
+          class="btn btn-lg btn-info">Return to Login</button>
       </div>
     </div>
   </div></div>

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 1c3a581..ba4eb7e 100644 (file)
--- a/KCLS/openils/var/templates_kcls/circ/selfcheck/patron_login.tt2
+++ b/KCLS/openils/var/templates_kcls/circ/selfcheck/patron_login.tt2
@@ -41,8 +41,9 @@
           </div>
           <div class="col-xs-6 col-md-2">
             <div class="form-group">
-              <button class="btn btn-success" onfocus="checkLogin(); 
-                selfCheckMgr.loginPatron(dojo.byId('patron-login-username').value,dojo.byId('patron-login-password').value);">
+              <button class="btn btn-lg btn-success" onfocus="checkLogin();
+              selfCheckMgr.loginPatron(dojo.byId('patron-login-username')
+              .value,dojo.byId('patron-login-password').value);">
                 GO &gt;&gt;&gt;
               </button>
             </div>
@@ -52,7 +53,7 @@
               <!-- patron is not logged in, but cancel calls logout both
                 to clear the form (particularly of passwords) and to allow
                 for the necessary page redirects (e.g. return-to url). -->
-              <button class="btn btn-warning" onclick="selfCheckMgr.logoutPatron();">
+              <button class="btn btn-lg btn-warning" onclick="selfCheckMgr.logoutPatron();">
                 Cancel
               </button>
             </div>
@@ -60,7 +61,7 @@
         </div>
         <div class="row">
           <div class="col-md-offset-3 col-xs-6 pad-vert">
-            <button id="scko-contrast-toggle-button" class="btn btn-default btn-high-contrast"
+            <button id="scko-contrast-toggle-button" class="btn btn-lg btn-default btn-high-contrast"
             onclick="swapStyleSheet('[% ctx.media_prefix %]/css/skin/kcls/selfcheck-high-contrast.css',
               '[% ctx.media_prefix %]/css/skin/kcls/selfcheck-default.css');"><span id="scko-contrast-toggle">Turn on High Contrast Mode</span></button>
           </div>

diff --git a/Open-ILS/web/css/skin/kcls/selfcheck.css b/Open-ILS/web/css/skin/kcls/selfcheck.css
index d7f121f..6c08371 100644 (file)
--- a/Open-ILS/web/css/skin/kcls/selfcheck.css
+++ b/Open-ILS/web/css/skin/kcls/selfcheck.css
@@ -59,6 +59,9 @@ h2 {
 .pad-vert-btn {
     padding-bottom: 5px;
 }
+.pad-vert-sidebar-btn {
+    padding-bottom:10px;
+}
 
 .navbar-brand {
   padding: 0px;
@@ -94,6 +97,11 @@ h2 {
     height:18px;
     width:28px;
 }
+
+.scko-btn-sidebar {
+    font-weight: bold;
+}
+
 .scko-logo {
     width:100%;
     height:100%;