CAT-184 SCKO Fonts Continued

- Create new btn-responsive css class to handle button sizes
based on screen size
- Apply font size change to scko-footer-btn when under specific
resolutions, to keep text inside the button.

Signed-off-by: Kyle Huckins <khuckins@catalyte.io>
 Changes to be committed:
	modified:   KCLS/openils/var/templates_kcls/circ/selfcheck/main.tt2
	modified:   KCLS/openils/var/templates_kcls/circ/selfcheck/patron_login.tt2
	modified:   Open-ILS/web/css/skin/kcls/selfcheck.css

diff --git a/KCLS/openils/var/templates_kcls/circ/selfcheck/main.tt2 b/KCLS/openils/var/templates_kcls/circ/selfcheck/main.tt2
index 3f69444..28ff3a5 100644 (file)
--- a/KCLS/openils/var/templates_kcls/circ/selfcheck/main.tt2
+++ b/KCLS/openils/var/templates_kcls/circ/selfcheck/main.tt2
@@ -131,8 +131,8 @@ function switchTo(str,subpage) {
         </div>
         <div class="col-xs-12 col-sm-9 col-md-6">
           <div class="pad-vert greet"><span id="user_name"></span></div>
-          <div class="row header1">
-            <div class="col-xs-12">
+          <div class="row">
+            <div class="col-xs-12 header1">
               <label for="selfckScanBox">Scan your library item to begin check-out</label>
               <input type="text" jsId='selfckScanBox' class="form-control" id="selfckScanBox" dojoType='dijit.form.TextBox' />
             </div>
@@ -181,22 +181,22 @@ function switchTo(str,subpage) {
           <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-lg btn-primary scko-btn-sidebar">
+              class="btn btn-responsive 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-sidebar-btn">
             <button id='oils-selfck-nav-logout-print' alt='logout and print receipt' style=""
-              class="btn btn-lg btn-danger scko-btn-sidebar">Finish & Print Receipt</button>
+              class="btn btn-responsive btn-danger scko-btn-sidebar">Finish & Print Receipt</button>
           </div>
           <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-lg btn-danger hidden scko-btn-sidebar">Finish & Email Receipt</button>
+              class="btn btn-responsive btn-danger hidden scko-btn-sidebar">Finish & Email Receipt</button>
           </div>
           <div class="col-md-12 pad-vert-sidebar-btn">
             <button id='oils-selfck-nav-logout' alt='logout without receipt' style=""
-              class="btn btn-lg btn-danger scko-btn-sidebar">Finish No Receipt</button>
+              class="btn btn-responsive btn-danger scko-btn-sidebar">Finish No Receipt</button>
           </div>
             <script src="[% ctx.media_prefix %]/js/ui/kcls/circ/selfcheck/floating.js"></script>
           </div>
@@ -222,7 +222,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-lg btn-info">Return to Login</button>
+          class="btn btn-responsive 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 c7d3015..8d3977b 100644 (file)
--- a/KCLS/openils/var/templates_kcls/circ/selfcheck/patron_login.tt2
+++ b/KCLS/openils/var/templates_kcls/circ/selfcheck/patron_login.tt2
@@ -39,7 +39,7 @@
           <div class="col-xs-6 col-md-2">
             <div class="form-group">
               <div>&nbsp;</div> <!-- consistent vertical alignment -->
-              <button class="btn btn-lg btn-success" onfocus="checkLogin();
+              <button class="btn btn-responsive btn-success" onfocus="checkLogin();
               selfCheckMgr.loginPatron(dojo.byId('patron-login-username')
               .value,dojo.byId('patron-login-password').value);">
                 GO &gt;&gt;&gt;
@@ -52,7 +52,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-lg btn-warning" onclick="selfCheckMgr.logoutPatron();">
+              <button class="btn btn-responsive btn-warning" onclick="selfCheckMgr.logoutPatron();">
                 Cancel
               </button>
             </div>
@@ -61,7 +61,7 @@
         <div class="row">
           <div class="col-md-offset-3 col-xs-6 pad-vert">
             <button id="scko-contrast-toggle-button" 
-              class="btn btn-lg btn-default btn-high-contrast"
+              class="btn btn-responsive 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');">

diff --git a/Open-ILS/web/css/skin/kcls/selfcheck.css b/Open-ILS/web/css/skin/kcls/selfcheck.css
index dc50ee4..6461eaf 100644 (file)
--- a/Open-ILS/web/css/skin/kcls/selfcheck.css
+++ b/Open-ILS/web/css/skin/kcls/selfcheck.css
@@ -131,6 +131,7 @@ input[type=checkbox]
     overflow-y:auto;
     overflow-x:hidden;
 }
+
 @media screen and (max-height:584px) {
     .scko-table {
         height:55%;
@@ -183,6 +184,26 @@ input[type=checkbox]
         top:1px;
     }
 }
+@media screen and (min-width:1399px) {
+    .btn-responsive {
+        padding: 10px 16px;
+        font-size: 18px;
+        line-height: 1.3333333;
+        border-radius: 6px
+    }
+}
+@media only screen and (max-width:1281px) and (max-height:1025px) {
+    .btn-responsive {
+        padding: 6px 8px;
+        font-size: 12px;
+        line-height: 1.42857143;
+        border-radius: 4px;
+    }
+
+    .scko-footer-btn {
+        font-size:14px !important;
+    }
+}
 
 .scko-table-header {
     font-weight:bold;