From: Michael Peters <mrpeters@library.in.gov>
Date: Wed, 22 Aug 2012 12:25:25 +0000 (-0400)
Subject: Initial selfcheck styling enhancements
X-Git-Url: https://old-git.evergreen-ils.org/?a=commitdiff_plain;h=b137ced2eb64640d0dd144122da415c9a9d95b45;p=evergreen%2Fequinox.git

Initial selfcheck styling enhancements

* Convert action links to buttons for increased clarity
* Convert dashed fieldsets to gradient backed bubbles for depth
* Color line-item table headers to distinguish from actual line-items
* Color logo background for increased contrast
* Larger input box
* Background on prompts to distinguish from logo background

Signed-off-by: Michael Peters <mrpeters@library.in.gov>
Signed-off-by: Pasi Kallinen <pasi.kallinen@pttk.fi>
Signed-off-by: Ben Shum <bshum@biblio.org>

Conflicts:
	Open-ILS/src/templates/circ/selfcheck/main.tt2
	Open-ILS/src/templates/circ/selfcheck/summary.tt2

Signed-off-by: Ben Shum <bshum@biblio.org>
---

diff --git a/Open-ILS/src/templates/circ/selfcheck/banner.tt2 b/Open-ILS/src/templates/circ/selfcheck/banner.tt2
index cda4866c91..30bcad0ac9 100644
--- a/Open-ILS/src/templates/circ/selfcheck/banner.tt2
+++ b/Open-ILS/src/templates/circ/selfcheck/banner.tt2
@@ -1,10 +1,15 @@
 <div id='oils-selfck-user-banner'></div>
 <div id='oils-selfck-logo-div'>
-    <img src='[% ctx.media_prefix %]/images/eg_logo.jpg'/>
+    <img src='[% ctx.media_prefix %]/images/self_eg_logo.png'/>
 </div>
+</br>
+</br>
 <div id='oils-selfck-scan-div'>
     <div id='oils-selfck-scan-text'></div>
+    </br>
     <input jsId='selfckScanBox' dojoType='dijit.form.TextBox'/>
+    </br>
+    </br>
 </div>
 <div id='oils-selfck-status-div'></div>
 
diff --git a/Open-ILS/src/templates/circ/selfcheck/main.tt2 b/Open-ILS/src/templates/circ/selfcheck/main.tt2
index 42aaf49319..22022fe2a6 100644
--- a/Open-ILS/src/templates/circ/selfcheck/main.tt2
+++ b/Open-ILS/src/templates/circ/selfcheck/main.tt2
@@ -11,7 +11,7 @@
 <div id='oils-selfck-bottom-div'>
     <div id='oils-selfck-content-div'>
         <div id='oils-selfck-content-header'>
-            <span><a id='oils-selfck-print-list-link' href='javascript:void(0);'>[% l('Print List') %]</a></span>
+            <span><a id='oils-selfck-print-list-link' href='javascript:void(0);'><button type="button" class="self-button">[% l('Print List') %]</button></a></span>
         </div>
         <div id='oils-selfck-circ-page' class='hidden'>
             <!-- Checkout / renewal and items out interface -->
diff --git a/Open-ILS/src/templates/circ/selfcheck/summary.tt2 b/Open-ILS/src/templates/circ/selfcheck/summary.tt2
index 652815cb3c..237c345677 100644
--- a/Open-ILS/src/templates/circ/selfcheck/summary.tt2
+++ b/Open-ILS/src/templates/circ/selfcheck/summary.tt2
@@ -1,26 +1,26 @@
 <div id='oils-selfck-circ-info-div'>
     <div id='oils-selfck-info-nav'>
-        <span><a id='oils-selfck-nav-home' href='javascript:void(0);' class='selected'>[% l('Home') %]</a></span>
-        <span><a id='oils-selfck-nav-logout-print' href='javascript:void(0);'>[% l('Logout') %]</a></span>
-        <span><a id='oils-selfck-nav-logout' href='javascript:void(0);'>[% l('Logout (No Receipt)') %]</a></span>
+        <span><a id='oils-selfck-nav-home' href='javascript:void(0);' class='selected'><button type="button" class="self-button">[% l('Home') %]</button></a></span>
+        <span><a id='oils-selfck-nav-logout-print' href='javascript:void(0);'><button type="button" class="self-button">[% l('Logout') %]</button></a></span>
+        <span><a id='oils-selfck-nav-logout' href='javascript:void(0);'><button type="button" class="self-button">[% l('Logout (No Receipt)') %]</button></a></span>
     </div>
     <fieldset>
         <legend>[% l('Items Checked Out') %]</legend>
         <div id='oils-selfck-circ-session-total'></div>
         <div id='oils-selfck-circ-account-total'></div>
-        <div><a href='javascript:void(0);' id='oils-selfck-items-out-details-link'>[% l('View Items Out') %]</a></div>
+        <div><a href='javascript:void(0);' id='oils-selfck-items-out-details-link'><button type="button" class="self-button">[% l('View Items Out') %]</button></a></div>
     </fieldset>
     <fieldset>
         <legend>[% l('Holds') %]</legend>
         <div id='oils-selfck-holds-ready'></div>
         <div id='oils-selfck-holds-total'></div>
-        <div><a href='javascript:void(0);' id='oils-selfck-hold-details-link'>[% l('View Holds') %]</a></div>
+        <div><a href='javascript:void(0);' id='oils-selfck-hold-details-link'><button type="button" class="self-button">[% l('View Holds') %]</button></a></div>
     </fieldset>
     <fieldset>
         <legend>[% l('Fines') %]</legend>
         <div id='oils-selfck-fines-total'></div>
         <div>
-            <span><a href='javascript:void(0);' id='oils-selfck-view-fines-link'>[% l('View Details') %]</a></span>
+            <span><a href='javascript:void(0);' id='oils-selfck-view-fines-link'><button type="button" class="self-button">[% l('View Details') %]</button></a></span>
         </div>
     </fieldset>
 </div>
diff --git a/Open-ILS/web/css/skin/default/selfcheck.css b/Open-ILS/web/css/skin/default/selfcheck.css
index 986b46f597..23bd38819f 100644
--- a/Open-ILS/web/css/skin/default/selfcheck.css
+++ b/Open-ILS/web/css/skin/default/selfcheck.css
@@ -5,9 +5,19 @@ body {
 }
 
 #oils-selfck-top-div {
-    padding: 20px;
-    margin: 2px;
-    border: 1px solid #888;
+    background: #00593d; /* Old browsers */
+/* IE9 SVG, needs conditional override of 'filter' to 'none' */
+    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwNTkzZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDdhNTQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+    background: -moz-linear-gradient(top,  #00593d 0%, #007a54 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00593d), color-stop(100%,#007a54)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top,  #00593d 0%,#007a54 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top,  #00593d 0%,#007a54 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top,  #00593d 0%,#007a54 100%); /* IE10+ */
+    background: linear-gradient(to bottom,  #00593d 0%,#007a54 100%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00593d', endColorstr='#007a54',GradientType=0 ); /* IE6-8 */
+    padding-top: 20px;
+    /*margin: 2px;*/
+    /*border: 1px solid #888;*/
     text-align: center;
     font-weight:bold;
 }
@@ -15,15 +25,19 @@ body {
 #oils-selfck-user-banner {
     position:fixed;
     top:30px;
-    right:30px;
+    /*right:30px;*/
+    color: white;
 }
 
 #oils-selfck-logo-div {
-    margin: 20px;
+    /*margin: 20px;*/
 }
 
 #oils-selfck-scan-text {
-    margin: 10px;
+    font-size: 16px;
+    background: none repeat scroll 0 0 #252525;
+    color: white;
+    padding: 10px;
 }
 
 #oils-selfck-bottom-div {
@@ -53,6 +67,7 @@ body {
 
 .oils-selfck-item-table thead {
     font-weight: bold;
+    color: #00593D;
 }
 
 .oils-selfck-item-table tbody tr {
@@ -69,15 +84,13 @@ body {
 #oils-selfck-summary-div {
     width: 28%;
     float: right;
-    border-left: 1px solid #888;
+    /*border-left: 1px solid #888;*/
 }
 
 #oils-selfck-content-header {
-    margin: 8px 10px 15px 10px;
-    padding: 8px;
-    border-bottom: 1px dashed #888;
     text-align: right;
     width: 100%;
+    margin-top: 18px;
 }
 #oils-selfck-content-header span {
     padding-left: 5px;
@@ -86,7 +99,6 @@ body {
 #oils-selfck-info-nav {
     margin: 15px 10px 15px 10px;
     padding: 8px;
-    border-bottom: 1px dashed #888;
 }
 
 #oils-selfck-circ-info-div span {
@@ -103,11 +115,25 @@ body {
 #oils-selfck-circ-info-div fieldset {
     margin: 15px 10px 15px 10px;
     padding: 8px;
-    border: 2px dashed #888;
-    -moz-border-radius: 3px;
+    background: #ffffff; /* Old browsers */
+    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
+    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk4JSIgc3RvcC1jb2xvcj0iI2UwZTBlMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
+    background: -moz-linear-gradient(top,  #ffffff 0%, #e0e0e0 98%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(98%,#e0e0e0)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top,  #ffffff 0%,#e0e0e0 98%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top,  #ffffff 0%,#e0e0e0 98%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top,  #ffffff 0%,#e0e0e0 98%); /* IE10+ */
+    background: linear-gradient(to bottom,  #ffffff 0%,#e0e0e0 98%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-8 */
+    border: 1px solid #DDDDDD;
+    color: #333333;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
 }
 
 #oils-selfck-circ-info-div fieldset legend {
+    color: #00593d;
+    background-color: white;
     font-weight: bold;
 }
 
@@ -116,8 +142,9 @@ body {
 }
 
 #oils-selfck-status-div {
+    background: white;
     height: 20px;
-    padding: 10px;
+    padding-top: 10px;
     font-weight: bold;
     vertical-align: middle;
     color: red;
@@ -132,4 +159,62 @@ body {
     padding: 5px;
 }
 
+.self-button { 
+    color: #FBF9F9;
+    font-weight: bold;
+    letter-spacing: 1px;
+    font-size: 94%;
+    text-shadow: 1px 1px 1px #555555;
+    cursor: pointer !important;
+    -moz-border-radius: 12px;
+    border-radius: 12px;
+    border: 1px solid #007a54;
+    background: linear-gradient(#007a54, #00593d);
+    background: -moz-linear-gradient(#007a54, #00593d);
+    background: -o-linear-gradient(#007a54, #00593d);
+    background: -webkit-linear-gradient(#007a54, #00593d);
+    background-color: #00593d;
+    padding: 5px 10px 6px;
+    outline: 0 none;
+    text-decoration: none;
+}
+
+A {
+    text-decoration: none;
+}
+
+.oils-selfck-table-head thead {
+    background-color: #D8D8D8;
+    padding: 8px 0 7px;
+}
+
+[id^="oils-selfck-"][id$="-page"] {
+    margin-top: 20px;
+    background: #ffffff; /* Old browsers */
+    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
+    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk4JSIgc3RvcC1jb2xvcj0iI2UwZTBlMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
+    background: -moz-linear-gradient(top,  #ffffff 0%, #e0e0e0 98%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(98%,#e0e0e0)); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(top,  #ffffff 0%,#e0e0e0 98%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(top,  #ffffff 0%,#e0e0e0 98%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(top,  #ffffff 0%,#e0e0e0 98%); /* IE10+ */
+    background: linear-gradient(to bottom,  #ffffff 0%,#e0e0e0 98%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e0e0e0',GradientType=0 ); /* IE6-8 */
+    border: 1px solid #DDDDDD;
+    color: #333333;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+    padding: 3px;
+}
+
+#oils-selfck-fines-page {
+    padding: 8px;
+}
 
+#dijit_form_TextBox_0 {
+   padding: 5px;
+   height: 28px;
+   font-size: 16px;
+   box-shadow:         inset 0 0 8px #ADADB2;
+   border-radius: 12px;
+}
diff --git a/Open-ILS/web/images/self_eg_logo.png b/Open-ILS/web/images/self_eg_logo.png
new file mode 100644
index 0000000000..64056b04b7
Binary files /dev/null and b/Open-ILS/web/images/self_eg_logo.png differ