From fd92aeb0d8f6cf7f3021a160c1f13001d90c7aee Mon Sep 17 00:00:00 2001 From: Owen Leonard Date: Wed, 30 Jan 2008 01:20:55 -0600 Subject: [PATCH] Working version of cart and lists buttons, with some style changes to cart and lists popups. Bug: cart contents indicator conflicts with button-style js. Also adding new default button style. Signed-off-by: Chris Cormack Signed-off-by: Joshua Ferraro --- koha-tmpl/opac-tmpl/prog/en/css/opac.css | 165 ++++++++---------- .../prog/en/includes/doc-head-close.inc | 11 +- .../opac-tmpl/prog/en/includes/masthead.inc | 82 +-------- koha-tmpl/opac-tmpl/prog/en/js/script.js | 42 ++++- .../images/button-background-gradient.png | Bin 0 -> 2111 bytes .../prog/images/button-background.png | Bin 0 -> 824 bytes .../prog/images/listmenu-container-bg.gif | Bin 0 -> 347 bytes koha-tmpl/opac-tmpl/prog/images/submit-bg.gif | Bin 0 -> 2899 bytes 8 files changed, 117 insertions(+), 183 deletions(-) create mode 100644 koha-tmpl/opac-tmpl/prog/images/button-background-gradient.png create mode 100644 koha-tmpl/opac-tmpl/prog/images/button-background.png create mode 100644 koha-tmpl/opac-tmpl/prog/images/listmenu-container-bg.gif create mode 100644 koha-tmpl/opac-tmpl/prog/images/submit-bg.gif diff --git a/koha-tmpl/opac-tmpl/prog/en/css/opac.css b/koha-tmpl/opac-tmpl/prog/en/css/opac.css index 1847350878..cb9e889916 100644 --- a/koha-tmpl/opac-tmpl/prog/en/css/opac.css +++ b/koha-tmpl/opac-tmpl/prog/en/css/opac.css @@ -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 diff --git a/koha-tmpl/opac-tmpl/prog/en/includes/doc-head-close.inc b/koha-tmpl/opac-tmpl/prog/en/includes/doc-head-close.inc index 0bb0f8b0aa..bdb91e5c23 100644 --- a/koha-tmpl/opac-tmpl/prog/en/includes/doc-head-close.inc +++ b/koha-tmpl/opac-tmpl/prog/en/includes/doc-head-close.inc @@ -7,6 +7,7 @@ /lib/yui/container.css" /> + @@ -28,7 +29,7 @@ - Lists -Cart +Cart
 diff --git a/koha-tmpl/opac-tmpl/prog/en/js/script.js b/koha-tmpl/opac-tmpl/prog/en/js/script.js index dab5beef6e..b390a501b9 100644 --- a/koha-tmpl/opac-tmpl/prog/en/js/script.js +++ b/koha-tmpl/opac-tmpl/prog/en/js/script.js @@ -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 = $('').insertAfter(this). addClass(this.className).attr('id',this.id); + $(this).remove(); + } + b.text('').css({cursor:'pointer'}). prepend('').append($(''). + text(tt).append('')); + }); + + 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 index 0000000000000000000000000000000000000000..0402d1e4ecd0ed0e679b9f5f46b3a9e267c65a19 GIT binary patch literal 2111 zcmeAS@N?(olHy`uVBq!ia0vp^oD2+%6FAs_teSo=eIUh>?&#~tz_9*=IcwKTAYZb? zHKHUqKdq!Zu_%?nF(p4KRlzeiF+DXXH8G{K@MNkD0|Wa-PZ!6Kid#v4{{R2)!^Xs* z&=Aq^LtoLAfzf4(QUimMm!JbfqsU*yB^(M39YHJt4lbHZ910T_-ER?LWDyALVqogf zfGK9u{N?HaR4=#`q<9k_kTBvz*0$&l$bh4=KqaX{nCcLUBiVuKX2NV+WTXz$0oH~f zKo&W4{SyQ`46GhRD7gOT1i4a;O^E?!3*708Fx?IIB*f99%HXj+8X$<2J*-lQ!{Lv= z!TDnm+c!q0juo0r(0q;_gTe~DWM4f0VB~e literal 0 HcmV?d00001 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 index 0000000000000000000000000000000000000000..82f59531a82e9dffb5583f90cdb485065f398875 GIT binary patch literal 824 zcmeAS@N?(olHy`uVBq!ia0y~yVEhPVAK_pIk~?%>JOxtB#ZI0f92^|CANoH4a-9Nv zLR|m<|Id&%6OQf;#`!PSdy8arx22vo62BdsBdJUZ(za6DxV2dp-=);5uBe^ zQl40p%HW%rT$G=inv$8Q;FejGTAp8&U98|6v3sJH3IhX^tfz}(NX4ADmji{f@_yTW`)#A!-1OAs{qKr7U*AQX>o2t3 zTgB?XrLO1YBh}L~pRY<+XdTTKSs%E^?W5EvV^9Xdzi$2Y_YMf_7ROuFVdQ&MBb@08}(` A2LJ#7 literal 0 HcmV?d00001 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 index 0000000000000000000000000000000000000000..bdeb1aa7d26567870b261448e596a6999c0f317f GIT binary patch literal 347 zcmZ?wbhEHb{KdeVPW@Xx9}hPlZg=;VhSxPjEx>DJORwD7iYN0O=ZnJ z{kCfVgAb>tUH-^sm*C)GqBPYfJ;ZBk($+_N>dwDEe!djtB*CQVGBJA@9n#ECF|OPf}5u%+`0ey&D4j7u5Nm| d_4$(9%isR|mH2-B$D^HRR5wr8^X6c%1^~1?xI+K{ literal 0 HcmV?d00001 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 index 0000000000000000000000000000000000000000..ef5635bcdd02292a307edf8e6cb05c1919ce4031 GIT binary patch literal 2899 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