Use SUBMIT buttons instead of IMAGE buttons

With a bit of CSS, we can replace <input type="image"> buttons with
<input type="submit"> buttons. The payoff is directly translatable
values and better semantics for screen readers, etc, rather than having
to set up a process of generating buttons in your colour & languages of
choice - as well as fewer HTTP requests for images over the network.

Note that we also replace some of the JavaScript-dependent reset /
cancel links with <input type="reset"> buttons.

Signed-off-by: Dan Scott <dscott@laurentian.ca>

diff --git a/Open-ILS/src/templates/opac/myopac/circs.tt2 b/Open-ILS/src/templates/opac/myopac/circs.tt2
index c13b963..eff7f00 100644 (file)
--- a/Open-ILS/src/templates/opac/myopac/circs.tt2
+++ b/Open-ILS/src/templates/opac/myopac/circs.tt2
@@ -48,9 +48,10 @@
                     </select>
                 </td>
                 <td style="padding-left:9px;">
-                    <input type="image"
+                    <input type="submit"
+                        value="[% l('Go') %]"
                         alt="[% l('Go') %]" title="[% l('Go') %]"
-                        src="[% ctx.media_prefix %]/images/go-btn.png" /></a>
+                        class="submit-button" />
                 </td>
                 <td style="padding-left:5px;">
                     <a href="#"><img alt="Renewing Help"

diff --git a/Open-ILS/src/templates/opac/myopac/holds.tt2 b/Open-ILS/src/templates/opac/myopac/holds.tt2
index b6bb84c..2424467 100644 (file)
--- a/Open-ILS/src/templates/opac/myopac/holds.tt2
+++ b/Open-ILS/src/templates/opac/myopac/holds.tt2
@@ -53,9 +53,9 @@
                     </select>
                 </td>
                 <td width="1" style="padding-left:9px;">
-                    <input type="image"
+                    <input type="submit" value="[% l('Go') %]"
                         alt="[% l('Go') %]" title="[% l('Go') %]"
-                        src="[% ctx.media_prefix %]/images/go-btn.png" />
+                        class="submit-button" />
                 </td>
                 <td width="1" style="padding-left:5px;">
                     <a href="#"><img

diff --git a/Open-ILS/src/templates/opac/myopac/holds/edit.tt2 b/Open-ILS/src/templates/opac/myopac/holds/edit.tt2
index 1f825ef..1b15750 100644 (file)
--- a/Open-ILS/src/templates/opac/myopac/holds/edit.tt2
+++ b/Open-ILS/src/templates/opac/myopac/holds/edit.tt2
@@ -91,14 +91,16 @@
                     </tr>
                     <tr>
                         <td colspan="2" class="hold-editor-controls">
-                            <input type="image"
-                                src="[% ctx.media_prefix %]/images/btnSubmit.png"
+                            <input type="submit"
+                                value="[% l('Submit') %]"
                                 alt="[% l('Submit') %]"
-                                title="[% l('Submit') %]" />
-                            <a href="[% ctx.opac_root %]/myopac/holds"><img
-                                src="[% ctx.media_prefix %]/images/btnCancel.png"
+                                title="[% l('Submit') %]"
+                                class="submit-button" />
+                            <input type="reset"
+                                value="[% l('Submit') %]"
                                 alt="[% l('Cancel') %]"
-                                title="[% l('Cancel') %]" /></a>
+                                title="[% l('Cancel') %]"
+                                class="submit-button" />
                         </td>
                     </tr>
                 </table>

diff --git a/Open-ILS/src/templates/opac/myopac/lists.tt2 b/Open-ILS/src/templates/opac/myopac/lists.tt2
index 403c10a..e738be1 100644 (file)
--- a/Open-ILS/src/templates/opac/myopac/lists.tt2
+++ b/Open-ILS/src/templates/opac/myopac/lists.tt2
@@ -40,12 +40,15 @@
                         src="[% ctx.media_prefix %]/images/question-mark.png" /></a>
                 </td>
                 <td class="list-create-table-buttons">
-                    <input type="image" alt="[% l('Submit') %]" src="[% ctx.media_prefix %]/images/btnSubmit.png"/>
+                    <input type="submit"
+                        value="[% l('Submit') %]"
+                        alt="[% l('Submit') %]"
+                        class="submit-button"/>
                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-                    <a href="javascript:void(0);"
-                        onclick="document.getElementById('create_form').reset(); return false"><img
+                    <input type="reset"
+                        value="[% l('Cancel') %]"
                         alt="[% l('Cancel') %]"
-                        src="[% ctx.media_prefix %]/images/btnCancel.png" /></a>
+                        class="submit-button" />
                 </td>
             </tr>
         </table>

diff --git a/Open-ILS/src/templates/opac/myopac/main.tt2 b/Open-ILS/src/templates/opac/myopac/main.tt2
index 9dbbabc..1b78ca3 100644 (file)
--- a/Open-ILS/src/templates/opac/myopac/main.tt2
+++ b/Open-ILS/src/templates/opac/myopac/main.tt2
@@ -158,12 +158,11 @@
     <div>[% l('You have no current fines.') %]</div>
     [% ELSE %]
     <div class="text-right pad-top-ten">
-        <input type="image"
+        <input type="submit"
+            value="[% l('Pay selected fines') %]"
             alt="[% l('Pay selected fines') %]"
             title="[% l('Pay selected fines') %]"
-            onmouseover="this.src='[% ctx.media_prefix %]/images/pay-fines-btn-hover.png';"
-            onmouseout="this.src='[% ctx.media_prefix %]/images/pay-fines-btn.png';"
-            src="[% ctx.media_prefix %]/images/pay-fines-btn.png" />
+            class="submit-button" />
     </div>
     [% END %]
 </form>

diff --git a/Open-ILS/src/templates/opac/myopac/prefs_notify.tt2 b/Open-ILS/src/templates/opac/myopac/prefs_notify.tt2
index 3729d37..5d46763 100644 (file)
--- a/Open-ILS/src/templates/opac/myopac/prefs_notify.tt2
+++ b/Open-ILS/src/templates/opac/myopac/prefs_notify.tt2
@@ -6,7 +6,10 @@
 <form method='POST'>
 
     <div style="float:right;width:65px;">
-        <input type='image' alt="[% l('Save') %]" src="[% ctx.media_prefix %]/images/save-btn.png" />
+        <input type='submit' 
+            value="[% l('Save') %]"
+            alt="[% l('Save') %]"
+            class="submit-button" />
     </div>
 
     <table>

diff --git a/Open-ILS/src/templates/opac/myopac/prefs_settings.tt2 b/Open-ILS/src/templates/opac/myopac/prefs_settings.tt2
index fc5f846..984bc3f 100644 (file)
--- a/Open-ILS/src/templates/opac/myopac/prefs_settings.tt2
+++ b/Open-ILS/src/templates/opac/myopac/prefs_settings.tt2
@@ -9,7 +9,7 @@
         <div style="float:right;width:65px;">
             <div style="position:absolute">
                 <div style="position:relative;top:75px;">
-                    <input type="image" alt="[% l('Save') %]" src="[% ctx.media_prefix %]/images/save-btn.png"/>
+                    <input type="submit" value="[% l('Save') %]" alt="[% l('Save') %]" class="submit-button"/>
                 </div>
             </div>
         </div>

diff --git a/Open-ILS/src/templates/opac/parts/advanced/expert.tt2 b/Open-ILS/src/templates/opac/parts/advanced/expert.tt2
index 4dc76b3..64ce09b 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/advanced/expert.tt2
+++ b/Open-ILS/src/templates/opac/parts/advanced/expert.tt2
@@ -21,7 +21,9 @@
             <tr>
                 <td colspan="2"><a href="javascript:addExpertRow();">[ [% l("Add row") %] ]</a></td>
                 <td colspan="4">
-                    <input type="image" src="[% ctx.media_prefix %]/images/search_btn.gif" alt="[% l('Search') %]" title="[% l('Search') %]" />
+                    <input type="submit" value="[% l('Search') %]"
+                        alt="[% l('Search') %]" title="[% l('Search') %]"
+                        class="submit-button" />
                 </td>
             </tr>
         </tfoot>

diff --git a/Open-ILS/src/templates/opac/parts/advanced/numeric.tt2 b/Open-ILS/src/templates/opac/parts/advanced/numeric.tt2
index de54947..2e389f3 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/advanced/numeric.tt2
+++ b/Open-ILS/src/templates/opac/parts/advanced/numeric.tt2
@@ -22,8 +22,8 @@
         </tr>
         <tr>
             <td colspan="2" align="right">
-                <input type="image" alt="[% l('Search') %]"
-                    src="[% ctx.media_prefix %]/images/search_btn.gif" />
+                <input type="submit" alt="[% l('Search') %]"
+                    value="[% l('Search') %]" class="submit-button" />
             </td>
     </table>
 </form>

diff --git a/Open-ILS/src/templates/opac/parts/advanced/search.tt2 b/Open-ILS/src/templates/opac/parts/advanced/search.tt2
index bf990e9..08761b3 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/advanced/search.tt2
+++ b/Open-ILS/src/templates/opac/parts/advanced/search.tt2
@@ -115,10 +115,13 @@
     </tr>
     <tr class='border_4_2'>
         <td align="left" colspan='2'>
-            <input type="image" src="[% ctx.media_prefix %]/images/search_btn.gif"
-            alt="[% l('Search') %]" class='pointer' />
+            <input type="submit"
+                value="[% l('Search') %]"
+                class='pointer submit-button' />
             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-            <a href="[% mkurl('', {}, 1) %]">[% l('Reset Form') %]</a>
+            <input type="reset"
+                value="[% l('Reset form') %]"
+                class="submit-button" />
         </td>
     </tr>
 </table>

diff --git a/Open-ILS/src/templates/opac/parts/login/form.tt2 b/Open-ILS/src/templates/opac/parts/login/form.tt2
index b22c616..6dae4b6 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/login/form.tt2
+++ b/Open-ILS/src/templates/opac/parts/login/form.tt2
@@ -136,7 +136,7 @@
                                     <input type="checkbox" name="persist" id="login_persist" /><label for="login_persist"> [% l('Stay logged in?') %]</label>
                                 </div>
                                 <div style="padding-top:14px;">
-                                    <input type='image' alt="[% l('Log in') %]" src="[% ctx.media_prefix %]/images/login-btn2.png" />
+                                    <input type="submit" value="[% l('Log in') %]" alt="[% l('Log in') %]" class="submit-button" />
                                     <!-- TODO
                                     <a href="reset_password"
                                         style="position:relative;top:-13px;left:2px;font-size:10px;">Forgot your PIN?</a>

diff --git a/Open-ILS/src/templates/opac/parts/myopac/main_base.tt2 b/Open-ILS/src/templates/opac/parts/myopac/main_base.tt2
index 7eb9c71..e47e3ab 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/myopac/main_base.tt2
+++ b/Open-ILS/src/templates/opac/parts/myopac/main_base.tt2
@@ -42,11 +42,8 @@
         </span><br />
 
         <form action="[% ctx.opac_root %]/myopac/main_payment_form" method="GET"><input
-            type="image" title="[% l('Pay Fines') %]" alt="[% l('Pay Fines') %]"
-            onmouseover="this.src='[% ctx.media_prefix %]/images/pay-fines-btn-hover.png';"
-            onmouseout="this.src='[% ctx.media_prefix %]/images/pay-fines-btn.png';"
-            src="[% ctx.media_prefix %]/images/pay-fines-btn.png"
-            class="pos-rel-top-5" /></form>
+            type="submit" title="[% l('Pay Fines') %]" alt="[% l('Pay Fines') %]"
+            value=[% l('Pay Fines') %] class="pos-rel-top-5 submit-button" /></form>
     </div>
     [% END %]
 

diff --git a/Open-ILS/src/templates/opac/parts/place_hold.tt2 b/Open-ILS/src/templates/opac/parts/place_hold.tt2
index e7b67cd..9bb2c29 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/place_hold.tt2
+++ b/Open-ILS/src/templates/opac/parts/place_hold.tt2
@@ -61,11 +61,11 @@
             services, please select "Outreach" to have the item delivered
             during your scheduled visit.[% END %]
         </p>
-        <input type="image" name="submit" value="submit" title="[% l('Submit') %]"
-            alt="[% l('Submit') %]" src="[% ctx.media_prefix %]/images/btnSubmit.png" />
+        <input type="submit" name="submit" value="[% l('Submit') %]" title="[% l('Submit') %]"
+            alt="[% l('Submit') %]" class="submit-button" />
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-        <a href="javascript:history.go(-1);" id="holds_cancel"><img
-            alt="[% l('Cancel') %]" src="[% ctx.media_prefix %]/images/btnCancel.png" /></a>
+        <input type="reset" name="cancel" onclick="javascript:history.go(-1);"
+            value="[% l('Cancel') %]" id="holds_cancel" class="submit-button" />
     </form>
     <br /><br />
     <p>

diff --git a/Open-ILS/src/templates/opac/parts/place_hold_result.tt2 b/Open-ILS/src/templates/opac/parts/place_hold_result.tt2
index 794ecfa..62ff498 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/place_hold_result.tt2
+++ b/Open-ILS/src/templates/opac/parts/place_hold_result.tt2
@@ -84,13 +84,14 @@
                 [% |l %]You have permission to override some of the failed holds.<br/>  Click Submit to override and place your hold on the selected items.[% END %]
             </div>
             <span style='padding-right: 10px;'>
-                <input type="image" name="submit" value="submit" title="[% l('Submit') %]"
-                    alt="[% l('Submit') %]" src="[% ctx.media_prefix %]/images/btnSubmit.png" />
+                <input type="submit" name="submit" value="[% l('Submit') %]"
+                    title="[% l('Submit') %]" alt="[% l('Submit') %]"
+                    class="submit-button" />
             </span>
         [% END %]
         <span>
-        <a href="[% CGI.param('redirect_to') || CGI.referer | html %]" id="holds_cancel"><img
-            alt="[% l('Cancel') %]" src="[% ctx.media_prefix %]/images/btnCancel.png" /></a>
+        <input type="reset" onclick="javascript:history.go(-1);"
+            id="holds_cancel" value="[% l('Cancel') %]" class="submit-button" />
         </span>
     </form>
 </div>

diff --git a/Open-ILS/src/templates/opac/parts/searchbar.tt2 b/Open-ILS/src/templates/opac/parts/searchbar.tt2
index 0215c74..ee69315 100644 (file)
--- a/Open-ILS/src/templates/opac/parts/searchbar.tt2
+++ b/Open-ILS/src/templates/opac/parts/searchbar.tt2
@@ -36,9 +36,7 @@
             <td valign="top">
                 <div class="pos-abs">
                     <div class="opac-auto-143">
-                        <input id='search-submit-go' type="image" alt="[% l('Search') %]" src="[% ctx.media_prefix %]/images/go-btn.png"
-                            onmouseover="this.src='[% ctx.media_prefix %]/images/go-btn-hover.png';"
-                            onmouseout="this.src='[% ctx.media_prefix %]/images/go-btn.png';" 
+                        <input id='search-submit-go' type="submit" value="[% l('Search') %]" alt="[% l('Search') %]" class="submit-button"
                             onclick='setTimeout(function(){$("search-submit-spinner").className=""; $("search-submit-go").className="hidden"}, 2000)'/>
                         <img id='search-submit-spinner' src='/opac/images/progressbar_green.gif' style='height:16px;width:16px;' class='hidden' alt=''/>
                     </div>

diff --git a/Open-ILS/web/css/skin/default/opac/style.css b/Open-ILS/web/css/skin/default/opac/style.css
index f1707af..8eef1d0 100644 (file)
--- a/Open-ILS/web/css/skin/default/opac/style.css
+++ b/Open-ILS/web/css/skin/default/opac/style.css
@@ -1032,3 +1032,13 @@ a.dash-link:hover { text-decoration: underline !important; }
 .hold-items-list-problem { color: red; }
 
 .big-strong {font-weight: bold; font-size: 120%; }
+
+/* TODO: gradients */
+.submit-button { 
+    color: white; 
+    font-weight: bold; 
+    -moz-border-radius: 15%; 
+    border-radius: 15%;
+    background: #1784c7; 
+}
+.submit-button:hover { background: #359ee0; }