From: Bill Erickson <berickxx@gmail.com>
Date: Wed, 21 Feb 2018 21:14:23 +0000 (-0500)
Subject: JBAS-1984 SCKO more misc. tewaks
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=bacdcd73d9efb842762dda79b6da901f30f44cd9;p=working%2FEvergreen.git

JBAS-1984 SCKO more misc. tewaks

Add enter PIN instructions

JBAS-1984 Hi-contrast text color tweaks

JBAS-1984 V-align SCKO go/cancel buttons w/ text

Top of go/cancel buttons lines up with top of PIN text input.

JBAS-1984 Increase vert padding for logout buttons

JBAS-1984 SCKO font css consolidation

Migrate font-embiggening into the default and high-contrast css files
using @media params.

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

diff --git a/KCLS/openils/var/templates_kcls/circ/selfcheck/main.tt2 b/KCLS/openils/var/templates_kcls/circ/selfcheck/main.tt2
index f58c55ee3d..3f69444df4 100644
--- a/KCLS/openils/var/templates_kcls/circ/selfcheck/main.tt2
+++ b/KCLS/openils/var/templates_kcls/circ/selfcheck/main.tt2
@@ -5,10 +5,9 @@
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="[% ctx.media_prefix %]/js/ui/default/staff/build/css/bootstrap.min.css" />
 <link rel='stylesheet' type='text/css' href='[% ctx.media_prefix %]/css/skin/kcls/selfcheck.css'/>
-<!--
-<link rel='stylesheet' id="style" type='text/css' href='[% ctx.media_prefix %]/css/skin/kcls/selfcheck-default.css' title="default">
--->
-<link rel='stylesheet' id="style" type='text/css' href='[% ctx.media_prefix %]/css/skin/kcls/selfcheck-font-d.css' title="default">
+<link rel='stylesheet' id="style" type='text/css' title="default"
+  href='[% ctx.media_prefix %]/css/skin/kcls/selfcheck-default.css'>
+
 <script src="[% ctx.media_prefix %]/js/ui/default/common/build/js/jquery.min.js"></script>
 
 <!-- Global site tag (gtag.js) - Google Analytics -->
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 54d3b6a3c1..c7d30150b4 100644
--- a/KCLS/openils/var/templates_kcls/circ/selfcheck/patron_login.tt2
+++ b/KCLS/openils/var/templates_kcls/circ/selfcheck/patron_login.tt2
@@ -30,6 +30,7 @@
         <div class="row">
           <div class="col-md-6">
             <div class="form-group">
+              <div style='margin-top:3px'>Enter your PIN here</div>
               <input type="password" id='patron-login-password' 
                 class="form-control login-input" 
                 placeholder="Example: 0926"/>
@@ -37,6 +38,7 @@
           </div>
           <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();
               selfCheckMgr.loginPatron(dojo.byId('patron-login-username')
               .value,dojo.byId('patron-login-password').value);">
@@ -46,6 +48,7 @@
           </div>
           <div class="col-xs-6 col-md-2">
             <div class="form-group">
+              <div>&nbsp;</div> <!-- consistent vertical alignment -->
               <!-- 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). -->
@@ -57,9 +60,13 @@
         </div>
         <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"
-            onclick="swapStyleSheet('[% ctx.media_prefix %]/css/skin/kcls/selfcheck-high-contrast.css',
-              '[% ctx.media_prefix %]/css/skin/kcls/selfcheck-font-d.css');"><span id="scko-contrast-toggle">Turn on High Contrast Mode</span></button>
+            <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>
         </div>
       </div>
diff --git a/Open-ILS/web/css/skin/kcls/selfcheck-default.css b/Open-ILS/web/css/skin/kcls/selfcheck-default.css
index fc9604f0dc..05eac7e525 100644
--- a/Open-ILS/web/css/skin/kcls/selfcheck-default.css
+++ b/Open-ILS/web/css/skin/kcls/selfcheck-default.css
@@ -2,22 +2,22 @@
 	Basic Colors for Self-checkout interface
  */
 html, body {
-    font-size: 20px;
+    font-size: 18px;
 }
 a {
     color: #003399;
 }
 
 label {
-    font-size:18px;
+    font-size:16px;
 }
 
 h1 {
-    font-size: 24px;
+    font-size: 22px;
 }
 
 h2 {
-    font-size: 22px;
+    font-size: 20px;
 }
 
 #header {
@@ -25,11 +25,11 @@ h2 {
 }
 
 #main-content-scko h1 {
-    font-size: 22px;
+    font-size: 20px;
 }
 
 #main-content-scko h1 {
-    font-size: 18px;
+    font-size: 16px;
 }
 
 #main-content-scko li {
@@ -42,12 +42,12 @@ h2 {
 
 .navbar-text-scko {
     color:white;
-    font-size:27px;
+    font-size:25px;
 }
 
 .scko-container {
     color: #585d5e;
-    font-size: 15px;
+    font-size: 13px;
     background-color: #FFF;
 }
 
@@ -61,11 +61,6 @@ h2 {
     border-color: #ccc
 }
 
-.btn {
-    font-size: 16px;
-}
-
-
 .container-background {
     background: #353535;
 }
@@ -79,23 +74,23 @@ h2 {
 }
 
 .checkout {
-    font-size:16px;
+    font-size:14px;
 }
 
 .checkout h1 {
-    font-size:22px;
+    font-size:20px;
 }
 
 .checkout h2 {
-    font-size:18px;
+    font-size:16px;
 }
 
 .checkout .userid {
-    font-size:20px;
+    font-size:18px;
 }
 
 .checkout .item_table td {
-    font-size:20px;
+    font-size:18px;
     border:2px solid black;
 }
 
@@ -122,7 +117,7 @@ h2 {
         background:-o-linear-gradient(top, #008ec2 5%, #023a4f 100%);
         background:-ms-linear-gradient(top, #008ec2 5%, #023a4f 100%);
         background:linear-gradient(to bottom, #008ec2 5%, #023a4f 100%);
-        font-size:20px;
+        font-size:18px;
         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#008ec2', endColorstr='#023a4f',GradientType=0);
         background-color:#02729E;
         color:#ffffff;
@@ -139,3 +134,31 @@ h2 {
         background-color:#02729E;
     }
 }
+
+
+/* Use bigger fonts for bigger monitors.
+ * Current monitor screen resolutions are:
+ *  1280x1024
+ *  1920x1080
+ */
+
+@media screen and (min-width:1600px) {
+    html, body { font-size: 26px; }
+    label { font-size:24px; }
+    h1 { font-size: 30px; }
+    h2 { font-size: 28px; }
+    #main-content-scko h1 { font-size: 28px; }
+    #main-content-scko h1 { font-size: 24px; }
+    #main-content-scko li { margin-top: 16px; }
+    .navbar-text-scko { font-size:29px; }
+    .scko-container { font-size: 21px; }
+    .btn { font-size: 22px; }
+    .checkout { font-size:22px; }
+    .checkout h1 { font-size:28px; }
+    .checkout h2 { font-size:24px; }
+    .checkout .userid { font-size:26px; }
+    .checkout .item_table td { font-size:26px; }
+    .scko-footer-btn { font-size:24px; }
+}
+
+
diff --git a/Open-ILS/web/css/skin/kcls/selfcheck-font-b.css b/Open-ILS/web/css/skin/kcls/selfcheck-font-b.css
deleted file mode 100644
index 648842a1c5..0000000000
--- a/Open-ILS/web/css/skin/kcls/selfcheck-font-b.css
+++ /dev/null
@@ -1,141 +0,0 @@
-/*
-	Basic Colors for Self-checkout interface
- */
-html, body {
-    font-size: 21px;
-}
-a {
-    color: #003399;
-}
-
-label {
-    font-size:19px;
-}
-
-h1 {
-    font-size: 25px;
-}
-
-h2 {
-    font-size: 23px;
-}
-
-#header {
-    color: #bda964;
-}
-
-#main-content-scko h1 {
-    font-size: 23px;
-}
-
-#main-content-scko h1 {
-    font-size: 19px;
-}
-
-#main-content-scko li {
-    margin-top: 12px;
-}
-
-.navbar-scko {
-    background:#D2232A
-}
-
-.navbar-text-scko {
-    color:white;
-    font-size:28px;
-}
-
-.scko-container {
-    color: #585d5e;
-    font-size: 16px;
-    background-color: #FFF;
-}
-
-.scko-table-suspended {
-    color:#A8A8A8;
-}
-
-.btn-high-contrast {
-    color: #FFF;
-    background-color: #353535;
-    border-color: #ccc
-}
-
-.btn {
-    font-size: 17px;
-}
-
-
-.container-background {
-    background: #353535;
-}
-
-.checkout .header1 {
-    border-bottom:1px solid #a83135;
-}
-
-.checkout .userid {
-    border:2px solid black !important;
-}
-
-.checkout {
-    font-size:17px;
-}
-
-.checkout h1 {
-    font-size:23px;
-}
-
-.checkout h2 {
-    font-size:19px;
-}
-
-.checkout .userid {
-    font-size:21px;
-}
-
-.checkout .item_table td {
-    font-size:21px;
-    border:2px solid black;
-}
-
-.scko-table-striped>tbody>tr:nth-of-type(odd) {
-    background-color: #f3f3f3
-}
-
-.checkout .status_box {
-    color:red;
-}
-
-.checkout .oils-selfck-status-div {
-    color: blue;
-}
-
-.checkout_failure {
-    color: red !important;
-}
-@media screen and (min-width:768px) {
-    .scko-footer-btn {
-        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #008ec2), color-stop(1, #023a4f));
-        background:-moz-linear-gradient(top, #008ec2 5%, #023a4f 100%);
-        background:-webkit-linear-gradient(top, #008ec2 5%, #023a4f 100%);
-        background:-o-linear-gradient(top, #008ec2 5%, #023a4f 100%);
-        background:-ms-linear-gradient(top, #008ec2 5%, #023a4f 100%);
-        background:linear-gradient(to bottom, #008ec2 5%, #023a4f 100%);
-        font-size:21px;
-        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#008ec2', endColorstr='#023a4f',GradientType=0);
-        background-color:#02729E;
-        color:#ffffff;
-        text-shadow:0px 1px 5px #000000;
-    }
-
-    .scko-footer-btn:hover {
-        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #023a4f), color-stop(1, #008ec2));
-        background:-moz-linear-gradient(top, #023a4f 5%, #008ec2 100%);
-        background:-webkit-linear-gradient(top, #023a4f 5%, #008ec2 100%);
-        background:-o-linear-gradient(top, #023a4f 5%, #008ec2 100%);
-        background:-ms-linear-gradient(top, #023a4f 5%, #008ec2 100%);
-        background:linear-gradient(to bottom, #023a4f 5%, #008ec2 100%);
-        background-color:#02729E;
-    }
-}
diff --git a/Open-ILS/web/css/skin/kcls/selfcheck-font-c.css b/Open-ILS/web/css/skin/kcls/selfcheck-font-c.css
deleted file mode 100644
index b3adb28704..0000000000
--- a/Open-ILS/web/css/skin/kcls/selfcheck-font-c.css
+++ /dev/null
@@ -1,141 +0,0 @@
-/*
-	Basic Colors for Self-checkout interface
- */
-html, body {
-    font-size: 22px;
-}
-a {
-    color: #003399;
-}
-
-label {
-    font-size:20px;
-}
-
-h1 {
-    font-size: 26px;
-}
-
-h2 {
-    font-size: 24px;
-}
-
-#header {
-    color: #bda964;
-}
-
-#main-content-scko h1 {
-    font-size: 24px;
-}
-
-#main-content-scko h1 {
-    font-size: 20px;
-}
-
-#main-content-scko li {
-    margin-top: 12px;
-}
-
-.navbar-scko {
-    background:#D2232A
-}
-
-.navbar-text-scko {
-    color:white;
-    font-size:29px;
-}
-
-.scko-container {
-    color: #585d5e;
-    font-size: 17px;
-    background-color: #FFF;
-}
-
-.scko-table-suspended {
-    color:#A8A8A8;
-}
-
-.btn-high-contrast {
-    color: #FFF;
-    background-color: #353535;
-    border-color: #ccc
-}
-
-.btn {
-    font-size: 18px;
-}
-
-
-.container-background {
-    background: #353535;
-}
-
-.checkout .header1 {
-    border-bottom:1px solid #a83135;
-}
-
-.checkout .userid {
-    border:2px solid black !important;
-}
-
-.checkout {
-    font-size:18px;
-}
-
-.checkout h1 {
-    font-size:24px;
-}
-
-.checkout h2 {
-    font-size:20px;
-}
-
-.checkout .userid {
-    font-size:22px;
-}
-
-.checkout .item_table td {
-    font-size:22px;
-    border:2px solid black;
-}
-
-.scko-table-striped>tbody>tr:nth-of-type(odd) {
-    background-color: #f3f3f3
-}
-
-.checkout .status_box {
-    color:red;
-}
-
-.checkout .oils-selfck-status-div {
-    color: blue;
-}
-
-.checkout_failure {
-    color: red !important;
-}
-@media screen and (min-width:768px) {
-    .scko-footer-btn {
-        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #008ec2), color-stop(1, #023a4f));
-        background:-moz-linear-gradient(top, #008ec2 5%, #023a4f 100%);
-        background:-webkit-linear-gradient(top, #008ec2 5%, #023a4f 100%);
-        background:-o-linear-gradient(top, #008ec2 5%, #023a4f 100%);
-        background:-ms-linear-gradient(top, #008ec2 5%, #023a4f 100%);
-        background:linear-gradient(to bottom, #008ec2 5%, #023a4f 100%);
-        font-size:22px;
-        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#008ec2', endColorstr='#023a4f',GradientType=0);
-        background-color:#02729E;
-        color:#ffffff;
-        text-shadow:0px 1px 5px #000000;
-    }
-
-    .scko-footer-btn:hover {
-        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #023a4f), color-stop(1, #008ec2));
-        background:-moz-linear-gradient(top, #023a4f 5%, #008ec2 100%);
-        background:-webkit-linear-gradient(top, #023a4f 5%, #008ec2 100%);
-        background:-o-linear-gradient(top, #023a4f 5%, #008ec2 100%);
-        background:-ms-linear-gradient(top, #023a4f 5%, #008ec2 100%);
-        background:linear-gradient(to bottom, #023a4f 5%, #008ec2 100%);
-        background-color:#02729E;
-    }
-}
diff --git a/Open-ILS/web/css/skin/kcls/selfcheck-font-d.css b/Open-ILS/web/css/skin/kcls/selfcheck-font-d.css
deleted file mode 100644
index abf5e04c4c..0000000000
--- a/Open-ILS/web/css/skin/kcls/selfcheck-font-d.css
+++ /dev/null
@@ -1,141 +0,0 @@
-/*
-	Basic Colors for Self-checkout interface
- */
-html, body {
-    font-size: 26px;
-}
-a {
-    color: #003399;
-}
-
-label {
-    font-size:24px;
-}
-
-h1 {
-    font-size: 30px;
-}
-
-h2 {
-    font-size: 28px;
-}
-
-#header {
-    color: #bda964;
-}
-
-#main-content-scko h1 {
-    font-size: 28px;
-}
-
-#main-content-scko h1 {
-    font-size: 24px;
-}
-
-#main-content-scko li {
-    margin-top: 16px;
-}
-
-.navbar-scko {
-    background:#D2232A
-}
-
-.navbar-text-scko {
-    color:white;
-    font-size:29px;
-}
-
-.scko-container {
-    color: #585d5e;
-    font-size: 21px;
-    background-color: #FFF;
-}
-
-.scko-table-suspended {
-    color:#A8A8A8;
-}
-
-.btn-high-contrast {
-    color: #FFF;
-    background-color: #353535;
-    border-color: #ccc
-}
-
-.btn {
-    font-size: 22px;
-}
-
-
-.container-background {
-    background: #353535;
-}
-
-.checkout .header1 {
-    border-bottom:1px solid #a83135;
-}
-
-.checkout .userid {
-    border:2px solid black !important;
-}
-
-.checkout {
-    font-size:22px;
-}
-
-.checkout h1 {
-    font-size:28px;
-}
-
-.checkout h2 {
-    font-size:24px;
-}
-
-.checkout .userid {
-    font-size:26px;
-}
-
-.checkout .item_table td {
-    font-size:26px;
-    border:2px solid black;
-}
-
-.scko-table-striped>tbody>tr:nth-of-type(odd) {
-    background-color: #f3f3f3
-}
-
-.checkout .status_box {
-    color:red;
-}
-
-.checkout .oils-selfck-status-div {
-    color: blue;
-}
-
-.checkout_failure {
-    color: red !important;
-}
-@media screen and (min-width:768px) {
-    .scko-footer-btn {
-        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #008ec2), color-stop(1, #023a4f));
-        background:-moz-linear-gradient(top, #008ec2 5%, #023a4f 100%);
-        background:-webkit-linear-gradient(top, #008ec2 5%, #023a4f 100%);
-        background:-o-linear-gradient(top, #008ec2 5%, #023a4f 100%);
-        background:-ms-linear-gradient(top, #008ec2 5%, #023a4f 100%);
-        background:linear-gradient(to bottom, #008ec2 5%, #023a4f 100%);
-        font-size:24px;
-        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#008ec2', endColorstr='#023a4f',GradientType=0);
-        background-color:#02729E;
-        color:#ffffff;
-        text-shadow:0px 1px 5px #000000;
-    }
-
-    .scko-footer-btn:hover {
-        background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #023a4f), color-stop(1, #008ec2));
-        background:-moz-linear-gradient(top, #023a4f 5%, #008ec2 100%);
-        background:-webkit-linear-gradient(top, #023a4f 5%, #008ec2 100%);
-        background:-o-linear-gradient(top, #023a4f 5%, #008ec2 100%);
-        background:-ms-linear-gradient(top, #023a4f 5%, #008ec2 100%);
-        background:linear-gradient(to bottom, #023a4f 5%, #008ec2 100%);
-        background-color:#02729E;
-    }
-}
diff --git a/Open-ILS/web/css/skin/kcls/selfcheck-high-contrast.css b/Open-ILS/web/css/skin/kcls/selfcheck-high-contrast.css
index 17451095c3..886416fad4 100644
--- a/Open-ILS/web/css/skin/kcls/selfcheck-high-contrast.css
+++ b/Open-ILS/web/css/skin/kcls/selfcheck-high-contrast.css
@@ -3,7 +3,7 @@
  */
 html, body {
     font-weight: 800;
-    font-size: 28px;
+    font-size: 20px;
 }
 
 a {
@@ -11,11 +11,11 @@ a {
 }
 
 h1 {
-    font-size: 32px;
+    font-size: 24px;
 }
 
 h2 {
-    font-size: 30px;
+    font-size: 22px;
 }
 
 input::-webkit-input-placeholder {
@@ -29,7 +29,7 @@ input::-moz-placeholder {
 }
 
 label {
-    font-size:26px;
+    font-size:18px;
 }
 
 .table {
@@ -55,11 +55,11 @@ label {
 }
 
 #main-content-scko h1 {
-    font-size: 30px;
+    font-size: 22px;
 }
 
 #main-content-scko h1 {
-    font-size: 26px;
+    font-size: 18px;
 }
 
 #main-content-scko li {
@@ -67,7 +67,7 @@ label {
 }
 
 .navbar-text-scko {
-    font-size:35px;
+    font-size:27px;
 }
 
 label {
@@ -125,7 +125,7 @@ label {
 
 .scko-container {
     color: #ffffff;
-    font-size: 23px;
+    font-size: 15px;
     background-color: #000000;
 }
 
@@ -175,19 +175,19 @@ label {
 }
 
 .checkout {
-    font-size:24px;
+    font-size:16px;
 }
 
 .checkout h1 {
-    font-size:30px;
+    font-size:22px;
 }
 
 .checkout h2 {
-    font-size:26px;
+    font-size:18px;
 }
 
 .checkout .userid {
-    font-size:26px;
+    font-size:18px;
 }
 
 .checkout .header1 {
@@ -199,7 +199,7 @@ label {
 }
 
 .checkout .item_table td {
-    font-size:26px;
+    font-size:18px;
     border:2px solid #ffffff;
 }
 
@@ -213,17 +213,17 @@ label {
 }
 
 .checkout .status_box {
-    color:red;
+    color:#ffcd00;
     font-weight:800;
 }
 
 .checkout .oils-selfck-status-div {
-    color: blue;
+    color: #99BADD;
     font-weight:800;
 }
 
 .checkout_failure {
-    color: red !important;
+    color: #ffcd00 !important;
     font-weight:800;
 }
 @media screen and (min-width:768px) {
@@ -234,7 +234,7 @@ label {
         background:-o-linear-gradient(top, #008ec2 5%, #023a4f 100%);
         background:-ms-linear-gradient(top, #008ec2 5%, #023a4f 100%);
         background:linear-gradient(to bottom, #008ec2 5%, #023a4f 100%);
-        font-size:26px;
+        font-size:18px;
         filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#008ec2', endColorstr='#023a4f',GradientType=0);
         background-color:#02729E;
         color:#ffffff;
@@ -251,3 +251,23 @@ label {
         border-bottom:0 !important;
     }
 }
+
+@media screen and (min-width:1600px) {
+    html, body { font-size: 28px; }
+    h1 { font-size: 32px; }
+    h2 { font-size: 30px; }
+    label { font-size:26px; }
+    #main-content-scko h1 { font-size: 30px; }
+    #main-content-scko h1 { font-size: 26px; }
+    #main-content-scko li { margin-top: 14px; }
+    .navbar-text-scko { font-size:35px; }
+    .scko-container { font-size: 23px; }
+    .checkout { font-size:24px; }
+    .checkout h1 { font-size:30px; }
+    .checkout h2 { font-size:26px; }
+    .checkout .userid { font-size:26px; }
+    .checkout .item_table td { font-size:26px; }
+    .scko-footer-btn { font-size:26px; }
+}
+
+
diff --git a/Open-ILS/web/css/skin/kcls/selfcheck.css b/Open-ILS/web/css/skin/kcls/selfcheck.css
index 28a4c71cfe..dc50ee4264 100644
--- a/Open-ILS/web/css/skin/kcls/selfcheck.css
+++ b/Open-ILS/web/css/skin/kcls/selfcheck.css
@@ -70,7 +70,7 @@ input[type=checkbox]
     padding-bottom: 5px;
 }
 .pad-vert-sidebar-btn {
-    padding-bottom:10px;
+    padding-bottom:20px;
 }
 
 .navbar-brand {