From 932d97843dff86a9d6010d5efebc0726d9029be0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9rick?= Date: Tue, 7 Aug 2012 16:20:58 -0400 Subject: [PATCH] Add a mobile view for the OPAC using mediaqueries Depends on the new OPAC theme. TODO : Find a way to translate the terms in the mobile.css file --- koha-tmpl/opac-tmpl/prog/en/css/mobile.css | 620 ++++++++++++++++++++ koha-tmpl/opac-tmpl/prog/en/css/opac.css | 4 + .../opac-tmpl/prog/en/includes/doc-head-close.inc | 2 + koha-tmpl/opac-tmpl/prog/en/includes/usermenu.inc | 6 +- koha-tmpl/opac-tmpl/prog/en/js/script.js | 18 + koha-tmpl/opac-tmpl/prog/en/modules/opac-detail.tt | 20 +- .../opac-tmpl/prog/en/modules/opac-reserve.tt | 32 +- koha-tmpl/opac-tmpl/prog/en/modules/opac-user.tt | 32 +- 8 files changed, 689 insertions(+), 45 deletions(-) create mode 100644 koha-tmpl/opac-tmpl/prog/en/css/mobile.css diff --git a/koha-tmpl/opac-tmpl/prog/en/css/mobile.css b/koha-tmpl/opac-tmpl/prog/en/css/mobile.css new file mode 100644 index 0000000..900b7fe --- /dev/null +++ b/koha-tmpl/opac-tmpl/prog/en/css/mobile.css @@ -0,0 +1,620 @@ +/* + Mobile stylesheet + Frédérick Capovilla, 2012 - Libéo +*/ + +/* Hidden elements */ + +body#opac-main #login, +body#opac-main #login~div, +body#opac-main #opacnav, +body#opac-main #news, +body#results #facetcontainer, +body#opac-detail #ulactioncontainer>:not(#action), +body#opac-detail #ulactioncontainer #action a:not(.reserve), +body#opac-detail #shelfbrowser, +body#opac-detail #views, +body#opac-detail div#bibliodescriptions>ul>li:nth-of-type(n+3), +body#results #userresults .pages:nth-of-type(1), +body#results #userresults>br, +body#results td.select.selectcol, +body#results span.results_summary.actions>:not(.hold), +body#results span.addto, +body#results span#placehold, +body#results span.checkall, +body#results span.clearall, +body#results .searchresults td.resultscontrol, +body#advsearch form div.yui-g:nth-last-of-type(-n+4), +body#opac-readingrecord ul.ui-tabs-nav li, +body#opac-login-page #opac-main-search div#libraryname, +#leftmenus>:not(#menu), +#top-bar #menu-left, +#members>ul>li:nth-child(2), +#moresearches, +#breadcrumbs>p:nth-of-type(1), +#main_footer .colleft, +#opac-main-search a.logo { + display:none !important; +} + + +/* General */ + +body{ + min-width: 100px; +} + +#doc, #doc2, #doc3, #doc4, .yui-t1, .yui-t2, .yui-t3, .yui-t4, .yui-t5, .yui-t6, .yui-t7 { + min-width: 100px; +} + +.yui-ge div.first, .yui-gf .yui-g, .yui-gf .yui-u{ + width: 100%; +} + +#bd:after, .yui-g:after, .yui-gb:after, .yui-gc:after, .yui-gd:after, .yui-ge:after, .yui-gf:after { + content: ""; +} + +#container{ + border-radius: 0; + margin: 0; + padding: 0; + padding-bottom: 10px; + border: 0; +} + +#container #ctn_lt { + padding: 0 10px; + padding-left: auto; +} + +#doc3{ + margin: 0; + width: 100%; +} + +#opac-main-search { + margin: 0 !important; + padding: 0; +} + +#main_footer{ + margin-bottom: 0; +} + +#yui-main .yui-b { + margin: 0 !important; +} + +#breadcrumbs{ + margin: 0 !important; + padding: 0 !important; +} + +body#results #breadcrumbs>*{ + padding: 20px !important; +} + + +/* Main */ + +body#opac-main #opacmainuserblock { + padding: 0 +} + +body#opac-main #container #ctn_lt{ + padding: 15px; +} + + +/* Results */ + +body#results div#userresults { + padding: 0; + border: 0; +} + +body#results .yui-t1 #yui-main .yui-b { + margin: 0; +} + +body#results #container #ctn_lt{ + padding: 0; +} + +body#results .searchresults td.resultscontrol{ + border-radius: 0; +} + +body#results .searchresults .resort{ + width: 50%; + float:right; +} + +body#results .searchresults #sort_by{ + width: 100%; +} + +body#results .searchresults .cartlist{ + width:50%; +} + +body#results .results_summary.actions .hold { + font-size: 140%; + font-weight: bold; + margin-left: 0; +} + + +/* Cancel highlighting */ + +a .term { + text-decoration: inherit; +} + +.term { + background-color: inherit; + color: inherit; +} + + +/* Details */ + +body#opac-detail #ctn_lt, +body#opac-marcdetail #ctn_lt, +body#opac-isbddetail #ctn_lt{ + margin: 10px; + padding: 0; +} + +body#opac-detail #opac-detail-yui-ge { + padding-top: 15px; +} + +#views>span { + display:block; +} + +body#opac-detail #ulactioncontainer{ + position: absolute; + top: 0; + right: 0; +} + +body#opac-detail #container { + position: relative; +} + +body#opac-detail #ulactioncontainer ul{ + margin-top: 0; + padding: 5px; +} + +body#opac-detail #ulactioncontainer li{ + margin: 0; + padding: 0; +} + +/* Logo in the footer */ + +#opac-main-search div#libraryname { + display: block; + position: absolute; + bottom: -116px; + left: 0; + padding: 0 20px; +} + +#opac-main-search div#libraryname img { + display: block; +} + +#doc3{ + position: relative; +} + +#main_footer { + padding-top: 29px; +} + +#main_footer .colright, +#main_footer .colleft{ + float: none; +} + +#main_footer .colright .koha{ + float: right; + overflow: hidden; + text-indent: -5000em; + width: 92px; + height: 80px; + background-position: center; +} + + +/* Login bar */ + +div#top-bar { + display: block; + position: absolute; + left: 0; + bottom: -29px; + top: auto; + overflow: hidden; + z-index: auto; +} + +#members ul{ + margin: 0; +} + + +/* Search bar */ + +form#searchform { + border-radius: 0; + padding-top: 50px; +} + +form.single-library #filters .jqTransformSelectWrapper { + position: relative; + width: 100% !important; + left: 0; + top: 0; + border-radius: 3px; +} + +form.multi-libraries #filters .jqTransformSelectWrapper{ + position: relative; + width: 49% !important; + float: left; + top: 0px; + left: 0px; + border-radius: 3px; +} + +form.multi-libraries #libraries .jqTransformSelectWrapper{ + position: relative; + width: 49% !important; + float: right; + top: 0px; + left: 0px; + border-radius: 3px; +} + +form.multi-libraries .input-wrapper{ + margin: 0; +} + +form#searchform .input-wrapper input[type="text"]{ + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + border-radius: 3px; +} + +form#searchform .input-wrapper{ + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + position: absolute; + top: 15px; + left: 0; + width: 100%; + padding: 0 10px; + padding-right: 46px; +} + +form#searchform input[type="submit"]{ + position: absolute; + border-radius: 0; + top: 15px; + right: 10px; +} + +.jqTransformSelectWrapper{ + margin: 0; +} + +.jqTransformSelectWrapper div{ + overflow: hidden; +} + +.jqTransformSelectWrapper div span{ + white-space:nowrap; +} + +.jqTransformSelectWrapper div a{ + border-left: 5px solid #FFF; + border-right: 5px solid #FFF; + background-color: white; + box-shadow: -3px 0 5px #FFF; + right: 0px; + border-radius: 8px; +} + +.jqTransformSelectWrapper ul li a{ + padding: 10px 0; +} + +#opac-main-search #fluid { + display: block; +} + + +/* Login screen */ + +#holds, #opac-auth { + min-width: 0; + width: auto; +} + + +/* User */ + +body#opac-user .yui-b, +body#opac-passwd .yui-b, +body#opac-search-history .yui-b, +body#opac-readingrecord .yui-b, +body#opac-userupdate .yui-b, +body#opac-account .yui-b{ + width: auto; + float: none; +} + +body#opac-user #yui-main , +body#opac-passwd #yui-main , +body#opac-search-history #yui-main , +body#opac-readingrecord #yui-main , +body#opac-userupdate #yui-main , +body#opac-account #yui-main { + float: none; + margin: 0; +} + +body#opac-userupdate .yui-g .yui-u{ + width: 100%; +} + +body#opac-passwd fieldset, +body#opac-userupdate fieldset{ + margin: 1em 0; +} + +.renewals { + display: inline; +} + + +/* Tables */ + +body#opac-user #checkoutst td.links, +body#opac-user thead, +body#opac-holds div:not(.calendar) table>tbody>tr:nth-child(1), +body#opac-readingrecord #readingrec tr:nth-child(1), +body#opac-detail #holdingst thead, +body#opac-detail #holdingst td.call_no a{ + display: none !important; +} + +body#opac-detail table#holdingst, +body#opac-readingrecord table, +body#opac-holds div:not(.calendar) table, +body#opac-user table#holdst, +body#opac-user table#checkoutst{ + border-right: none; + border-top: none; + border: none; + counter-reset: item; +} + +body#opac-detail #holdingst tr, +body#opac-readingrecord tr, +body#opac-holds div:not(.calendar) tr, +body#opac-user #holdst tr, +body#opac-user #checkoutst tr{ + border: none; + display: block; + position: relative; + margin-left: 10px; + margin-bottom: 10px; +} + +body#opac-detail #holdingst td, +body#opac-readingrecord td, +body#opac-holds div:not(.calendar) td, +body#opac-user #holdst td, +body#opac-user #checkoutst td{ + display: block; + border: 1px solid #DDD; + position: relative; +} + +body#opac-user #checkoutst caption { + display: block; +} + +body#opac-detail #holdingst tr:before, +body#opac-readingrecord tr:before, +body#opac-holds div:not(.calendar) tr:not(.copiesrow):before, +body#opac-user #holdst tr:before, +body#opac-user #checkoutst tr:before { + font-weight: bold; + content: counter(item) ". "; + counter-increment: item; + display: block; + position: absolute; + left: -13px; + top: 4px; +} + +body#opac-detail #holdingst td:before, +body#opac-readingrecord td:before, +body#opac-holds div:not(.calendar) td:before, +body#opac-user #holdst td:before, +body#opac-user #checkoutst td:before { + font-weight: bold; +} + +body#opac-detail #holdingst td.itype:before {content: "Item type : ";} +body#opac-detail #holdingst td.location:before {content: "Location : ";} +body#opac-detail #holdingst td.collection:before {content: "Collection : ";} +body#opac-detail #holdingst td.call_no:before {content: "Call Number : ";} +body#opac-detail #holdingst td.vol_info:before {content: "Vol Info : ";} +body#opac-detail #holdingst td.url:before {content: "URL : ";} +body#opac-detail #holdingst td.copynumber:before {content: "Copy Number : ";} +body#opac-detail #holdingst td.status:before {content: "Status : ";} +body#opac-detail #holdingst td.notes:before {content: "Notes : ";} +body#opac-detail #holdingst td.date_due:before {content: "Date Due : ";} + +body#opac-user #checkoutst td.date_due:before {content: "Date due : ";} +body#opac-user #checkoutst td.call_no:before {content: "Call No. : ";} +body#opac-user #checkoutst td.fines:before {content: "Fines : ";} + +body#opac-user #holdst td.reservedate:before {content: "Placed On : ";} +body#opac-user #holdst td.expirationdate:before {content: "Expires On : ";} +body#opac-user #holdst td.branch:before {content: "Pick Up Location : ";} +body#opac-user #holdst td.priority:before {content: "Priority : ";} +body#opac-user #holdst td.status:before {content: "Status : ";} + +body#opac-readingrecord #readingrec td:nth-child(3):before {content: "Item Type : ";} +body#opac-readingrecord #readingrec td:nth-child(4):before {content: "Call No. : ";} +body#opac-readingrecord #readingrec td:nth-child(5):before {content: "Date : ";} + +body#opac-holds #bibitemloop>tbody>tr:not(.copiesrow) td.hold:before {content: "Hold : ";} +body#opac-holds #bibitemloop>tbody>tr:not(.copiesrow) td.itype:before {content: "Item Type : ";} +body#opac-holds #bibitemloop>tbody>tr:not(.copiesrow) td.priority:before {content: "Priority : ";} +body#opac-holds #bibitemloop>tbody>tr:not(.copiesrow) td.reserve_date:before {content: "Hold Starts On Date : ";} +body#opac-holds #bibitemloop>tbody>tr:not(.copiesrow) td.expiration_date:before {content: "Hold Not Needed After : ";} +body#opac-holds #bibitemloop>tbody>tr:not(.copiesrow) td.place_on_type:before {content: "Place On : ";} +body#opac-holds #bibitemloop>tbody>tr:not(.copiesrow) td.branch:before {content: "Pickup Location : ";} + +body#opac-holds #bibitemloop table td.copy:before {content: "Copy : ";} +body#opac-holds #bibitemloop table td.itype:before {content: "Item Type : ";} +body#opac-holds #bibitemloop table td.barcode:before {content: "Barcode : ";} +body#opac-holds #bibitemloop table td.homebranch:before {content: "Home Library : ";} +body#opac-holds #bibitemloop table td.holdingbranch:before {content: "Last Location : ";} +body#opac-holds #bibitemloop table td.call_no:before {content: "Call Number : ";} +body#opac-holds #bibitemloop table td.vol_info:before {content: "Vol Info : ";} +body#opac-holds #bibitemloop table td.information:before {content: "Information : ";} + + +/* Holds */ + +body#opac-holds tr.copiesrow { + margin-left: 25px; +} + +body#opac-holds tr.copiesrow>td:nth-child(1) { + display: none; +} + +body#opac-holds #bibitemloop tr { + margin-bottom: 0; +} + + +/* User Fines table */ + +body#opac-account #useraccount th:nth-child(3), +body#opac-account #useraccount td:nth-child(3) { + display: none !important; +} + +body#opac-account #useraccount table { + position: relative; + margin-bottom: 50px; +} + +body#opac-account #useraccount tfoot { + display: block; + position: absolute; + bottom: 0; + right: 0; + bottom: -23px; +} + +body#opac-account #useraccount thead th { + padding: 2px 10px; +} + +body#opac-account #useraccount tbody td:nth-child(1) { + min-width: 70px; +} + +body#opac-account #useraccount tbody td:nth-child(4) { + text-align: right; +} + +body#opac-account #useraccount tfoot th { + display: none; +} + +body#opac-account #useraccount tfoot td { + border-right: 1px solid #DDD; +} + +body#opac-account #useraccount tfoot td:before { + content: "Total due : " +} + + +/* User menu */ + +#leftmenus>#menu ul li.messaging, +#leftmenus>#menu ul li.suggestions, +#leftmenus>#menu ul li.privateshelves, +#leftmenus>#menu { + display: none; +} + +.mobile_only { + display: block; +} + +body.mobile_menu form#searchform .input-wrapper{ + padding-left: 90px; +} + +body.mobile_menu_opened #doc3>div, +body.mobile_menu_opened #main_footer>div { + position: relative; + left: 200px; +} + +body.mobile_menu_opened #main_footer { + display: none; +} + +body.mobile_menu_opened #doc3 { + overflow: hidden; + min-height: 380px; +} + +body.mobile_menu_opened #ctn_rb>.ctn_in>.yui-b { + position: static; +} + +body.mobile_menu_opened #leftmenus>#menu { + display: block; + position: absolute; + width: 200px; + height: 100%; + top: 0; + left: -201px; + padding: 0; + z-index: 999; +} + +#mobile_menu_button { + position: absolute; + cursor: pointer; + background: url(../../images/mobile-menu-button.png) no-repeat scroll 50% 50%; + border: 0px; + font-size: 0; + width: 76px; + height: 38px; + top: 13px; + left: 6px; +} diff --git a/koha-tmpl/opac-tmpl/prog/en/css/opac.css b/koha-tmpl/opac-tmpl/prog/en/css/opac.css index bdb2dc9..4e48674 100644 --- a/koha-tmpl/opac-tmpl/prog/en/css/opac.css +++ b/koha-tmpl/opac-tmpl/prog/en/css/opac.css @@ -2520,3 +2520,7 @@ span.sep { } */ + +.mobile_only { + display : none; +} 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 50981cc..258ba4e 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 @@ -15,6 +15,8 @@ [% END %] + + [% IF ( OPACUserCSS ) %][% END %] diff --git a/koha-tmpl/opac-tmpl/prog/en/includes/usermenu.inc b/koha-tmpl/opac-tmpl/prog/en/includes/usermenu.inc index 352d6b3..d3205f3 100644 --- a/koha-tmpl/opac-tmpl/prog/en/includes/usermenu.inc +++ b/koha-tmpl/opac-tmpl/prog/en/includes/usermenu.inc @@ -23,14 +23,14 @@ [% END %] [% IF ( suggestion ) %] [% UNLESS ( AnonSuggestions ) %] - [% IF ( suggestionsview ) %]
  • [% ELSE %]
  • [% END %]my purchase suggestions
  • + [% IF ( suggestionsview ) %]
  • [% ELSE %]
  • [% END %]my purchase suggestions
  • [% END %] [% END %] [% IF ( EnhancedMessagingPreferences ) %] - [% IF ( messagingview ) %]
  • [% ELSE %]
  • [% END %]my messaging
  • + [% IF ( messagingview ) %]
  • [% ELSE %]
  • [% END %]my messaging
  • [% END %] [% IF ( virtualshelves ) %] - [% IF ( listsview ) %]
  • [% ELSE %]
  • [% END %]my lists
  • + [% IF ( listsview ) %]
  • [% ELSE %]
  • [% END %]my lists
  • [% END %] diff --git a/koha-tmpl/opac-tmpl/prog/en/js/script.js b/koha-tmpl/opac-tmpl/prog/en/js/script.js index 9f3de0d..4a76977 100644 --- a/koha-tmpl/opac-tmpl/prog/en/js/script.js +++ b/koha-tmpl/opac-tmpl/prog/en/js/script.js @@ -24,6 +24,24 @@ $(document).ready(function(){ return true; } }); + + + // Add the mobile menu button if we are in some sections of the opac + if($('body#opac-user, body#opac-passwd, body#opac-search-history, body#opac-readingrecord, body#opac-userupdate, body#opac-usersuggestions, body#opac-account, body#opac-privacy, body#opac-usertags').length != 0) { + $('body').addClass('mobile_menu'); + + var button = $('').addClass('mobile_only'); + $('#searchform').append(button); + + button.click(function() { + if($('body').hasClass('mobile_menu_opened')){ + $('body').removeClass('mobile_menu_opened'); + } + else { + $('body').addClass('mobile_menu_opened'); + } + }); + } }); // build Change Language menus diff --git a/koha-tmpl/opac-tmpl/prog/en/modules/opac-detail.tt b/koha-tmpl/opac-tmpl/prog/en/modules/opac-detail.tt index 7e68dfe..734461e 100644 --- a/koha-tmpl/opac-tmpl/prog/en/modules/opac-detail.tt +++ b/koha-tmpl/opac-tmpl/prog/en/modules/opac-detail.tt @@ -720,8 +720,8 @@ YAHOO.util.Event.onContentReady("furtherm", function () { Date due [% FOREACH ITEM_RESULT IN ITEM_RESULTS %] - [% IF ( item_level_itypes ) %][% UNLESS ( noItemTypeImages ) %][% IF ( ITEM_RESULT.imageurl ) %][% ITEM_RESULT.description %][% END %][% END %] [% ITEM_RESULT.description %][% END %] - + [% IF ( item_level_itypes ) %][% UNLESS ( noItemTypeImages ) %][% IF ( ITEM_RESULT.imageurl ) %][% ITEM_RESULT.description %][% END %][% END %] [% ITEM_RESULT.description %][% END %] + [% UNLESS ( singleBranchMode ) %] [% IF ( ITEM_RESULT.branchurl ) %] @@ -734,14 +734,14 @@ YAHOO.util.Event.onContentReady("furtherm", function () { [% END %] [% ITEM_RESULT.location_description %] - [% IF ( itemdata_ccode ) %][% ITEM_RESULT.ccode %][% END %] - [% IF ( ITEM_RESULT.itemcallnumber ) %] [% ITEM_RESULT.itemcallnumber %][% IF ( OPACShelfBrowser ) %] (Browse shelf)[% END %][% END %] - [% IF ( itemdata_enumchron ) %][% ITEM_RESULT.enumchron %][% END %] - [% IF ( itemdata_uri ) %][% ITEM_RESULT.uri %][% END %] - [% IF ( itemdata_copynumber ) %][% ITEM_RESULT.copynumber %][% END %] - [% INCLUDE 'item-status.inc' item = ITEM_RESULT %] - [% IF ( itemdata_itemnotes ) %][% ITEM_RESULT.itemnotes %][% END %] - [% ITEM_RESULT.datedue | $KohaDates %] + [% IF ( itemdata_ccode ) %][% ITEM_RESULT.ccode %][% END %] + [% IF ( ITEM_RESULT.itemcallnumber ) %] [% ITEM_RESULT.itemcallnumber %][% IF ( OPACShelfBrowser ) %] (Browse shelf)[% END %][% END %] + [% IF ( itemdata_enumchron ) %][% ITEM_RESULT.enumchron %][% END %] + [% IF ( itemdata_uri ) %][% ITEM_RESULT.uri %][% END %] + [% IF ( itemdata_copynumber ) %][% ITEM_RESULT.copynumber %][% END %] + [% INCLUDE 'item-status.inc' item = ITEM_RESULT %] + [% IF ( itemdata_itemnotes ) %][% ITEM_RESULT.itemnotes %][% END %] + [% ITEM_RESULT.datedue | $KohaDates %] [% END %] diff --git a/koha-tmpl/opac-tmpl/prog/en/modules/opac-reserve.tt b/koha-tmpl/opac-tmpl/prog/en/modules/opac-reserve.tt index a78bc68..0384d41 100644 --- a/koha-tmpl/opac-tmpl/prog/en/modules/opac-reserve.tt +++ b/koha-tmpl/opac-tmpl/prog/en/modules/opac-reserve.tt @@ -262,7 +262,7 @@ [% FOREACH bibitemloo IN bibitemloop %] [% IF ( bibitemloo.holdable ) %] - + @@ -275,9 +275,9 @@ [% ELSE %] - [% UNLESS ( none_available ) %] [% END %] + [% UNLESS ( none_available ) %] [% END %] [% END %] - [% IF ( bibitemloo.holdable ) %][% ELSE %][% END %] + [% IF ( bibitemloo.holdable ) %][% ELSE %][% END %] [% bibitemloo.title |html %][% IF ( bibitemloo.subtitle ) %] [% FOREACH subtitl IN bibitemloo.subtitle %][% subtitl.subfield %][% END %][% END %] [% IF ( bibitemloo.author ) %], by [% bibitemloo.author %][% END %] @@ -298,18 +298,18 @@ [% IF ( bibitemloo.holdable ) %][% UNLESS ( item_level_itypes ) %] - + [% IF ( bibitemloo.imageurl ) %][% END %] [% bibitemloo.description %] [% END %][% END %] [% IF ( bibitemloo.holdable ) %] [% IF ( showpriority ) %] - + [% bibitemloo.rank %] out of [% bibitemloo.reservecount %] [% END %][% END %] [% IF ( reserve_in_future ) %] - [% IF ( bibitemloo.holdable ) %] + [% IF ( bibitemloo.holdable ) %]