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
Created attachment 70751 [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.
Created attachment 71707 [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>
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
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.
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?
Created attachment 72741 [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.
Created attachment 72743 [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>
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?
(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?
Created attachment 73489 [details] Screenshot of cataloguing editor (with patch)
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?
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>
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>
(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!
True that :)
https://lists.katipo.co.nz/pipermail/koha/2018-July/051113.html [Koha] Requesting opinions on proposed change to cataloging interface
There is something wrong with the select2: https://screenshots.firefox.com/LinttprCI59Mq0Jn/pro.kohadev.org
(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.
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
Created attachment 77396 [details] [review] Bug 20044: Fix input_marceditor selectors
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.
https://screenshots.firefox.com/PJ3lgNSc6HEb5U4G/pro.kohadev.org Zoom in a bit: https://screenshots.firefox.com/KYNIlu5FRCjpqM39/pro.kohadev.org
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.
(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.
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.
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>
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>
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>
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>
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>
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>
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>
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>
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
I agree that the responsive behavior of the page isn't perfect, but this bug is intended to be an incremental change.
(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?
I signed these - can someone else plz QA?
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>
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>
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>
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>
Awesome work all! Pushed to master for 18.11
The enhancement will not be backported to 18.05.x series.