Working version of cart and lists buttons, with some style changes to cart and lists...
authorOwen Leonard <oleonard@myacpl.org>
Wed, 30 Jan 2008 07:20:55 +0000 (01:20 -0600)
committerJoshua Ferraro <jmf@liblime.com>
Wed, 30 Jan 2008 16:58:37 +0000 (10:58 -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
koha-tmpl/opac-tmpl/prog/en/js/script.js
koha-tmpl/opac-tmpl/prog/images/button-background-gradient.png [new file with mode: 0644]
koha-tmpl/opac-tmpl/prog/images/button-background.png [new file with mode: 0644]
koha-tmpl/opac-tmpl/prog/images/listmenu-container-bg.gif [new file with mode: 0644]
koha-tmpl/opac-tmpl/prog/images/submit-bg.gif [new file with mode: 0644]

index 1847350..cb9e889 100644 (file)
@@ -157,49 +157,7 @@ h1#libraryname a {
        text-decoration:none;
        width:120px;
 }
-/*
-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 {
        font-weight : bold;
        margin : .5em 0;
@@ -230,12 +188,23 @@ h6 {
 }
 
 input[type=submit], input[type=button], input[type=reset] {
-       background-color : #6BA037;
+/*     background-color : #6BA037;
        border:1px outset #666666;
        color : #FFFFFF;
        font-size : 93%;
        font-weight : bold;
-       padding : 2px;
+       padding : 2px;*/
+       
+               background : #b8d0e6 url(../../images/submit-bg.gif) repeat-x 0 0;
+       background-color : #b8d0e6;
+       border-top: 1px solid #cccccc;
+       border-left: 1px solid #cccccc;
+       border-right: 1px solid #eeeeee;
+       border-bottom: 1px solid #eeeeee;
+       color : #333;
+       font-size : 93%;
+       font-weight : bold;
+       padding : 4px;
 }
 
 input[type=submit]:active, input[type=button], input[type=reset] {
@@ -624,6 +593,10 @@ em {
     background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */
 }
 
+#basket {
+       display : inline;
+}
+
 #bookcover {
        float : left;
        margin : 0;
@@ -707,6 +680,8 @@ a.cancel {
 
 .cartlist input.submit {
        background-color : #d8deb8;
+       background-image : none;
+       border-color : #bebf84;
        color : #333;
        font-size : 87%;
        padding : 2px 0;
@@ -1077,60 +1052,24 @@ div.message {
        font-weight : normal;
        text-decoration : none;
 }
-/*
-#cart-box {
-       float : left;
-       background : url(../../images/cart-background-right.gif) top right no-repeat;
-       margin : 0 !important;
-       margin : 5px 0 0 0;
-}
-
-#cart-box a {
-       font-size : 120%;
-       text-decoration : none;
-}
-
-#cart-box .cart {
-       margin : 0;
-       padding : 10px 23px 0 9px;
-       background : url(../../images/cart-background-left.gif) top left no-repeat;
-}
-
-#cart-box .cart-bottom {
-       margin : 0;
-       padding : 0 0 0 12px;
-       background : url(../../images/cart-background-left.gif) bottom left no-repeat;
-}
-
-#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;
-}
-
-#cart-box a.cartbutton {
-       background : #9bc1dd url(../../images/cart-small.gif) center left no-repeat;
-       padding-left : 20px;
-}*/
 
 #opac-main-search #listsmenu a, #opac-main-search #listsmenu h4 {
        color : #000;
        font-weight : normal;
 }
  #opac-main-search #listsmenu h4 {
+       font-size : 100%;
        font-weight : bold;
        margin : 0 .3em; 
  }
 
-/*body #listsmenu .yuimenu ul {
-       border-top : 1px dashed #CC9;
-}*/
-
 #opac-main-search #listsmenu .bd {
-       background-color : #F2EDBA;
-       border : 2px solid #DFD69A;
+       background-color : #f3f3f3;
+       border : 1px solid #739acf;
+       background-image : url("../../images/listmenu-container-bg.gif");
+       background-position : top right;
+       background-repeat : repeat-y;
+       padding-right: 1em;
        // margin : 3em 0 0 0;
 }
 #opac-main-search #listsmenu .yui-menu-shadow {
@@ -1138,11 +1077,11 @@ div.message {
 }
 
 #opac-main-search #listsmenu .yuimenuitemlabel.selected {
-       background-color : #F9F6D5;
+       background-color : #fff;
 }
 
 #opac-main-search #listsmenu ul {
-       border-color : #DFD69A;
+       border-color : #b8d0e6;
 }
 
 #container {
@@ -1230,16 +1169,56 @@ div#changelanguage a.yuimenuitemlabel {
 
 #cartDetails {
        background-color : #FFF;
-       border: 1px solid black;
+       border: 1px solid #739acf;
        color : black;
        padding : .1em;
        text-align : center;
 }
 
-a#listsmenulink, a#cartmenulink {
-       color : #333;
+a#listsmenulink, a#listsmenulink:hover {
+       color : #006699;
+}
+
+a#cartmenulink, a#cartmenulink:hover {
+       color : #336600;
 }
 
 #login #userid, #login #password {
        width : 98%;    
-}
\ No newline at end of file
+}
+
+#opac-main-search input.submit {
+       background : #b8d0e6 url(../../images/submit-bg.gif) no-repeat 0 0;
+       background-color : #b8d0e6;
+       border-top: 1px solid #cccccc;
+       border-left: 1px solid #cccccc;
+       border-right: 1px solid #eeeeee;
+       border-bottom: 1px solid #eeeeee;
+       color : #333;
+       font-weight : normal;
+       font-size : 80%;
+       padding : 2px;
+}
+       .btn { display: block; position: relative; background: #aaa; padding: 5px; float: right; color: #fff; text-decoration: none; cursor: pointer; }
+       .btn * { font-style: normal; background-image: url('../../images/button-background.png'); background-repeat: no-repeat; display: block; position: relative; }
+       .btn i { background-position: top left; position: absolute; margin-bottom: -5px;  top: 0; left: 0; width: 5px; height: 5px; }
+       .btn span { background-position: bottom left; left: -5px; padding: 0 0 5px 10px; margin-bottom: -5px; }
+       .btn span i { background-position: bottom right; margin-bottom: 0; position: absolute; left: 100%; width: 10px; height: 100%; top: 0; }
+       .btn span span { background-position: top right; position: absolute; right: -10px; margin-left: 10px; top: -5px; height: 0; }
+
+       * html .btn span,
+       * html .btn i { float: left; width: auto; background-image: none; cursor: pointer; }
+
+       .btn.blue { background: #6699FF; }
+       .btn.blue:hover { background-color: #6699FF; background-image: none; }
+       .btn.green { background: #98CB58; }
+       .btn.green:hover { background-color: #98CB58; background-image: none; }
+       .btn:active { background-color: #444; }
+       .btn[class] {  background-image: url('../../images/button-background-gradient.png'); background-position: 0 0; }
+        .btn[class]:hover { background-image: url('../../images/button-background-gradient.png'); background-position: 0 -200px; }
+
+       * html .btn { border: 3px double #aaa; }
+       * html .btn.blue { border-color: #2ae; }
+       * html .btn.green { border-color: #9d4; }
+       * html .btn:hover { border-color: #a00; }
+       #cartmenulink { margin-right :  1em;    }
\ No newline at end of file
index 0bb0f8b..bdb91e5 100644 (file)
@@ -7,6 +7,7 @@
 <link rel="stylesheet" type="text/css" href="<!-- TMPL_VAR NAME="themelang" -->/lib/yui/container.css" />
 <script type="text/javascript" src="<!-- TMPL_VAR NAME="yuipath" -->/yahoo-dom-event/yahoo-dom-event.js"></script>
 <script type="text/javascript" src="<!-- TMPL_VAR NAME="yuipath" -->/element/element-beta-min.js"></script>
+<script type="text/javascript" src="<!-- TMPL_VAR NAME="yuipath" -->/animation/animation-min.js"></script>
 <script type="text/javascript" src="<!-- TMPL_VAR NAME="yuipath" -->/container/container-min.js"></script> 
 <script type="text/javascript" src="<!-- TMPL_VAR NAME="yuipath" -->/menu/menu-min.js"></script>
 <script type="text/javascript" src="<!-- TMPL_VAR NAME="yuipath" -->/button/button-beta-min.js"></script>
@@ -28,7 +29,7 @@
 <script type="text/javascript" language="javascript">
        //<![CDATA[
     function _(s) { return s } // dummy function for gettext
-    var MSG_BASKET_EMPTY = _("You cart is currently empty");
+    <!-- TMPL_IF NAME="opacbookbag" -->var MSG_BASKET_EMPTY = _("You cart is currently empty");
     var MSG_RECORD_IN_BASKET = _("This item is already in your cart");
     var MSG_RECORD_ADDED = _("This item has been added to your cart");
     var MSG_NRECORDS_ADDED = _(" item(s) added to your cart");
     var MSG_NO_RECORD_SELECTED = _("No item was selected");
     var MSG_NO_RECORD_ADDED = _("No item was added to your cart");
     var MSG_CONFIRM_DEL_BASKET = "Are you sure you want to empty your cart?"
-    var MSG_CONFIRM_DEL_RECORDS = "Are you sure you want to remove the selected items?";
-       $(document).ready(function(){
-               $('#cartmenulink').click(function(){
-                       openBasket(); return false;
-               });
-       });
-
+    var MSG_CONFIRM_DEL_RECORDS = "Are you sure you want to remove the selected items?";<!-- /TMPL_IF -->
        <!-- TMPL_IF NAME="AmazonContent" -->$(window).load(function() {
                        verify_images();
                 });<!-- /TMPL_IF -->
index 83d2fb2..d4f3f09 100644 (file)
@@ -1,36 +1,9 @@
-<style type="text/css">
-       .btn { display: block; position: relative; background: #aaa; padding: 5px; float: right; color: #fff; text-decoration: none; cursor: pointer; }
-       .btn * { font-style: normal; background-image: url('../../opac-tmpl/prog/images/button-background.png'); background-repeat: no-repeat; display: block; position: relative; }
-       .btn i { background-position: top left; position: absolute; margin-bottom: -5px;  top: 0; left: 0; width: 5px; height: 5px; }
-       .btn span { background-position: bottom left; left: -5px; padding: 0 0 5px 10px; margin-bottom: -5px; }
-       .btn span i { background-position: bottom right; margin-bottom: 0; position: absolute; left: 100%; width: 10px; height: 100%; top: 0; }
-       .btn span span { background-position: top right; position: absolute; right: -10px; margin-left: 10px; top: -5px; height: 0; }
-
-       * html .btn span,
-       * html .btn i { float: left; width: auto; background-image: none; cursor: pointer; }
-
-       .btn.blue { background: #3A7BFD; }
-       .btn.blue:hover { background-color: #6699FF;}
-       .btn.green { background: #9C0; }
-       .btn.green:hover { background-color: #9C0; background-image: none; }
-       .btn:active { background-color: #444; }
-       // .btn[class] {  background-image: url('../../opac-tmpl/prog/images/shade8.png'); background-position: bottom; }
-       .btn[class] {  background-image: url('../../opac-tmpl/prog/images/shade9.png'); background-position: top; }
-
-       * html .btn { border: 3px double #aaa; }
-       * html .btn.blue { border-color: #2ae; }
-       * html .btn.green { border-color: #9d4; }
-       * html .btn:hover { border-color: #a00; }
-       #cartmenulink { margin-right :  1em;    }
-
-</style>
 <div id="members">
        <ul><!-- TMPL_IF NAME="loggedinusername" --><li><span class="members">Welcome, <a href="/cgi-bin/koha/opac-user.pl"><span class="loggedinusername"><!-- TMPL_LOOP NAME="USER_INFO" --><!-- TMPL_VAR NAME="title" --> <!-- TMPL_VAR NAME="firstname" --> <!-- TMPL_VAR NAME="surname" --><!-- /TMPL_LOOP --></span></a></span></li><li><a class="logout" href="/cgi-bin/koha/opac-main.pl?logout.x=1">Log Out</a></li><!-- TMPL_ELSE --><li><a href="/cgi-bin/koha/opac-user.pl">Log in to Your Account</a></li><!-- /TMPL_IF -->
        </ul>   
 </div>
 
 <div id="opac-main-search" class="yui-g">
-
    <div id="masthead">
    <h1 id="libraryname" <!-- TMPL_IF NAME="opacsmallimage" -->style="background-image: url('<!-- TMPL_VAR NAME="opacsmallimage" -->');"><!-- /TMPL_IF --><a href="/cgi-bin/koha/opac-main.pl"><!-- TMPL_IF NAME="LibraryName" --><!-- TMPL_VAR NAME="LibraryName" --><!-- TMPL_ELSE -->Koha Online Catalog<!-- /TMPL_IF --></a></h1>
    </div>
 
 </div>
 <div id="fluid-content-2">
-
-<script type="text/javascript">
-$(document).ready(function() {
-         //  <!-- TMPL_IF NAME="opacbookbag" -->var cartButton = new YAHOO.widget.Button("cartmenulink");<!-- /TMPL_IF -->
-               //<!--TMPL_IF NAME="virtualshelves" -->var listsButton = new YAHOO.widget.Button("listsmenulink");<!-- /TMPL_IF -->
- });
-   <!--TMPL_IF NAME="virtualshelves" -->YAHOO.util.Event.onContentReady("listsmenu", function () {
-        var listMenu = new YAHOO.widget.Menu("listsmenu", { lazyload: true });
-               listMenu.render();
-               listMenu.cfg.setProperty("context", ["listsmenulink", "tr", "br"]);
-               listMenu.subscribe("show", listMenu.focus);
-        function positionlistMenu() {
-                    listMenu.align("tr", "br");
-               }
-               YAHOO.util.Event.addListener("listsmenulink", "click", listMenu.show, null, listMenu);
-               YAHOO.widget.Overlay.windowResizeEvent.subscribe(positionlistMenu);
-    });<!-- /TMPL_IF -->
-    
-               <!-- TMPL_IF NAME="opacbookbag" -->function init() {
-                       
-                       var cartOverlay = new YAHOO.widget.Overlay("cartDetails", { context:["cartmenulink","tr","br"],
-                                                                                                                                         visible:false,
-                                                                                                                                         width:"200px" } );
-                       cartOverlay.render();
-                       
-       //              var cartOverlay = new YAHOO.widget.Overlay("cartDetails", { context:["cartmenulink","tr","br"],
-       //                                                                                                                                                                visible:false,
-       //                                                                                                                                                                width:"200px" } );
-       //              cartOverlay.setBody("Your cart has "+basketcount+" items in it");
-       //              cartOverlay.render(document.body);
-
-                       YAHOO.util.Event.addListener("cartmenulink", "mouseover", cartOverlay.show, cartOverlay, true);
-                       YAHOO.util.Event.addListener("cartmenulink", "mouseout", cartOverlay.hide, cartOverlay, true);
-                       YAHOO.util.Event.addListener("cartmenulink", "click", cartOverlay.hide, cartOverlay, true);
-               }
-
-               YAHOO.util.Event.addListener(window, "load", init);<!-- /TMPL_IF -->
-       $(document).ready(function(){
-         $('.btn').each(function(){
-         var b = $(this);
-         var tt = b.text() || b.val();
-         if ($(':submit,:button',this)) {
-         b = $('<a>').insertAfter(this). addClass(this.className).attr('id',this.id);
-         $(this).remove();
-         }
-         b.text('').css({cursor:'pointer'}). prepend('<i></i>').append($('<span>').
-         text(tt).append('<i></i><span></span>'));
-         });
-         });
-          
-</script>
-
 <!--TMPL_IF NAME="virtualshelves" --><a class="btn blue" id="listsmenulink" href="#">Lists</a><!-- /TMPL_IF -->
-<!-- TMPL_IF NAME="opacbookbag" --><a id="cartmenulink" class="btn green" href="/cgi-bin/koha/opac-basket.pl">Cart<span id="basket"></span></a><!-- /TMPL_IF -->
+<!-- TMPL_IF NAME="opacbookbag" --><a id="cartmenulink" class="btn green" href="/cgi-bin/koha/opac-basket.pl">Cart<div id="basket"></div></a><!-- /TMPL_IF -->
 <!-- TMPL_IF NAME="opacbookbag" --><div id="cartDetails" style="visibility:hidden">Your cart is empty.</div><!-- /TMPL_IF -->
 
 <!-- TMPL_IF NAME="virtualshelves" -->
index dab5bee..b390a50 100644 (file)
@@ -64,4 +64,44 @@ YAHOO.util.Event.onContentReady("changelanguage", function () {
                 }
                                YAHOO.util.Event.addListener("showlang", "click", onYahooClick);
                                YAHOO.widget.Overlay.windowResizeEvent.subscribe(positionoMenu);
-            });
\ No newline at end of file
+            });
+YAHOO.util.Event.onContentReady("listsmenu", function () {
+   
+       $('.btn').each(function(){
+         var b = $(this);
+         var tt = b.text() || b.val();
+         if ($(':submit,:button',this)) {
+         b = $('<a>').insertAfter(this). addClass(this.className).attr('id',this.id);
+         $(this).remove();
+         }
+         b.text('').css({cursor:'pointer'}). prepend('<i></i>').append($('<span>').
+         text(tt).append('<i></i><span></span>'));
+         });
+   
+        var listMenu = new YAHOO.widget.Menu("listsmenu", { lazyload: true });
+               listMenu.render();
+               listMenu.cfg.setProperty("context", ["listsmenulink", "tr", "br"]);
+               listMenu.cfg.setProperty("effect",{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.05});
+               listMenu.subscribe("show", listMenu.focus);
+        function positionlistMenu() {
+                    listMenu.align("tr", "br");
+               }
+               YAHOO.util.Event.addListener("listsmenulink", "click", listMenu.show, null, listMenu);
+               YAHOO.widget.Overlay.windowResizeEvent.subscribe(positionlistMenu);
+    });
+    
+function init() {
+               $('#cartmenulink').click(function(){
+                       openBasket(); return false;
+               });
+                                       // Build cartOverlay based on markup
+                                       cartOverlay = new YAHOO.widget.Overlay("cartDetails", { context:["cartmenulink","tr","br"],
+                                                                                                                                                                                         visible:false,
+                                                                                                                                                                                         width:"200px",
+                                                                                                                                                                                         effect:{effect:YAHOO.widget.ContainerEffect.FADE,duration:0.25} } );
+                                       cartOverlay.render();
+                                       YAHOO.util.Event.addListener("cartmenulink", "mouseover", cartOverlay.show, cartOverlay, true);
+                                       YAHOO.util.Event.addListener("cartmenulink", "mouseout", cartOverlay.hide, cartOverlay, true);
+                                       YAHOO.util.Event.addListener("cartmenulink", "click", cartOverlay.hide, cartOverlay, true);
+                               }
+                               YAHOO.util.Event.addListener(window, "load", init);
\ No newline at end of file
diff --git a/koha-tmpl/opac-tmpl/prog/images/button-background-gradient.png b/koha-tmpl/opac-tmpl/prog/images/button-background-gradient.png
new file mode 100644 (file)
index 0000000..0402d1e
Binary files /dev/null and b/koha-tmpl/opac-tmpl/prog/images/button-background-gradient.png differ
diff --git a/koha-tmpl/opac-tmpl/prog/images/button-background.png b/koha-tmpl/opac-tmpl/prog/images/button-background.png
new file mode 100644 (file)
index 0000000..82f5953
Binary files /dev/null and b/koha-tmpl/opac-tmpl/prog/images/button-background.png differ
diff --git a/koha-tmpl/opac-tmpl/prog/images/listmenu-container-bg.gif b/koha-tmpl/opac-tmpl/prog/images/listmenu-container-bg.gif
new file mode 100644 (file)
index 0000000..bdeb1aa
Binary files /dev/null and b/koha-tmpl/opac-tmpl/prog/images/listmenu-container-bg.gif differ
diff --git a/koha-tmpl/opac-tmpl/prog/images/submit-bg.gif b/koha-tmpl/opac-tmpl/prog/images/submit-bg.gif
new file mode 100644 (file)
index 0000000..ef5635b
Binary files /dev/null and b/koha-tmpl/opac-tmpl/prog/images/submit-bg.gif differ