Bugzilla – Attachment 113901 Details for
Bug 25267
OPAC browse shelf feature is not responsive
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 25267: Make shelfbrowser responsive
Bug-25267-Make-shelfbrowser-responsive.patch (text/plain), 7.62 KB, created by
Lucas Gass (lukeg)
on 2020-11-20 18:27:57 UTC
(
hide
)
Description:
Bug 25267: Make shelfbrowser responsive
Filename:
MIME Type:
Creator:
Lucas Gass (lukeg)
Created:
2020-11-20 18:27:57 UTC
Size:
7.62 KB
patch
obsolete
>From 24fdfea4dd33fd4cf63b678ce086ca82a9c18922 Mon Sep 17 00:00:00 2001 >From: Lucas Gass <lucas@bywatersolutions.com> >Date: Fri, 20 Nov 2020 18:18:11 +0000 >Subject: [PATCH] Bug 25267: Make shelfbrowser responsive > >This patch is an attempt to fix some of the problems with shelf browser at smaller screen sizes. > >Test plan: >1. Turn on OPACShelfBrowser. >2. If youre using test data you will have to give some items call numbers. I did: update items set itemcallnumber = 'acallnumber'; >3. It will also be best if you add some cover images. >4. Go to an item detail page and Browse Shelf. >5. The feature looks good until the viewport is about 1700px or less. >6. Apply patch >7. Regenerate OPAC CSS (https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_interface) >8. Try the shelf browse at all screen sizes and make sure everything still works. >9. Test the controls (previous, next, and close), make sure they still work >--- > koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss | 60 +++------------------- > .../bootstrap/en/includes/shelfbrowser.inc | 56 +++++++++----------- > 2 files changed, 31 insertions(+), 85 deletions(-) > >diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >index 24f095c819..86de83bc51 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss >@@ -2071,63 +2071,19 @@ nav { > } > > #shelfbrowser { >- table { >- margin: 0; >+ #browser_controls { >+ display: flex; >+ justify-content: space-between; >+ padding-top: 1em; >+ padding-bottom: 1em; > } > >- table, >- td, >- th { >- border: 0; >- font-size: 90%; >+ .col-md-3 { > text-align: center; > } > >- td, >- th { >- padding: 3px 5px; >- width: 20%; >- >- &.nav-cell { >- padding: 0; >- vertical-align: middle; >- width: 1em; >- } >- } >- >- a { >- display: block; >- font-size: 110%; >- font-weight: bold; >- text-decoration: none; >- >- &.shelfbrowser_cover { >- min-height: 80px; >- min-width: 80px; >- display: inline-block; >- } >- } >- >- #browser_previous { >- a { >- transform: rotate(-90deg); >- white-space: nowrap; >- >- i { >- padding: 0 .5em; >- } >- } >- } >- >- #browser_next { >- a { >- transform: rotate(90deg); >- white-space: nowrap; >- >- i { >- padding: 0 .5em; >- } >- } >+ .no-image { >+ display: inline-block; > } > } > >diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc >index 396470d977..27f099185e 100644 >--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc >+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/shelfbrowser.inc >@@ -9,19 +9,21 @@ > [%- IF ( starting_ccode ) %]Collection: [%- starting_ccode | html -%][% END -%] > <a style="font-size: 75%;" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% biblionumber | html %]" class="close_shelf" >Close shelf browser <span class="sr-only">(Hides shelf browser)</span></a> > </h5> >- >- <table class="table"> >- <tr> >- <td class="nav-cell" rowspan="2"> >- [% IF shelfbrowser_prev_item %] >- <div id="browser_previous"> >- <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% shelfbrowser_prev_item.biblionumber | uri %]&shelfbrowse_itemnumber=[% shelfbrowser_prev_item.itemnumber | uri %]#shelfbrowser" data-prev-itemnumber="[% shelfbrowser_prev_item.itemnumber | html %]"><i class="fa fa-caret-up" aria-hidden="true"></i> Previous</a> >- </div> >- [% END %] >- </td> >- >+ <div id="browser_controls"> >+ <div id="browser_previous"> >+ [% IF shelfbrowser_prev_item %] >+ <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% shelfbrowser_prev_item.biblionumber | uri %]&shelfbrowse_itemnumber=[% shelfbrowser_prev_item.itemnumber | uri %]#shelfbrowser" data-prev-itemnumber="[% shelfbrowser_prev_item.itemnumber | html %]"><i class="fa fa-caret-left" aria-hidden="true"></i> Previous</a> >+ [% END %] >+ </div> >+ <div id="browser_next"> >+ [% IF shelfbrowser_next_item %] >+ <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% shelfbrowser_next_item.biblionumber | uri %]&shelfbrowse_itemnumber=[% shelfbrowser_next_item.itemnumber | uri %]#shelfbrowser" data-next-itemnumber="[% shelfbrowser_next_item.itemnumber | html %]">Next <i class="fa fa-caret-right" aria-hidden="true"></i></a> >+ [% END %] >+ </div> >+ </div> >+ <div class="row"> > [% FOREACH item IN shelfbrowser_items %] >- <td> >+ <div class="col-md-3"> > [% IF ( item.title ) %] > [% img_title = item.title %] > [% ELSE %] >@@ -74,32 +76,20 @@ > <span class="custom_cover_image"> > <img alt="Cover image" src="[% item.biblio_object.custom_cover_image_url | url %]" /> > </span> >- [% END %] >+ [% END %] > > </a> >+ <div class="top"> >+ <div class="itemcallnumber">[% item.itemcallnumber | html %]</div> >+ <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% item.biblionumber | uri %]&shelfbrowse_itemnumber=[% item.itemnumber | uri %]#shelfbrowser"> >+ [% INCLUDE 'biblio-title.inc' biblio=item %] >+ </a> >+ </div> > [% END %] >- </td> >+ </div> > [% END %] >- <td class="nav-cell" rowspan="2"> >- [% IF shelfbrowser_next_item %] >- <div id="browser_next"> >- <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% shelfbrowser_next_item.biblionumber | uri %]&shelfbrowse_itemnumber=[% shelfbrowser_next_item.itemnumber | uri %]#shelfbrowser" data-next-itemnumber="[% shelfbrowser_next_item.itemnumber | html %]">Next <i class="fa fa-caret-up" aria-hidden="true"></i></a> >- </div> >- [% END %] >- </td> >- </tr> >+ </div> > >- <tr> >- [% FOREACH item IN shelfbrowser_items %] >- <td class="top"> >- [% item.itemcallnumber | html %] >- <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% item.biblionumber | uri %]&shelfbrowse_itemnumber=[% item.itemnumber | uri %]#shelfbrowser"> >- [% INCLUDE 'biblio-title.inc' biblio=item %] >- </a> >- </td> >- [% END %] >- </tr> >- </table> > </div> > [% END # /IF OpenOPACShelfBrowser %] > [% END # end of shelfbrowser block %] >-- >2.11.0
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 25267
:
113901
|
114242
|
135632
|
135634
|
143876
|
143877
|
143927
|
159334
|
159368
|
159369
|
159370
|
160937
|
160938
|
160939
|
161169
|
161170
|
161171
|
161174
|
161175
|
161176
|
161233
|
161234