Unstable changes to cart/list button interface in the OPAC
authorOwen Leonard <oleonard@myacpl.org>
Fri, 25 Jan 2008 21:04:21 +0000 (15:04 -0600)
committerJoshua Ferraro <jmf@liblime.com>
Fri, 25 Jan 2008 22:52:05 +0000 (16:52 -0600)
Signed-off-by: Chris Cormack <crc@liblime.com>
Signed-off-by: Joshua Ferraro <jmf@liblime.com>
koha-tmpl/opac-tmpl/prog/en/css/opac.css
koha-tmpl/opac-tmpl/prog/en/includes/doc-head-close.inc
koha-tmpl/opac-tmpl/prog/en/includes/masthead.inc

index e83ddb9..eeb6e72 100644 (file)
@@ -130,25 +130,73 @@ h1 {
        font-size : 138.5%;
 }
 
-h1#libraryname {
-       font-size : 50%
-       font-weight : normal;
-       margin : .2em 0 .2em .5em;
-}
-
 h1#library {
        font-size : 100%
        font-weight : normal;
        margin : .2em 0 .2em .5em;
 } 
 
+
+h1#libraryname {
+       background:transparent url(../../images/koha-logo.gif) no-repeat scroll 0%;
+       border: 0;
+       margin:0;
+       padding:0;
+       width:120px;
+}
+
 h1#libraryname a {
-       text-decoration : none;
-       color : #006699;
+       border:0;
+       cursor:pointer;
+       display:block;
+       height:0px !important;
+       margin:0;
+       overflow:hidden;
+       padding:40px 0 0;
+       text-decoration:none;
+       width:120px;
 }
 
-h1#libraryname a:hover {
-       color : #000066;
+div#cartmenubutton {
+       background:transparent url(../../images/cart-button.gif) no-repeat scroll 0%;
+       border: 0;
+       float : left;
+       margin:0 10px 0 0;
+       padding:0;
+       width:68px;
+}
+
+div#cartmenubutton a {
+       border:0;
+       cursor:pointer;
+       display:block;
+       height:0px !important;
+       margin:0;
+       overflow:hidden;
+       padding:40px 0 0;
+       text-decoration:none;
+       width:68px;
+}
+
+div#listmenubutton {
+       background:transparent url(../../images/lists-button.gif) no-repeat scroll 0%;
+       border: 0;
+       float : left;
+       margin:0;
+       padding:0;
+       width:84px;
+}
+
+div#listmenubutton a {
+       border:0;
+       cursor:pointer;
+       display:block;
+       height:0px !important;
+       margin:0;
+       overflow:hidden;
+       padding:40px 0 0;
+       text-decoration:none;
+       width:84px;
 }
 
 h1,h2,h3,h4,h5,h6 {
@@ -392,7 +440,7 @@ a .term {
 #opac-main-search {
        background-image : url( ../../images/menu-background.gif);
        background-repeat : repeat-x;
-       background-color : #6699CC;
+       background-color : #739ACF;
        border-top : 1px solid #335599;
        border-bottom : 1px solid #335599;
        padding : .7em 0 .4em .5em;
@@ -694,14 +742,6 @@ a.reserve {
        line-height : 2em;
 }
 
-#opac-main-search a.cart {
-
-}
-
-#opac-main-search a.lists {
-
-}
-
 .pages {
        line-height : 1.8em;
        text-align: center;
@@ -880,30 +920,6 @@ td.overdue {
        padding:0.5em;
 }
 
-h1#libraryname {
-       border: 0;
-       margin:0;
-       padding:0;
-       width:120px;
-}
-h1#libraryname {
-       background:transparent url(../../images/koha-logo.gif) no-repeat scroll 0%;
-       border: 0;
-       padding:0;
-}
-
-h1#libraryname a {
-       border:0;
-       cursor:pointer;
-       display:block;
-       height:0px !important;
-       margin:0;
-       overflow:hidden;
-       padding:40px 0 0;
-       text-decoration:none;
-       width:120px;
-}
-
 table#marc, table#marc td, table#marc th {
        border : 0;
 }
@@ -1005,108 +1021,74 @@ div.message {
        font-weight : normal;
        text-decoration : none;
 }
-* html .btn span,
-* html .btn i {
-       float : left;
-       width : auto;
-       background-image : none;
-       cursor : pointer;
-}
 
-.btn {
-       display : block;
-       position : relative;
-       background : #adc2eb;
-       margin-left : 10px;
-       padding : 5px;
+#cart-box {
        float : left;
-       color : #fff;
-       text-decoration : none;
-       cursor : pointer;
+       background : url(../../images/cart-background-right.gif) top right no-repeat;
+       margin : 0 !important;
+       margin : 5px 0 0 0;
 }
 
-.btn * {
-       font-style : normal;
-       background-image : url(../../images/button-background2.png);
-       background-repeat : no-repeat;
-       display : block;
-       position : relative;
+#cart-box a {
+       font-size : 120%;
+       text-decoration : none;
 }
 
-.btn i {
-       background-position : top left;
-       position : absolute;
-       margin-bottom : -5px;
-       top : 0;
-       left : 0;
-       width : 5px;
-       height : 5px;
+#cart-box .cart {
+       margin : 0;
+       padding : 10px 23px 0 9px;
+       background : url(../../images/cart-background-left.gif) top left no-repeat;
 }
 
-.btn span {
-       background-position : bottom left;
-       left : -5px;
-       padding : 0 0 5px 10px;
-       margin-bottom : -5px;
+#cart-box .cart-bottom {
+       margin : 0;
+       padding : 0 0 0 12px;
+       background : url(../../images/cart-background-left.gif) bottom left no-repeat;
 }
 
-.btn span i {
-       background-position : bottom right;
-       margin-bottom : 0;
-       position : absolute;
-       left : 100%;
-       width : 10px;
-       height : 100%;
-       top : 0;
+#cart-box .cart-bottom em {
+       display : block;
+       line-height : 1px;
+       background : url(../../images/cart-background-right.gif) bottom right no-repeat;
+       padding : 9px 9px 0 0;
+       margin : 0;
 }
 
-.btn span span {
-       background-position : top right;
-       position : absolute;
-       right : -10px;
-       margin-left : 10px;
-       top : -5px;
-       height : 0;
+#cart-box a.cartbutton {
+       background : #9bc1dd url(../../images/cart-small.gif) center left no-repeat;
+       padding-left : 20px;
 }
 
-.btn[class] {
-       background-image : url(../../images/shade.png);
-       background-position : bottom;
+#opac-main-search #listsmenu a, #opac-main-search #listsmenu h4 {
+       color : #000;
+       font-weight : normal;
 }
+ #opac-main-search #listsmenu h4 {
+       font-weight : bold;
+       margin : 0 .3em; 
+ }
 
-.button:link,
-.button:visited,
-.button:hover {border:none;}
-* html #wrap {width:50em}
-/* End Demo page styling */
+/*body #listsmenu .yuimenu ul {
+       border-top : 1px dashed #CC9;
+}*/
 
-.button:link,
-.button:visited { /* Top left corner, top edge */
-       float:left;
-       color:#ddd;
-       background:#333 url(../../images/button-center.gif) no-repeat;
-       text-decoration:none;
-}
-.button * {display:block;}
-.button span { /* Top right corner */
-       padding:13px 0 0;
-       background:url(../../images/button-corners.gif) no-repeat right top;
+#opac-main-search #listsmenu .bd {
+       background-color : #F2EDBA;
+       border : 2px solid #DFD69A;
+       // margin : 3em 0 0 0;
 }
-.button span span { /* Bottom left corner, left and bottom edges */
-       padding:0 0 0 13px;
-       background:url(../../images/button-center.gif) no-repeat left bottom;
+#opac-main-search #listsmenu .yui-menu-shadow {
+       // margin : 3em 0 0 0;
 }
-.button span span span { /* Bottom right corner */
-       padding:0 0 13px;
-       background:url(../../images/button-corners.gif) no-repeat right bottom;
+
+#opac-main-search #listsmenu .yuimenuitemlabel.selected {
+       background-color : #F9F6D5;
 }
-.button span span span span { /* Right edge */
-       padding:3px 12px 3px 13px; /* Extra padding (3px vertical, 13px horizontal) added to give the text some breathing room */
-       background:url(../../images/button-center.gif) no-repeat right center;
+
+#opac-main-search #listsmenu ul {
+       border-color : #DFD69A;
 }
-.button:hover,
-.button:focus,
-.button:active { /* Make the button more visible on :hover and :focus */
-       outline:2px solid #ff0; /* Not supported by IE/Win :-( */
-       color:#fff;
+
+#container {
+       color : #000;
 }
\ No newline at end of file
index 08d8cad..b991b51 100644 (file)
@@ -1,6 +1,16 @@
 </title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <!-- TMPL_IF name="RSS" --><link rel="alternate" type="application/rss+xml" title="Koha - RSS" href="<!-- TMPL_VAR name="site_url"-->/opac-rss.pl?q=<!-- TMPL_VAR name="searchdesc"-->" /><!-- /TMPL_IF -->
+<link rel="stylesheet" type="text/css" href="http://staff.oleonard.dev.kohalibrary.com/intranet-tmpl/prog/en/lib/yui/button.css" />
+<link rel="stylesheet" type="text/css" href="http://staff.oleonard.dev.kohalibrary.com/intranet-tmpl/prog/en/lib/yui/menu.css" />
+<link rel="stylesheet" type="text/css" href="http://staff.oleonard.dev.kohalibrary.com/intranet-tmpl/prog/en/lib/yui/container.css" />
+<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
+<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/element/element-beta-min.js"></script>
+<script type="text/javascript" src="http://yui.yahooapis.com/2.4.1/build/container/container-min.js"></script> 
+<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/menu/menu-min.js"></script>
+<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/button/button-beta-min.js"></script>
+
+<script type="text/javascript" src="http://yui.yahooapis.com/2.3.1/build/utilities/utilities.js"></script>
 <!-- TMPL_IF name="opacstylesheet" --><link rel="stylesheet" type="text/css" href="<!-- TMPL_VAR NAME="opacstylesheet" -->" /><!-- TMPL_ELSE -->
 <!-- TMPL_IF name="opaccolorstylesheet" --><link rel="stylesheet" type="text/css" href="<!-- TMPL_VAR NAME="themelang" -->/css/<!-- TMPL_VAR NAME="opaccolorstylesheet" -->" /><!-- /TMPL_IF -->
 <!-- TMPL_IF name="opaclayoutstylesheet" --><link rel="stylesheet" type="text/css" href="<!-- TMPL_VAR NAME="themelang" -->/css/<!-- TMPL_VAR NAME="opaclayoutstylesheet" -->" /><!-- TMPL_ELSE --><link rel="stylesheet" type="text/css" href="<!-- TMPL_VAR NAME="themelang" -->/css/opac.css" /><!-- /TMPL_IF --><!-- /TMPL_IF -->
index d7f6ca4..7fdfe62 100644 (file)
 
 </div>
 <div id="fluid-content-2">
-<!-- TMPL_IF NAME="opacbookbag" --><div><a class="button cart" href="/cgi-bin/koha/opac-basket.pl" onclick="openBasket(); return false;" title="A &quot;shopping cart&quot; for your selections"><span><span><span><span>Book Bag</span></span></span></span></a></div><!-- /TMPL_IF -->
-       <!--TMPL_IF NAME="virtualshelves" --><div><a class="button lists" href="/cgi-bin/koha/opac-shelves.pl"><span><span><span><span>Lists</span></span></span></span></a></div><!-- /TMPL_IF -->
+
+<script type="text/javascript">
+$(document).ready(function() {
+       $("#listmenubutton").hover(function(){
+                 $(this).attr("src","/opac-tmpl/prog/images/lists-button-on.gif");
+       },function(){
+                 $(this).attr("src","/opac-tmpl/prog/images/lists-button.gif");
+       });
+       
+       $("#cartmenubutton").hover(function(){
+                 $(this).attr("src","/opac-tmpl/prog/images/cart-button-on.gif");
+       },function(){
+                 $(this).attr("src","/opac-tmpl/prog/images/cart-button.gif");
+       });
+       
+ });
+    YAHOO.util.Event.onContentReady("cartmenu", function () {
+        var cartMenu = new YAHOO.widget.Menu("cartmenu", { lazyload: true });
+               cartMenu.render();
+               cartMenu.cfg.setProperty("context", ["cartmenubutton", "tr", "br"]);
+               cartMenu.subscribe("show", cartMenu.focus);
+        function positioncartMenu() {
+                    cartMenu.align("tr", "br");
+               }
+               YAHOO.util.Event.addListener("cartmenubutton", "click", cartMenu.show, null, cartMenu);
+               YAHOO.widget.Overlay.windowResizeEvent.subscribe(positioncartMenu);
+    });
+
+    YAHOO.util.Event.onContentReady("listsmenu", function () {
+        var listMenu = new YAHOO.widget.Menu("listsmenu", { lazyload: true });
+               listMenu.render();
+               listMenu.cfg.setProperty("context", ["listmenubutton", "tr", "br"]);
+               listMenu.subscribe("show", listMenu.focus);
+        function positionlistMenu() {
+                    listMenu.align("tr", "br");
+               }
+               YAHOO.util.Event.addListener("listmenubutton", "click", listMenu.show, null, listMenu);
+               YAHOO.widget.Overlay.windowResizeEvent.subscribe(positionlistMenu);
+    });
+    
+</script>
+<script>
+
+               function init() {
+
+                       // Build overlay3 dynamically, initially hidden, aligned to context element "context", and 200px wide
+                       var cartOverlay = new YAHOO.widget.Overlay("overlay3", { context:["cartmenubutton","tr","br"],
+                                                                                                                                                                         visible:false,
+                                                                                                                                                                         width:"200px" } );
+                       cartOverlay.setHeader("Overlay #3 from Script");
+                       cartOverlay.setBody("This is a dynamically generated Overlay.");
+                       cartOverlay.setFooter("End of Overlay #3");
+                       cartOverlay.render(document.body);
+
+                       YAHOO.util.Event.addListener("cartmenubutton", "mouseover", cartOverlay.show, cartOverlay, true);
+                       YAHOO.util.Event.addListener("cartmenubutton", "mouseout", cartOverlay.hide, cartOverlay, true);
+               }
+
+               YAHOO.util.Event.addListener(window, "load", init);
+</script>
+<style>
+       #overlay3 {
+               background-color : #FFF;
+               border: 1px solid black;
+               padding : .5em;
+       }
+</style>
+
+<div id="listsmenu" class="yuimenu">
+    <div class="bd">
+       <h4>Your Lists</h4>
+        <ul class="first-of-type">
+            <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Want to Read</a></li>
+            <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Class List</a></li>
+            <li class="yuimenuitem"><a class="yuimenuitemlabel" href="#">Caldecott Winners</a></li>
+        </ul>
+       
+                       <ul class="second-of-type">
+            <li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://mail.yahoo.com">Manage Lists</a></li>
+            <li class="yuimenuitem"><a class="yuimenuitemlabel" href="http://addressbook.yahoo.com">Create New List</a></li>
+        </ul>           
+    </div>
+</div>
+
+
+<div id="cartmenubutton"><a href="#basket">Your Cart</a></div>
+<div id="listmenubutton"><a href="#listmenu">Your Lists</a></div>
+
+<!-- <!-- TMPL_IF NAME="opacbookbag" --><div><a class="button cart" href="/cgi-bin/koha/opac-basket.pl" onclick="openBasket(); return false;" title="A &quot;shopping cart&quot; for your selections"><span><span><span><span>Book Bag</span></span></span></span></a></div><!-- /TMPL_IF -->
+       <!--TMPL_IF NAME="virtualshelves" --><div><a class="button lists" href="/cgi-bin/koha/opac-shelves.pl"><span><span><span><span>Lists</span></span></span></span></a></div><!-- /TMPL_IF --> -->
 </div>
 </div>
 </div>