Bug 10309: (follow-up) Update for Bug 10856, improve shelf browser
authorOwen Leonard <oleonard@myacpl.org>
Mon, 7 Oct 2013 18:45:06 +0000 (14:45 -0400)
committerGalen Charlton <gmc@esilibrary.com>
Mon, 14 Oct 2013 23:13:47 +0000 (23:13 +0000)
This patch updates this theme with the changes made in Bug 10856.
Because of the way JavaScript is loaded in the new theme, the JS in the
shelfbrowser include had to be moved to the opac-detail template.

Test plan from that bug:
- On a detail biblio page, click on a "Browse shelf" link.
- Play with the next and previous links.
- Deactivate Javascript (using NoScript for example) and check that you
  get the same behavior (but the page is reloaded).
- Launch the unit tests: prove t/db_dependent/ShelfBrowser.t

Signed-off-by: Bernardo Gonzalez Kriegel <bgkriegel@gmail.com>
Works well. No errors

Disabled JavaScript on Firefox (about:config, javascript.enable -> false)
Browse shelf works by reloading.
Unit test report success.

Signed-off-by: Galen Charlton <gmc@esilibrary.com>

koha-tmpl/opac-tmpl/bootstrap/css/opac.css
koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc [new file with mode: 0644]
koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
koha-tmpl/opac-tmpl/bootstrap/en/modules/svc/shelfbrowser.tt [new file with mode: 0644]
koha-tmpl/opac-tmpl/bootstrap/less/opac.less

index 15cfbc9..a56dbc3 100644 (file)
@@ -2146,6 +2146,50 @@ td img {
   display: block;
   overflow: auto;
 }
+#shelfbrowser table {
+  margin: 0;
+}
+#shelfbrowser table,
+#shelfbrowser td,
+#shelfbrowser th {
+  border: 0;
+  font-size: 90%;
+  text-align: center;
+}
+#shelfbrowser td,
+#shelfbrowser th {
+  padding: 3px 5px;
+  width: 20%;
+}
+#shelfbrowser a {
+  display: block;
+  font-size: 110%;
+  font-weight: bold;
+  text-decoration: none;
+}
+#shelfbrowser #browser_next,
+#shelfbrowser #browser_previous {
+  background-image: url("../images/sprite.png");
+  background-repeat: no-repeat;
+  width: 16px;
+}
+#shelfbrowser #browser_next a,
+#shelfbrowser #browser_previous a {
+  cursor: pointer;
+  display: block;
+  height: 0 !important;
+  margin: 0;
+  overflow: hidden;
+  padding: 50px 0 0;
+  text-decoration: none;
+  width: 16px;
+}
+#shelfbrowser #browser_previous {
+  background-position: -9px -1007px;
+}
+#shelfbrowser #browser_next {
+  background-position: -9px -1057px;
+}
 .shadowed {
   -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc
new file mode 100644 (file)
index 0000000..bc5ef2c
--- /dev/null
@@ -0,0 +1,86 @@
+[% BLOCK shelfbrowser %]
+    [% IF OpenOPACShelfBrowser %]
+        <div id="shelfbrowser">
+            <h5 style="text-align: center;">
+                [% IF ( starting_homebranch ) %]Browsing [% starting_homebranch %] Shelves[% END %]
+                [% IF ( starting_location ) %], Shelving location: [% starting_location %][% END %]
+                [% IF ( starting_ccode ) %], Collection code: [% starting_ccode %][% END %]
+                <a style="font-size: 75%;" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% biblionumber %]" class="close_shelf" >Close shelf browser</a>
+            </h5>
+
+            <table class="table">
+                <tr>
+                    <td rowspan="2">
+                      [% IF shelfbrowser_prev_item %]
+                        <div id="browser_previous">
+                            <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% shelfbrowser_prev_item.biblionumber %]&amp;shelfbrowse_itemnumber=[% shelfbrowser_prev_item.itemnumber %]#shelfbrowser" data-prev-itemnumber="[% shelfbrowser_prev_item.itemnumber %]">Previous</a>
+                        </div>
+                      [% END %]
+                    </td>
+
+                    [% FOREACH item IN shelfbrowser_items %]
+                        <td>
+                            <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% item.biblionumber %]&amp;shelfbrowse_itemnumber=[% item.itemnumber %]#shelfbrowser">
+                                [% IF ( OPACLocalCoverImages ) %]
+                                    <div title="[% item.biblionumber |url %]" class="[% item.biblionumber %] thumbnail-shelfbrowser" id="local-thumbnail-shelf-[% item.biblionumber %]"></div>
+                                [% END %]
+                                [% IF ( OPACAmazonCoverImages ) %]
+                                    [% IF ( item.browser_normalized_isbn ) %]
+                                        <img src="http://images.amazon.com/images/P/[% item.browser_normalized_isbn %].01._AA75_PU_PU-5_.jpg" alt="" />
+                                    [% ELSE %]
+                                        <span class="no-image">No cover image available</span>
+                                    [% END %]
+                                [% END %]
+
+                                [% IF ( SyndeticsEnabled ) %]
+                                    [% IF ( SyndeticsCoverImages ) %]
+                                        [% IF ( content_identifier_exists ) %]
+                                            [% IF ( using_https ) %]
+                                                <img src="https://secure.syndetics.com/index.aspx?isbn=[% item.browser_normalized_isbn %]/SC.GIF&amp;client=[% SyndeticsClientCode %][% IF ( item.browser_normalized_upc ) %]&amp;upc=[% item.browser_normalized_upc %][% END %][% IF ( item.browser_normalized_oclc ) %]&amp;oclc=[% item.browser_normalized_oclc %][% END %]&amp;type=xw10" alt="" />
+                                            [% ELSE %]
+                                                <img src="http://www.syndetics.com/index.aspx?isbn=[% item.browser_normalized_isbn %]/SC.GIF&amp;client=[% SyndeticsClientCode %][% IF ( item.browser_normalized_upc ) %]&amp;upc=[% item.browser_normalized_upc %][% END %][% IF ( item.browser_normalized_oclc ) %]&amp;oclc=[% item.browser_normalized_oclc %][% END %]&amp;type=xw10" alt="" />
+                                            [% END %]
+                                        [% ELSE %]
+                                            <span class="no-image">No cover image available</span>
+                                        [% END %]
+                                    [% END %]
+                                [% END %]
+
+                                [% IF ( GoogleJackets ) %]
+                                    [% IF ( item.browser_normalized_isbn ) %]
+                                        <div style="block" title="[% item.biblionumber |url %]" class="[% item.browser_normalized_isbn %]" id="gbs-thumbnail-preview[% loop.count %]"></div>
+                                    [% ELSE %]
+                                        <span class="no-image">No cover image available</span>
+                                    [% END %]
+                                [% END %]
+                                [% IF ( BakerTaylorEnabled ) %]
+                                    [% IF ( item.browser_normalized_isbn ) %]
+                                        <img alt="See Baker &amp; Taylor" src="[% BakerTaylorImageURL |html %][% item.browser_normalized_isbn %]" />
+                                    [% ELSE %]
+                                        <span class="no-image">No cover image available</span>
+                                    [% END %]
+                                [% END %]
+                            </a>
+                        </td>
+                    [% END %]
+                    <td rowspan="2">
+                        [% IF shelfbrowser_next_item %]
+                            <div id="browser_next">
+                                <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% shelfbrowser_next_item.biblionumber %]&amp;shelfbrowse_itemnumber=[% shelfbrowser_next_item.itemnumber %]#shelfbrowser" data-next-itemnumber="[% shelfbrowser_next_item.itemnumber %]">Next</a>
+                            </div>
+                        [% END %]
+                    </td>
+                </tr>
+
+                <tr>
+                    [% FOREACH item IN shelfbrowser_items %]
+                        <td class="top">
+                            [% item.itemcallnumber %]
+                            <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% item.biblionumber %]&amp;shelfbrowse_itemnumber=[% item.itemnumber %]#shelfbrowser">[% item.title |html %]</a>
+                        </td>
+                    [% END %]
+                </tr>
+            </table>
+        </div>
+    [% END # /IF OpenOPACShelfBrowser %]
+[% END # end of shelfbrowser block %]
\ No newline at end of file
index 5e03941..8b7cfdd 100644 (file)
                                 <div id="noitems">No physical items for this record</div>
                             [% END %]
                         [% END # IF itemloop.size %]
-
+                        [% PROCESS 'shelfbrowser.inc' %]
                         [% INCLUDE shelfbrowser tab='holdings' %]
                         <br style="clear:both;" />
                     </div> <!-- / #holdings -->
                         [% IF ( ITEM_RESULT.itemcallnumber ) %]
                             [% ITEM_RESULT.itemcallnumber %]
                             [% IF ( OPACShelfBrowser ) %]
-                                (<a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% ITEM_RESULT.biblionumber %]&amp;shelfbrowse_itemnumber=[% ITEM_RESULT.itemnumber %]#[% tab %]">Browse shelf</a>)
+                                [% IF ( ITEM_RESULT.itemnumber == starting_itemnumber ) %]
+                                    (<a class="close_shelf" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% ITEM_RESULT.biblionumber %]&amp;shelfbrowse_itemnumber=[% ITEM_RESULT.itemnumber %]#[% tab %]">Browse shelf</a>)
+                                [% ELSE %]
+                                    (<a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% ITEM_RESULT.biblionumber %]&amp;shelfbrowse_itemnumber=[% ITEM_RESULT.itemnumber %]#[% tab %]">Browse shelf</a>)
+                                [% END %]
                             [% END %]
                         [% END %]
                     </td>
     </table>
 [% END %][%# end of items_table block %]
 
-[% BLOCK shelfbrowser %]
-    [% IF ( OpenOPACShelfBrowser and shelfbrowser_tab == tab) %]
-        <div id="shelfbrowser">
-            <h5 style="text-align: center;">
-                [% IF ( starting_homebranch ) %]Browsing [% starting_homebranch %] Shelves[% END %]
-                [% IF ( starting_location ) %], Shelving location: [% starting_location %][% END %]
-                [% IF ( starting_ccode ) %], Collection code: [% starting_ccode %][% END %]
-                <a style="font-size: 75%;" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% biblionumber %]">Close shelf browser</a>
-            </h5>
-
-            <table class="table table-bordered table-striped">
-                <tr>
-                    <td rowspan="2" style="width:20px;">
-                        <div id="browser_previous">
-                            <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% IF ( shelfbrowser_prev_biblionumber ) %][% shelfbrowser_prev_biblionumber %][% ELSE %][% biblionumber %][% END %]&amp;shelfbrowse_itemnumber=[% shelfbrowser_prev_itemnumber %]#shelfbrowser">Previous</a>
-                        </div>
-                    </td>
-                    [% FOREACH PREVIOUS_SHELF_BROWS IN PREVIOUS_SHELF_BROWSE %]
-                        <td>
-                            <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% PREVIOUS_SHELF_BROWS.biblionumber %]&amp;shelfbrowse_itemnumber=[% PREVIOUS_SHELF_BROWS.itemnumber %]#shelfbrowser">
-                                [% IF ( OPACLocalCoverImages ) %]
-                                    <div title="[% PREVIOUS_SHELF_BROWS.biblionumber |url %]" class="[% PREVIOUS_SHELF_BROWS.biblionumber %] thumbnail-shelfbrowser" id="local-thumbnail-shelf-[% PREVIOUS_SHELF_BROWS.biblionumber %]"></div>
-                                [% END %]
-                                [% IF ( OPACAmazonCoverImages ) %]
-                                    [% IF ( PREVIOUS_SHELF_BROWS.browser_normalized_isbn ) %]
-                                        <img src="http://images.amazon.com/images/P/[% PREVIOUS_SHELF_BROWS.browser_normalized_isbn %].01._AA75_PU_PU-5_.jpg" alt="" />
-                                    [% ELSE %]
-                                        <span class="no-image">No cover image available</span>
-                                    [% END %]
-                                [% END %]
-                                [% IF ( SyndeticsEnabled ) %]
-                                    [% IF ( SyndeticsCoverImages ) %]
-                                        [% IF ( content_identifier_exists ) %]
-                                            [% IF ( using_https ) %]
-                                                <img src="https://secure.syndetics.com/index.aspx?isbn=[% PREVIOUS_SHELF_BROWS.browser_normalized_isbn %]/SC.GIF&amp;client=[% SyndeticsClientCode %][% IF ( PREVIOUS_SHELF_BROWS.browser_normalized_upc ) %]&amp;upc=[% PREVIOUS_SHELF_BROWS.browser_normalized_upc %][% END %][% IF ( PREVIOUS_SHELF_BROWS.browser_normalized_oclc ) %]&amp;oclc=[% PREVIOUS_SHELF_BROWS.browser_normalized_oclc %][% END %]&amp;type=xw10" alt="" />
-                                            [% ELSE %]
-                                                <img src="http://www.syndetics.com/index.aspx?isbn=[% PREVIOUS_SHELF_BROWS.browser_normalized_isbn %]/SC.GIF&amp;client=[% SyndeticsClientCode %][% IF ( PREVIOUS_SHELF_BROWS.browser_normalized_upc ) %]&amp;upc=[% PREVIOUS_SHELF_BROWS.browser_normalized_upc %][% END %][% IF ( PREVIOUS_SHELF_BROWS.browser_normalized_oclc ) %]&amp;oclc=[% PREVIOUS_SHELF_BROWS.browser_normalized_oclc %][% END %]&amp;type=xw10" alt="" />
-                                            [% END %]
-                                        [% ELSE %]
-                                            <span class="no-image">No cover image available</span>
-                                        [% END %]
-                                    [% END %]
-                                [% END %]
-                                [% IF ( GoogleJackets ) %]
-                                    [% IF ( PREVIOUS_SHELF_BROWS.browser_normalized_isbn ) %]
-                                        <div title="[% PREVIOUS_SHELF_BROWS.biblionumber |url %]" class="[% PREVIOUS_SHELF_BROWS.browser_normalized_isbn %]" id="gbs-thumbnail-preview[% loop.count %]"></div>
-                                    [% ELSE %]
-                                        <span class="no-image">No cover image available</span>
-                                    [% END %]
-                                [% END %]
-                                [% IF ( BakerTaylorEnabled ) %]
-                                    [% IF ( PREVIOUS_SHELF_BROWS.browser_normalized_isbn ) %]
-                                        <img alt="See Baker &amp; Taylor" src="[% BakerTaylorImageURL |html %][% PREVIOUS_SHELF_BROWS.browser_normalized_isbn %]" />
-                                    [% ELSE %]
-                                        <span class="no-image">No cover image available</span>
-                                    [% END %]
-                                [% END %]
-                            </a>
-                        </td>
-                    [% END %]
-
-                    [% FOREACH NEXT_SHELF_BROWS IN NEXT_SHELF_BROWSE %]
-                        <td>
-                            <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% NEXT_SHELF_BROWS.biblionumber %]&amp;shelfbrowse_itemnumber=[% NEXT_SHELF_BROWS.itemnumber %]#shelfbrowser">
-                                [% IF ( OPACLocalCoverImages ) %]
-                                    <div title="[% NEXT_SHELF_BROWS.biblionumber |url %]" class="[% NEXT_SHELF_BROWS.biblionumber %] thumbnail-shelfbrowser" id="local-thumbnail-shelf-[% NEXT_SHELF_BROWS.biblionumber %]"></div>
-                                [% END %]
-                                [% IF ( OPACAmazonCoverImages ) %]
-                                    [% IF ( NEXT_SHELF_BROWS.browser_normalized_isbn ) %]
-                                        <img src="http://images.amazon.com/images/P/[% NEXT_SHELF_BROWS.browser_normalized_isbn %].01._AA75_PU_PU-5_.jpg" alt="" />
-                                    [% ELSE %]
-                                        <span class="no-image">No cover image available</span>
-                                    [% END %]
-                                [% END %]
-
-                                [% IF ( SyndeticsEnabled ) %]
-                                    [% IF ( SyndeticsCoverImages ) %]
-                                        [% IF ( content_identifier_exists ) %]
-                                            [% IF ( using_https ) %]
-                                                <img src="https://secure.syndetics.com/index.aspx?isbn=[% NEXT_SHELF_BROWS.browser_normalized_isbn %]/SC.GIF&amp;client=[% SyndeticsClientCode %][% IF ( NEXT_SHELF_BROWS.browser_normalized_upc ) %]&amp;upc=[% NEXT_SHELF_BROWS.browser_normalized_upc %][% END %][% IF ( NEXT_SHELF_BROWS.browser_normalized_oclc ) %]&amp;oclc=[% NEXT_SHELF_BROWS.browser_normalized_oclc %][% END %]&amp;type=xw10" alt="" />
-                                            [% ELSE %]
-                                                <img src="http://www.syndetics.com/index.aspx?isbn=[% NEXT_SHELF_BROWS.browser_normalized_isbn %]/SC.GIF&amp;client=[% SyndeticsClientCode %][% IF ( NEXT_SHELF_BROWS.browser_normalized_upc ) %]&amp;upc=[% NEXT_SHELF_BROWS.browser_normalized_upc %][% END %][% IF ( NEXT_SHELF_BROWS.browser_normalized_oclc ) %]&amp;oclc=[% NEXT_SHELF_BROWS.browser_normalized_oclc %][% END %]&amp;type=xw10" alt="" />
-                                            [% END %]
-                                        [% ELSE %]
-                                            <span class="no-image">No cover image available</span>
-                                        [% END %]
-                                    [% END %]
-                                [% END %]
-
-                                [% IF ( GoogleJackets ) %]
-                                    [% IF ( NEXT_SHELF_BROWS.browser_normalized_isbn ) %]
-                                        <div title="[% NEXT_SHELF_BROWS.biblionumber |url %]" class="[% NEXT_SHELF_BROWS.browser_normalized_isbn %]" id="gbs-thumbnail-preview[% loop.count %]"></div>
-                                    [% ELSE %]
-                                        <span class="no-image">No cover image available</span>
-                                    [% END %]
-                                [% END %]
-                                [% IF ( BakerTaylorEnabled ) %]
-                                    [% IF ( NEXT_SHELF_BROWS.browser_normalized_isbn ) %]
-                                        <img alt="See Baker &amp; Taylor" src="[% BakerTaylorImageURL |html %][% NEXT_SHELF_BROWS.browser_normalized_isbn %]" />
-                                    [% ELSE %]
-                                        <span class="no-image">No cover image available</span>
-                                    [% END %]
-                                [% END %]
-                            </a>
-                        </td>
-                    [% END %]
-
-                    <td rowspan="2">
-                        <div id="browser_next">
-                            <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% IF ( shelfbrowser_next_biblionumber ) %][% shelfbrowser_next_biblionumber %][% ELSE %][% biblionumber %][% END %]&amp;shelfbrowse_itemnumber=[% shelfbrowser_next_itemnumber %]#shelfbrowser">Next</a>
-                        </div>
-                    </td>
-                </tr>
-
-                <tr>
-                    [% FOREACH PREVIOUS_SHELF_BROWS IN PREVIOUS_SHELF_BROWSE %]
-                        <td class="top">
-                            [% PREVIOUS_SHELF_BROWS.itemcallnumber %]
-                            <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% PREVIOUS_SHELF_BROWS.biblionumber %]&amp;shelfbrowse_itemnumber=[% PREVIOUS_SHELF_BROWS.itemnumber %]#shelfbrowser">[% PREVIOUS_SHELF_BROWS.title |html %]</a>
-                        </td>
-                    [% END %]
-
-                    [% FOREACH NEXT_SHELF_BROWS IN NEXT_SHELF_BROWSE %]
-                        <td class="top" style="width:20px;">
-                            [% NEXT_SHELF_BROWS.itemcallnumber %]
-                            <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% NEXT_SHELF_BROWS.biblionumber %]&amp;shelfbrowse_itemnumber=[% NEXT_SHELF_BROWS.itemnumber %]#shelfbrowser">[% NEXT_SHELF_BROWS.title |html %]</a>
-                        </td>
-                    [% END %]
-                </tr>
-            </table>
-        </div>
-    [% END %]
-[% END # end of shelfbrowser block %]
 [% BLOCK jsinclude %]
 [% INCLUDE 'datatables.inc' %]
 [% IF ( SocialNetworks ) %]
             navigation.hide();
         });
     [% END %]
+[% IF ( OPACShelfBrowser ) %]
+
+    (function prepareShelfBrowser(){
+
+        $(".main").on("click",".close_shelf",function(e){
+            e.preventDefault();
+            $("#shelfbrowser").toggle();
+        });
+        $(".main").on("click", "#browser_previous a", function(e){
+            e.preventDefault();
+            $.ajax({
+                url: "/cgi-bin/koha/svc/shelfbrowser.pl",
+                type: "POST",
+                data: {
+                    "shelfbrowse_itemnumber": $("#browser_previous a").data( "prev-itemnumber" )
+                },
+                success: function(data){
+                    $("#shelfbrowser").replaceWith(data);
+                    [% IF ( GoogleJackets ) %]
+                      KOHA.Google.GetCoverFromIsbn([% covernewwindow %]);
+                    [% END %]
+                    [% IF OpenLibraryCovers %]
+                      KOHA.OpenLibrary.GetCoverFromIsbn();
+                    [% END %]
+                    [% IF OPACLocalCoverImages %]
+                      KOHA.LocalCover.GetCoverFromBibnumber(true);
+                    [% END %]
+                }
+            });
+        });
 
+        $(".main").on("click", "#browser_next a", function(e){
+            e.preventDefault();
+            $.ajax({
+                  url: "/cgi-bin/koha/svc/shelfbrowser.pl",
+                  type: "POST",
+                  data: {
+                    "shelfbrowse_itemnumber": $("#browser_next a").data( "next-itemnumber" )
+                },
+                success: function(data){
+                    $("#shelfbrowser").replaceWith(data);
+                    [% IF ( GoogleJackets ) %]
+                      KOHA.Google.GetCoverFromIsbn([% covernewwindow %]);
+                    [% END %]
+                    [% IF OpenLibraryCovers %]
+                      KOHA.OpenLibrary.GetCoverFromIsbn();
+                    [% END %]
+                    [% IF OPACLocalCoverImages %]
+                      KOHA.LocalCover.GetCoverFromBibnumber(true);
+                    [% END %]
+                }
+            });
+        });
+    }());
+[% END %]
 [% IF ( OpacStarRatings != 'disable' ) %]
     // -----------------------------------------------------
     // star-ratings code
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/svc/shelfbrowser.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/svc/shelfbrowser.tt
new file mode 100644 (file)
index 0000000..50e2b40
--- /dev/null
@@ -0,0 +1,2 @@
+[% PROCESS 'shelfbrowser.inc' %]
+[% INCLUDE shelfbrowser %]
index d3da6b8..7424d67 100644 (file)
@@ -2173,4 +2173,50 @@ td img {
     overflow: auto;
 }
 
+#shelfbrowser {
+    table {
+        margin : 0;
+    }
+    table,
+    td,
+    th {
+        border : 0;
+        font-size : 90%;
+        text-align : center;
+    }
+    td,
+    th {
+        padding: 3px 5px;
+        width : 20%;
+    }
+    a {
+        display : block;
+        font-size : 110%;
+        font-weight : bold;
+        text-decoration : none;
+    }
+    #browser_next,
+    #browser_previous {
+        background-image : url("../images/sprite.png");
+        background-repeat: no-repeat;
+        width : 16px;
+        a {
+            cursor: pointer;
+            display : block;
+            height: 0 !important;
+            margin: 0;
+            overflow: hidden;
+            padding: 50px 0 0;
+            text-decoration: none;
+            width: 16px;
+        }
+    }
+    #browser_previous {
+        background-position: -9px -1007px;
+    }
+    #browser_next {
+        background-position: -9px -1057px;
+    }
+}
+
 @import "responsive.less";