Bug 21304 - Update two-column templates with Bootstrap grid: Catalog
Summary: Update two-column templates with Bootstrap grid: Catalog
Status: RESOLVED FIXED
Alias: None
Product: Koha
Classification: Unclassified
Component: Templates (show other bugs)
Version: master
Hardware: All All
: P5 - low enhancement (vote)
Assignee: Owen Leonard
QA Contact: Testopia
URL:
Keywords:
Depends on:
Blocks: 20654 21948 22032
  Show dependency treegraph
 
Reported: 2018-08-31 16:19 UTC by Owen Leonard
Modified: 2019-04-01 10:24 UTC (History)
6 users (show)

See Also:
Change sponsored?: ---
Patch complexity: Small patch
Who signed the patch off:
Text to go in the release notes:
Version(s) released in:


Attachments
Bug 21304: Update two-column templates with Bootstrap grid: Catalog (17.54 KB, patch)
2018-08-31 17:07 UTC, Owen Leonard
Details | Diff | Splinter Review
Next record glitch (72.74 KB, image/jpeg)
2018-09-03 13:04 UTC, Cab Vinton
Details
Bug 21304: (follow-up) Fix style of search results browser (4.59 KB, patch)
2018-09-05 14:36 UTC, Owen Leonard
Details | Diff | Splinter Review
Next button of the controls in an awkward position. (39.16 KB, image/jpeg)
2018-09-06 14:50 UTC, Pierre-Marc Thibault
Details
Previous and Next buttons a little hidden at a certain size. (36.07 KB, image/png)
2018-09-06 18:08 UTC, Pierre-Marc Thibault
Details
Bug 21304: (follow-up) Fix style of search results browser (5.62 KB, patch)
2018-09-20 18:35 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 21304: Update two-column templates with Bootstrap grid: Catalog (17.54 KB, patch)
2018-10-11 12:49 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 21304: (follow-up) Fix style of search results browser (5.61 KB, patch)
2018-10-11 12:49 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 21304: Update two-column templates with Bootstrap grid: Catalog (20.30 KB, patch)
2018-10-25 18:27 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 21304: (follow-up) Fix style of search results browser (5.61 KB, patch)
2018-10-25 18:27 UTC, Owen Leonard
Details | Diff | Splinter Review
Search results (34.62 KB, image/png)
2018-11-09 16:20 UTC, Josef Moravec
Details
Bug 21304: Update two-column templates with Bootstrap grid: Catalog (20.30 KB, patch)
2018-11-09 17:06 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 21304: (follow-up) Fix style of search results browser (6.23 KB, patch)
2018-11-09 17:06 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 21304: Update two-column templates with Bootstrap grid: Catalog (19.40 KB, patch)
2019-02-04 14:18 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 21304: (follow-up) Fix style of search results browser (6.23 KB, patch)
2019-02-04 14:18 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 21304: (follow-up) Fix style of search results browser (6.23 KB, patch)
2019-03-04 12:48 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 21304: Update two-column templates with Bootstrap grid: Catalog (18.50 KB, patch)
2019-03-04 16:43 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 21304: (follow-up) Fix style of search results browser (6.23 KB, patch)
2019-03-04 16:43 UTC, Owen Leonard
Details | Diff | Splinter Review
Bug 21304: Update two-column templates with Bootstrap grid: Catalog (18.59 KB, patch)
2019-03-04 18:34 UTC, Liz Rea
Details | Diff | Splinter Review
Bug 21304: (follow-up) Fix style of search results browser (6.30 KB, patch)
2019-03-04 18:34 UTC, Liz Rea
Details | Diff | Splinter Review
Bug 21304: Update two-column templates with Bootstrap grid: Catalog (18.71 KB, patch)
2019-03-06 07:03 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 21304: (follow-up) Fix style of search results browser (6.41 KB, patch)
2019-03-06 07:03 UTC, Katrin Fischer
Details | Diff | Splinter Review
Bug 21304: (follow-up) Correct hc-sticky configuration (1.18 KB, patch)
2019-03-19 15:52 UTC, Owen Leonard
Details | Diff | Splinter Review

Note You need to log in before you can comment on or make changes to this bug.
Description Owen Leonard 2018-08-31 16:19:02 UTC
This patch will convert even more acquisitions templates to use the Bootstrap grid:

 - ISBDdetail.tt
 - MARCdetail.tt
 - detail.tt
 - imageviewer.tt
 - issuehistory.tt
 - labeledMARCdetail.tt
 - moredetail.tt
 - results.tt
Comment 1 Owen Leonard 2018-08-31 17:07:01 UTC Comment hidden (obsolete)
Comment 2 Cab Vinton 2018-09-03 13:04:23 UTC
Created attachment 78375 [details]
Next record glitch

All looks good except for the Return to Results display. For all examples Next Record is offset on the next line rather than on the same line as Previous Record.
Comment 3 Owen Leonard 2018-09-05 14:36:09 UTC Comment hidden (obsolete)
Comment 4 Pierre-Marc Thibault 2018-09-06 14:50:00 UTC
Created attachment 78491 [details]
Next button of the controls in an awkward position.
Comment 5 Pierre-Marc Thibault 2018-09-06 14:56:56 UTC
Controls have been tested with the first and last result. The next button is still in an awkward position when the size is small. 

When the Next button is inactive and its area become bigger, not all the area is colored in grey because the grey area width is fixed.
Comment 6 Pierre-Marc Thibault 2018-09-06 16:06:27 UTC
Sorry. I assumed CSS files has been changed while SCSS has been and oversee your mention to regenerate CSS. Tests will be redo to validate the patch.
Comment 7 Pierre-Marc Thibault 2018-09-06 18:08:30 UTC
Created attachment 78494 [details]
Previous and Next buttons a little hidden at a certain size.

There is no longer a problem with the Next button at an awkward position. However, when the browser reach a certain size, the buttons text Previous and Next can be partially covered.
Comment 8 Owen Leonard 2018-09-20 18:35:03 UTC Comment hidden (obsolete)
Comment 9 Owen Leonard 2018-10-11 12:49:42 UTC Comment hidden (obsolete)
Comment 10 Owen Leonard 2018-10-11 12:49:46 UTC Comment hidden (obsolete)
Comment 11 Owen Leonard 2018-10-25 18:27:27 UTC Comment hidden (obsolete)
Comment 12 Owen Leonard 2018-10-25 18:27:30 UTC Comment hidden (obsolete)
Comment 13 Josef Moravec 2018-11-09 16:19:24 UTC
Comment on attachment 81192 [details] [review]
Bug 21304: Update two-column templates with Bootstrap grid: Catalog

Review of attachment 81192 [details] [review]:
-----------------------------------------------------------------

::: koha-tmpl/intranet-tmpl/prog/en/modules/catalogue/results.tt
@@ +620,5 @@
> +        </div> <!-- /.col-sm-10.col-sm-push-2 -->
> +
> +        <div class="col-sm-2 col-sm-pull-10">
> +            <aside>
> +                [% INCLUDE 'admin-menu.inc' %]

This should be facets.inc
Comment 14 Josef Moravec 2018-11-09 16:20:37 UTC
Created attachment 82179 [details]
Search results

There is a glitch in search results, see screenshot
Comment 15 Owen Leonard 2018-11-09 17:06:46 UTC Comment hidden (obsolete)
Comment 16 Owen Leonard 2018-11-09 17:06:50 UTC Comment hidden (obsolete)
Comment 17 Owen Leonard 2018-11-09 17:17:17 UTC
(In reply to Josef Moravec from comment #14)

> There is a glitch in search results, see screenshot

I've fixed the facet.inc error in the newly-added patches, but I haven't addressed this issue.

I think this problem only happens after you've changed the width of the browser and buttons in the toolbar have wrapped to a new line. I think this is a relatively uncommon sequence of events, and a page refresh fixes it.

This problem needs to be fixed globally for every page which has a floating toolbar (see also Bug 21751).

I'm leaning towards suggesting we accept this glitch and work on a follow-up, but I understand if y'all disagree.
Comment 18 Owen Leonard 2019-02-04 14:18:47 UTC Comment hidden (obsolete)
Comment 19 Owen Leonard 2019-02-04 14:18:50 UTC Comment hidden (obsolete)
Comment 20 Owen Leonard 2019-03-04 12:48:33 UTC
Created attachment 85980 [details] [review]
Bug 21304: (follow-up) Fix style of search results browser

This follow-up revises the style of the search result browser in the
staff client, making it behave better at smaller browser widths.

The patch also makes a couple of ESLint-prompted changes to browser.js

To test, apply the patch and regenerate CSS.

 - Perform a catalog search in the staff client.
 - Click on one of the search results.
 - On the bibliographic detail page there should be results browsing
   controls in the left-hand sidebar.
   - Resize the browser window and confirm that the controls work well
     at various sizes.
   - Test with both the first and last search result.
Comment 21 Owen Leonard 2019-03-04 16:43:53 UTC
Created attachment 86015 [details] [review]
Bug 21304: Update two-column templates with Bootstrap grid: Catalog

This patch modifies several catalog templates to use the Bootstrap grid
instead of YUI.

This patch also removes obsolete "text/javascript" attributes from
<script> tags and "text/css" attributes from <style> tags in the
modified templates.

To test, apply the patch and view the following pages, confirming that
they look correct at various browser widths:

 - Catalog -> Search
   - Search results
     - Bibliographic details
     - MARC details (viewMARC preference enabled)
     - Labeled MARC details (viewLabeledMARC preference enabled)
     - ISBD (viewISBD preference enabled)
     - Items
     - Checkout history
     - Rota (stock rotation)
Comment 22 Owen Leonard 2019-03-04 16:43:56 UTC
Created attachment 86016 [details] [review]
Bug 21304: (follow-up) Fix style of search results browser

This follow-up revises the style of the search result browser in the
staff client, making it behave better at smaller browser widths.

The patch also makes a couple of ESLint-prompted changes to browser.js

To test, apply the patch and regenerate CSS.

 - Perform a catalog search in the staff client.
 - Click on one of the search results.
 - On the bibliographic detail page there should be results browsing
   controls in the left-hand sidebar.
   - Resize the browser window and confirm that the controls work well
     at various sizes.
   - Test with both the first and last search result.
Comment 23 Liz Rea 2019-03-04 18:34:01 UTC
Created attachment 86022 [details] [review]
Bug 21304: Update two-column templates with Bootstrap grid: Catalog

This patch modifies several catalog templates to use the Bootstrap grid
instead of YUI.

This patch also removes obsolete "text/javascript" attributes from
<script> tags and "text/css" attributes from <style> tags in the
modified templates.

To test, apply the patch and view the following pages, confirming that
they look correct at various browser widths:

 - Catalog -> Search
   - Search results
     - Bibliographic details
     - MARC details (viewMARC preference enabled)
     - Labeled MARC details (viewLabeledMARC preference enabled)
     - ISBD (viewISBD preference enabled)
     - Items
     - Checkout history
     - Rota (stock rotation)

Signed-off-by: Liz Rea <wizzyrea@gmail.com>
Comment 24 Liz Rea 2019-03-04 18:34:04 UTC
Created attachment 86023 [details] [review]
Bug 21304: (follow-up) Fix style of search results browser

This follow-up revises the style of the search result browser in the
staff client, making it behave better at smaller browser widths.

The patch also makes a couple of ESLint-prompted changes to browser.js

To test, apply the patch and regenerate CSS.

 - Perform a catalog search in the staff client.
 - Click on one of the search results.
 - On the bibliographic detail page there should be results browsing
   controls in the left-hand sidebar.
   - Resize the browser window and confirm that the controls work well
     at various sizes.
   - Test with both the first and last search result.

Signed-off-by: Liz Rea <wizzyrea@gmail.com>
Comment 25 Katrin Fischer 2019-03-06 07:03:19 UTC
Created attachment 86126 [details] [review]
Bug 21304: Update two-column templates with Bootstrap grid: Catalog

This patch modifies several catalog templates to use the Bootstrap grid
instead of YUI.

This patch also removes obsolete "text/javascript" attributes from
<script> tags and "text/css" attributes from <style> tags in the
modified templates.

To test, apply the patch and view the following pages, confirming that
they look correct at various browser widths:

 - Catalog -> Search
   - Search results
     - Bibliographic details
     - MARC details (viewMARC preference enabled)
     - Labeled MARC details (viewLabeledMARC preference enabled)
     - ISBD (viewISBD preference enabled)
     - Items
     - Checkout history
     - Rota (stock rotation)

Signed-off-by: Liz Rea <wizzyrea@gmail.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 26 Katrin Fischer 2019-03-06 07:03:22 UTC
Created attachment 86127 [details] [review]
Bug 21304: (follow-up) Fix style of search results browser

This follow-up revises the style of the search result browser in the
staff client, making it behave better at smaller browser widths.

The patch also makes a couple of ESLint-prompted changes to browser.js

To test, apply the patch and regenerate CSS.

 - Perform a catalog search in the staff client.
 - Click on one of the search results.
 - On the bibliographic detail page there should be results browsing
   controls in the left-hand sidebar.
   - Resize the browser window and confirm that the controls work well
     at various sizes.
   - Test with both the first and last search result.

Signed-off-by: Liz Rea <wizzyrea@gmail.com>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 27 Nick Clemens 2019-03-16 00:20:02 UTC
After applying I get a JS error on search results:
TypeError: c is null[Learn More] hc-sticky_18.1200027.js:11:4777

And I have no button to select records in the search results
Comment 28 Owen Leonard 2019-03-19 15:52:06 UTC
Created attachment 86753 [details] [review]
Bug 21304: (follow-up) Correct hc-sticky configuration

This patch corrects the element passed to the hc-sticky plugin to define
which element the floating toolbar sticks to.

To test, apply the patch and perform a search in the staff client which
will return multiple results. Confirm that scrolling down the page
triggers the floating toolbar.
Comment 29 Nick Clemens 2019-03-22 20:35:48 UTC
Awesome work all!

Pushed to master for 19.05
Comment 30 Martin Renvoize 2019-04-01 10:24:51 UTC
Enhancement, will not be backported to 18.11.x series.