Bug 20044

Summary: Switch single-column templates to Bootstrap grid: Cataloging
Product: Koha Reporter: Owen Leonard <oleonard>
Component: TemplatesAssignee: Owen Leonard <oleonard>
Status: CLOSED FIXED QA Contact: Josef Moravec <josef.moravec>
Severity: enhancement    
Priority: P5 - low CC: jonathan.druart, josef.moravec, katrin.fischer, maksim.sen, martin.renvoize, nick, testopia
Version: MainKeywords: Academy
Hardware: All   
OS: All   
Change sponsored?: --- Patch complexity: Small patch
Documentation contact: Documentation submission:
Text to go in the release notes:
Version(s) released in:
Bug Depends on:    
Bug Blocks: 19980, 23147    
Attachments: Bug 20044: Switch single-column templates to Bootstrap grid: Cataloging
Bug 20044: Switch single-column templates to Bootstrap grid: Cataloging
Add record form - menu a bit out of place?
Bug 20044 (follow-up) Improve responsive behavior of MARC editor
Bug 20044 (follow-up) Improve responsive behavior of MARC editor
Screenshot of cataloguing editor (with patch)
Screenshot of cataloguing editor (before patch)
Bug 20044: Switch single-column templates to Bootstrap grid: Cataloging
Bug 20044 (follow-up) Improve responsive behavior of MARC editor
Bug 20044: Fix input_marceditor selectors
Bug 20044: Fix input_marceditor selectors
Bug 20044: (follow-up) Add min-width to .input_marceditor
Bug 20044: Switch single-column templates to Bootstrap grid: Cataloging
Bug 20044 (follow-up) Improve responsive behavior of MARC editor
Bug 20044: Fix input_marceditor selectors
Bug 20044: (follow-up) Add min-width to .input_marceditor
Bug 20044: Switch single-column templates to Bootstrap grid: Cataloging
Bug 20044 (follow-up) Improve responsive behavior of MARC editor
Bug 20044: Fix input_marceditor selectors
Bug 20044: (follow-up) Add min-width to .input_marceditor
Bug 20044: Switch single-column templates to Bootstrap grid: Cataloging
Bug 20044 (follow-up) Improve responsive behavior of MARC editor
Bug 20044: Fix input_marceditor selectors
Bug 20044: (follow-up) Add min-width to .input_marceditor

Description Owen Leonard 2018-01-19 15:03:46 UTC
There are several single-column cataloging templates which can be updated to use the Bootstrap grid.

- cataloguing\addbiblio.tt
- cataloguing\addbooks.tt
- cataloguing\merge.tt
- cataloguing\moveitem.tt
Comment 1 Owen Leonard 2018-01-19 15:18:03 UTC Comment hidden (obsolete)
Comment 2 Claire Gravely 2018-02-16 09:28:54 UTC Comment hidden (obsolete)
Comment 3 Maksim Sen 2018-02-16 20:06:17 UTC
Hey Owen,
I'm having trouble seeing the difference of the before/after patch for the templates. 

Could you give an example of what kind of differences I should look for?

Thank you,
Maksim Sen
Comment 4 Katrin Fischer 2018-02-18 14:06:17 UTC
Hi Maksim, for these changes there is mostly no visible change at the moment - so not seeing a difference is ok :) I think things might get more interesting when Owen starts to change the multi-column templates.
Comment 5 Katrin Fischer 2018-02-18 14:25:32 UTC
Created attachment 71909 [details]
Add record form - menu a bit out of place?

Hi Owen,

I noticed a visible difference on editing a record. It's a record from the sample database shown in the screenshot. The form visibly moved to the left while the menu on top got quite long. Can you check?
Comment 6 Owen Leonard 2018-03-13 09:09:07 UTC Comment hidden (obsolete)
Comment 7 Claire Gravely 2018-03-13 09:16:06 UTC Comment hidden (obsolete)
Comment 8 Katrin Fischer 2018-03-25 16:16:35 UTC
Hi Owen, the toolbar on 'edit title' behaves better now, but a long title won't wrap (as it did before). Could you please take another look?
Comment 9 Owen Leonard 2018-03-27 17:15:51 UTC
(In reply to Katrin Fischer from comment #8)
> Hi Owen, the toolbar on 'edit title' behaves better now, but a long title
> won't wrap (as it did before). Could you please take another look?

I can't reproduce this problem. Could you try again? Share a screenshot?
Comment 10 Katrin Fischer 2018-03-30 14:22:00 UTC
Created attachment 73489 [details]
Screenshot of cataloguing editor (with patch)
Comment 11 Katrin Fischer 2018-03-30 14:23:15 UTC
Created attachment 73490 [details]
Screenshot of cataloguing editor (before patch)

I like the slimmer display better as it seems easier to handle. What do you think?
Comment 12 Owen Leonard 2018-07-24 13:32:57 UTC
Created attachment 77216 [details] [review]
Bug 20044: Switch single-column templates to Bootstrap grid: Cataloging

This patch updates several cataloging module templates to use the
Bootstrap grid.

- cataloguing/addbooks.tt - Cataloging - The main page and the
  cataloging search results page should look correct.

- cataloguing/addbiblio.tt - Cataloging -> New record - The record edit
  page should look correct.

- cataloguing/merge.tt - Cataloging -> Search -> Select two records to
  merge. The merge reference selection page should look correct, as well
  as the source/destination selection page.

- cataloguing/moveitem.tt - Catalog -> Search -> View record -> Edit ->
  Attach item. The barcode submit form and confirmation screens should
  look correct.

Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de>
Comment 13 Owen Leonard 2018-07-24 13:33:00 UTC
Created attachment 77217 [details] [review]
Bug 20044 (follow-up) Improve responsive behavior of MARC editor

This patch makes some changes to addbiblio.css in order to improve
responsive changes to the MARC editor.

Note: This patch does not make changes affecting narrow browser widths.
The changes are focused on adapting to larger layouts affected by the
switch to the Bootstrap grid.

To test, apply the patch and clear your cache if necessary. Open an
existing record for editing in the standard MARC editor. View the page
at various browser widths and confirm that it looks correct.

Note: Because of the way the floating toolbar is displayed it does not
dynamically resize when you resize the browser. Reload the page after
resizing the browser window to confirm that the toolbar adapts at
different widths.

Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de>
Comment 14 Owen Leonard 2018-07-25 13:57:55 UTC
(In reply to Katrin Fischer from comment #11)
> I like the slimmer display better as it seems easier to handle. What do you
> think?

No votes against the new design on the mailing list!
Comment 15 Katrin Fischer 2018-07-25 13:59:48 UTC
True that :)
Comment 16 Jonathan Druart 2018-08-01 14:31:24 UTC
https://lists.katipo.co.nz/pipermail/koha/2018-July/051113.html
[Koha] Requesting opinions on proposed change to cataloging interface
Comment 17 Jonathan Druart 2018-08-01 14:35:37 UTC
There is something wrong with the select2: https://screenshots.firefox.com/LinttprCI59Mq0Jn/pro.kohadev.org
Comment 18 Owen Leonard 2018-08-01 18:01:09 UTC
(In reply to Jonathan Druart from comment #17)
> There is something wrong with the select2:
> https://screenshots.firefox.com/LinttprCI59Mq0Jn/pro.kohadev.org

I do not see this problem with Firefox on Windows 10.
Comment 19 Jonathan Druart 2018-08-01 18:54:42 UTC
I do on debian, both Firefox 61.0.1 (64-bit) and Chromium Version 67.0.3396.87 

It comes from select2.inc:
  8     width: function() {                                                                    
  9       var width = this.element.outerWidth();
After this line width is always = 0
Comment 20 Jonathan Druart 2018-08-01 19:18:19 UTC
Created attachment 77396 [details] [review]
Bug 20044: Fix input_marceditor selectors
Comment 21 Owen Leonard 2018-08-02 16:15:20 UTC
Created attachment 77451 [details] [review]
Bug 20044: Fix input_marceditor selectors

Signed-off-by: Owen Leonard <oleonard@myacpl.org>

I can't reproduce the problem this patch is intended to fix, but the
changes are sensible either way.
Comment 23 Owen Leonard 2018-08-03 14:42:52 UTC
Created attachment 77473 [details] [review]
Bug 20044: (follow-up) Add min-width to .input_marceditor

This patch adds a min-width property to the first .input_marceditor rule
in order to prevent <selects> styled by Select2 from collapsing at
narrower browser widths.

To reproduce the bug, apply all patches on Bug 20044 except this one.
Open the MARC editor and narrow the browser width to below 768 pixels.
Reload the page and view a tab which contains a <select> styled by
Select2 (942c is often an example). The <select> will have narrowed to
be almost invisible.

Apply the patch and reproduce the steps above. The <select>s should be
fully visible.
Comment 24 Owen Leonard 2018-08-03 14:44:13 UTC
(In reply to Jonathan Druart from comment #22)
> Zoom in a bit:
> https://screenshots.firefox.com/KYNIlu5FRCjpqM39/pro.kohadev.org

I agree that this isn't ideal, but I don't think it's an issue which should block these patches. There are still a lot of responsive improvements which should be made to this interface. The goal of this bug is to lay the groundwork for those improvements.
Comment 25 Katrin Fischer 2018-08-08 10:10:36 UTC
Tested all pages, but not sure about the changes on "edit record". 

The input fields are now much longer than before, which seems responsible for some of the awkwardness when making the window smaller. The text input fields are also much longer than the select fields. Not a blocker for me, but something that might be worth taking another shot at.
Comment 26 Katrin Fischer 2018-08-08 10:13:02 UTC
Created attachment 77555 [details] [review]
Bug 20044: Switch single-column templates to Bootstrap grid: Cataloging

This patch updates several cataloging module templates to use the
Bootstrap grid.

- cataloguing/addbooks.tt - Cataloging - The main page and the
  cataloging search results page should look correct.

- cataloguing/addbiblio.tt - Cataloging -> New record - The record edit
  page should look correct.

- cataloguing/merge.tt - Cataloging -> Search -> Select two records to
  merge. The merge reference selection page should look correct, as well
  as the source/destination selection page.

- cataloguing/moveitem.tt - Catalog -> Search -> View record -> Edit ->
  Attach item. The barcode submit form and confirmation screens should
  look correct.

Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 27 Katrin Fischer 2018-08-08 10:13:11 UTC
Created attachment 77556 [details] [review]
Bug 20044 (follow-up) Improve responsive behavior of MARC editor

This patch makes some changes to addbiblio.css in order to improve
responsive changes to the MARC editor.

Note: This patch does not make changes affecting narrow browser widths.
The changes are focused on adapting to larger layouts affected by the
switch to the Bootstrap grid.

To test, apply the patch and clear your cache if necessary. Open an
existing record for editing in the standard MARC editor. View the page
at various browser widths and confirm that it looks correct.

Note: Because of the way the floating toolbar is displayed it does not
dynamically resize when you resize the browser. Reload the page after
resizing the browser window to confirm that the toolbar adapts at
different widths.

Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 28 Katrin Fischer 2018-08-08 10:13:18 UTC
Created attachment 77557 [details] [review]
Bug 20044: Fix input_marceditor selectors

Signed-off-by: Owen Leonard <oleonard@myacpl.org>

I can't reproduce the problem this patch is intended to fix, but the
changes are sensible either way.

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 29 Katrin Fischer 2018-08-08 10:13:23 UTC
Created attachment 77558 [details] [review]
Bug 20044: (follow-up) Add min-width to .input_marceditor

This patch adds a min-width property to the first .input_marceditor rule
in order to prevent <selects> styled by Select2 from collapsing at
narrower browser widths.

To reproduce the bug, apply all patches on Bug 20044 except this one.
Open the MARC editor and narrow the browser width to below 768 pixels.
Reload the page and view a tab which contains a <select> styled by
Select2 (942c is often an example). The <select> will have narrowed to
be almost invisible.

Apply the patch and reproduce the steps above. The <select>s should be
fully visible.

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 30 Owen Leonard 2018-08-31 16:23:00 UTC
Created attachment 78336 [details] [review]
Bug 20044: Switch single-column templates to Bootstrap grid: Cataloging

This patch updates several cataloging module templates to use the
Bootstrap grid.

- cataloguing/addbooks.tt - Cataloging - The main page and the
  cataloging search results page should look correct.

- cataloguing/addbiblio.tt - Cataloging -> New record - The record edit
  page should look correct.

- cataloguing/merge.tt - Cataloging -> Search -> Select two records to
  merge. The merge reference selection page should look correct, as well
  as the source/destination selection page.

- cataloguing/moveitem.tt - Catalog -> Search -> View record -> Edit ->
  Attach item. The barcode submit form and confirmation screens should
  look correct.

Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 31 Owen Leonard 2018-08-31 16:23:04 UTC
Created attachment 78337 [details] [review]
Bug 20044 (follow-up) Improve responsive behavior of MARC editor

This patch makes some changes to addbiblio.css in order to improve
responsive changes to the MARC editor.

Note: This patch does not make changes affecting narrow browser widths.
The changes are focused on adapting to larger layouts affected by the
switch to the Bootstrap grid.

To test, apply the patch and clear your cache if necessary. Open an
existing record for editing in the standard MARC editor. View the page
at various browser widths and confirm that it looks correct.

Note: Because of the way the floating toolbar is displayed it does not
dynamically resize when you resize the browser. Reload the page after
resizing the browser window to confirm that the toolbar adapts at
different widths.

Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 32 Owen Leonard 2018-08-31 16:23:07 UTC
Created attachment 78338 [details] [review]
Bug 20044: Fix input_marceditor selectors

Signed-off-by: Owen Leonard <oleonard@myacpl.org>

I can't reproduce the problem this patch is intended to fix, but the
changes are sensible either way.

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 33 Owen Leonard 2018-08-31 16:23:11 UTC
Created attachment 78339 [details] [review]
Bug 20044: (follow-up) Add min-width to .input_marceditor

This patch adds a min-width property to the first .input_marceditor rule
in order to prevent <selects> styled by Select2 from collapsing at
narrower browser widths.

To reproduce the bug, apply all patches on Bug 20044 except this one.
Open the MARC editor and narrow the browser width to below 768 pixels.
Reload the page and view a tab which contains a <select> styled by
Select2 (942c is often an example). The <select> will have narrowed to
be almost invisible.

Apply the patch and reproduce the steps above. The <select>s should be
fully visible.

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Comment 34 Josef Moravec 2018-09-25 08:24:51 UTC
Great job Owen, just few issues found:

1) Add biblio page:
- There is a width where the link to value builder could end one line below the corresponding field input (width of body tag is about 1170 px, and about 960px):
https://screenshots.firefox.com/JFdSbq58ROJYXeWo/localhost

- On narrow screen (under cca 630 px of body width) the input are bigger then width of form/screen:
https://screenshots.firefox.com/3iyYgLPkweX0Y1Vr/localhost

2) In koha-tmpl/intranet-tmpl/prog/en/modules/cataloguing/merge.tt, line 160, there is <div class="yui-g">


Tested on Ubuntu with Firefox 62 and Chromium 69
Comment 35 Owen Leonard 2018-09-27 15:01:49 UTC
I agree that the responsive behavior of the page isn't perfect, but this bug is intended to be an incremental change.
Comment 36 Josef Moravec 2018-10-01 19:50:00 UTC
(In reply to Owen Leonard from comment #35)
> I agree that the responsive behavior of the page isn't perfect, but this bug
> is intended to be an incremental change.

I could live with this little issues, but what about my second point? Should be old-named yui-* classes be all removed?
Comment 37 Katrin Fischer 2018-10-11 20:17:05 UTC
I signed these - can someone else plz QA?
Comment 38 Chris Cormack 2018-10-11 21:50:51 UTC
Created attachment 80433 [details] [review]
Bug 20044: Switch single-column templates to Bootstrap grid: Cataloging

This patch updates several cataloging module templates to use the
Bootstrap grid.

- cataloguing/addbooks.tt - Cataloging - The main page and the
  cataloging search results page should look correct.

- cataloguing/addbiblio.tt - Cataloging -> New record - The record edit
  page should look correct.

- cataloguing/merge.tt - Cataloging -> Search -> Select two records to
  merge. The merge reference selection page should look correct, as well
  as the source/destination selection page.

- cataloguing/moveitem.tt - Catalog -> Search -> View record -> Edit ->
  Attach item. The barcode submit form and confirmation screens should
  look correct.

Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Chris Cormack <chrisc@catalyst.net.nz>
Comment 39 Chris Cormack 2018-10-11 21:51:02 UTC
Created attachment 80434 [details] [review]
Bug 20044 (follow-up) Improve responsive behavior of MARC editor

This patch makes some changes to addbiblio.css in order to improve
responsive changes to the MARC editor.

Note: This patch does not make changes affecting narrow browser widths.
The changes are focused on adapting to larger layouts affected by the
switch to the Bootstrap grid.

To test, apply the patch and clear your cache if necessary. Open an
existing record for editing in the standard MARC editor. View the page
at various browser widths and confirm that it looks correct.

Note: Because of the way the floating toolbar is displayed it does not
dynamically resize when you resize the browser. Reload the page after
resizing the browser window to confirm that the toolbar adapts at
different widths.

Signed-off-by: Claire Gravely <claire.gravely@bsz-bw.de>

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Chris Cormack <chrisc@catalyst.net.nz>
Comment 40 Chris Cormack 2018-10-11 21:51:10 UTC
Created attachment 80435 [details] [review]
Bug 20044: Fix input_marceditor selectors

Signed-off-by: Owen Leonard <oleonard@myacpl.org>

I can't reproduce the problem this patch is intended to fix, but the
changes are sensible either way.

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Chris Cormack <chrisc@catalyst.net.nz>
Comment 41 Chris Cormack 2018-10-11 21:51:20 UTC
Created attachment 80436 [details] [review]
Bug 20044: (follow-up) Add min-width to .input_marceditor

This patch adds a min-width property to the first .input_marceditor rule
in order to prevent <selects> styled by Select2 from collapsing at
narrower browser widths.

To reproduce the bug, apply all patches on Bug 20044 except this one.
Open the MARC editor and narrow the browser width to below 768 pixels.
Reload the page and view a tab which contains a <select> styled by
Select2 (942c is often an example). The <select> will have narrowed to
be almost invisible.

Apply the patch and reproduce the steps above. The <select>s should be
fully visible.

Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>
Signed-off-by: Chris Cormack <chrisc@catalyst.net.nz>
Comment 42 Nick Clemens 2018-10-24 17:25:30 UTC
Awesome work all!

Pushed to master for 18.11
Comment 43 Martin Renvoize 2018-11-06 10:31:48 UTC
The enhancement will not be backported to 18.05.x series.