From 0188a0ed7537dc4930f20a467c48138ad9b9c75a Mon Sep 17 00:00:00 2001
From: Owen Leonard <oleonard@myacpl.org>
Date: Wed, 22 Feb 2012 15:23:12 -0500
Subject: [PATCH] [SIGNED-OFF] Bug 7584 - Update cart and lists buttons style using CSS3 features

Replacing styling of cart and lists buttons with CSS3 features:
border-radius, background-gradient, multiple backgrounds. While
the CSS is a little more complicated, the markup is much simpler
which should make customization simpler.

Browsers tested:

Firefox 10 on Windows 7
Chrome 17 on Windows 7
Opera 11 on Windows 7
Internet Explorer 8 on Windows 7 (no rounded corners or background images)

Firefox 9 on Ubuntu 11.10
Chrome 16 on Ubuntu 11.10
Opera 11 on Ubuntu 11.10

Internet Explorer 6 on Windows XP (looks acceptably bad)

Signed-off-by: Nicole C. Engard <nengard@bywatersolutions.com>

Also tested in:

Safari on Mac OS X
Firefox 10 on Mac OS X
Chrome on Mac OS X

All the above tests passed
---
 koha-tmpl/opac-tmpl/prog/en/css/opac.css          |  194 ++++++++-------------
 koha-tmpl/opac-tmpl/prog/en/includes/masthead.inc |    4 +-
 koha-tmpl/opac-tmpl/prog/en/js/script.js          |    3 +-
 3 files changed, 75 insertions(+), 126 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/prog/en/css/opac.css b/koha-tmpl/opac-tmpl/prog/en/css/opac.css
index f2b1467..c4cb401 100644
--- a/koha-tmpl/opac-tmpl/prog/en/css/opac.css
+++ b/koha-tmpl/opac-tmpl/prog/en/css/opac.css
@@ -1679,110 +1679,101 @@ span.starMT {
 }
 
 #cartmenulink, #listsmenulink {
+	background-repeat: no-repeat;
+	-webkit-border-radius: 5px;
+	-moz-border-radius: 5px;
+	border-radius: 5px;
 	display : block;
 	position : relative;
-	background : #aaa;
-	padding : 5px;
 	float : left;
 	color : #333;
 	text-decoration : none;
 	cursor : pointer;
+	font-size : 105%;
+	font-weight : bold;
+	line-height : 185%;
+	margin-left : 1.5em;
+	padding : .3em .7em;
 }
 
- #cartmenulink *, #listsmenulink * {
-	font-style : normal;
-	background-image : url(../../images/button-background.png);
-	background-repeat : no-repeat;
-	display : block;
-	position : relative;
-}
-
- #cartmenulink i, #listsmenulink i {
-	background-position : top left;
-	position : absolute;
-	margin-bottom : -5px;
-	top : 0;
-	left : 0;
-	width : 5px;
-	height : 5px;
+#listsmenulink {
+	background : #9FBFFF;
+	background: url("../../images/list.gif"),-moz-linear-gradient(top, #d7e5ff 0%, #b1cbff 50%, #9fbfff 100%); /* FF3.6+ */
+	background: url("../../images/list.gif"),-webkit-gradient(linear, left top, left bottom, color-stop(0%,#d7e5ff), color-stop(50%,#b1cbff), color-stop(100%,#9fbfff)); /* Chrome,Safari4+ */
+	background: url("../../images/list.gif"),-webkit-linear-gradient(top, #d7e5ff 0%,#b1cbff 50%,#9fbfff 100%); /* Chrome10+,Safari5.1+ */
+	background: url("../../images/list.gif"),-o-linear-gradient(top, #d7e5ff 0%,#b1cbff 50%,#9fbfff 100%); /* Opera 11.10+ */
+	background: url("../../images/list.gif"),-ms-linear-gradient(top, #d7e5ff 0%,#b1cbff 50%,#9fbfff 100%); /* IE10+ */
+	background: url("../../images/list.gif"),linear-gradient(top, #d7e5ff 0%,#b1cbff 50%,#9fbfff 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7e5ff', endColorstr='#9fbfff',GradientType=0 ); /* IE6-9 */
+	background-position: 85% 46%;
+	background-repeat: no-repeat;
+	border: 1px solid #629DCF;
+	color : #006699;
+	padding-right: 20px;
 }
 
- #cartmenulink span, #listsmenulink span {
-	background-position : bottom left;
-	left : -5px;
-	padding : 0 0 5px 10px;
-	margin-bottom : -5px;
+#listsmenulink:hover {
+	background-color : #b8d0e6;
+	background: url("../../images/list.gif"),-moz-linear-gradient(top, #e2ecf5 0%, #c3d8ea 50%, #b8d0e6 100%); /* FF3.6+ */
+	background: url("../../images/list.gif"),-webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2ecf5), color-stop(50%,#c3d8ea), color-stop(100%,#b8d0e6)); /* Chrome,Safari4+ */
+	background: url("../../images/list.gif"),-webkit-linear-gradient(top, #e2ecf5 0%,#c3d8ea 50%,#b8d0e6 100%); /* Chrome10+,Safari5.1+ */
+	background: url("../../images/list.gif"),-o-linear-gradient(top, #e2ecf5 0%,#c3d8ea 50%,#b8d0e6 100%); /* Opera 11.10+ */
+	background: url("../../images/list.gif"),-ms-linear-gradient(top, #e2ecf5 0%,#c3d8ea 50%,#b8d0e6 100%); /* IE10+ */
+	background: url("../../images/list.gif"),linear-gradient(top, #e2ecf5 0%,#c3d8ea 50%,#b8d0e6 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2ecf5', endColorstr='#b8d0e6',GradientType=0 ); /* IE6-9 */
+	background-repeat: no-repeat;
+	background-position: 85% 46%;
 }
-/* For IE7 */
- *:first-child+html #cartmenulink span { padding-top : 3px; padding-bottom : 7px; }
- *:first-child+html #listsmenulink span { padding-top : 5px; }
 
- #cartmenulink span i, #listsmenulink span i {
-	background-position : bottom right;
-	margin-bottom : 0;
-	position : absolute;
-	left : 100%;
-	width : 10px;
-	height : 100%;
-	top : 0;
+#cartmenulink {
+	background: #98CB58; /* Old browsers */
+	background: url("../../images/cart.gif"),-moz-linear-gradient(top, #d5eaba 0%, #b7db8a 50%, #98cb59 100%); /* FF3.6+ */
+	background: url("../../images/cart.gif"),-webkit-gradient(linear, left top, left bottom, color-stop(0%,#d5eaba), color-stop(50%,#b7db8a), color-stop(100%,#98cb59)); /* Chrome,Safari4+ */
+	background: url("../../images/cart.gif"),-webkit-linear-gradient(top, #d5eaba 0%,#b7db8a 50%,#98cb59 100%); /* Chrome10+,Safari5.1+ */
+	background: url("../../images/cart.gif"),-o-linear-gradient(top, #d5eaba 0%,#b7db8a 50%,#98cb59 100%); /* Opera 11.10+ */
+	background: url("../../images/cart.gif"),-ms-linear-gradient(top, #d5eaba 0%,#b7db8a 50%,#98cb59 100%); /* IE10+ */
+	background: url("../../images/cart.gif"),linear-gradient(top, #d5eaba 0%,#b7db8a 50%,#98cb59 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d5eaba', endColorstr='#98cb59',GradientType=0 ); /* IE6-9 */
+	background-position: 15% 46%;
+	background-repeat: no-repeat;
+	border: 1px solid #5EA28C;
+	color : #336600;
+	padding-left : 30px;
 }
 
- #cartmenulink span span, #listsmenulink span span {
-	background-position : top right;
-	position : absolute;
-	right : -10px;
-	margin-left : 10px;
-	top : -5px;
-	height : 0;
+#cartmenulink:hover {
+	background-color : #BFDE96;
+	background: url("../../images/cart.gif"),-moz-linear-gradient(top, #e5f1d4 0%, #cbe4aa 50%, #c0de98 100%); /* FF3.6+ */
+	background: url("../../images/cart.gif"),-webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5f1d4), color-stop(50%,#cbe4aa), color-stop(100%,#c0de98)); /* Chrome,Safari4+ */
+	background: url("../../images/cart.gif"),-webkit-linear-gradient(top, #e5f1d4 0%,#cbe4aa 50%,#c0de98 100%); /* Chrome10+,Safari5.1+ */
+	background: url("../../images/cart.gif"),-o-linear-gradient(top, #e5f1d4 0%,#cbe4aa 50%,#c0de98 100%); /* Opera 11.10+ */
+	background: url("../../images/cart.gif"),-ms-linear-gradient(top, #e5f1d4 0%,#cbe4aa 50%,#c0de98 100%); /* IE10+ */
+	background: url("../../images/cart.gif"),linear-gradient(top, #e5f1d4 0%,#cbe4aa 50%,#c0de98 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5f1d4', endColorstr='#c0de98',GradientType=0 ); /* IE6-9 */
+	background-repeat: no-repeat;
+	background-position: 15% 46%;
 }
 
-* html #cartmenulink span, * html #cartmenulink i, * html #listsmenulink span, * html #listsmenulink i {
-	float : left;
-	width : auto;
-	background-image : none;
-	cursor : pointer;
-}
-* html #cartmenulink span, * html #listsmenulink span {
-	padding-top : 5px;
+/* IE 6 & 7  don't do multiple backgrounds, so remove extra padding */
+* html #listsmenulink,
+*+html #listsmenulink {
+	padding-right : .7em;
 }
 
-#cartmenulink span#carticon {
-	background: transparent url("../../images/cart.gif") top left no-repeat;
-	position: static;
-	width : 14px;
-	height:14px;
-	margin: 0.35em 0.45em 0 0.2em;
-	padding:0;
-	float: left;
+/* IE 6 & 7  don't do multiple backgrounds, so remove extra padding */
+* html #cartmenulink,
+*+html #cartmenulink {
+	padding-left : .7em;
 }
 
+/* IE 8 doesn't do multiple backgrounds, so remove extra padding */
 #listsmenulink {
-	background : #9FBFFF;
+  padding-right: .7em\0/;
 }
 
+/* IE 8 doesn't do multiple backgrounds, so remove extra padding */
 #cartmenulink {
-	background : #98CB58;
-	color : #336600;
-	font-size : 105%;
-}
-
-#cartmenulink[class], #listsmenulink[class] {
-	background-image : url(../../images/button-background-gradient.png);
-	background-position : left top;
-}
-
-#listsmenulink:hover {
-	background-color : #b8d0e6;
-}
-
-#cartmenulink:hover {
-	background-color : #BFDE96;
-}
-
-#cartmenulink img {
-	background-image : none;
-	display : inline;
-	padding : 3px 3px 0 3px;
+  padding-left: .7em\0/;
 }
 
 #cartmenulink span#basketcount {
@@ -1814,49 +1805,6 @@ span.starMT {
 	top : auto;
 }
 
-a#listsmenulink, a#listsmenulink:hover {
-	color : #006699;
-	font-size : 105%;
-	font-weight : bold;
-	line-height : 185%;
-	margin-left : 1.5em;
-}
-
-a#cartmenulink, a#cartmenulink:hover {
-	color : #336600;
-	font-size : 105%;
-	font-weight : bold;
-	line-height : 185%;
-	margin-left : 1.5em;
-}
-* html a#cartmenulink {
-	padding-top: 0;
-}
- * html a#cartmenulink:hover {
-	padding-top : 0;
-}
-/* For IE7 */
-*:first-child+html a#listsmenulink { padding-top : 0; }
-*:first-child+html a#listsmenulink:hover { padding-top : 0; }
-*:first-child+html a#cartmenulink { padding-top : 0; }
-*:first-child+html a#cartmenulink:hover { padding-top : 0; }
-*:first-child+html #cartmenulink span i{ top : -4px; }
-*:first-child+html #listsmenulink span i { top : -5px; }
-
-#listsmenulink img {
-	background-image : none;
-	display : inline;
-	padding : 0 0 2px 0;
-}
-
-* html #cartmenulink {
-	border : 1px solid #336600;
-}
-
-* html #listsmenulink {
-	border : 1px solid #006699;
-}
-
 ul.ui-tabs-nav li {
 	margin-right : .5em;
 }
diff --git a/koha-tmpl/opac-tmpl/prog/en/includes/masthead.inc b/koha-tmpl/opac-tmpl/prog/en/includes/masthead.inc
index eb36f6f..cfcf977 100644
--- a/koha-tmpl/opac-tmpl/prog/en/includes/masthead.inc
+++ b/koha-tmpl/opac-tmpl/prog/en/includes/masthead.inc
@@ -100,11 +100,11 @@
     <input type="submit" value="Go" id="searchsubmit" class="left" />
 [% IF ( opacbookbag ) %]<span id="cmspan"></span>[% END %]
 
-[% IF ( virtualshelves ) %]<a href="/cgi-bin/koha/opac-shelves.pl" id="listsmenulink" class=""><i></i><span><i></i><span></span>Lists </span></a>[% END %]
+[% IF ( virtualshelves ) %]<a href="/cgi-bin/koha/opac-shelves.pl" id="listsmenulink">Lists</a>[% END %]
     </form>
 [% ELSE %]
 <div style="width:80%;*margin-bottom:-30px;">
-[% IF ( virtualshelves ) %]<a href="/cgi-bin/koha/opac-shelves.pl" id="listsmenulink" class=""><i></i><span><i></i><span></span>Lists </span></a>[% END %][% IF ( opacbookbag ) %]<span id="cmspan"></span>[% END %]
+[% IF ( virtualshelves ) %]<a href="/cgi-bin/koha/opac-shelves.pl" id="listsmenulink">Lists</a>[% END %][% IF ( opacbookbag ) %]<span id="cmspan"></span>[% END %]
 </div>
 [% END %]
 
diff --git a/koha-tmpl/opac-tmpl/prog/en/js/script.js b/koha-tmpl/opac-tmpl/prog/en/js/script.js
index 6859a74..a3cfab8 100644
--- a/koha-tmpl/opac-tmpl/prog/en/js/script.js
+++ b/koha-tmpl/opac-tmpl/prog/en/js/script.js
@@ -58,8 +58,9 @@ YAHOO.util.Event.onContentReady("changelanguage", function () {
 			
 // Build lists menu
 YAHOO.util.Event.onContentReady("listsmenu", function () {
+	YAHOO.widget.Menu.prototype.onRender = function () { };
     $("#listsmenu").css("display","block").css("visibility","hidden");
-	$("#listsmenulink").attr("href","#").find("span:eq(0)").append("<img src=\"/opac-tmpl/prog/images/list.gif\" width=\"5\" height=\"6\" alt=\"\" border=\"0\" />");
+	$("#listsmenulink").attr("href","#");
 	var listMenu = new YAHOO.widget.Menu("listsmenu");
 		listMenu.render();
 		listMenu.cfg.setProperty("context", ["listsmenulink", "tr", "br"]);
-- 
1.7.2.3